refactor: update ui folder to components/ui

Author: yjose

.vscode/project.code-snippets

@@ -27,7 +27,7 @@
     "body": [
       "import React from 'react';",
       "",
-      "import { Text, View } from '@/ui';",
+      "import { Text, View } from '@/components/ui';",
       "",
       "type Props = {",
       "  $2",

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

@@ -35,7 +35,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

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

@@ -57,7 +57,7 @@ import { useForm } from 'react-hook-form';
 import 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(),