refactor(repo): switch to monorepo architecture

.commitlintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@commitlint/config-conventional"
+  ]
+}

.eslintignore

@@ -1,2 +1,6 @@
-node_modules/
-docs/
+node_modules
+lib
+.next
+
+# Temporary 
+apps

.eslintrc

@@ -1,8 +1,9 @@
 {
-  "extends": ["@react-native-community", "prettier"],
+  "extends": "@react-native",
   "rules": {
     "@typescript-eslint/no-unused-vars": ["off", { "argsIgnorePattern": "^_" }],
     "no-unused-vars": "off",
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "react-in-jsx-scope": "off"
   }
 }

.github/actions/setup/action.yml

@@ -12,7 +12,7 @@ runs:
     - name: Install pnpm
       uses: pnpm/action-setup@v4
       with:
-        version: 8
+        version: 9
 
     - name: Cache dependencies
       id: pnpm-cache
@@ -27,6 +27,5 @@ runs:
     - name: Install dependencies
       if: steps.pnpm-cache.outputs.cache-hit != 'true'
       run: |
-        pnpm install -C example --frozen-lockfile
         pnpm install --frozen-lockfile
       shell: bash

.github/workflows/ci.yml

@@ -33,7 +33,9 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Run unit tests
-        run: pnpm test -- --maxWorkers=2 --coverage
+        run: |
+          cd ./packages/react-native-ficus-ui
+          pnpm test -- --maxWorkers=2 --coverage
 
   build:
     runs-on: ubuntu-latest

.gitignore

@@ -69,4 +69,4 @@ android/keystores/debug.keystore
 # generated by bob
 lib/
 
-docs/.next
+apps/docs/.next

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "printWidth": 80
+}

CONTRIBUTING.md

@@ -4,6 +4,16 @@ Contributions are always welcome, no matter how large or small!
 
 We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md).
 
+## Architecture
+The project is split in 2 folders.
+
+`apps/`:
+- `docs/`: The documentation website of the library
+- `examples/`: A small expo app to test your changes while developping
+
+`packages/`: 
+- `react-native-ficus-ui`: The main librairy along with its components, hooks and theme.
+- ... other configuration and helper packages.
 ## Development workflow
 
 To get started with the project, run `pnpm install` in the root directory to install the required dependencies for each package:
@@ -12,32 +22,42 @@ To get started with the project, run `pnpm install` in the root directory to ins
 pnpm install
 ```
 
-While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app.
+### Development
+While developing, you can run the [example app](/example/) to test your changes.
+
+To build the packages:
+
+```sh
+pnpm prepack
+```
 
-To start the packager:
+> [!NOTE]
+> ⚠️ Your changes in the library will be repercuted in the example app. But if you change the library's exports, you will need to rebuild the package.
 
+To start the example app:
 ```sh
-pnpm example start
+pnpm dev
 ```
 
 To run the example app on Android:
 
 ```sh
-pnpm example android
+pnpm dev android
 ```
 
 To run the example app on iOS:
 
 ```sh
-pnpm example ios
+pnpm dev ios
 ```
 
 To run the example app on Web:
 
 ```sh
-pnpm example web
+pnpm dev web
 ```
 
+### Code quality
 Make sure your code passes TypeScript and ESLint. Run the following to verify:
 
 ```sh
@@ -54,7 +74,37 @@ pnpm lint --fix
 Remember to add tests for your change if possible. Run the unit tests by:
 
 ```sh
-pnpm test
+pnpm test:components
+```
+
+To test if all the CI steps are working all at once, you can use:
+```sh
+pnpm run ci
+```
+
+### Run the Documentation (To improve)
+
+To run the documentation in local development, there is a small workaround to properly resolve react-native dependencies.
+From the project root, you need to run: 
+
+```sh
+pnpm -C ./apps/docs install
+```
+
+Then, you will be able to run:
+
+```sh
+pnpm docs:dev
+```
+
+If you want to be able to run the example app after running  `pnpm -C ./apps/docs install`, you might need to clean your node_modules.
+
+### Clean
+
+To clean all node_modules and cache folders:
+
+```sh
+pnpm clean
 ```
 
 
@@ -95,10 +145,10 @@ The `package.json` file contains various scripts for common tasks:
 
 - `pnpm typecheck`: type-check files with TypeScript.
 - `pnpm lint`: lint files with ESLint.
