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

documentation/blog/2020-04-19-React-Native-Boilerplate-3.0.0.md

@@ -0,0 +1,60 @@
+---
+slug: /getting-started
+sidebar_label: Getting Started
+title: Introduction
+id: getting-started
+keywords: ['react-native', 'boilerplate', 'template', 'starter', 'getting started']
+---
+import VersionReader from '../src/components/VersionReader'
+import Tom from '../src/components/Tom'
+
+Welcome to the React Native Boilerplate documentation!
+<Tom />
+
+This React Native template project is here to jumpstart your mobile app development journey.
+What makes it stand out? Its simplicity, lightweight nature, and scalability.
+
+We've crafted it on a sturdy foundation to ensure easy maintenance, without forcing you into a web of unnecessary dependencies.
+
+Our main goal in designing this boilerplate was to keep things simple and focus on the core principles of React Native,
+all while maintaining a clear separation of concerns.
+
+:::tip Don't forget !!
+If you find value in this boilerplate, consider giving us a star. It would brighten our day like a ray of sunshine! 🌈☀️
+:::
+
+## Features
+
+| Features                                                               | Description                                                                                                                                                                                                            |
+| ---------------------------------------------------------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`Javascript or TypeScript`](/docs/installation#using-the-boilerplate) | Every project, developer, team, and experience is unique. That's why you have the freedom to select either a JavaScript or TypeScript codebase. [The choice is yours!](/docs/installation#using-the-boilerplate)       |
+| [`Navigation`](/docs/navigate)                                         | With [React Navigation](https://reactnavigation.org/), we offer a swift start to your navigation structure through a robust dependency. Check out the details in our [navigation structure documentation](/docs/navigate#navigation-structure). |
+| [`Data fetching`](/docs/data-fetching)️                                 | Leveraging [TanStackQuery](https://react-query.tanstack.com/), data fetching has never been this effortless.                                                                                                                                         |
+| [`Internationalization`](/docs/internationalization)                                          | Our application is fully prepared for multilingual support, all thanks to [React i18next](https://react.i18next.com/).                                                                                                                        |
+| [`Multi theming`](/docs/theming/how-to-use)                            | Without any extra dependencies, we offer an easy-to-use and maintainable theme configuration                                                                                                                           |
+| [`Safe synchrone storage`](/docs/storage)                              | With [React Native MMKV](https://www.npmjs.com/package/@react-navigation/devtools), storing data becomes a breeze, and it can be done securely.                                                                                                                             |
+| [`Environment`](/docs/environment)                                     | The app comes pre-installed with all the necessary tools for handling simple environment variables                                                                                                                     |
+| [`Debug`](/docs/debugging)                                             | The app comes pre-installed with all the necessary tools for debugging, including [Flipper](https://fbflipper.com/) and [Navigation DevTools](https://www.npmjs.com/package/@react-navigation/devtools).               |
+
+
+## Dependencies
+
+As previously mentioned, this boilerplate is intentionally designed to be straightforward and lightweight, steering clear of unnecessary dependencies. It relies on the following key dependencies:
+
+- [React Native](https://reactnative.dev/) (**<VersionReader name="react-native"/>**): Used for building the native app with React.
+- [React](https://react.dev/) (**<VersionReader name="react"/>**): Empowers the native app with React.
+- [React Native MMKV](https://github.com/mrousavy/react-native-mmkv) (**<VersionReader name="react-native-mmkv"/>**): A highly efficient and compact mobile key-value storage solution.
+- [React Navigation](https://reactnavigation.org/) (**<VersionReader name="@react-navigation/native"/>**): Handles routing and navigation within the app, featuring a default splash screen setup.
+- [TanStack Query](https://tanstack.com/query/latest) (**<VersionReader name="@tanstack/react-query"/>**): Facilitates data fetching.
+- [Axios](https://axios-http.com/fr/docs/intro) (**<VersionReader name="axios"/>**): Used for making HTTP requests.
+- [React i18next](https://github.com/i18next/react-i18next) (**<VersionReader name="react-i18next"/>**): Manages internationalization within your app.
+
+:::info Just for you
+This boilerplate comes complete with an example that demonstrates everything from UI components to business logic, showcasing fake user data. We've made it easy for you to remove this example if it doesn't align with your project requirements, ensuring it won't hinder your progress.
+:::
+
+## Updates
+
+This boilerplate will stay in sync with the latest React Native releases as soon as the libraries and tools used here become compatible.
+
+Now, prepare yourself for an exhilarating journey with this React Native boilerplate! 🚀