add typescript support included in the cli (#179)

Author: JeremyDolle

Diff for: .github/workflows/CI.yml

@@ -1,19 +1,22 @@
 name: CI
 
 on:
+  pull_request:
+    branches: [ master ]
   push:
     branches:
     - '*'
 
 jobs:
-  install-lint-test:
+  install-lint-test-type:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: Install yarn dependencies
         run: |
           cd template
           yarn install
+          yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer @types/fbemitter @types/react-redux
       - name: Run linters
         run: |
           cd template
@@ -25,3 +28,8 @@ jobs:
           cd template
           cp src/Config/index.example.js src/Config/index.js
           yarn test
+      - name: Run type check
+        run: |
+          cd template
+          cp plugins/typescript/template/tsconfig.dev.json plugins/typescript/template/tsconfig.json
+          yarn type-check

Diff for: .gitignore

@@ -15,6 +15,8 @@ local.properties
 npm-debug.log
 yarn-error.log
 
+node_modules
+
 # Ignore specific files copying by RN CLI
 template/.gitignore
 template/.gitattributes

Diff for: .npmignore

@@ -1,9 +1,29 @@
 .DS_Store
+build/
+.idea
+.gradle
+local.properties
+*.iml
+npm-debug.log
+yarn-error.log
+node_modules
 template/node_modules
+template/src/Config/index.js
+template/src/Config/index.ts
+template/ts-src-override/tsconfig.dev.ts
+template/ts-src-override/tsconfig.ts
 template/ios/Pods
 template/android/app/build
 template/android/.gradle
 template/android/.idea
+template/.buckconfig
+template/.eslintrc.js
+template/.flowconfig
+template/.gitattributes
+template/.gitignore
+template/.prettierrc.js
+template/.watchmanconfig
+template/plugins/README.md
 documentation
 .idea
 .github

Diff for: LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 The Coding Machine
+Copyright (c) 2021 The Coding Machine
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Diff for: README.md

@@ -2,11 +2,14 @@
     <img src="documentation/static/img/TOM-Legend.png" alt="Logo" width="100%">
 </div>
 
-![GitHub Release Date](https://img.shields.io/github/release-date/thecodingmachine/react-native-boilerplate)
-![GitHub last commit](https://img.shields.io/github/last-commit/thecodingmachine/react-native-boilerplate)
-![GitHub commit activity](https://img.shields.io/github/commit-activity/m/thecodingmachine/react-native-boilerplate)
-![GitHub commits since latest release](https://img.shields.io/github/commits-since/thecodingmachine/react-native-boilerplate/latest)
-![GitHub top language](https://img.shields.io/github/languages/top/thecodingmachine/react-native-boilerplate)
+![React Native Boilerplate License](https://img.shields.io/github/license/thecodingmachine/react-native-boilerplate)
+![React Native Boilerplate Version](https://flat.badgen.net/npm/v/@thecodingmachine/react-native-boilerplate)
+![React Native Boilerplate Release Date](https://img.shields.io/github/release-date/thecodingmachine/react-native-boilerplate)
+![React Native Boilerplate Download](https://flat.badgen.net/npm/dt/@thecodingmachine/react-native-boilerplate)
+![React Native Boilerplate Stars](https://img.shields.io/github/stars/thecodingmachine/react-native-boilerplate)
+![React Native Boilerplate Top Language](https://img.shields.io/github/languages/top/thecodingmachine/react-native-boilerplate)
+![React Native Boilerplate TypeScript](https://badgen.net/npm/types/tslib)
+[![CI](https://github.com/thecodingmachine/react-native-boilerplate/actions/workflows/CI.yml/badge.svg)](https://github.com/thecodingmachine/react-native-boilerplate/actions/workflows/CI.yml)
 
 # TheCodingMachine React Native boilerplate
 
@@ -18,7 +21,6 @@ The boilerplate provides **an optimized architecture for building solid cross-pl
 If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives :)
 ```
 
-
 ## Requirements
 
 Node 10 or greater is required. Development for iOS requires a Mac and Xcode 9.4 or up, and will target iOS 9 and up.
@@ -35,27 +37,10 @@ To create a new project using the boilerplate simply run :
 npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate
 ```
 
-Assuming you have all the requirements installed, you can setup and run the project by running:
-
-- `yarn install` to install the dependencies
-- run the following steps for your platform
-
-### Android
-
-- only the first time you run the project, you need to generate a `debug key` with:
-  - `cd android/app`
-  - `keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000`
-  - `cd ../..` to come back to the root folder
-- `yarn start` to start the metro bundler, in a dedicated terminal
-- `yarn android` to run the Android application (remember to start a simulator or connect an Android phone)
-
-### iOS
+Assuming you have all the requirements installed, you can run the project by running:
 
-- `cd ios`
-- `pod install` to install pod dependencies
-- `cd ..` to come back to the root folder
 - `yarn start` to start the metro bundler, in a dedicated terminal
-- `yarn ios` to run the iOS application (remember to start a simulator or connect an iPhone phone)
+- `yarn <platform>` to run the *platform* application (remember to start a simulator or connect a device)
 
 ## Digging Deeper
 

Diff for: documentation/docs/1_Introduction/1_1_RNBoilerplate.md

@@ -43,15 +43,15 @@ The driving goal of the architecture of the boilerplate is separation of concern
 
 The boilerplate contains:
 
-- a [React Native](https://facebook.github.io/react-native/) (v**0.63.3**) application (in "[ejected](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md)" mode to allow using dependencies that rely on native code)
+- a [React Native](https://facebook.github.io/react-native/) (v**0.64.0**) application (in "[ejected](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md)" mode to allow using dependencies that rely on native code)
 - a [clear directory layout](#directory-layout) to provide a base architecture for your application
 - [Redux](https://redux.js.org/) (v**4.0.5**) to help manage state
 - [Redux Persist](https://github.com/rt2zz/redux-persist) (v**6.0.0**) to persist the Redux state
 - [React Navigation](https://reactnavigation.org/) (v**5**) to handle routing and navigation in the app, with a splash screen setup by default
-- [redux toolkit](https://github.com/infinitered/reduxsauce) (v**1.4.0**) to make redux easier
-- [axios](https://github.com/axios/axios) (v**0.20.0**) to make API calls
+- [redux toolkit](https://github.com/infinitered/reduxsauce) (v**1.5.0**) to make redux easier
+- [axios](https://github.com/axios/axios) (v**0.21.1**) to make API calls
 - [prettier](https://prettier.io/) and [eslint](https://eslint.org/) preconfigured for React Native
-- [react-native-flipper](https://fbflipper.com/) (v**0.62.0**) to debug react-native and [redux-flipper](https://github.com/jk-gan/redux-flipper) (v**1.3.2**) to debug redux
+- [react-native-flipper](https://fbflipper.com/) (v**0.75.1**) to debug react-native and [redux-flipper](https://github.com/jk-gan/redux-flipper) (v**1.4.2**) to debug redux
 
 The boilerplate includes an example (displaying fake user data) from UI components to the business logic. The example is easy to remove so that it doesn't get in the way.
 

Diff for: documentation/docs/2_Getting Started/2_1_Installation.md

@@ -5,7 +5,7 @@ title: Installation
 
 ## Requirements
 
-Node 10 or greater is required. Development for iOS requires a Mac and Xcode 9.4 or up, and will target iOS 9 and up.
+Node 12 or greater is required. Development for iOS requires a Mac and Xcode 10 or up.
 
 You also need to install the dependencies required by React Native:
 
@@ -20,26 +20,14 @@ To create a new project using the boilerplate simply run :
 npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate
 ```
 
-## Running the project
-
-Assuming you have all the requirements installed, you can setup and run the project by running:
-
-- `yarn install` to install the dependencies
-- run the following steps for your platform
+## Running with typescript 
 
-### Android
+During the installation the cli will ask you if you want to use typescript, tap on the `y` key and all the requirement will be set.
+to type check your project just run `yarn tsc`.
 
-- only the first time you run the project, you need to generate a debug key with:
-  - `cd android/app`
-  - `keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000`
-  - `cd ../..` to come back to the root folder
-- `yarn start` to start the metro bundler, in a dedicated terminal
-- `yarn android` to run the Android application (remember to start a simulator or connect an Android phone)
+## Running the project
 
-### iOS
+Assuming you have all the requirements installed, you can run the project by running:
 
-- `cd ios`
-- `pod install` to install pod dependencies
-- `cd ..` to come back to the root folder
 - `yarn start` to start the metro bundler, in a dedicated terminal
-- `yarn ios` to run the iOS application (remember to start a simulator or connect an iPhone phone)
+- `yarn <platform>` to run the *platform* application (remember to start a simulator or connect a device)

Diff for: documentation/docs/3_Guides/3_4_ReduxStore.md

@@ -75,7 +75,7 @@ For each wrapped action, a reducer is associated.
 
 ## Redux-toolkit-wrapper
 The boilerplate includes a [wrapper of redux-toolkit](https://github.com/thecodingmachine/redux-toolkit-wrapper) to make it easier to use. It provides three helpers.
-If your are not familiar with redux-toolkit, please have a look at their [documentation](https://redux-toolkit.js.org/api/configureStore).
+If you are not familiar with redux-toolkit, please have a look at their [documentation](https://redux-toolkit.js.org/api/configureStore).
 
 ### buildAsyncState
 `buildAsyncState` create a loading and error state. You can scope it in a key.
@@ -121,7 +121,7 @@ Will generate:
 
 Where fetchOneUserService is an async function. 
 So, when the fetchOneUserService is launched the action `user/fetchOne/pending` is dispatched.
-When the fetchOneUserService is endded the action `user/fetchOne/fulfilled` is dispatched.
+When the fetchOneUserService is ended the action `user/fetchOne/fulfilled` is dispatched.
 When the fetchOneUserService throw an error the action `user/fetchOne/rejected` is dispatched.
 
 ### buildAsyncReducers

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecodingmachine/react-native-boilerplate",
-  "version": "2.2.5",
+  "version": "3.0.0",
   "description": "TheCodingMachine React Native Boilerplate",
   "repository": {
     "type": "git",
@@ -23,5 +23,9 @@
     "thecodingmachine",
     "react-native",
     "starter-kit"
-  ]
+  ],
+  "dependencies": {
+    "prompts": "^2.4.1",
+    "kleur": "^4.1.4"
+  }
 }

Diff for: post-init.script.js

@@ -1,25 +1,7 @@
 #!/usr/bin/env node
+const { rmdir } = require('fs').promises;
+const { applyPlugins } = require('./template/plugins');
 
-const fs = require('fs')
-fs.copyFile('src/Config/index.example.js', 'src/Config/index.js', (err) => {
-    if (err) throw err;
-    console.log('src/Config/index.example.js was copied to src/Config/index.js');
+applyPlugins().then(async () => {
+  await rmdir('./plugins', { recursive: true });
 });
-
-console.log("TheCodingMachine React-Native Boilerplate initialized with success !");
-console.log("" +
-    "                                                                    .-`    `::  \n" +
-    " `/////////////     `/shhhy+-   ://.        /sy/                   /ss/   :NMN: \n" +
-    " `sssssyhhhyhhy:` `yMMMMNNMMMd. osss:     `hMMMh-    .-`         `+ss:   +MMm/. \n" +
-    "      :MMM+----. `mMMm+:-`.oo/` osssyo`  `dMMMMh-   ohhh-       `oyy+-  sMMd/.  \n" +
-    "      :MMM+`     oMMN/-         osssyhs`.mMMMMMh-   -hds`      .syy+- `hMMh:`   \n" +
-    "      :MMM+`     hMMd:          oss-ohhhMMMhdMMh-    `.       +NNm/. .dMMy:`    \n" +
-    "      :MMM+`     oMMN/          oss-`shdMMd:dMMh-    :-`     sMMd/. -NMMo-      \n" +
-    "      :MMM+`     `mMMm/`  `/+:. oss- `sdMd:.hMMh-   hMys-  `hMMh:` -hdy-`       \n" +
-    "      :MMM+`      `yMMMMdssss+  oss.  `oh/- hMMh-   -hyo:  dMMs:` -ss+`         \n" +
-    "      .oys:`        .+yhyo/-    -::`    ``  -syo-     ..`  +mo-   `//           \n" +
-    "        ``             ```                    ``            `.                  ")
-
-console.log('- If you need to read more about this boilerplate : https://thecodingmachine.github.io/react-native-boilerplate/')
-console.log('- If you have some troubles : https://github.com/thecodingmachine/react-native-boilerplate/issues')
-console.log('- If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives :) https://github.com/thecodingmachine/react-native-boilerplate')

Diff for: template/_eslintrc.js

@@ -9,6 +9,9 @@ module.exports = {
     semi: ['error', 'never'],
     'object-curly-spacing': ['error', 'always'],
     'array-bracket-spacing': ['error', 'never'],
+    'react/require-default-props': ['error'],
+    'react/default-props-match-prop-types': ['error'],
+    'react/sort-prop-types': ['error'],
   },
   settings: {
     'import/resolver': {

Diff for: template/_gitignore

@@ -57,3 +57,5 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+template/plugins/typescript/template/tsconfig.json

Diff for: template/package.json

@@ -1,13 +1,14 @@
 {
   "name": "boilerplate",
-  "version": "2.2.5",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "type-check": "tsc --build plugins/typescript/template/tsconfig.json"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.14.1",
@@ -16,9 +17,10 @@
     "@react-navigation/native": "^5.9.3",
     "@react-navigation/stack": "^5.14.3",
     "@reduxjs/toolkit": "^1.5.0",
-    "@thecodingmachine/redux-toolkit-wrapper": "1.3.0",
+    "@thecodingmachine/redux-toolkit-wrapper": "2.0.1",
     "axios": "^0.21.1",
     "i18next": "^19.9.2",
+    "prop-types": "^15.7.2",
     "react": "17.0.1",
     "react-i18next": "^11.8.10",
     "react-native": "0.64.0",

Diff for: template/plugins/README.md

@@ -0,0 +1,57 @@
+# PLUGINS
+
+Now we introduce the plugins system to be able to add, remove, print, normalize every file/directory into the boilerplate during the installation.
+With this system, we have added the typescript support.
+
+## Plugin definition
+A plugin is defined by 3 files :
+- _prompts.js
+- plugin.js
+- index.js
+
+|   Files      | Type                                                                          |   Description                                                                                                                                                                                                                     |
+| :----------- | :---------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| _prompts.js  | `module.exports = <PromptObject> / module.exports = null`                     | The `<PromptObject>` definition available [here](https://github.com/terkelg/prompts#-prompt-objects). `null` means, the plugin doesn't need prompts to run.                                                                        |
+| plugin.js    | `module.exports = { async apply(value, previousValues) { // Add code here }}` | The `apply` function is the one that apply the refactoring of the boilerplate. `value` is the result of the prompt, `previousValues` is previous responses of previous prompts and it's defined like `{ <plugin_name>: <value> }`. |
+| index.js     | `module.exports = { name: <pluginName>, <promptsOptions>, <apply> }`          | The `pluginName` is a string, `promptsOptions` is imported from `_prompts.js` and apply from `plugin.js`.                                                                                                                         |
+
+## files structure
+
+### _prompts.js
+``` javascript
+module.exports = {
+  type: 'confirm',
+  name: 'value', // Always use value
+  message: 'Using typescript ?',
+  initial: false,
+}
+```
+### plugin.js
+```javascript
+const { green, blue } = require('kleur')
+
+module.exports = {
+  async apply(value, previousValues) {__
+    return new Promise(resolve => {
+      if (value) {
+        console.log('TheCodingMachine React-Native Boilerplate initialized the TYPESCRIPT please wait !',)
+      } else {
+        console.log('TheCodingMachine React-Native Boilerplate initialized the JAVASCRIPT please wait !',)
+      }
+      resolve()
+    })
+  },
+}
+
+```
+### index.js
+```javascript
+const promptsOptions = require('./_prompts');
+const { apply } = require('./plugin');
+
+module.exports = {
+  name: 'typescript',
+  promptsOptions,
+  apply,
+};
+```