-- `pnpm test`: run unit tests with Jest.
-- `pnpm example start`: start the Metro server for the example app.
-- `pnpm example android`: run the example app on Android.
-- `pnpm example ios`: run the example app on iOS.
+- `pnpm test:components`: run the library's components unit tests with Jest.
+- `pnpm examples start`: start the Metro server for the example app.
+- `pnpm examples android`: run the example app on Android.
+- `pnpm examples ios`: run the example app on iOS.
 
 ### Sending a pull request
 

apps/docs/.npmrc

@@ -0,0 +1,2 @@
+# This is to ensure that the docs app has isolated node_modules to avoid dependency conflicts
+node-linker=isolated

docs/package.json → apps/docs/package.json

@@ -1,7 +1,7 @@
 {
+  "private": true,
   "name": "react-native-ficus-ui-docs",
   "author": "Nicolas Torion",
-  "private": true,
   "main": "index.js",
   "scripts": {
     "build": "next build",
@@ -26,9 +26,19 @@
     "react-intersection-observer": "^8.26.2",
     "react-live": "^4.1.7",
     "react-native": "0.76.0",
-    "react-native-ficus-ui": "1.3.0",
+    "react-native-ficus-ui": "workspace:*",
     "react-native-vector-icons": "^10.2.0",
-    "react-native-web": "^0.19.12"
+    "react-native-web": "^0.19.12",
+    "@gorhom/bottom-sheet": "5.0.4",
+    "@react-native-community/slider": "4.5.5",
+    "@shopify/flash-list": "1.7.1",
+    "react-native-animatable": "1.3.3",
+    "react-native-confirmation-code-field": "7.4.0",
+    "react-native-modal": "13.0.1",
+    "react-native-pager-view": "6.5.1",
+    "react-native-reanimated": "3.16.1",
+    "react-native-tab-view": "3.5.2",
+    "react-native-toast-message": "2.1.6"
   },
   "dependenciesMeta": {
     "nextra": {

docs/tsconfig.json → apps/docs/tsconfig.json

@@ -16,7 +16,10 @@
     "moduleResolution": "node",
     "baseUrl": "./",
     "paths": {
-      "@components/*": ["./components/*"]
+      "@components/*": ["./components/*"],
+      "react-native-ficus-ui": [
+        "../../packages/react-native-ficus-ui/src/index"
+      ]
     },
     "plugins": [
       {

apps/examples/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

apps/examples/.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

example/app.json → apps/examples/app.json

@@ -1,17 +1,13 @@
 {
   "expo": {
-    "name": "update-example",
-    "slug": "update-example",
+    "name": "examples",
+    "slug": "examples",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "ficus-ui-example",
+    "scheme": "myapp",
     "userInterfaceStyle": "automatic",
-    "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
+    "newArchEnabled": true,
     "ios": {
       "supportsTablet": true
     },
@@ -26,7 +22,18 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
     "experiments": {
       "typedRoutes": true
     }

example/app/components/Avatar.tsx → apps/examples/app/components/Avatar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SafeAreaView } from 'react-native';
 import {
   Avatar,
@@ -99,10 +98,10 @@ const AvatarComponent = () => {
               name="Omar Borji"
               src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
             >
-              <AvatarBadge bg="orange.500" borderColor="orange.100" />
+              <AvatarBadge />
             </Avatar>
             <Avatar name="Deelan" colorScheme="green">
-              <AvatarBadge bg="orange.500" borderColor="orange.100" />
+              <AvatarBadge />
             </Avatar>
           </HStack>
         </ExampleSection>
@@ -120,10 +119,10 @@ const AvatarComponent = () => {
                 name="Omar Borji"
                 src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
               >
-                <AvatarBadge bg="orange.500" borderColor="orange.100" />
+                <AvatarBadge />
               </Avatar>
               <Avatar name="Deelan" colorScheme="green">
-                <AvatarBadge bg="orange.500" borderColor="orange.100" />
+                <AvatarBadge />
               </Avatar>
             </AvatarGroup>
           </HStack>

example/app/components/Badge.tsx → apps/examples/app/components/Badge.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { SafeAreaView } from 'react-native';
-import { Badge, ScrollBox, Text, VStack } from 'react-native-ficus-ui';
-import ExampleSection from '@/src/ExampleSection';
+import { SafeAreaView } from "react-native";
+import { Badge, ScrollBox, Text, VStack } from "react-native-ficus-ui";
+import ExampleSection from "@/src/ExampleSection";
 
 const BadgeComponent = () => {
   return (