Feat/guidelines ds

.gitignore

@@ -30,7 +30,8 @@ tmp/
 .vs
 
 # Ignore icons pug file generate by Gulp task
-storybook/design-system/src/pages/style/icons/templates/*.pug
+storybook/design-system/src/pages/guidelines/icones/templates/*.pug
+storybook/design-system/src/pages/get-started/contributors/templates/contributors-page.pug
 
 # Ignore package-lock.json / yarn.lock in dependencies
 packages/**/package-lock.json

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to @axa-fr/react-toolkit
 
-First, ensure you have Node.js < 12 and the [latest `npm`](https://docs.npmjs.com/).
+## Installation
 
 To get started with the repository:
 
@@ -10,42 +10,30 @@ cd react-toolkit
 npm install
 ```
 
-A post-install action is thrown. This action first install dependencies with ```lerna bootstrap``` & then build all packages with a custom command gulp.
+A post-install action is thrown. This action first install dependencies with `lerna bootstrap` & then build all packages with a custom command gulp.
 
 At this point you are ready to contribute.
 
 ## Additional installations
 
 This repository contains some projects used to display, explain components built previously.
 
-* *examples/demo* : a project using some components & react-oidc library
-* *storybook* :
-  * *design-system*: a design system web app rendering & exposing code to use components
-  * *storybook*: a storybook app to develop in isolated mode
-  * *styles*: part of design sytem & use as an explaination page of toolkit style
-
-
+```bash
+├───storybook
+│   ├───design-system : a design system web app rendering & exposing code to use components
+│   ├───storybook : a storybook app to develop in isolated mode
+```
 
 If you want to use these projects, you must:
 
-```sh
-cd examples/demo
-npm i
-```
-
 ```sh
 cd storybook/design-system
-npm i
+npm ci
 ```
 
 ```sh
 cd storybook/storybook
-npm i
-```
-
-```sh
-cd storybook/styles
-npm i
+npm ci
 ```
 
 ## How to work on a component
@@ -56,39 +44,28 @@ Into a terminal, to start to develop a component you can run
 npm run dev
 ```
 
-Or,if you want to run your component in watch mode, execting one of command below
+Or, if you want to run your component in watch mode, execting one of command below
 
 ```sh
 # If your component is in js
 npm run dev:js -- --scope=@axa-fr/react-toolkit-status
+
 # If your component is in TypeScript
 npm run dev:ts -- --scope=@axa-fr/react-toolkit-action
 ```
 
-*scope* refer to package name of your component you are working on.
+_scope_ refer to package name of your component you are working on.
 
 And then if you want to work on it, in isolation mode, you can run storybook
 
 ```sh
 npm run storybook
 ```
 
-After all this, if your development affect css, you can run
-
-```sh
-npx gulp all
-```
-
-to regenerate css
+After all this, if your development affect css, you can run `npm run style` to regenerate css
 
 ## Other usefull commands
 
-### Launch demo app
-
-```sh
-npm start
-```
-
 ### Run unit tests
 
 ```sh
@@ -99,9 +76,9 @@ By default, `npm test` also runs the linter.
 You can skip this by calling `jest` directly:
 
 ```sh
-$ npx jest
-$ npx jest --watch
-$ npx jest --config jest.config.json
+$ npm jest
+$ npm jest --watch
+$ npm jest --config jest.config.json
 # etc
 ```
 
@@ -111,8 +88,6 @@ $ npx jest --config jest.config.json
 npm test -- --coverage
 ```
 
-
-
 ## Pull Request
 
 Please respect the following [PULL_REQUEST_TEMPLATE.md](./PULL_REQUEST_TEMPLATE.md)

package.json

@@ -15,8 +15,6 @@
     "storybook:build": "npm -C ./storybook/storybook run storybook:build",
     "design": "npm -C ./storybook/design-system run start",
     "design:build": "npm -C ./storybook/design-system run build",
-    "css": "npm -C ./storybook/styles run css",
-    "css:build": "npm -C ./storybook/styles run css:build",
     "test": "jest --config jest.config.json",
     "cover": "jest --no-cache --config ./jest.config.json --coverage",
     "lint": "npm run lint:js && npm run lint:ts **/*.ts",

packages/Form/filter/src/filter.scss

@@ -70,6 +70,7 @@
         margin-right: 0.3125rem;
         color: $color-filter-selected-glyphicon-close;
         cursor: pointer;
+        width: 22px;
       }
     }
   }

packages/Modal/default/src/modal.scss

@@ -36,7 +36,7 @@
     bottom: 0;
     left: 0;
     z-index: 1040;
-    background-color: $color;
+    background-color: $color-axa;
 
     &.show {
       opacity: 0.5;

packages/alert/src/alert.scss

@@ -86,6 +86,7 @@ $typesLite: (
         top: 50%;
         margin-top: -50%;
         display: block;
+        width: 22px;
       }
     }
 

packages/badge/src/badge.scss

@@ -22,5 +22,8 @@ $types: (
     display: inline-block;
     min-width: 38px;
     padding-top: 0.4rem;
+    .glyphicon {
+      width: 22px;
+    }
   }
 }

storybook/design-system/gulpfile.babel.js/copyIcons.js

@@ -7,7 +7,7 @@ import config from './config';
 
 const { pathSrc, pathDest, pathFontToolkit } = config;
 
