Merge pull request #18 from Coreoz/dev/storybook

ADD Storybook on Front template

Author: amanteaux

templates/front/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'airbnb-typescript',
     'plugin:compat/recommended',
     'plugin:jsx-a11y/recommended',
+    'plugin:storybook/recommended'
     // à décommenter pour voir l'usage des fonctions un peu exotiques
     // => par contre on ne peut pas laisser ce plugin tout le temps
     // => car il ne tient ni compte des polyfill, ni des navigateurs configurés dans browserslist
@@ -79,14 +80,14 @@ module.exports = {
       'functions': false,
     }],
     // Uniformize TS type members delimiter (comma instead of semicolon)
-    "@typescript-eslint/member-delimiter-style": ["error", {
-      "multiline": {
-        "delimiter": "comma",
-        "requireLast": true
+    '@typescript-eslint/member-delimiter-style': ['error', {
+      'multiline': {
+        'delimiter': 'comma',
+        'requireLast': true
       },
-      "singleline": {
-        "delimiter": "comma",
-        "requireLast": false
+      'singleline': {
+        'delimiter': 'comma',
+        'requireLast': false
       }
     }],
     // Force explicit type definition

templates/front/.storybook/main.ts

@@ -0,0 +1,31 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+// getAbsolutePath use internal types of storybook : "FrameworkName"
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

templates/front/.storybook/preview.ts

@@ -0,0 +1,26 @@
+import type { Preview } from '@storybook/react';
+
+// Import du CSS de l'application
+import '../assets/scss/app.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  // decorators: [
+  //   (Story) => {
+  //     // Ajouter ici un décorateur générique si besoin
+  //     return (
+  //       <Story />
+  //     )
+  //   }
+  // ],
+};
+
+export default preview;

templates/front/README.md

@@ -1,4 +1,4 @@
-Plume admin React TS
+Plume React TS
 ====================
 
 Installation
@@ -89,3 +89,4 @@ Some key points about the technologies used in the project :
     - [MUI](https://mui.com/)
     - [validator.js](https://github.com/validatorjs/validator.js)
     - [browser-user-session](https://github.com/Coreoz/browser-user-session)
+- Frontend workshop for UI components and pages in isolation is perform with [Storybook](https://storybook.js.org/docs/react/get-started/install/)

templates/front/package.json

@@ -18,13 +18,24 @@
   },
   "devDependencies": {
     "@sayari/eslint-plugin": "^0.0.1-rc.4",
+    "@storybook/addon-docs": "^7.4.6",
+    "@storybook/addon-essentials": "7.4.6",
+    "@storybook/addon-interactions": "7.4.6",
+    "@storybook/addon-links": "7.4.6",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/blocks": "7.4.6",
+    "@storybook/builder-vite": "^7.4.6",
+    "@storybook/react": "7.4.6",
+    "@storybook/react-vite": "7.4.6",
+    "@storybook/testing-library": "0.2.2",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^29.1.2",
     "@types/node": "^20.3.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.19",
     "@types/react-router-dom": "^5.3.3",
+    "@types/storybook__react": "^5.2.1",
     "@types/validator": "^13.7.7",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
@@ -41,6 +52,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-typescript-compat": "^0.3.1",
     "fetch-mock": "^9.11.0",
     "fetch-mock-jest": "^1.5.1",
@@ -52,6 +64,8 @@
     "postcss": "^8.4.18",
     "react-router": "^6.4.2",
     "sass": "^1.55.0",
+    "storybook": "7.4.6",
+    "storybook-addon-react-router-v6": "^2.0.7",
     "stylelint": "^14.13.0",
     "stylelint-config-recommended-scss": "^7.0.0",
     "stylelint-scss": "^4.3.0",
@@ -85,7 +99,9 @@
     "typescript": "tsc --noEmit",
     "test": "jest --config jest.config.js",
     "coverage": "jest --config jest.config.js --coverage --watchAll=false",
-    "check-scss-types": "typed-scss-modules 'src/**/*.scss' -l"
+    "check-scss-types": "typed-scss-modules 'src/**/*.scss' -l",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "packageManager": "yarn@3.6.4",
   "engines": {

templates/front/src/stories/README.md

@@ -0,0 +1,11 @@
+Storybook
+====================
+
+Official Documentation
+----------------------
+[Documentation](https://storybook.js.org/docs/react/writing-stories/introduction)
+
+
+To launch Storybook, use the following command: `yarn storybook`
+
+This command starts a local server and opens Storybook in your default web browser.

templates/front/src/stories/components/LocaleSelector.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LocaleSelector from '@components/theme/LocaleSelector';
+import { Locale } from '@lib/locale-resolver/LocaleResolver';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof LocaleSelector> = {
+  title: 'Components/LocaleSelector',
+  component: LocaleSelector,
+  parameters: {
+    // Optional parameter to center the component in the Canvas.
+    // More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry:
+  // https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    availableLocales: { control: 'array' },
+    onLocaleSelected: { action: 'onLocaleSelected' },
+    currentLocale: { control: 'text' },
+  },
+} satisfies Meta<typeof LocaleSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LOCAL_FR: Locale = { code: 'fr', name: 'Français' } as Locale;
+const LOCAL_EN: Locale = { code: 'en', name: 'English' } as Locale;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Test: Story = {
+  args: {
+    availableLocales: [LOCAL_FR, LOCAL_EN],
+    onLocaleSelected: () => {
+      // We can't use action here because it's a sample component
+      // eslint-disable-next-line no-console
+      console.log('btn click');
+    },
+    currentLocale: LOCAL_FR,
+  },
+};

templates/front/tsconfig.eslint.json

@@ -6,6 +6,7 @@
     "tests",
     "vite.config.ts",
     "di-transformer-adapter.ts",
-    "typed-scss-modules.config.ts"
+    "typed-scss-modules.config.ts",
+    ".storybook/*.ts"
   ]
 }