📝 add documentations

CONTRIBUTE.md

@@ -0,0 +1,43 @@
+# Contribute
+
+This project is a **template** and a real **playground** project at the **same time**.
+
+## Install
+
+**Requirement**:
+
+- [📗 NodeJS 10+](https://nodejs.org/en/)
+- [🐈 Yarn](https://yarnpkg.com/lang/en/)
+- [📦 npx](https://github.com/npm/npx)
+
+First you'll have to install the root and playground dependencies :
+
+```bash
+$ yarn
+$ cd playground && yarn
+```
+
+## Run things
+
+- `cd playground && yarn dev` for the playground project
+- `yarn storybook:start` for Storybook
+- `yarn cypress:open` for Cypress
+- `yarn jest:start` for Jest
+
+## Test the Github Actions
+
+To ease a bit the Github Workflow debugging, feel free to use **[act](https://github.com/nektos/act)** like so:
+
+```bash
+$ act pull_request
+```
+
+Then create a PR and check the tests on Github.
+
+## Create new template
+
+When the actual files are not good enough for being copied, you must duplicate them using the pattern `FILENAME.template.EXT`. Then update the generator in `.bin/index.js`.
+
+## Update the generator
+
+For the moment, all the generator logic is contained inside the `.bin/index.js`.

README.md

@@ -0,0 +1,104 @@
+# ✅ Antistatique Frontend Development Configuration
+
+> Antistatique truth source and **opinionated** configuration.
+
+*If you're just to lazy to read the README  😏👉 `npx antistatique-frontend`*
+
+**Others resources**
+- [📗 Tests Handbook](doc/tests-handbook.md)
+- [👨‍💻 How to contribute](CONTRIBUTE.md)
+
+Currently **provides**:
+- [🔹 ESLint](https://eslint.org/)
+- [🌈 Prettier](https://eslint.org/) ([only for JavaScript](https://github.com/prettier/prettier/issues/5948))
+- [👔 Stylelint](https://stylelint.io/)
+- [🟦 TypeScript](https://www.typescriptlang.org/)
+- [📚 Storybook](https://storybook.js.org/)
+- [🌳 Cypress](https://www.cypress.io/)
+- [👞 Jest](https://jestjs.io/)
+
+## Table of content
+-  [What it does](#what-it-does)
+-  [How to use](#how-to-use)
+-  [What's inside?](#whats-inside)
+-  [Available scripts](#available-scripts)
+-  [IDE](#ide)
+
+## What it does
+- **Lints** TypeScript and CSS based on the latest standards
+- Manage **pre-commit** git hook to prevent 💩 commits
+- Ensure decent **code quality** at [Antistatique](https://antistatique.net/)
+- Provide dev-ready **testing environement** (+ Github Actions) 
+
+## How to use
+
+**Requirement**:
+
+- [📗 NodeJS 10+](https://nodejs.org/en/)
+- [🐈 Yarn](https://yarnpkg.com/lang/en/)
+- [📦 npx](https://github.com/npm/npx)
+
+First, **create your project** using the dedicated scaffolding tool for your project's technologies. Here are some usefull commands that you can use :
+
+```bash
+$ npx create-react-app my-app --template typescript
+$ npx create-next-app --example with-typescript-types my-app
+```
+
+Then, to get this amazing environment, simply execute the following command and answer the questions:
+
+```bash
+$ npx antistatique-frontend
+```
+
+## What's inside?
+
+```plain
+.
+├── .eslintrc           👉 ESLint configuration
+├── .github
+│   └── workflows       👉 Github Actions Workflow for Tests
+├── .huskyrc            👉 Husky (pre-commit) configuration
+├── .lintstagedrc       👉 lint-staged (for pre-commits) configuration
+├── .storybook 
+│   ├── main.js         👉 Storybook configuration
+│   └── preview.js      👉 Where you load you global CSS
+├── .stylelintrc        👉 Stylelint configuration
+├── .vscode
+│   └── settings.json   👉 Encourage you to format-on-save ESLint
+├── cypress
+│   ├── fixtures
+│   ├── integration     👉 The place to put your E2E website tests
+│   ├── plugins
+│   ├── screenshots
+│   ├── support
+│   ├── tsconfig.json
+│   └── videos
+├── cypress.json        👉 Cypress configuration
+├── jest.config.js      👉 Jest configuration
+├── package.json        👉 Your package.json, with new devDepencies and new scripts
+└── tsconfig.json       👉 TypeScript configuration
+```
+
+## Available scripts
+
+Now that you've get all the good stuff that you need, you have some new NPM scripts at your disposal:
+
+- `yarn lint:js` : Lint your TypeScript files
+- `yarn cypress:open` :  Open Cypress (for TDD)
+- `yarn cypress:run` : Run Cypress tests (website + storybook)
+- `yarn jest:start` : Start Jest server
+- `yarn jest:run` : Run Jest tests
+- `yarn storybook:start` : Start Storybook server
+- `yarn storybook:build` : Build static Storybook
+
+## IDE
+
+The process above has been to ensure consistent quality of our code, regardless of the project. If you want to **make your life easier** and not always have surprises when you try to commit, **make sure that your IDE is properly configured to handle those linters** to highlight (and even fix) warnings and errors when editing a file. It's just a friendly advice.
+
+Some **ressources**:
+- [ESLint for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Stylelint for VSCode](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)
+
+And just in case, ask your colleagues, they surely have great tips for you 😉
+

doc/tests-handbook.md

@@ -0,0 +1,53 @@
+# Tests Handbook
+
+Testing in **not a common practice** in the frontend world. Here is a **simple summary** to make frontend tests understandable regarding the “Antistatique Frontend Development Configuration”.
+
+And remember, **if you want to wee those tests in action,** take a look at the **[playground](https://github.com/antistatique/frontend-development-configuration/tree/master/playground)**.
+
+## What kinds of tests?
+
+Here we have two kinds of tests that makes sense to cover almost every part of your project:
+- **Unit tests** : used to check the absence of a bug in your code. Usually to ensure the proper function of your methods (especially in Functionnal Programming)
+- **E2E tests** : used to test the final product. It simulates the behaviour of your end users by using a scripted browser.
+
+## What to test?
+
+There is the simple rule:
+- You want to test the **behaviour of your UI** 👉 **E2E**
+- You want to test your **method** or a piece of code 👉 **Unit**
+
+## When to test?
+
+There is no magic rule here, but depending of the time and budget of your project, you'll have 2 choices:
+- Short time/budget 👉 Write tests **when you fix bugs** to ensure that they won't happen again
+- Large time/budget 👉 Write tests **at the same time** that your feature's code (TDD) It will save you a lot of time repeating the same action manually.
+
+## Unit test
+
+To create a new unit test: simple create a new file beside the file you want to test with the suffix `.spec`. For example:
+
+```plain
+.
+├── my-script.ts
+└── my-script.spec.ts
+```
+
+Then write your test using mainly only the [Jest API](https://jestjs.io/docs/en/expect).
+
+## E2E
+
+There are two kinds of E2E tests coming with the “Antistatique Frontend Development Configuration”:
+- **Global E2E** : located in `./cypress/integration`, will test the **final product**, aka your app
+- **Component E2E** : will test **components independently**, inside Storybook
+
+To create a new E2E test (always with the `.e2e` suffix):
+- **Global** : add a new test file in `./cypress/integration`, for example `./cypress/integration/contact.e2e.js`
+- **Component** : add a new test file (+ a story if there is not) in your component's directory, for example:
+```plain
+.
+├── Button.tsx            👉 Component
+├── Button.stories.tsx    👉 Storybook stories
+└── Button.e2e.ts         👉 Cypress test using visitStorybook()
+```
+
+⚠️ **Pro tips**: If you want to ease your life, copy the [Blank component](https://github.com/antistatique/frontend-development-configuration/tree/master/playground/src/components/Blank) in your project and use `$ npx generact` to create new components.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antistatique-frontend",
   "version": "1.0.1",
-  "description": "soon",
+  "description": "Antistatique opinionated frontend development configuration (linters, tests,...)",
   "main": ".bin/index.js",
   "bin": {
     "antistatique-frontend": ".bin/index.js"