refactor: update to use the new ui folder

Author: yjose

.vscode/project.code-snippets

@@ -4,30 +4,30 @@
     "body": [
       "<View className=\"flex-1 items-center justify-center\">",
       "  $1",
-      "</View>"
+      "</View>",
     ],
-    "description": "A Simple View "
+    "description": "A Simple View ",
   },
   "Text": {
     "prefix": "t",
     "body": [
       "<Text variant=\"body\" className=\"text-center\">",
       "  $1",
-      "</Text>"
+      "</Text>",
     ],
-    "description": "A Simple Text"
+    "description": "A Simple Text",
   },
   "export *": {
     "prefix": "ex *",
     "body": ["export * from '.$1';"],
-    "description": "export *"
+    "description": "export *",
   },
   "Component": {
     "prefix": "comp",
     "body": [
       "import * as React from 'react';",
       "",
-      "import { Text, View } from '@/ui';",
+      "import { Text, View } from '@/components/ui';",
       "",
       "type Props = {",
       "  $2",
@@ -39,9 +39,9 @@
       "    </View>",
       "  );",
       "};",
-      ""
+      "",
     ],
-    "description": "Component"
+    "description": "Component",
   },
   // https://snippet-generator.app/?description=useQuery+with+variables&tabtrigger=useqv&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Variables+%3D+%7B%243%7D%3B%0Atype+Response+%3D+%7B%244%7D%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C+%0A++fetcher%3A+%28variables%29+%3D%3E+%7B%0A++++return+client%0A++++++.get%28%60%242%2F%5C%5C%24%7Bvariables.%24%7B5%7D%7D%60%29%22%2C%0A++++++.then%28%28response%29+%3D%3E+response.data%29%3B%0A++%7D%2C%0A%7D%29%3B%0A&mode=vscode
   "useQuery with variables": {
@@ -63,9 +63,9 @@
       "      .then((response) => response.data);",
       "  },",
       "});",
-      ""
+      "",
     ],
-    "description": "useQuery with variables"
+    "description": "useQuery with variables",
   },
   //https://snippet-generator.app/?description=useQuery&tabtrigger=useq&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Response+%3D+%7B%243%7D%3B%0Atype+Variables+%3D+void%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C%0A++fetcher%3A+%28%29+%3D%3E+%7B%0A++++return+client.get%28%60%242%60%29.then%28%28response%29+%3D%3E+response.data.posts%29%3B%0A++%7D%2C%0A%7D%29%3B%0A&mode=vscode
   "useQuery": {
@@ -85,9 +85,9 @@
       "    return client.get(`$2`).then((response) => response.data.posts);",
       "  },",
       "});",
-      ""
+      "",
     ],
-    "description": "useQuery"
+    "description": "useQuery",
   },
   //https://snippet-generator.app/?description=useInfiniteQuery&tabtrigger=useiq&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createInfiniteQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%2Fclient%27%3B%0Aimport+%7B+DEFAULT_LIMIT%2C+getNextPageParam+%7D+from+%27..%2Fcommon%2Futils%27%3B%0Aimport+type+%7B+PaginateQuery+%7D+from+%27..%2Ftypes%27%3B%0A%0Atype+Response+%3D+void%3B%0Atype+Variables+%3D+PaginateQuery%3C%243%3E%3B%0A%0Aexport+const+use%241+%3D+createInfiniteQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C%0A++fetcher%3A+%28_variables%3A+any%2C+%7B+pageParam+%7D%29%3A+Promise%3CResponse%3E+%3D%3E+%7B%0A++++return+client%28%7B%0A++++++url%3A+%60%2F%242%2F%60%2C%0A++++++method%3A+%27GET%27%2C%0A++++++params%3A+%7B%0A++++++++limit%3A+DEFAULT_LIMIT%2C%0A++++++++offset%3A+pageParam%2C%0A++++++%7D%2C%0A++++%7D%29.then%28%28response%29+%3D%3E+response.data%29%3B%0A++%7D%2C%0A++getNextPageParam%2C%0A++initialPageParam%3A+0%2C%0A%7D%29%3B&mode=vscode
   "useInfiniteQuery": {
@@ -117,9 +117,9 @@
       "  },",
       "  getNextPageParam,",
       "  initialPageParam: 0,",
-      "});"
+      "});",
     ],
