ESLint configuration, apply prettier rules

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   plugins: [
     'unicorn',
+    'prettier',
     '@typescript-eslint',
     'unused-imports',
     'tailwindcss',
@@ -38,6 +39,7 @@ module.exports = {
     '.eslintrc.js',
   ],
   rules: {
+    "prettier/prettier": "error",
     'import/no-duplicates': 'error',
     '@typescript-eslint/no-explicit-any': 'error',
     'unicorn/filename-case': [
@@ -113,6 +115,7 @@ module.exports = {
       files: ['src/translations/*.json'],
       extends: ['plugin:i18n-json/recommended'],
       rules: {
+        "@typescript-eslint/ban-types": "off",
         'i18n-json/valid-message-syntax': [
           2,
           {
@@ -146,7 +149,7 @@ module.exports = {
     {
       // Configuration for testing files
       files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
-      extends: ['plugin:testing-library/react'],
+      extends: ['plugin:testing-library/react', "prettier"],
     },
   ],
 };

src/api/common/utils.spec.tsx

@@ -85,18 +85,21 @@ describe('toCamelCase with nested objects', () => {
 });
 
 describe('toSnakeCase with nested objects', () => {
-
   it('should convert to snake_case only camelCase keys', () => {
-    const obj = { user: {
-      fooBar: 'foo',
-      barBaz: 'bar',
-      foo_bar: 'foo',
-      bar_baz: 'bar',
-    }};
-    const expected = { user: {
-      foo_bar: 'foo',
-      bar_baz: 'bar',
-    }}
+    const obj = {
+      user: {
+        fooBar: 'foo',
+        barBaz: 'bar',
+        foo_bar: 'foo',
+        bar_baz: 'bar',
+      },
+    };
+    const expected = {
+      user: {
+        foo_bar: 'foo',
+        bar_baz: 'bar',
+      },
+    };
     expect(toSnakeCase(obj)).toEqual(expected);
   });
 });
@@ -124,7 +127,7 @@ describe('getUrlParameters', () => {
 
   it('should handle special characters in the URL parameters', () => {
     const result = getUrlParameters(
-      'https://example.com?name=John%20Doe&city=New%20York'
+      'https://example.com?name=John%20Doe&city=New%20York',
     );
     expect(result).toEqual({ name: 'John Doe', city: 'New York' });
   });

src/api/common/utils.tsx

@@ -49,15 +49,15 @@ export const getNextPageParam: GetPreviousPageParamFunction<
 type GenericObject = { [key: string]: unknown };
 
 function isGenericObject(value: unknown): value is GenericObject {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
 export const toCamelCase = (obj: GenericObject): GenericObject => {
   const newObj: GenericObject = {};
   for (const key in obj) {
     if (Object.hasOwn(obj, key)) {
       const newKey = key.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
-      const value = obj[key]
+      const value = obj[key];
       if (isGenericObject(value)) {
         newObj[newKey] = toCamelCase(value);
       } else {
@@ -68,14 +68,16 @@ export const toCamelCase = (obj: GenericObject): GenericObject => {
   return newObj;
 };
 
-const camelToSnake = (key: string): string => key.replace(/([a-z])([A-Z])/g, "$1_$2").toLowerCase();
+const camelToSnake = (key: string): string =>
+  key.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
 
 export const toSnakeCase = (obj: GenericObject): GenericObject => {
   const newObj: GenericObject = {};
-    
+
   for (const [key, value] of Object.entries(obj)) {
     const newKey = camelToSnake(key);
-    newObj[newKey] = isGenericObject(value) && value !== null ? toSnakeCase(value) : value;
+    newObj[newKey] =
+      isGenericObject(value) && value !== null ? toSnakeCase(value) : value;
   }
   return newObj;
 };

src/components/buttons.tsx

@@ -3,46 +3,32 @@ import { Button, View } from '@/ui';
 import { Title } from './title';
 
 export const Buttons = () => (
-    <>
-      <Title text="Buttons" />
-      <View>
-        <View className="flex-row  flex-wrap">
-          <Button label="small" size="sm" className="mr-2" />
-          <Button
-            label="small"
-            loading
-            size="sm"
-            className="mr-2 min-w-[60px]"
-          />
-          <Button
-            label="small"
-            size="sm"
-            variant="secondary"
-            className="mr-2"
-          />
-          <Button label="small" size="sm" variant="outline" className="mr-2" />
-          <Button
-            label="small"
-            size="sm"
-            variant="destructive"
-            className="mr-2"
-          />
-          <Button label="small" size="sm" variant="ghost" className="mr-2" />
-          <Button label="small" size="sm" disabled className="mr-2" />
-        </View>
-        <Button label="Default Button" />
-        <Button label="Secondary Button" variant="secondary" />
-        <Button label="Outline Button" variant="outline" />
-        <Button label="Destructive Button" variant="destructive" />
-        <Button label="Ghost Button" variant="ghost" />
-        <Button label="Button" loading={true} />
-        <Button label="Button" loading={true} variant="outline" />
-        <Button label="Default Button Disabled" disabled />
+  <>
+    <Title text="Buttons" />
+    <View>
+      <View className="flex-row  flex-wrap">
+        <Button label="small" size="sm" className="mr-2" />
+        <Button label="small" loading size="sm" className="mr-2 min-w-[60px]" />
+        <Button label="small" size="sm" variant="secondary" className="mr-2" />
+        <Button label="small" size="sm" variant="outline" className="mr-2" />
         <Button
-          label="Secondary Button Disabled"
-          disabled
-          variant="secondary"
+          label="small"
+          size="sm"
+          variant="destructive"
+          className="mr-2"
         />
+        <Button label="small" size="sm" variant="ghost" className="mr-2" />
+        <Button label="small" size="sm" disabled className="mr-2" />
       </View>
-    </>
-  );
+      <Button label="Default Button" />
+      <Button label="Secondary Button" variant="secondary" />
+      <Button label="Outline Button" variant="outline" />
+      <Button label="Destructive Button" variant="destructive" />
+      <Button label="Ghost Button" variant="ghost" />
+      <Button label="Button" loading={true} />
+      <Button label="Button" loading={true} variant="outline" />
+      <Button label="Default Button Disabled" disabled />
+      <Button label="Secondary Button Disabled" disabled variant="secondary" />
+    </View>
+  </>
+);

src/components/colors.tsx

@@ -5,13 +5,13 @@ import { Title } from './title';
 type ColorName = keyof typeof colors;
 
 export const Colors = () => (
-    <>
-      <Title text="Colors" />
-      {(Object.keys(colors) as ColorName[]).map((name) => (
-        <Color name={name} key={name} />
-      ))}
-    </>
-  );
+  <>
+    <Title text="Colors" />
+    {(Object.keys(colors) as ColorName[]).map((name) => (
+      <Color name={name} key={name} />
+    ))}
+  </>
+);
 
 const Color = ({ name }: { name: ColorName }) => {
   if (typeof colors[name] === 'string') {
@@ -22,23 +22,19 @@ const Color = ({ name }: { name: ColorName }) => {
       <Text className="font-medium">{name.toUpperCase()}</Text>
       <View className="flex-row flex-wrap content-between justify-around ">
         {Object.entries(colors[name]).map(([key, value]) => (
-            <ColorCard
-              key={`${colors[name]}-${key}`}
-              value={key}
-              color={value}
-            />
-          ))}
+          <ColorCard key={`${colors[name]}-${key}`} value={key} color={value} />
+        ))}
       </View>
     </View>
   );
 };
 
 const ColorCard = ({ color, value }: { value: string; color: string }) => (
-    <View className="flex-1">
-      <View
-        className="h-14 w-full rounded-sm"
-        style={{ backgroundColor: color }}
-      />
-      <Text className="text-sm">{value}</Text>
-    </View>
-  );
+  <View className="flex-1">
+    <View
+      className="h-14 w-full rounded-sm"
+      style={{ backgroundColor: color }}
+    />
+    <Text className="text-sm">{value}</Text>
+  </View>
+);

src/components/settings/theme-item.tsx

@@ -16,7 +16,7 @@ export const ThemeItem = () => {
       setSelectedTheme(option.value as ColorSchemeType);
       modal.dismiss();
     },
-    [setSelectedTheme, modal]
+    [setSelectedTheme, modal],
   );
 
   const themes = useMemo(
@@ -25,12 +25,12 @@ export const ThemeItem = () => {
       { label: `${translate('settings.theme.light')} 🌞`, value: 'light' },
       { label: `${translate('settings.theme.system')} ⚙️`, value: 'system' },
     ],
-    []
+    [],
   );
 
   const theme = useMemo(
     () => themes.find((t) => t.value === selectedTheme),
-    [selectedTheme, themes]
+    [selectedTheme, themes],
   );
 
   return (

src/components/title.tsx

@@ -4,8 +4,8 @@ type Props = {
   text: string;
 };
 export const Title = ({ text }: Props) => (
-    <View className="flex-row items-center justify-center  py-4 pb-2">
-      <Text className="pr-2 text-2xl">{text}</Text>
-      <View className="h-[2px] flex-1 bg-neutral-300" />
-    </View>
-  );
+  <View className="flex-row items-center justify-center  py-4 pb-2">
+    <Text className="pr-2 text-2xl">{text}</Text>
+    <View className="h-[2px] flex-1 bg-neutral-300" />
+  </View>
+);

src/components/typography.tsx

@@ -3,21 +3,20 @@ import { Text, View } from '@/ui';
 import { Title } from './title';
 
 export const Typography = () => (
-    <>
-      <Title text="Typography" />
-      <View className="mb-4 flex-col">
-        <Text className="text-3xl  tracking-tight">
-          H1: Lorem ipsum dolor sit
-        </Text>
-        <Text className="text-2xl ">H2: Lorem ipsum dolor sit</Text>
-        <Text className="text-xl ">H3: Lorem ipsum dolor sit</Text>
-        <Text className="text-lg ">H4: Lorem ipsum dolor sit</Text>
-        <Text className="text-base">
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque quasi
-          aut, expedita tempore ratione quidem in, corporis quia minus et
-          dolorem sunt temporibus iusto consequatur culpa. Omnis sequi debitis
-          recusandae?
-        </Text>
-      </View>
-    </>
-  );
+  <>
+    <Title text="Typography" />
+    <View className="mb-4 flex-col">
+      <Text className="text-3xl  tracking-tight">
+        H1: Lorem ipsum dolor sit
+      </Text>
+      <Text className="text-2xl ">H2: Lorem ipsum dolor sit</Text>
+      <Text className="text-xl ">H3: Lorem ipsum dolor sit</Text>
+      <Text className="text-lg ">H4: Lorem ipsum dolor sit</Text>
+      <Text className="text-base">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque quasi
+        aut, expedita tempore ratione quidem in, corporis quia minus et dolorem
+        sunt temporibus iusto consequatur culpa. Omnis sequi debitis recusandae?
+      </Text>
+    </View>
+  </>
+);

src/core/hooks/use-selected-theme.tsx

@@ -22,7 +22,7 @@ export const useSelectedTheme = () => {
       setColorScheme(t);
       _setTheme(t);
     },
-    [setColorScheme, _setTheme]
+    [setColorScheme, _setTheme],
   );
 
   const selectedTheme = (theme ?? 'system') as ColorSchemeType;

src/core/i18n/index.tsx

@@ -6,7 +6,7 @@ import { I18nManager } from 'react-native';
 import { resources } from './resources';
 export * from './utils';
 
-const locales = getLocales()
+const locales = getLocales();
 
 i18n.use(initReactI18next).init({
   resources,

src/core/i18n/types.ts

@@ -15,9 +15,9 @@ type RecursiveKeyOfInner<TObj extends object> = {
 
 type RecursiveKeyOfHandleValue<
   TValue,
-  Text extends string
+  Text extends string,
 > = TValue extends unknown[]
   ? Text
   : TValue extends object
-  ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
-  : Text;
+    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
+    : Text;

src/core/utils.ts

@@ -11,9 +11,9 @@ type WithSelectors<S> = S extends { getState: () => infer T }
 
 export const createSelectors = <
   T extends object,
-  S extends UseBoundStore<StoreApi<T>>
+  S extends UseBoundStore<StoreApi<T>>,
 >(
-  _store: S
+  _store: S,
 ) => {
   const store = _store as WithSelectors<typeof _store>;
   store.use = {} as { [K in keyof T]: () => T[K] };