refactor: update to use the new ui folder

Author: yjose

.vscode/project.code-snippets

@@ -4,23 +4,23 @@
     "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",
@@ -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",
+  },
 }

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
@@ -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/ui-and-theme/components.mdx

@@ -56,7 +56,6 @@ We also provide an `EmptyList` component that you can use to display a message w
 **Use Case**
 
 ```tsx
-import React from 'react';
 import { List, EmptyList, Text } from '@/components/ui';
 
 const MyComponent = () => {
@@ -85,7 +84,6 @@ The `cssInterop` function from `nativewind` is used to apply styling and, in thi
 **Use Case**
 
 ```tsx
-import React from 'react';
 import { Image } from '@/components/ui';
 
 const MyComponent = () => {
@@ -183,7 +181,6 @@ Read more about Handling Forms [here](../forms/).
 **Use Case**
 
 ```tsx
-import React from 'react';
 import { Input, View } from '@/components/ui';
 
 const MyComponent = () => {
@@ -214,7 +211,6 @@ Based on your needs, you can use the `Modal` if you don't have a fixed height fo
 **Use Case**
 
 ```tsx
-import React from 'react';
 import { Modal, useModal, View, Button, Text } from '@/components/ui';
 
 const MyComponent = () => {