-const pathIconPugTemplate = path.join(`${pathSrc}/pages/style/icons/`, 'templates');
+const pathIconPugTemplate = path.join(`${pathSrc}/pages/guidelines/icones/`, 'templates');
 
 const copyIcons = () => src(`${pathFontToolkit}/*.svg`).pipe(dest(`${pathDest}/iconsToolkit`));
 
@@ -40,7 +40,7 @@ ul.icons-list\n`;
     contentFile += `    span.icons-list__item-name ${svgFile} \n`;
   });
 
-  fs.writeFileSync(`${pathSrc}/pages/style/icons/templates/icons-page.pug`, contentFile);
+  fs.writeFileSync(`${pathIconPugTemplate}/icons-page.pug`, contentFile);
 };
 
 export default copyIcons;

storybook/design-system/gulpfile.babel.js/generateContributors.js

@@ -0,0 +1,48 @@
+/* eslint-disable arrow-parens */
+import path from 'path';
+import fs from 'fs';
+import config from './config';
+
+const { pathSrc } = config;
+
+const pathContributorsPugTemplate = path.join(
+  `${pathSrc}/pages/get-started/contributors/`,
+  'templates',
+);
+
+const getContributors = async () => {
+  const response = await fetch(
+    'https://api.github.com/repos/AxaGuilDEv/react-toolkit/stats/contributors',
+  );
+  const responseJson = await response.json();
+  return responseJson;
+};
+
+const generateContributors = async () => {
+  const contributors = await getContributors();
+  const reservedContributors = contributors.reverse();
+  let contentFile = '.tk-contributors\n';
+
+  reservedContributors.forEach((contributor, index) => {
+    const { author, total, weeks } = contributor;
+    const { avatar_url: avatarUrl, html_url: htmlUrl, login } = author;
+    const additions = weeks.map(({ a }) => a).reduce((acc, curr) => acc + curr);
+    const deletions = weeks.map(({ d }) => d).reduce((acc, curr) => acc + curr);
+
+    contentFile += '  .tk-contributor\n';
+    contentFile += `    a.tk-contributor__link(href="${htmlUrl}" title="${login}") ${login}\n`;
+    contentFile += `    img.tk-contributor__avatar(src="${avatarUrl}" loading="lazy")\n`;
+    contentFile += `    span.tk-contributor__badge #${index + 1}\n`;
+    contentFile += `    span.tk-contributor__commits Commits : ${total}\n`;
+    contentFile += `    span.tk-contributor__additions Additions : ${additions} ++\n`;
+    contentFile += `    span.tk-contributor__deletions Deletions : ${deletions} --\n`;
+  });
+
+  if (!fs.existsSync(pathContributorsPugTemplate)) {
+    fs.mkdirSync(pathContributorsPugTemplate, { recursive: true });
+  }
+
+  fs.writeFileSync(`${pathContributorsPugTemplate}/contributors-page.pug`, contentFile);
+};
+
+export default generateContributors;

storybook/design-system/gulpfile.babel.js/generateGithubInfos.js

@@ -0,0 +1,20 @@
+/* eslint-disable arrow-parens */
+import fs from 'fs';
+import config from './config';
+
+const { pathSrc } = config;
+
+const files = ['CHANGELOG', 'CONTRIBUTING', 'CODE_OF_CONDUCT'];
+const components = ['changelog', 'how-to-contribute', 'code-of-conduct'];
+
+const generateGithubInfos = async () => {
+  files.forEach((file, index) => {
+    const content = fs.readFileSync(`../../${file}.md`, 'utf8');
+    fs.writeFileSync(
+      `${pathSrc}/pages/get-started/${components[index]}/markdown/content.md`,
+      content,
+    );
+  });
+};
+
+export default generateGithubInfos;

storybook/design-system/gulpfile.babel.js/index.js

@@ -8,19 +8,34 @@ import copyAssets, { copyImages } from './copy';
 import sprite from './sprite';
 import serve from './serve';
 import copyIcons, { generatePugIcons } from './copyIcons';
+import generateGithubInfos from './generateGithubInfos';
+import generateContributors from './generateContributors';
 
 const reloadImages = series(cleanImages, copyImages);
 const build = series(
   clean,
   copyIcons,
+  generateGithubInfos,
   generatePugIcons,
   jsProd,
   sassProd,
   sprite,
   pugProd,
   copyAssets,
 );
-const dev = series(clean, copyIcons, generatePugIcons, jsDev, sassDev, pugDev, copyAssets, serve);
+
+const dev = series(
+  clean,
+  generateContributors,
+  copyIcons,
+  generateGithubInfos,
+  generatePugIcons,
+  jsDev,
+  sassDev,
+  pugDev,
+  copyAssets,
+  serve,
+);
 
 export default build;
 export {

storybook/design-system/gulpfile.babel.js/pug.js

@@ -47,8 +47,8 @@ const pugTsk = (baseurl = '') => {
 
   return src([
     `${pathSrc}/index.pug`,
-    `${pathSrc}/pages/**/index.pug`,
     `${pathSrc}/pages/**/iframe-*.pug`,
+    `${pathSrc}/pages/**/index.pug`,
   ])
     .pipe(plumber())
     .pipe(