# Backoffice

1. [Presentation](#Presentation)
2. [Git](#Git)
3. [Installation](#Installation)
4. [Librairie](#Librairie)
5. [Composant](#Composant)

## Presentation
Un backoffice est (*pour l'instant*) une application web développé en react. Chaque équipe projet dispose ou disposera de son propre backoffice.
L'application a été pensé pour être modulaire et réutilisable.
Ils sont mis en place en place en partie grâce a une librarie développer en interne: [Logistique-lib](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib).
Pour l'utiliser il faut avoir installé sur son poste au préalable, [NodeJS](https://nodejs.org/en/) et de preferences [Yarn](https://yarnpkg.com/lang/en/) qui est le **package manager** utilisé a CDISCOUNT.

Le developpement des différent écrans se fait dans un repo [multipackage](https://lerna.js.org/). Ce qui nous permet de rendre chaque écran indépendant et plus facile a maintenir.

## Git
Git est l'outil utilisé pour le versionning à CDISCOUNT.

L'espace de travail (_workspace_) est l'espace local qui contient toutes les modifications en cours d'apport.
Lorsqu'un `git add` est fait sur une modification du code, celui-ci est ajouté à la zone de transit (_index_) qui servira de base pour le prochain commit.
Le dépôt local (_local repository_) est un sous-répertoire nommé .git qui contient tous les fichiers nécessaires au référentiel.
Branches typiques : `master`, `feature/x`, `fix/y`.
Le dépôt distant (_remote repository_) contient les versions de votre projet qui sont partagées sur un serveur. Par défaut "origin".
La remise (_stash_) est un espace ou remiser des modifications pendant que vous travaillez sur autre chose.


**Workflow GIT**

En React chaque modification se fait sur une branche différente de Master, et le code poussé pour chaque branche qui sera soumise a une PR se doit d'être le plus petit et le plus lisible possible pour faciliter la review.
Une feature / hotfix etc... peut être fait sur plusieurs PR, ce qui nous permet d'avoir une meilleur visibilité sur le code scopé de chaque PR.


**Ressources**
* [Tester Git de manière graphique](https://onlywei.github.io/explain-git-with-d3/)
* [Générer un .gitignore pour son projet](https://www.gitignore.io/)

## Installation
Une fois le repository ou se trouve vos écrans cloné, naviguer dans le dossier.

# structure du dossier
root
├── packages
│   └── package1
    └── package2
├──package.json
├──yarn.lock
├──.eslintrc
├──.editorconfig
├──node_modules
├──rollup.config.js

Lancer la commande *yarn* pour installer vos dépendances.

$ yarn 

Le **package.json** vous met a disposition plusieurs info sur votre projet :
- les commandes que vous pouvez lancer
- les dépendances utilisées dans votre projet
- la version actuelle

### Exemple d'un package.json

{
    "test:generate-storybook": "cross-env SKIP_PREFLIGHT_CHECK=true rescripts test --json --outputFile=results.json || true",
    "build-storybook": "build-storybook",
    "bootstrap:local": "lerna bootstrap --concurrency 1",
    "build": "lerna exec --parallel -- rollup -c ../../rollup.config.js --sourcemap",
    "build:dev": "lerna exec --parallel -- rollup -c ../../rollup.config.js --sourcemap -w",
    "commit": "git-cz",
    "docs": "lerna exec -- \\\"../../node_modules/.bin/documentation\\\" readme -s=API src/",
    "format": "prettier --write \"packages/**/*.js\"",
    "lint": "eslint --cache .",
    "pretest": "npm run build",
    "publish": "lerna exec -- ../../scripts/publish.sh",
    "storybook": "start-storybook -p 9009 -c .storybook -s .storybook/assets",
    "storybook:build": "build-storybook -o build -s .storybook/assets",
    "test": "cross-env SKIP_PREFLIGHT_CHECK=true rescripts test --env=jsdom --coverage --coverageReporters cobertura --coverageReporters lcov --watchAll=false",
    "test:watch": "cross-env SKIP_PREFLIGHT_CHECK=true rescripts test --watch",
    "test:terminal": "cross-env SKIP_PREFLIGHT_CHECK=true rescripts test --coverage"
}

Lors de votre dévellopements le script `test:watch` doit être systematiquement lancé. il permet de verifier que vos tests sont toujours a jour et lorsque des changement sont fait, des notifications seront faites via le terminal.

$ yarn test:watch

## Librairie
Les composant UI réutilisable sont disponible dans le repo [Logistique-lib](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib).
Pour installer un composant dans votre application il suffit de faire

$ yarn add @cdiscount/logistique-layout
# ou si vous voulez l'utiliser en peer dependencie
$ yarn add --peer @cdiscount/logistique-layout

Chaque composant est normalement documenté. La documentation se trouve généralement dans le dossier ou est situé le composant dans le fichier `README.md`.

## Composant
- [CLI](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2Fcli&version=GBmaster)

$ yarn add -g @cdiscount/logistique-cli

Cette librairie permet d'initialiser un template de backoffice, de crée des librairie etc...

# une fois installer
$ cds generate backoffice

- [Core](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2FCore&version=GBmaster)

$ yarn add @cdiscount/logistique-core

Composant `Principal` de l'application qui implémente [redux](https://redux.js.org/).

import Core from '@cdiscount/logistique-core';
import React from 'react';

const MyApp = () => (
<Core
  reducers={() => {}}
  middlewares={[...]}
  preloadedState={{...}} // state initial
  }>
 <MyApplication />
</Core>
)

A utiliser si dans votre application il y a une utilisation de redux.
Ce composant n'est à utiliser qu'une seule fois au sein de l'application.
- [hooks](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2Fhooks&version=GBmaster)

$ yarn add @cdiscount/logistique-hooks

Custom [hooks](https://reactjs.org/docs/hooks-intro.html) à utiliser au sein d'une applications.
- [Layout](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2FLayout&version=GBmaster&_a=contents)

$ yarn add @cdiscount/logistique-layout

Composant pour mettre en place la dispositions des composant sans avoir a le configurer a la main.
Ce composant retour 3 sous composant, `Content`, `Header`, `Footer`.

import Layout from '@cdiscount/logistique-layout';
import React from 'react';

const AppLayout = () => (
<Layout>
 {({ Content, Header, Footer }) => (
  <Fragment>
   <Header {...props} />
   <Content {...props} component={MyComponent} />
   <Footer {...props} />
  <Fragment />
 )}
</Layout>
)

- [Modal](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2FModal&version=GBmaster&_a=contents)

$ yarn add @cdiscount/logistique-modal

Composant pour faire des modal se basant sur [React.Portal](https://reactjs.org/docs/portals.html)

import Layout from '@cdiscount/logistique-modal';
import React from 'react';

const MyModal = () => (
 <Modal
  container={document.getElementById('modal-container')}
  actions={[
   {label: 'Ajouter', action: Function},
   {label: 'Annuler', action: Function}
  ]}
  isOpen={true|false}
  title='Ajouter un produit'>
  <MyContent />
 </Modal>
)

- [Navigation](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2FNavigation&version=GBmaster&_a=contents)

$ yarn add @cdiscount/logistique-navigation

Composant pour gerer la navigation

import Navigation from '@cdiscount/logistique-navigation';
import React from 'react';

const App = () => (
  <Navigation navigation=[{...}] />
)

- [Search](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2FSearch&version=GBmaster&_a=contents)

$ yarn add @cdiscount/logistique-search

Composant Recherche customisable.

import Search from '@cdiscount/logistique-search';
import React from 'react';

const SearchComponent = () => (
<Search
 handleClear={clearFunction}
 handleSearch={searchFunction}
 handleSave={saveFunction}
 onChange={onChange}
 useSave={useSave}
 config={{
  main: {
    inputs: [{
      label: 'Storybook',
      defaultValue: null,
      isMultiline: false,
      id: 'storybook',
      key: 'storybook_table',
    },{
      label: 'Another one',
      defaultValue: 'Bite to dust',
      isMultiline: false,
      id: 'queen',
      key: 'queen_table',
    }],
    selects: [{
      defaultValue: null,
      isMulti: true,
      placeholder: null,
      options,
      id: 'consoles',
      label: 'consoles',
      key: 'select_consoles',
    }],
  },
}}
/>
)

- [Table](http://tfs.cdbdx.biz:8080/tfs/DefaultCollection/Logistique/_git/logistique-lib?path=%2Fpackages%2FTable&version=GBmaster&_a=contents)

$ yarn add @cdiscount/logistique-table

Composant pour faire un tableau de donnée

import Table from '@cdiscount/logistique-table';
import React from 'react';

const MyDataGrid = () => (
  <Table
    {...props}
    actions={actions}
    isLoading={isLoading}
    rowCount={rows.length}
    selected={selecteds}
    rows={rows}
    handleCellClick={Function}
    handleSelectAllClick={Function}
    bodyActions={bodyActions}
    rowsPerPage={rowsPerPage}
    bottomPagination={!isLoading}
    page={currentPage}
    onChangePage={Function}
    onChangeRowsPerPage={Function}
  />
)