-    "description": "useInfiniteQuery"
+    "description": "useInfiniteQuery",
   },
 
   //https://snippet-generator.app/?description=useMutation+&tabtrigger=usem&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createMutation+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Variables+%3D+%7B%243%7D%3B%0Atype+Response+%3D+%7B%244%7D%3B%0A%0Aexport+const+use%241+%3D+createMutation%3CResponse%2C+Variables%2C+AxiosError%3E%28%0A++async+%28variables%29+%3D%3E%0A++++client%28%7B%0A++++++url%3A+%27%242%27%2C%0A++++++method%3A+%27POST%27%2C%0A++++++data%3A+variables%2C%0A++++%7D%29.then%28%28response%29+%3D%3E+response.data%29%0A%29%3B&mode=vscode
@@ -141,13 +141,13 @@
       "      method: 'POST',",
       "      data: variables,",
       "    }).then((response) => response.data)",
-      "});"
+      "});",
     ],
-    "description": "useMutation "
+    "description": "useMutation ",
   },
   "navigate": {
     "prefix": "navigate",
     "body": ["const { navigate } = useNavigation();", ""],
-    "description": "navigate"
-  }
+    "description": "navigate",
+  },
 }

babel.config.js

@@ -12,7 +12,7 @@ module.exports = function (api) {
           root: ['./'],
           alias: {
             '@': './src',
-            '@env': './src/core/env.js',
+            '@env': './src/lib/env.js',
           },
           extensions: [
             '.ios.ts',

docs/src/content/docs/getting-started/environment-vars-config.mdx

@@ -10,7 +10,7 @@ import Code from '../../../components/code.astro';
 
 Managing environment variables in your project is an essential task, but it can also be challenging. That's why we have included a complete setup for environment variables in this project. This setup comes with validation and type-checking using the `zod` library.
 
-All the code related to environment variables is located in the `env.js` and `src/core/env.js` files. The `env.js` read the `APP_ENV` variable and loads the correct `.env` file, then defines the `zod` schema for the environment variables for client and build-time, parses the `_env` object, and returns the parsed object, or throws errors in case of invalid or missing variables.
+All the code related to environment variables is located in the `env.js` and `src/lib/env.js` files. The `env.js` read the `APP_ENV` variable and loads the correct `.env` file, then defines the `zod` schema for the environment variables for client and build-time, parses the `_env` object, and returns the parsed object, or throws errors in case of invalid or missing variables.
 
 To increase security, we are splitting environment variables into two parts:
 
@@ -90,7 +90,7 @@ export const client = axios.create({
 ```
 
 :::note[Important]
-Using `import { Env } from '@env';` will import the env from the `src/core/env.js` file, which export client only env vars.
+Using `import { Env } from '@env';` will import the env from the `src/lib/env.js` file, which export client only env vars.
 :::
 
 6. Use `APP_ENV` to load the correct `.env` file :
@@ -147,7 +147,7 @@ Now it's as easy as importing `Env` , `ClientEnv` and `withEnvSuffix` from the `
 
 Here, we added a separate file to export all variables that have already been passed in the `extra` property to the client side. We added a little bit of magic to make it type-safe and easy to use.
 
-<Code file="src/core/env.js" />
+<Code file="src/lib/env.js" />
 
 Now the environment variables are ready to use in your project. You can access them in your code by importing `Env` from `@env` and using it like this:
 

docs/src/content/docs/getting-started/project-structure.mdx

@@ -25,6 +25,21 @@ If you open the new project in VSCode you will see the following structure:
   - login.tsx
   - onboarding.tsx
 - components ## any reusable components
+  - ui ## core ui and theme configuration
+    - button.tsx
+    - checkbox.tsx
+    - colors.js
+    - focus-aware-status-bar.tsx
+    - icons
+    - image.tsx
+    - index.tsx
+    - input.tsx
+    - list.tsx
+    - modal.tsx
+    - progress-bar.tsx
+    - select.tsx
+    - text.tsx
+    - utils.tsx
   - buttons.tsx
   - card.tsx
   - colors.tsx
@@ -35,7 +50,7 @@ If you open the new project in VSCode you will see the following structure:
   - settings/
   - title.tsx
   - typography.tsx
-- core ## core files such as auth, localization, storage and more
+- lib ## core files such as auth, localization, storage and more
   - auth
   - env.js
   - hooks
@@ -51,29 +66,14 @@ If you open the new project in VSCode you will see the following structure:
   - en.json
 - types ## global types
   - index.ts
-- ui ## core ui and theme configuration
-  - button.tsx
-  - checkbox.tsx
-  - colors.js
-  - focus-aware-status-bar.tsx
-  - icons
-  - image.tsx
-  - index.tsx
-  - input.tsx
-  - list.tsx
-  - modal.tsx
-  - progress-bar.tsx
-  - select.tsx
-  - text.tsx
-  - utils.tsx
 
 </FileTree>
 
-- `ui`: This folder contains all the UI components and the theme configuration. We provide minimal components with a basic `obytes` theme. You can add your own components and theme configuration here.
+- `components/ui`: This folder contains all the UI components and the theme configuration. We provide minimal components with a basic `obytes` theme. You can add your own components and theme configuration here.
 
-- `components`: This folder contains the components of the app. mainly components used inside the app folder. The only difference between `ui` and `components` is that `ui` is more generic and can be used in any project, while `components` are more specific to the project.
+- `components`: This folder contains the components of the app. mainly components used inside the app folder.
 
-- `core`: This folder contains the core files, such as authentication, localization, storage, and more. It can be shared with other projects. That's why we are only including modules that have nothing to do with project logic. This approach helps us share code between projects and also update the starter with new features.
+- `lib`: This folder contains the core files, such as authentication, localization, storage, and more. It can be shared with other projects. That's why we are only including modules that have nothing to do with project logic. This approach helps us share code between projects and also update the starter with new features.
 
 - `app`: This folder contains the routes of the app, along with its layout routes such as stack and tab navigation structures. We provide a basic navigation structure for the demo app that you can modify to fit your needs.
 

docs/src/content/docs/guides/authentication.mdx

@@ -20,7 +20,7 @@ Zustand works very well with TypeScript and can be easily used outside the React
 
 As mentioned earlier, we use Zustand to manage the authentication state of the application. The authentication store is located in `src/store/auth` and is utilized for managing the authentication state of the application.
 
-<CodeBlock file="src/core/auth/index.tsx" />
+<CodeBlock file="src/lib/auth/index.tsx" />
 
 The store is composed of 2 states and 3 actions:
 
@@ -32,7 +32,7 @@ The store is composed of 2 states and 3 actions:
 
 - `useToken`: The token of the user. It is used to authenticate the user to the API. It is stored in the storage of the device and we use it to hydrate the authentication status state when the application is started.
 
-  For the Demo app `useToken` is a simple object that contains the `accessToken` and the `refreshToken`. You can add more fields if you update the `TokenType` type in `src/core/auth/utils.ts`.
+  For the Demo app `useToken` is a simple object that contains the `accessToken` and the `refreshToken`. You can add more fields if you update the `TokenType` type in `src/lib/auth/utils.ts`.
 
 - `signIn`: TThe function performs user sign-in. It accepts a token as a parameter, sets the token state, stores it locally, and updates the status to `signIn`.
 

docs/src/content/docs/guides/internationalization.mdx

@@ -12,12 +12,12 @@ The starter comes with a basic internationalization setup. It uses [expo-localiz
 
 ## Adding a new language
 
-Mainly the demo app supports two languages: English and Arabic (RTL). You can add more languages by adding the translation files in the `src/translations` folder and adding the language code to the `src/core/i18n/resources.ts` file.
+Mainly the demo app supports two languages: English and Arabic (RTL). You can add more languages by adding the translation files in the `src/translations` folder and adding the language code to the `src/lib/i18n/resources.ts` file.
 
-<CodeBlock file="src/core/i18n/resources.ts" />
+<CodeBlock file="src/lib/i18n/resources.ts" />
 
 :::tip
-Anything related to internationalization should be found in the `src/core/i18n` folder.
+Anything related to internationalization should be found in the `src/lib/i18n` folder.
 :::
 
 ## Using translations in your app
@@ -30,7 +30,7 @@ The i18n core module provides a set of utility functions to help you use transla
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Text } from '@/ui';
+import { Text } from '@/components/ui';
 
 export const Foo = () => {
   const { t } = useTranslation();
@@ -47,7 +47,7 @@ or as `Text` component comes with translation support, you can easily use it as
 ```tsx
 import React from 'react';
 
-import { Text } from '@/ui';
+import { Text } from '@/components/ui';
 
 export const Foo = () => {
   return <Text className="text-center" tx="settings.language" />;
@@ -58,7 +58,7 @@ export const Foo = () => {
 
 Additionally, the `useSetLanguage` hook will save the selected language in device storage using `MMKV` and will be used as the default language when the app is opened again As well as adding some extra config for RTL languages while updating the selected language.
 
-<CodeBlock file="src/core/i18n/utils.tsx" />
+<CodeBlock file="src/lib/i18n/utils.tsx" />
 
 ## Robust translation
 

docs/src/content/docs/guides/storage.mdx

@@ -12,6 +12,6 @@ import CodeBlock from '../../../components/code.astro';
 
 The starter comes with a simple storage module that uses [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) to store data in a key-value format. We also added a simple storage utility to assist you in using the storage module.
 
-<CodeBlock file="src/core/storage.tsx" />
+<CodeBlock file="src/lib/storage.tsx" />
 
 The `react-native-mmkv` library provides various features such as using hooks and adding encryption to stored data. Feel free to check the [official docs](https://github.com/mrousavy/react-native-mmkv) for more information.

docs/src/content/docs/recipes/sentry-setup.mdx

@@ -132,9 +132,9 @@ The starter kit did not come with Sentry pre-configured, but it's very easy to s
    ```
 
 8. Now you are ready to initialize Sentry in your app.
-   Create a new file `src/core/sentry.ts` and add the following code:
+   Create a new file `src/lib/sentry.ts` and add the following code:
 
-   ```tsx title='src/core/sentry.ts'
+   ```tsx title='src/lib/sentry.ts'
    import { useNavigationContainerRef } from 'expo-router';
    import { useEffect } from 'react';
    import * as Sentry from '@sentry/react-native';

docs/src/content/docs/testing/unit-testing.mdx

@@ -46,7 +46,7 @@ As you may notice from the code, we are importing a bunch of things from the `@/
 :::tip
 You can update this file to add any other providers you need to wrap your components with as well as any other utility functions you need to use in your tests.
 
-<CodeBlock file="src/core/test-utils.tsx" />
+<CodeBlock file="src/lib/test-utils.tsx" />
 
 use `setup` function in case you need to test interactions with the component. It returns a user (userEvent) object that you can use to interact with the component.
 :::

docs/src/content/docs/ui-and-theme/Forms.mdx

@@ -58,7 +58,7 @@ import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 import { useAuth } from '@/lib';
-import { Button, ControlledInput, View } from '@/ui';
+import { Button, ControlledInput, View } from '@/components/ui';
 
 const schema = z.object({
   email: z.string().email(),

docs/src/content/docs/ui-and-theme/components.mdx

@@ -11,7 +11,7 @@ import CodeBlock from '../../../components/code.astro';
 
 The starter comes with a set of basic components and a simple design system based on Nativewind to help you get started and save you time.
 
-All those components can be found in the `src/ui/core` folder. Our philosophy is to keep the components as simple as possible and to avoid adding too much logic to them. This way, they are easier to reuse and customize.
+All those components can be found in the `src/components/ui` folder. Our philosophy is to keep the components as simple as possible and to avoid adding too much logic to them. This way, they are easier to reuse and customize.
 
 Based on your needs, you can either use them as they are or customize them to fit your needs. You can also create new ones based on the same approach.
 
@@ -57,7 +57,7 @@ We also provide an `EmptyList` component that you can use to display a message w
 
 ```tsx
 import * as React from 'react';
-import { List, EmptyList, Text } from '@/ui';
+import { List, EmptyList, Text } from '@/components/ui';
 
 const MyComponent = () => {
   return (
@@ -86,7 +86,7 @@ The `cssInterop` function from `nativewind` is used to apply styling and, in thi
 
 ```tsx
 import * as React from 'react';
-import { Image } from '@/ui';
+import { Image } from '@/components/ui';
 
 const MyComponent = () => {
   return (
@@ -184,7 +184,7 @@ Read more about Handling Forms [here](../forms/).
 
 ```tsx
 import * as React from 'react';
-import { Input, View } from '@/ui';
+import { Input, View } from '@/components/ui';
 
 const MyComponent = () => {
   return (
@@ -215,7 +215,7 @@ Based on your needs, you can use the `Modal` if you don't have a fixed height fo
 
 ```tsx
 import * as React from 'react';
-import { Modal, useModal, View, Button, Text } from '@/ui';
+import { Modal, useModal, View, Button, Text } from '@/components/ui';
 
 const MyComponent = () => {
   const modal = useModal();
@@ -258,8 +258,8 @@ Feel free to update the component implementation to fit your need and as you kee
 ```tsx
 import * as React from 'react';
 
-import type { Option } from '@/ui';
-import { SelectInput, View } from '@/ui';
+import type { Option } from '@/components/ui';
+import { SelectInput, View } from '@/components/ui';
 
 const options: Option[] = [
   { value: 'chocolate', label: 'Chocolate' },
@@ -315,7 +315,7 @@ Animations are applied to the icons using the `MotiView` component from the `mot
 **Use Case**
 
 ```tsx
-import { Checkbox } from '@/ui';
+import { Checkbox } from '@/components/ui';
 
 const App = () => {
   const [checked, setChecked] = useState(false);
@@ -336,7 +336,7 @@ By default the component will render a label with the text you passed as label p
 For rendering a custom Checkbox, you can use the `Checkbox.Root`, `Checkbox.Icon`, and `Checkbox.Label` components.
 
 ```tsx
-import { Checkbox } from '@/ui';
+import { Checkbox } from '@/components/ui';
 
 const App = () => {
   const [checked, setChecked] = useState(false);

docs/src/content/docs/ui-and-theme/ui-theming.mdx

@@ -72,7 +72,7 @@ This template comes with dark mode support out of the box, and it's very easy to
 Since we're using [nativewind](https://www.nativewind.dev/) (which uses Tailwind CSS under the hood) and expo-router we let them handle the application of theme, and we just take care of the colors we want.
 We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeConfig.tsx` to get the theme object that we pass to ThemeProvider directly. For more information check out [expo-router](https://docs.expo.dev/router/appearance/)
 
-<CodeBlock file="src/core/use-theme-config.tsx" />
+<CodeBlock file="src/lib/use-theme-config.tsx" />
 
 <CodeBlock file="src/app/_layout.tsx" />
 
@@ -81,7 +81,7 @@ We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeC
 We use the `loadSelectedTheme` function to load the theme from the storage if there's a theme saved in the storage, otherwise, we let nativwind use the default theme (system).
 To set the selected theme, we use the `useSelectedTheme` hook, which sets the theme in the storage and updates the color scheme of the app.
 
-<CodeBlock file="src/core/hooks/use-selected-theme.tsx" />
+<CodeBlock file="src/lib/hooks/use-selected-theme.tsx" />
 
 ### Add dark mode for each component