feat: add storybook

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"]
 }

.storybook/main.js

@@ -0,0 +1,28 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    });
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@components": path.resolve(__dirname, "../src/components"),
+      "@config": path.resolve(__dirname, "../src/config"),
+      "@utils": path.resolve(__dirname, "../src/utils"),
+      "@hooks": path.resolve(__dirname, "../src/hooks"),
+      "@modules": path.resolve(__dirname, "../src/modules"),
+      "@lib": path.resolve(__dirname, "../src/lib"),
+    };
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

package.json

@@ -1,5 +1,6 @@
 {
   "name": "template",
+  "version": "1.4.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,30 +15,40 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:e2e": "start-server-and-test dev http://localhost:3000 e2e",
-    "test:e2e:headless": "start-server-and-test dev http://localhost:3000 e2e:headless"
+    "test:e2e:headless": "start-server-and-test dev http://localhost:3000 e2e:headless",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@dataesr/react-dsfr": "^1.0.2",
     "@gouvfr/dsfr": "^1.3.1",
     "@sentry/nextjs": "^6.17.9",
     "@socialgouv/matomo-next": "^1.2.2",
-    "next": "12.0.9",
+    "next": "12.1.0",
     "next-seo": "^5.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@types/node": "17.0.13",
     "@types/react": "17.0.38",
+    "babel-loader": "^8.2.3",
     "cypress": "^9.4.1",
     "eslint": "8.7.0",
     "eslint-config-next": "12.0.9",
+    "eslint-plugin-storybook": "^0.5.7",
     "jest": "^27.5.1",
     "next-sitemap": "^2.1.14",
     "start-server-and-test": "^1.14.0",
     "typescript": "4.5.5"
-  },
-  "version": "1.4.1"
+  }
 }

src/components/footer/index.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Footer from "./";
+import {
+  footerBodySection,
+  footerBottomSection,
+  footerPartnerSection,
+  footerTopSection,
+} from "@config";
+
+export default {
+  title: "Footer",
+  component: Footer,
+} as ComponentMeta<typeof Footer>;
+
+const Template: ComponentStory<typeof Footer> = args => <Footer {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  bodySection: footerBodySection,
+  bottomSection: footerBottomSection,
+  partnerSection: footerPartnerSection,
+  topSection: footerTopSection,
+};
+
+export const TopSection = Template.bind({});
+TopSection.args = {
+  topSection: footerTopSection,
+};
+
+export const BodySection = Template.bind({});
+BodySection.args = {
+  bodySection: footerBodySection,
+};
+
+export const PartnerSection = Template.bind({});
+PartnerSection.args = {
+  partnerSection: footerPartnerSection,
+};
+
+export const BottomSection = Template.bind({});
+BottomSection.args = {
+  bottomSection: footerBottomSection,
+};

src/components/header/index.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Header from "./";
+import { headerBody, headerNav } from "@config";
+
+export default {
+  title: "Header",
+  component: Header,
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = args => <Header {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  bodySection: headerBody,
+  navSection: headerNav,
+};
+
+export const Body = Template.bind({});
+Body.args = {
+  bodySection: headerBody,
+};
+
+export const Nav = Template.bind({});
+Nav.args = {
+  navSection: headerNav,
+};

src/components/layout/index.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Layout from "./";
+import {
+  headerBody,
+  headerNav,
+  footerBodySection,
+  footerBottomSection,
+  footerPartnerSection,
+  footerTopSection,
+} from "@config";
+
+export default {
+  title: "Layout",
+  component: Layout,
+} as ComponentMeta<typeof Layout>;
+
+const Template: ComponentStory<typeof Layout> = args => <Layout {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <p>Hello World</p>,
+  headerProps: { bodySection: headerBody, navSection: headerNav },
+  footerProps: {
+    bodySection: footerBodySection,
+    bottomSection: footerBottomSection,
+    partnerSection: footerPartnerSection,
+    topSection: footerTopSection,
+  },
+};

src/components/layout.tsx → src/components/layout/index.tsx

@@ -1,8 +1,8 @@
 import { Footer, Header } from "@components";
 
 import { Container } from "@dataesr/react-dsfr";
-import { FooterProps } from "./footer/type";
-import { HeaderProps } from "./header/type";
+import { FooterProps } from "../footer/type";
+import { HeaderProps } from "../header/type";
 
 type Props = {
   children: React.ReactNode;