snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/best-practices-front.mdx

@@ -0,0 +1,329 @@
+---
+title: En İyi Uygulamalar
+icon: star
+---
+
+Bu belge, ön yüz üzerinde çalışırken takip etmeniz gereken en iyi uygulamaları özetler.
+
+## Durum Yönetimi
+
+React ve Jotai, kod tabanında durumu yönetir.
+
+### Durumu depolamak için Jotai atomlarını kullanın
+
+Durumunuzu depolamak için ihtiyaç duyduğunuz kadar atom oluşturmak iyi bir uygulamadır.
+
+<Warning>
+
+Prop drilling ile gereğinden fazla sade olmaya çalışmaktansa, fazladan atom kullanmak daha iyidir.
+
+</Warning>
+
+```tsx
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
+
+export const myAtomState = createAtomState<string>({
+  key: 'myAtomState',
+  defaultValue: 'default value',
+});
+
+export const MyComponent = () => {
+  const [myAtom, setMyAtom] = useAtomState(myAtomState);
+
+  return (
+    <div>
+      <input
+        value={myAtom}
+        onChange={(e) => setMyAtom(e.target.value)}
+      />
+    </div>
+  );
+}
+```
+
+### Durum saklamak için `useRef` kullanmayın.
+
+Durum saklamak için `useRef` kullanmaktan kaçının.
+
+Durum saklamak istiyorsanız, `useState` veya `useAtomState` ile Jotai atomlarını kullanmalısınız.
+
+Bazı yeniden render edilmelerin olmasını önlemek için `useRef`'e ihtiyacınız varmış gibi hissediyorsanız, [yeniden render yönetimi](#managing-re-renders) konusuna bakın.
+
+## Yeniden render yönetimi
+
+React'ta yeniden render'ları yönetmek zor olabilir.
+
+Gereksiz yeniden render'ları önlemek için izlenecek bazı kurallar burada.
+
+Yeniden render'ları **her zaman** önleyebileceğinizi unutmayın, olayların nedenini anlayarak.
+
+### Kök seviyesinde çalışın
+
+Yeni özelliklerde yeniden render'ları önlemek, onları kök seviyesinde ortadan kaldırarak artık kolaylaştı.
+
+`PageChangeEffect` yan bileşeni, sayfa değişikliği sırasında yürütülecek tüm mantığı içeren tek bir `useEffect` barındırır.
+
+Bu şekilde, yalnızca bir yerin yeniden render tetikleyebileceğini bilirsiniz.
+
+### Kod tabanına `useEffect` eklemeden önce iki kez düşünün.
+
+Yeniden render'lar çoğunlukla gereksiz `useEffect`'lerden kaynaklanır.
+
+`useEffect`'e ihtiyacınız olup olmadığını düşünmelisiniz ya da mantığı bir olay işleyici fonksiyonuna taşıyabilirsiniz.
+
+Genellikle mantığı `handleClick` veya `handleChange` gibi fonksiyonlara taşımayı kolay bulursunuz.
+
+Bunları `onCompleted`, `onError`, vb. gibi Apollo kitaplıklarında da bulabilirsiniz.
+
+### `useEffect` veya veri çekme mantığını çıkarmak için bir yan bileşen kullanın.
+
+Kök bileşenize bir `useEffect` eklemeniz gerektiğini hissediyorsanız, bunu bir yan bileşene çıkarmayı düşünmelisiniz.
+
+Aynısını Apollo kancaları ile veri çekme mantığı için de uygulayabilirsiniz.
+
+```tsx
+// ❌ Bad, will cause re-renders even if data is not changing,
+//    because useEffect needs to be re-evaluated
+export const PageComponent = () => {
+  const [data, setData] = useAtomState(dataState);
+  const [someDependency] = useAtomState(someDependencyState);
+
+  useEffect(() => {
+    if(someDependency !== data) {
+      setData(someDependency);
+    }
+  }, [someDependency]);
+
+  return <div>{data}</div>;
+};
+
+export const App = () => (
+  <PageComponent />
+);
+```
+
+```tsx
+// ✅ Good, will not cause re-renders if data is not changing,
+//   because useEffect is re-evaluated in another sibling component
+export const PageComponent = () => {
+  const [data, setData] = useAtomState(dataState);
+
+  return <div>{data}</div>;
+};
+
+export const PageData = () => {
+  const [data, setData] = useAtomState(dataState);
+  const [someDependency] = useAtomState(someDependencyState);
+
+  useEffect(() => {
+    if(someDependency !== data) {
+      setData(someDependency);
+    }
+  }, [someDependency]);
+
+  return <></>;
+};
+
+export const App = () => (
+  <>
+    <PageData />
+    <PageComponent />
+  </>
+);
+```
+
+### Atom aile durumlarını ve seçimcilerini kullanın
+
+Atom aile durumları ve seçimcileri, yeniden render'ları önlemenin harika bir yoludur.
+
+Bir öğe listesini saklamanız gerektiğinde kullanılabilirdir.
+
+### `React.memo(MyComponent)` kullanmamalısınız.
+
+`React.memo()` kullanmaktan kaçının çünkü bu yeniden render'ın nedenini çözmez, bunun yerine yeniden render zincirini kırar, bu da beklenmeyen davranışlara yol açabilir ve kodun yeniden faktör edilmesini çok zor hale getirebilir.
+
+### `useCallback` veya `useMemo` kullanımını sınırlayın.
+
+Genellikle gerekli değildir ve performans kazanımı farkedilemeyecek kadar az olduğu için kodun okunmasını ve bakımını zorlaştırır.
+
+## Console.log'lar
+
+`console.log` ifadeleri geliştirirken değerlidir, değişken değerleri ve kod akışı hakkında gerçek zamanlı yanıtlar sağlar. Ancak, üretim kodunda bırakmak çeşitli sorunlara yol açabilir:
+
+1. **Performans**: Aşırı loglama, özellikle istemci tarafı uygulamalarda çalışma zamanı performansını etkileyebilir.
+
+2. **Güvenlik**: Hassas verileri loglama, tarayıcı konsolunu inceleyen herkes için kritik bilgilerin açığa çıkmasına neden olabilir.
+
+3. **Temizlik**: Konsolu loglarla doldurmak, geliştiricilerin veya araçların görmesi gereken önemli uyarıları veya hataları gizleyebilir.
+
+4. **Profesyonellik**: Konsolu kontrol eden son kullanıcılar veya müşteriler, birçok log ifadesi gördüğünde kodun kalitesini ve detaycılığını sorgulayabilir.
+
+Kodunuzu üretime taşımadan önce tüm `console.log`ları kaldırdığınızdan emin olun.
+
+## İsimlendirme
+
+### Değişken Adlandırma
+
+Değişken adları değişkenin amacını veya işlevini doğru bir şekilde tanımlamalıdır.
+
+#### Genel adlar sorunu
+
+Programlamada genel adlar ideal değildir çünkü kesinlik eksikliği nedeniyle belirsizlik ve kod okunabilirliğinin azalmasına neden olabilir. Bu tür adlar, değişkenin veya fonksiyonun amacını iletmede başarısız olur, geliştiricilerin kodun amacını daha derin bir araştırma yapmadan anlamalarını zorlaştırır. Bu, artan hata ayıklama süresi, hatalara eğilimli olma ve bakım ve işbirliği zorluklarına yol açabilir. Öte yandan, açıklayıcı adlandırma, kodu kendi kendini açıklayıcı hale getirir ve gezilebilirliği artırarak kod kalitesini ve geliştirici verimliliğini artırır.
+
+```tsx
+// ❌ Bad, uses a generic name that doesn't communicate its
+//    purpose or content clearly
+const [value, setValue] = useState('');
+```
+
+```tsx
+// ✅ Good, uses a descriptive name
+const [email, setEmail] = useState('');
+```
+
+#### Değişken adlarında kaçınılması gereken bazı kelimeler
+
+* kukla
+
+### Olay işleyicileri
+
+Olay işleyici adları `handle` ile başlamalı, bileşen props'larında olayları adlandırmak için `on` bir ön ek olarak kullanılmaktadır.
+
+```tsx
+// ❌ Bad
+const onEmailChange = (val: string) => {
+  // ...
+};
+```
+
+```tsx
+// ✅ Good
+const handleEmailChange = (val: string) => {
+  // ...
+};
+```
+
+## Opsiyonel Props
+
+Opsiyonel bir prop için varsayılan değeri geçmekten kaçının.
+
+**ÖRNEK**
+
+Aşağıda tanımlanan `EmailField` bileşeni alın:
+
+```tsx
+type EmailFieldProps = {
+  value: string;
+  disabled?: boolean;
+};
+
+const EmailField = ({ value, disabled = false }: EmailFieldProps) => (
+  <TextInput value={value} disabled={disabled} fullWidth />
+);
+```
+
+**Kullanım**
+
+```tsx
+// ❌ Bad, passing in the same value as the default value adds no value
+const Form = () => <EmailField value="username@email.com" disabled={false} />;
+```
+
+```tsx
+// ✅ Good, assumes the default value
+const Form = () => <EmailField value="username@email.com" />;
+```
+
+## Bileşenleri props olarak geçirme
+
+Mümkün olduğunca, bileşenleri kendi içinde istemsiz geçen bileşenler olarak gönderin, böylece çocuklar hangi props'ları geçmeleri gerektiğine kendileri karar verebilirler.
+
+Bunun en yaygın örneği simge bileşenleridir:
+
+```tsx
+const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;
+
+// In MyComponent
+const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
+  const theme = useTheme();
+
+  return (
+    <div>
+      <MyIcon size={theme.icon.size.md}>
+    </div>
+  )
+};
+```
+
+React'in bir bileşeni bileşen olarak anlaması için PascalCase kullanmalısınız, böylece daha sonra `<MyIcon>` ile örnekleyebilirsiniz.
+
+## Prop Taşıma: Minimumda Tutun
+
+React bağlamında prop taşıma, durum değişkenlerini ve ayarlayıcılarını, aracı bileşenler kullanmasalar bile birçok bileşen katmanı aracılığıyla aktarma uygulamasına atıfta bulunur. Bazen gerekli olmakla birlikte, aşırı prop taşıma şu durumlara yol açabilir:
+
+1. **Azalan Okunabilirlik**: Bir prop'un nereden kaynaklandığını veya nerede kullanıldığını izlemek, derin bir şekilde iç içe geçmiş bir bileşen yapısında karışık hale gelebilir.
+
+2. **Bakım Zorlukları**: Bir bileşenin prop yapısındaki değişiklikler, prop'u doğrudan kullanmasalar bile, birden fazla bileşende ayarlamalar yapılmasını gerektirebilir.
+
+3. **Azalan Bileşen Yeniden Kullanılabilirliği**: Çok fazla props'u yalnızca aşağıya aktarma amacıyla alan bir bileşen, daha az genel amaçlı hale gelir ve farklı bağlamlarda yeniden kullanılması zorlaşır.
+
+Aşırı prop taşıma kullanıyorsanız, [durum yönetimi en iyi uygulamalarına](#state-management) bakın.
+
+## İçe Aktarımlar
+
+İçe aktarırken, tüm veya göreli yolları belirtmek yerine belirlenen takma adları tercih edin.
+
+**Takma Adlar**
+
+```js
+{
+  alias: {
+    "~": path.resolve(__dirname, "src"),
+    "@": path.resolve(__dirname, "src/modules"),
+    "@testing": path.resolve(__dirname, "src/testing"),
+  },
+}
+```
+
+**Kullanım**
+
+```tsx
+// ❌ Bad, specifies the entire relative path
+import {
+  CatalogDecorator
+} from '../../../../../testing/decorators/CatalogDecorator';
+import {
+  ComponentDecorator
+} from '../../../../../testing/decorators/ComponentDecorator';
+```
+
+```tsx
+// ✅ Good, utilises the designated aliases
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
+```
+
+## Şema Doğrulama
+
+[Zod](https://github.com/colinhacks/zod), tiplenmemiş nesneler için bir şema doğrulayıcıdır:
+
+```js
+const validationSchema = z
+  .object({
+    exist: z.boolean(),
+    email: z
+      .string()
+      .email('Email must be a valid email'),
+    password: z
+      .string()
+      .regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
+  })
+  .required();
+
+type Form = z.infer<typeof validationSchema>;
+```
+
+## Geriye Dönük Uyumsuz Değişiklikler
+
+Testler henüz kapsamlı bir şekilde entegre edilmediği için, ilerlemeden önce yapılan değişikliklerin başka yerlerde bozulmalara neden olmadığından emin olmak için her zaman kapsamlı manuel testler yapın.

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx

@@ -0,0 +1,110 @@
+---
+title: Klasör Mimarisi
+icon: folder-tree
+info: Klasör mimarimize detaylı bir bakış
+---
+
+Bu kılavuzda, proje dizin yapısının ayrıntılarını ve bunun Twenty'nin düzenine ve bakım kolaylığına nasıl katkıda bulunduğunu inceleyeceksiniz.
+
+Bu klasör mimarisi kuralını izleyerek, belirli özelliklerle ilgili dosyaları bulmak kolaylaşır ve uygulamanın ölçeklenebilir ve bakımı yapılabilir olması sağlanır.
+
+```
+front
+└───modules
+│   └───module1
+│   │   └───submodule1
+│   └───module2
+│   └───ui
+│   │   └───display
+│   │   └───inputs
+│   │   │   └───buttons
+│   │   └───...
+└───pages
+└───...
+```
+
+## Sayfalar
+
+Uygulama rotaları tarafından tanımlanan üst düzey bileşenleri içerir. Bunlar, daha alt düzey bileşenleri modules klasöründen içe aktarırlar (daha fazla ayrıntı aşağıda).
+
+## Modüller
+
+Her modül, kendine özgü bileşenlerini, durumlarını ve iş mantığını içeren bir özellik ya da özellik grubu temsil eder.
+Hepsi aşağıdaki yapıyı takip etmelidir. Modüllerin içine modüller (alt modüller) yerleştirebilirsiniz ve aynı kurallar uygulanır.
+
+```
+module1
+  └───components
+  │   └───component1
+  │   └───component2
+  └───constants
+  └───contexts
+  └───graphql
+  │   └───fragments
+  │   └───queries
+  │   └───mutations
+  └───hooks
+  │   └───internal
+  └───states
+  │   └───selectors
+  └───types
+  └───utils
+```
+
+### Bağlamlar
+
+Bağlam, verileri her seviyede prop'ları elle aktarmak zorunda kalmadan bileşen ağacından aşağıya iletmenin bir yoludur.
+
+Daha fazla bilgi için [React Context](https://react.dev/reference/react#context-hooks) sayfasına bakın.
+
+### GraphQL
+
+Parçalar, sorgular ve mutasyonları içerir.
+
+Daha fazla bilgi için [GraphQL](https://graphql.org/learn/) sayfasına bakın.
+
+* Parçalar
+
+Bir parça, farklı yerlerde kullanabileceğiniz, bir sorgunun yeniden kullanılabilir bir parçasıdır. Parçaları kullanarak, kodun kopyalanmasını önlemek daha kolaydır.
+
+Daha fazla bilgi için [GraphQL Parçaları](https://graphql.org/learn/queries/#fragments) sayfasına bakın.
+
+* Sorgular
+
+Daha fazla bilgi için [GraphQL Sorgular](https://graphql.org/learn/queries/) sayfasına bakın.
+
+* Mutasyonlar
+
+Daha fazla bilgi için [GraphQL Mutasyonlar](https://graphql.org/learn/queries/#mutations) sayfasına bakın.
+
+### Kancalar
+
+Daha fazla bilgi için [Kancalar](https://react.dev/learn/reusing-logic-with-custom-hooks) sayfasına bakın.
+
+### Durumlar
+
+Durum yönetim mantığını içerir. [Jotai](https://jotai.org) bunu ele almaktadır.
+
+* Seçiciler: Türetilmiş atomlar (`createAtomSelector` kullanılarak) diğer atomlardan değerleri hesaplar ve otomatik olarak önbelleğe alınır.
+
+React'ın yerleşik durum yönetimi, bir bileşen içinde hala durumu ele alır.
+
+### Yardımcılar
+
+Sadece yeniden kullanılabilir saf fonksiyonları içermelidir. Aksi takdirde, `hooks` klasöründe özel kancalar oluşturun.
+
+## Kullanıcı Arayüzü
+
+Uygulamada kullanılan tüm tekrar kullanılabilir UI bileşenlerini içerir.
+
+Bu klasör, belirli bileşen türleri için `data`, `display`, `feedback` ve `input` gibi alt klasörler içerebilir. Her bir bileşen, kendi içinde bağımsız ve yeniden kullanılabilir olmalı, böylece uygulamanın farklı kısımlarında kullanılabilir.
+
+UI bileşenlerini `modules` klasöründeki diğer bileşenlerden ayırarak, tutarlı bir tasarımı korumak ve kullanıcı arayüzünde değişiklikleri kod tabanının diğer bölümlerini (iş mantığı) etkilemeden yapmak daha kolaydır.
+
+## Arayüz ve bağımlılıklar
+
+Diğer modüllerin kodunu, `ui` klasörü hariç, herhangi bir modülden içe aktarabilirsiniz. Bu, kodunun test edilmesini kolaylaştıracaktır.
+
+### Dahili
+
+Bir modülün her bir parçası (kancalar, durumlar, ...) yalnızca modül içinde kullanılan kısımları içeren bir `internal` klasöre sahip olabilir.

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/frontend-commands.mdx

@@ -0,0 +1,91 @@
+---
+title: Ön Yüz Komutları
+icon: terminal
+---
+
+## Faydalı Komutlar
+
+### Uygulamayı Başlatma
+
+```bash
+npx nx start twenty-front
+```
+
+### API graphql şemasına dayalı graphql şemasını yeniden oluştur
+
+```bash
+npx nx run twenty-front:graphql:generate --configuration=metadata
+```
+
+VEYA
+
+```bash
+npx nx run twenty-front:graphql:generate
+```
+
+### Kod Temizleme
+
+```bash
+npx nx run twenty-front:lint # pass --fix to fix lint errors
+```
+
+## Çeviriler
+
+```bash
+npx nx run twenty-front:lingui:extract
+npx nx run twenty-front:lingui:compile
+```
+
+### Test
+
+```bash
+npx nx run twenty-front:test # run jest tests
+npx nx run twenty-front:storybook:serve:dev # run storybook
+npx nx run twenty-front:storybook:test # run tests # (needs yarn storybook:serve:dev to be running)
+npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to be running)
+```
+
+## Teknoloji Yığını
+
+Proje temiz ve basit bir yığına sahip, minimum şablon koduyla.
+
+**Uygulama**
+
+* [React](https://react.dev/)
+* [Apollo](https://www.apollographql.com/docs/)
+* [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
+* [Jotai](https://jotai.org/)
+* [TypeScript](https://www.typescriptlang.org/)
+
+**Test**
+
+* [Jest](https://jestjs.io/)
+* [Storybook](https://storybook.js.org/)
+
+**Araçlar**
+
+* [Yarn](https://yarnpkg.com/)
+* [Craco](https://craco.js.org/docs/)
+* [Oxlint](https://oxc.rs/docs/guide/usage/linter.html)
+
+## Mimari
+
+### Rotalama
+
+[React Router](https://reactrouter.com/) rotalamayı halleder.
+
+Gereksiz [yeniden renderların](/l/tr/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) önlenmesi için tüm rotalama mantığı `PageChangeEffect` içindeki bir `useEffect`'te yer alır.
+
+### Durum Yönetimi
+
+[Jotai](https://jotai.org/) durum yönetimini ele alır.
+
+Durum yönetimi hakkında daha fazla bilgi için [en iyi uygulamalar](/l/tr/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) bölümüne bakın.
+
+## Test
+
+[Jest](https://jestjs.io/) birim testi aracı olarak kullanılırken [Storybook](https://storybook.js.org/) bileşen testleri için kullanılır.
+
+Jest, esas olarak yardımcı programların test edilmesi için kullanılır ve bileşenlerin kendisi için değil.
+
+Storybook, izole bileşenlerin davranışlarının test edilmesi ve tasarım sisteminin gösterilmesi için kullanılır.

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/hotkeys.mdx

@@ -0,0 +1,178 @@
+---
+title: Kısayollar
+---
+
+## Giriş
+
+Bir kısayolu dinlemeniz gerektiğinde, normalde `onKeyDown` olay dinleyicisini kullanırsınız.
+
+Ancak `twenty-front` uygulamasında, aynı anda monte edilmiş farklı bileşenlerde kullanılan aynı kısayollar arasında çakışmalar olabilir.
+
+Örneğin, Enter tuşunu dinleyen bir sayfanız ve Enter tuşunu dinleyen bir modalınız varsa, ve modalın içinde Enter tuşunu dinleyen bir Seçim bileşeni varsa, hepsi aynı anda monte edildiğinde bir çakışma yaşayabilirsiniz.
+
+## `useScopedHotkeys` hook'u
+
+Bu sorunu ele almak için, kısayolları çakışma olmadan dinlemeyi mümkün kılan özel bir kanca geliştirdik.
+
+Bir bileşene yerleştirirsiniz ve sadece bileşen monte edildiğinde VE belirtilen **kısayol kapsamı** aktif olduğunda kısayolları dinleyecektir.
+
+## Pratikte kısayolları nasıl dinleyebilirsiniz?
+
+Kısayol dinleme kurulumu iki adımdan oluşur:
+
+1. Kısayolları dinleyecek [kısayol kapsamını](#what-is-a-hotkey-scope-) ayarlayın
+2. Kısayolları dinlemek için `useScopedHotkeys` hook'unu kullanın
+
+Kısayol kapsamlarının kurulumu, sol menü veya komut menüsü gibi diğer kullanıcı arayüzü öğelerinin de kısayolları dinleyebileceği için, basit sayfalarda bile gereklidir.
+
+## Kısayollar için kullanım durumları
+
+Genel olarak, kısayollara ihtiyaç duyan iki kullanım durumunuz olacaktır:
+
+1. Bir sayfada veya bir sayfada monte edilmiş bir bileşende
+2. Bir kullanıcı eylemi nedeniyle dikkati çeken modal-tipi bir bileşende
+
+İkinci kullanım durumu, örneğin bir modal içinde bir açılır menü gibi, yineleyici olabilir.
+
+### Bir sayfada kısayolları dinlemek
+
+Örnek:
+
+```tsx
+const PageListeningEnter = () => {
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  // 1. Set the hotkey scope in a useEffect
+  useEffect(() => {
+    setHotkeyScopeAndMemorizePreviousScope(
+      ExampleHotkeyScopes.ExampleEnterPage,
+    );
+
+    // Revert to the previous hotkey scope when the component is unmounted
+    return () => {
+      goBackToPreviousHotkeyScope();
+    };
+  }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);
+
+  // 2. Use the useScopedHotkeys hook
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      // Some logic executed on this page when the user presses Enter
+      // ...
+    },
+    ExampleHotkeyScopes.ExampleEnterPage,
+  );
+
+  return <div>My page that listens for Enter</div>;
+};
+```
+
+### Modal-tipi bir bileşende kısayolları dinlemek
+
+Bu örnekte, ebeveynine kapanmasını söylemek için Escape tuşunu dinleyen bir modal bileşeni kullanacağız.
+
+Burada kullanıcı etkileşimi, kapsamı değiştirmektir.
+
+```tsx
+const ExamplePageWithModal = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  const handleOpenModalClick = () => {
+    // 1. Set the hotkey scope when user opens the modal
+    setShowModal(true);
+    setHotkeyScopeAndMemorizePreviousScope(
+      ExampleHotkeyScopes.ExampleModal,
+    );
+  };
+
+  const handleModalClose = () => {
+    // 1. Revert to the previous hotkey scope when the modal is closed
+    setShowModal(false);
+    goBackToPreviousHotkeyScope();
+  };
+
+  return <div>
+    <h1>My page with a modal</h1>
+    <button onClick={handleOpenModalClick}>Open modal</button>
+    {showModal && <MyModalComponent onClose={handleModalClose} />}
+  </div>;
+};
+```
+
+Sonra modal bileşeninde:
+
+```tsx
+const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
+  // 2. Use the useScopedHotkeys hook to listen for Escape.
+  // Note that escape is a common hotkey that could be used by many other components
+  // So it's important to use a hotkey scope to avoid conflicts
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      onClose()
+    },
+    ExampleHotkeyScopes.ExampleModal,
+  );
+
+  return <div>My modal component</div>;
+};
+```
+
+Bu modeli, mount/unmount ile yalnızca bir useEffect'e güvenmenin çakışmayı önlemek için yeterli olmayabileceği durumlarda kullanmak önemlidir.
+
+Bu çakışmaların hata ayıklaması zor olabilir ve genellikle useEffect'lerle daha sık meydana gelebilir.
+
+## Kısayol kapsamı nedir?
+
+Kısayol kapsamı, kısayolların aktif olduğu bir bağlamı temsil eden bir dizedir. Genellikle bir enum olarak kodlanmıştır.
+
+Kısayol kapsamını değiştirdiğinizde, bu kapsamı dinleyen kısayollar etkinleştirilecek ve diğer kapsamları dinleyen kısayollar devre dışı bırakılacaktır.
+
+Aynı anda yalnızca bir kapsam ayarlayabilirsiniz.
+
+Örneğin, her sayfa için kısayol kapsamları `PageHotkeyScope` enum'unda tanımlanmıştır:
+
+```tsx
+export enum PageHotkeyScope {
+  Settings = 'settings',
+  CreateWorkspace = 'create-workspace',
+  SignInUp = 'sign-in-up',
+  CreateProfile = 'create-profile',
+  PlanRequired = 'plan-required',
+  ShowPage = 'show-page',
+  PersonShowPage = 'person-show-page',
+  CompanyShowPage = 'company-show-page',
+  CompaniesPage = 'companies-page',
+  PeoplePage = 'people-page',
+  OpportunitiesPage = 'opportunities-page',
+  ProfilePage = 'profile-page',
+  WorkspaceMemberPage = 'workspace-member-page',
+  TaskPage = 'task-page',
+}
+```
+
+Dahili olarak, şu anda seçili olan kapsam, uygulama genelinde paylaşılan bir Jotai atomunda saklanır:
+
+```tsx
+export const currentHotkeyScopeState = createState<HotkeyScope>({
+  key: 'currentHotkeyScopeState',
+  defaultValue: INITIAL_HOTKEYS_SCOPE,
+});
+```
+
+Ancak bu atom asla el ile yönetilmemelidir! Bunu bir sonraki bölümde nasıl kullanacağımızı göreceğiz.
+
+## İçsel olarak nasıl çalışıyor?
+
+Gereksiz yeniden render etme işlemlerinden kaçınarak daha performanslı hale getiren [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) üzerine ince bir sarmalayıcı yaptık.
+
+Ayrıca, kısayol kapsamı durumunu yönetmek ve uygulamanın her yerinde kullanılabilir hale getirmek için bir Jotai atomu oluşturuyoruz.

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/storybook.mdx

@@ -0,0 +1,8 @@
+---
+title: Storybook
+description: Twenty'nin UI bileşen kütüphanesine göz atın
+---
+
+Storybook'ta eksiksiz bileşen kütüphanemizi ve dokümantasyonumuzu görüntüleyin.
+
+[Storybook'u Aç →](https://storybook.twenty.com)

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -0,0 +1,291 @@
+---
+title: Stil Rehberi
+icon: paintbrush
+---
+
+Bu belge, kod yazarken uyulması gereken kuralları içermektedir.
+
+Buradaki amaç, okunması ve bakımı kolay tutarlı bir kod tabanı oluşturmaktır.
+
+Bunun için, biraz daha ayrıntılı olmak, çok kısa olmaktan daha iyidir.
+
+İnsanların kodu yazmaktan daha sık okuduğunu her zaman aklınızda bulundurun; özellikle herkesin katkıda bulunabildiği açık kaynak bir projede.
+
+Burada tanımlanmayan, ancak linters tarafından otomatik olarak kontrol edilen birçok kural vardır.
+
+## React
+
+### Fonksiyonel bileşenler kullanın
+
+Her zaman TSX fonksiyonel bileşenlerini kullanın.
+
+Varsayılan `import`'u `const` ile kullanmayın, çünkü okunması daha zordur ve kod tamamlama ile içe aktarmak daha zordur.
+
+```tsx
+// ❌ Bad, harder to read, harder to import with code completion
+const MyComponent = () => {
+  return <div>Hello World</div>;
+};
+
+export default MyComponent;
+
+// ✅ Good, easy to read, easy to import with code completion
+export function MyComponent() {
+  return <div>Hello World</div>;
+};
+```
+
+### Özellikler
+
+Prop'ların türünü oluşturun ve dışa aktarmaya gerek yoksa ona `(ComponentName)Props` adını verin.
+
+Props destructuring kullanın.
+
+```tsx
+// ❌ Bad, no type
+export const MyComponent = (props) => <div>Hello {props.name}</div>;
+
+// ✅ Good, type
+type MyComponentProps = {
+  name: string;
+};
+
+export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
+```
+
+#### Prop türlerini tanımlamak için `React.FC` veya `React.FunctionComponent` kullanmaktan kaçının
+
+```tsx
+/* ❌ - Bad, defines the component type annotations with `FC`
+ *    - With `React.FC`, the component implicitly accepts a `children` prop
+ *      even if it's not defined in the prop type. This might not always be
+ *      desirable, especially if the component doesn't intend to render
+ *      children.
+ */
+const EmailField: React.FC<{
+  value: string;
+}> = ({ value }) => <TextInput value={value} disabled fullWidth />;
+```
+
+```tsx
+/* ✅ - Good, a separate type (OwnProps) is explicitly defined for the
+ *      component's props
+ *    - This method doesn't automatically include the children prop. If
+ *      you want to include it, you have to specify it in OwnProps.
+ */
+type EmailFieldProps = {
+  value: string;
+};
+
+const EmailField = ({ value }: EmailFieldProps) => (
+  <TextInput value={value} disabled fullWidth />
+);
+```
+
+#### JSX Elemanlarında Tek Değişkenli Prop Yayılımından Kaçının
+
+JSX elemanlarında tek değişkenli prop yayılımını, örneğin `{...props}` kullanmaktan kaçının. Bu uygulama, bileşenin hangi prop'ları aldığını belirsizleştirdiği için okunması zor ve bakımı güç kodlara yol açar.
+
+```tsx
+/* ❌ - Bad, spreads a single variable prop into the underlying component
+ */
+const MyComponent = (props: OwnProps) => {
+  return <OtherComponent {...props} />;
+}
+```
+
+```tsx
+/* ✅ - Good, Explicitly lists all props
+ *    - Enhances readability and maintainability
+ */
+const MyComponent = ({ prop1, prop2, prop3 }: MyComponentProps) => {
+  return <OtherComponent {...{ prop1, prop2, prop3 }} />;
+};
+```
+
+Gerekçe:
+
+* İlk bakışta, hangi prop'ların kod tarafından geçirildiği daha açıktır, bu da anlamayı ve bakımı kolaylaştırır.
+* Prop'lar aracılığıyla bileşenler arasında sıkı bağlanmayı önlemeye yardımcı olur.
+* Linting araçları, prop'ları açıkça listelediğinizde yanlış yazılmış veya kullanılmayan prop'ları tanımlamayı kolaylaştırır.
+
+## JavaScript
+
+### Nullish-birleştirme operatörü `??` kullanın
+
+```tsx
+// ❌ Bad, can return 'default' even if value is 0 or ''
+const value = process.env.MY_VALUE || 'default';
+
+// ✅ Good, will return 'default' only if value is null or undefined
+const value = process.env.MY_VALUE ?? 'default';
+```
+
+### Opsiyonel zincirleme `?.` kullanın
+
+```tsx
+// ❌ Bad
+onClick && onClick();
+
+// ✅ Good
+onClick?.();
+```
+
+## TypeScript
+
+### `interface` yerine `type` kullanın
+
+Neredeyse her zaman örtüştükleri ve `type` daha esnek olduğu için her zaman `interface` yerine `type` kullanın.
+
+```tsx
+// ❌ Bad
+interface MyInterface {
+  name: string;
+}
+
+// ✅ Good
+type MyType = {
+  name: string;
+};
+```
+
+### enum'lar yerine string literal'leri kullanın
+
+[String literalleri](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types), TypeScript'te enum benzeri değerleri yönetmek için en iyi yöntemdir. Pick ve Omit ile genişletilmeleri daha kolaydır ve özellikle kod tamamlama ile daha iyi bir geliştirici deneyimi sunarlar.
+
+TypeScript, enum'ların neden kaçınılması gereken bir seçenek olduğunu [burada](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums) açıklamaktadır.
+
+```tsx
+// ❌ Bad, utilizes an enum
+enum Color {
+  Red = "red",
+  Green = "green",
+  Blue = "blue",
+}
+
+let color = Color.Red;
+```
+
+```tsx
+// ✅ Good, utilizes a string literal
+
+let color: "red" | "green" | "blue" = "red";
+```
+
+#### GraphQL ve iç kütüphaneler
+
+GraphQL codegen tarafından üretilen enum'ları kullanmalısınız.
+
+Bir iç kütüphane kullanırken de bir enum kullanmak daha iyidir, böylece iç kütüphane, iç API ile ilgili olmayan bir string literal türü açmak zorunda kalmaz.
+
+Örnek:
+
+```TSX
+const {
+  setHotkeyScopeAndMemorizePreviousScope,
+  goBackToPreviousHotkeyScope,
+} = usePreviousHotkeyScope();
+
+setHotkeyScopeAndMemorizePreviousScope(
+  RelationPickerHotkeyScope.RelationPicker,
+);
+```
+
+## Şekil Verme
+
+### StyledComponents kullanın
+
+Bileşenleri [Linaria styled](https://github.com/callstack/linaria) ile stillendirin.
+
+```tsx
+// ❌ Bad
+<div className="my-class">Hello World</div>
+```
+
+```tsx
+// ✅ Good
+const StyledTitle = styled.div`
+  color: red;
+`;
+```
+
+Styled bileşenleri, bunları "gerçek" bileşenlerden ayırt etmek için "Styled" önekiyle belirtin.
+
+```tsx
+// ❌ Bad
+const Title = styled.div`
+  color: red;
+`;
+```
+
+```tsx
+// ✅ Good
+const StyledTitle = styled.div`
+  color: red;
+`;
+```
+
+### Temalandırma
+
+Çoğu bileşen şekillendirmesi için temayı kullanmak tercih edilen bir yaklaşımdır.
+
+#### Ölçü birimleri
+
+Styled bileşenler içinde doğrudan `px` veya `rem` değerlerini kullanmaktan kaçının. Gerekli değerler genellikle temada tanımlanmıştır, bu nedenle bu amaçlar için temayı kullanmak önerilir.
+
+#### Renkler
+
+Yeni renkler eklemekten kaçının; Bunun yerine temadaki mevcut paleti kullanın. Palet uyum sağlamıyorsa, lütfen ekibin düzeltmesi için bir yorum bırakın.
+
+```tsx
+// ❌ Bad, directly specifies style values without utilizing the theme
+const StyledButton = styled.button`
+  color: #333333;
+  font-size: 1rem;
+  font-weight: 400;
+  margin-left: 4px;
+  border-radius: 50px;
+`;
+```
+
+```tsx
+// ✅ Good, utilizes the theme
+const StyledButton = styled.button`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  border-radius:  ${({ theme }) => theme.border.rounded};
+`;
+```
+
+## Tip içermeyen importları zorunlu kılma
+
+Tip ithalatlarından kaçının. Bu standardı uygulamak için bir Oxlint kuralı, herhangi bir tür içe aktarmayı denetler ve raporlar. Bu, TypeScript kodunda tutarlılık ve okunabilirliği sağlamaya yardımcı olur.
+
+```tsx
+// ❌ Bad
+import { type Meta, type StoryObj } from '@storybook/react';
+
+// ❌ Bad
+import type { Meta, StoryObj } from '@storybook/react';
+
+// ✅ Good
+import { Meta, StoryObj } from '@storybook/react';
+```
+
+### Neden Tip İthalatları Yok
+
+* **Tutarlılık**: Hem tip hem de değer ithalatları için tek bir yaklaşım kullanarak, kod tabanı modül import stilinde tutarlı kalır.
+
+* **Okunabilirlik**: İthalat türü olmadığında, değer veya tip ithal ettiğiniz zaman daha anlaşılır olur böylece kod okunabilirliği artırılır. Bu belirsizliği azaltır ve ithal edilen sembollerinin amacını anlamayı kolaylaştırır.
+
+* **Bakım Kolaylığı**: Kod tabanının bakımını kolaylaştırır çünkü geliştiriciler kodu incelerken veya değiştirirken yalnızca tip ithalatlarını tanımlayabilir ve bulabilirler.
+
+### Oxlint Kuralı
+
+Bir Oxlint kuralı, `typescript/consistent-type-imports`, tür içe aktarmalarının yasaklanması standardını uygular. Bu kural, herhangi bir tip ithalat ihlali için hata veya uyarı üretir.
+
+Lütfen unutmayın ki bu kural, istemeden yapılan tip ithalatlarının gerçekleştiği nadir durumları özellikle ele alır. TypeScript'in kendisi, [TypeScript 3.8 sürüm notlarında](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html) belirtildiği gibi, bu uygulamayı caydırmaktadır. Çoğu durumda, yalnızca tip ithalatları kullanmanıza gerek yoktur.
+
+Kodunuzun bu kurala uyduğundan emin olmak için, geliştirme iş akışınızın bir parçası olarak Oxlint'i çalıştırdığınızdan emin olun.

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/work-with-figma.mdx

@@ -0,0 +1,60 @@
+---
+title: Figma ile Çalışma
+info: Twenty'nin Figma'sında nasıl işbirliği yapabileceğinizi öğrenin
+---
+
+Figma, tasarımcılar ve geliştiriciler arasındaki iletişim engelini aşmaya yardımcı olan işbirliği odaklı bir arayüz tasarım aracıdır.
+Bu kılavuz, Figma ile nasıl işbirliği yapacağınızı açıklar.
+
+## Erişim
+
+1. **Paylaşılan bağlantıya erişin:** Projenin Figma dosyasına [buradan](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty) erişebilirsiniz.
+2. **Oturum açın:** Henüz oturum açmadıysanız, Figma sizden oturum açmanızı isteyecektir.
+   Geliştirici modu ve ayrılmış bir çerçeveyi seçme yeteneği gibi ana özellikler yalnızca oturum açmış kullanıcılara sunulur.
+
+<Warning>
+
+Bir hesabınız olmadan etkili bir şekilde işbirliği yapamazsınız.
+
+</Warning>
+
+## Figma yapısı
+
+Sol kenar çubuğundan Twenty'nin Figma'sındaki farklı sayfalara erişebilirsiniz. Bu şekilde organize edilmişlerdir:
+
+* **Bileşenler sayfası:** Bu, ilk sayfadır. Tasarımcı, tasarım dosyası boyunca kullanılan yeniden kullanılabilir tasarım öğelerini oluşturmak ve organize etmek için kullanır. Örneğin, düğmeler, simgeler, semboller veya diğer herhangi bir yeniden kullanılabilir bileşen. Bu, tasarımda tutarlılığı sağlamak amacıyla hizmet eder.
+* **Ana sayfa:** İkinci sayfa ana sayfadır ve projenin tam kullanıcı arayüzünü gösterir. You can press ***Play*** to use the full app prototype.
+* **Özellikler sayfaları:** Diğer sayfalar genellikle devam eden özelliklere adanmıştır. Uygulama veya web sitesinin belirli özelliklerinin veya modüllerinin tasarımlarını içerir. Genellikle hala devam etmektedirler.
+
+## Kullanışlı İpuçları
+
+Yalnızca-okuma erişimiyle tasarımı düzenleyemezsiniz, ancak tasarımları koda dönüştürmek için kullanışlı olan tüm özelliklere erişebilirsiniz.
+
+### Geliştirici modunu kullan
+
+Figma'nın Geliştirici Modu, tasarım ve geliştirme arasındaki boşluğu doldurarak, kolay tasarım gezintisi, etkili varlık yönetimi, verimli iletişim araçları, araç kutusu entegrasyonları, hızlı kod parçacıkları ve önemli katman bilgileri ile geliştiricilerin üretkenliğini arttırır. Geliştirici Modu hakkında daha fazla bilgiyi [buradan](https://www.figma.com/dev-mode/) öğrenebilirsiniz.
+
+Tasarım özelliklerini görmek, CSS kopyalamak ve varlıklara erişmek için araç çubuğunun sağ kısmında, "Geliştirici" moduna geçiş yapın.
+
+### Prototipi kullan
+
+Prototip görünümüne erişmek için tuvaldeki herhangi bir öğeye tıklayın ve arayüzün sağ üst köşesindeki “Play” düğmesine basın. Prototip modu, tasarımla nihai ürünmüş gibi etkileşim kurmanızı sağlar. Ekranlar arasındaki akışı gösterir ve düğmeler, bağlantılar veya menüler gibi arayüz öğelerinin etkileşim sırasında nasıl davrandığını gösterir.
+
+1. **Geçişler ve animasyonları anlama:** Prototip modunda, bir tasarımcı tarafından ekranlar veya UI öğeleri arasında eklenen herhangi bir geçişi veya animasyonu görebilir, geliştiricilere hedeflenen davranış ve stille ilgili net görsel talimatlar verir.
+2. **Uygulama açıklaması:** Bir prototip aynı zamanda belirsizlikleri azaltmaya da yardımcı olabilir. Geliştiriciler, belirli öğelerin işlevselliği veya görünümü hakkında daha iyi bir anlayış kazanmak adına onunla etkileşime geçebilirler.
+
+Figma platformunu öğrenmek ile ilgili daha kapsamlı detaylar ve rehberlik için resmi [Figma Dokümantasyonu](https://help.figma.com/hc/en-us) sayfasını ziyaret edebilirsiniz.
+
+### Mesafeleri ölç
+
+Bir öğe seçin, (Mac) `Option` tuşunu veya (Windows) `Alt` tuşunu basılı tutun, ardından aralarındaki mesafeyi görmek için başka bir öğenin üzerine gelin.
+
+### VSCode için Figma uzantısı (Önerilir)
+
+[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) ile tasarım dosyalarını gezebilir ve inceleyebilir, tasarımcılarla işbirliği yapabilir, değişiklikleri takip edebilir ve uygulama hızını artırabilirsiniz - tüm bunları metin düzenleyicinizden ayrılmadan yapabilirsiniz.
+Önerilen uzantılarımızın bir parçasıdır.
+
+## İşbirliği
+
+1. **Yorumları Kullanarak:** Araç çubuğunun sol kısmındaki balon simgesine tıklayarak yorum yapma özelliğini kullanabilirsiniz.
+2. **İmleç sohbeti:** Figma'nın güzel bir özelliği İmleç sohbetidir. Eğer bir başkasının sizinle aynı anda Figma'yı kullandığını görürseniz, bir mesaj göndermek için Mac'te `;` tuşuna, Windows'ta ise `/` tuşuna basın.