V4 - theme refactoring, documentation and code improvment (#382)

* feat(theme): refactoring for better theme with unique config file

* fix(deps): new deps

* feat(theme): add new theme configuration

* feat(theme): remove complex Generic type

* chore(rn): improve all the code type check, the documentation and the git config

* Update 02-Configuration.md

Co-authored-by: Jeremy <[email protected]>

* Update 01-Navigate.md

Co-authored-by: Jeremy <[email protected]>

* feat(zod): add zod to validate request and move axios to ky

* feat(component): component theme

* chore(rn): upgrade code to simply

* chore(rn): upgrade code to simply it

* chore(lint): fix lint

* feat(plugin): improve startup command with yarn and npm choose

* Update documentation/blog/2023-09-18-React-Native-Boilerplate-4.0.0.md

Co-authored-by: Valentin Briand <[email protected]>

* Update documentation/blog/2023-09-18-React-Native-Boilerplate-4.0.0.md

Co-authored-by: Valentin Briand <[email protected]>

* Update documentation/docs/04-Guides/04-Theming/01-Using.md

Co-authored-by: Valentin Briand <[email protected]>

* chore(clean): simplify project

* chore(doc): improve documentation related to new features

* chore(arch): simplify arch

* feat(rn): improve arch for v4

* feat(doc): improve style and content

---------

Co-authored-by: jeremydolle <[email protected]>
Co-authored-by: Jeremy <[email protected]>
Co-authored-by: Valentin Briand <[email protected]>

Author: 3 people

.github/workflows/cd-documentation.yml

@@ -5,6 +5,8 @@ on:
     branches: [ main ]
     paths:
       - documentation/**/*
+      - template/theme/**/*
+      - template/package.json
 
 jobs:
   deploy_doc:
@@ -13,7 +15,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '19.x'
       - name: Add key to allow access to repository
         env:
           SSH_AUTH_SOCK: /tmp/ssh_agent.sock

.github/workflows/ci-documentation.yml

@@ -5,6 +5,8 @@ on:
     branches: [ main ]
     paths:
       - documentation/**/*
+      - template/theme/**/*
+      - template/package.json
 
 jobs:
   check_build:
@@ -13,7 +15,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '19.x'
       - name: Test Build
         run: |
           cd documentation

.github/workflows/w-deploy-npm.yml

@@ -24,7 +24,7 @@ jobs:
           ref: ${{ inputs.checkout_ref }}
       - uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: '19.x'
       - run: |
           git config --global user.name "RNB Bot"
           git config --global user.email "[email protected]"

.gitignore

@@ -18,3 +18,4 @@ yarn-lock.json
 package-lock.json
 
 node_modules
+template/js

.husky/prepare-commit-msg

@@ -13,9 +13,8 @@ template/ios/Pods
 template/ios/build
 template/android/app/.cxx
 template/android/app/build
+template/android/build
 template/android/.gradle
 template/android/.idea
 documentation
-.idea
 .github
-.husky

.npmignore

@@ -23,19 +23,3 @@ $ yarn build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

commitlint.config.js

@@ -69,7 +69,7 @@ Each of the used libraries are well-known, tried and tested.
 For the state management we use [**Redux**](https://redux.js.org/) (redux + redux toolkit + redux persist). 
 Some people like it, some people don't.
 We are really comfortable with this library, it's not so difficult to learn, and the implementation is well-known, 
-recognized as a good choice and easy [to debug](/docs/UsingFlipper)! 
+recognized as a good choice and easy to debug! 
 Thanks to this boilerplate and [redux-toolkit](https://redux-toolkit.js.org/), the state management is ready out of the box. 
 A complete example is even included. This way, you can easier understand how it works.
 To deal with the navigation, [**React Navigation**](https://reactnavigation.org/) is THE reference for screen navigation.
@@ -145,10 +145,6 @@ export default ExampleContainer
 
 That's this simple! 🚀
 
-:::info
-For more details about redux-toolkit-wrapper jump [**here**](/docs/ReduxStore)
-:::
-
 ## What's in the box? 📦
 
 Still hesitating ? Let's make a recap and see what this beautiful boilerplate can provide you:
@@ -161,9 +157,9 @@ Still hesitating ? Let's make a recap and see what this beautiful boilerplate ca
 - **Redux** (with redux-toolkit and redux-toolkit-wrapper 😉) : handling
   redux store has never been as easy as this!! ⚡
 - DarkMode or colorful app? Give your users the power to choose!
-  **Multi-theming** and **darkMode** support 🌗 (see [here](/docs/ThemesAndDarkMode))
-- French kisses aren't translatable, but you can translate your app! **i18n friendly** 🌐 (see [here](/docs/AddALangTranslation))
-- You don't like bug hunt? Use **Flipper debugging** 🐛 (see [here](/docs/UsingFlipper))
+  **Multi-theming** and **darkMode** support 🌗
+- French kisses aren't translatable, but you can translate your app! **i18n friendly** 🌐
+- You don't like bug hunt? Use **Flipper debugging** 🐛
 - Maintained by **passionate developers** ⚛️
 
 Just Test It 🧪 !!

documentation/README.md

@@ -0,0 +1,108 @@
+---
+title: React Native Boilerplate 4.0.0
+authors: jed
+description: What's new? 
+hide_table_of_contents: false
+tags: [v4, boilerplate react, react-native, kickstart]
+---
+After using the boilerplate on several projects, 
+we decided to revisit some important aspects while still adhering to the core principles of the boilerplate: 
+separation of concerns, ease of setup, and maintainability. 
+We made several enhancements, which we'll detail here.
+
+<!--truncate-->
+
+
+## Improved Theming
+Theming is a crucial aspect of any application. 
+Previously, we had designed a layered theming system where all variables could be customized for each theme, 
+including base colors and spacing. 
+Upon reflection, we found that this system, while effective, wasn't the most straightforward to use, 
+especially with the layered naming convention.
+
+Additionally, being able to modify spacing between themes didn't make sense. 
+Furthermore, the variable names we used weren't always intuitive. 
+For instance, terms like 'medium' or 'large' didn't allow for easy interpolation between them. 
+It was even harder to find an intermediate value between 'medium' and 'regular,' for example.
+
+As a result, we decided to simplify and improve the theming process, making it more efficient and comprehensive.
+
+### Configuration
+Everything now revolves around a configuration file named `_config.ts`. 
+This file serves as a central configuration point where you can define the base theme values and declare theme variants. 
+We've moved away from the complex layering system in favor of a more reflective system with main themes and variants.
+
+### Theme Provider
+To boost performance, we introduced a `ThemeProvider` component. This component provides the theme to the application, 
+preventing the need to regenerate the theme with every `useTheme` call.
+
+### Type Inference
+We've also improved the type inference of the theme. Now each generated style is typed according to the theme configuration even if there are variants.
+For example, let's imagine a configuration like this:
+
+```ts title=/src/theme/_config.ts
+export const config = {
+    //...
+    fonts: {
+        //...
+        colors: {
+            primary: 'blue',
+        },
+    },
+    //...
+    variants: {
+        dark: {
+            fonts: {
+                colors: {
+                    primary: 'darkblue',
+                },
+            },
+        },
+        premium: {
+            fonts: {
+                colors: {
+                    primary: 'gold',
+                },
+            },
+        }
+    }
+}
+```
+
+The generated type will be inferred at the perfect level:
+![powerful typescript](./assets/theme-infer.png)
+
+
+## Goodbye Redux 🤧
+Redux is a fantastic library, but it's not always the best solution for every project.
+When we started the boilerplate, our goal was to provide a comprehensive solution for state management. In our initial version, we integrated Redux, Redux Persist, and Redux Saga, to name a few. These libraries were essential for managing the application's state, handling asynchronous requests, and persisting data.
+
+However, over time, alternative solutions emerged, 
+particularly in the realm of data fetching. 
+It was with Redux Toolkit Query that we began version 3. 
+Nonetheless, we decided to part ways with it for version 4.
+
+Our aim has always been to offer a lightweight yet comprehensive solution 
+without being too opinionated. Thus, we chose to remove Redux from the boilerplate 
+in favor of lighter and more straightforward alternatives. 
+It's important to note that global state management remains crucial in an application, 
+and several options are available:
+
+- Redux
+- Mobx
+- Zustand
+- Jotai
+- React Context
+- And more...
+
+Now, in this version, for data fetching, we now use React Query, 
+an excellent library that's straightforward to use. 
+As for data storage, we rely on React Native MMKV, a native library known for its high performance and secure, 
+synchronous data storage capabilities.
+
+## Enhanced Documentation 💙
+We also took the opportunity to enhance the documentation. 
+It's now clearer and more comprehensive. 
+We've made an effort to make the documentation more accessible and easier to understand. 
+At times, we've added 'playgrounds' in the section related to theme generation, 
+allowing you to directly test the values you want and see the results for yourself