Migrate to Storybook 7 (#655)

Author: nowyDEV

.eslintrc.js

@@ -108,6 +108,41 @@ module.exports = {
             format: ["PascalCase", "UPPER_CASE"],
           },
         ],
+        "@typescript-eslint/ban-types": [
+          "error",
+          {
+            types: {
+              "{}": false,
+            },
+            extendDefaults: true,
+          },
+        ],
+      },
+    },
+    {
+      // Declare an override that applies to TypeScript files only
+      files: [".storybook/**/*.{ts,tsx}"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        // The "project" path is resolved relative to parserOptions.tsconfigRootDir.
+        // Your local .eslintrc.js must specify that parserOptions.tsconfigRootDir=__dirname.
+        tsconfigRootDir: __dirname + "/.storybook",
+        project: ["./tsconfig.json"],
+
+        // Allow parsing of newer ECMAScript constructs used in TypeScript source code.  Although tsconfig.json
+        // may allow only a small subset of ES2018 features, this liberal setting ensures that ESLint will correctly
+        // parse whatever is encountered.
+        ecmaVersion: "latest",
+
+        sourceType: "module",
+      },
+    },
+    {
+      files: ["**/*.stories.tsx"],
+      rules: {
+        "react-hooks/rules-of-hooks": "off",
+        "no-alert": "off",
+        "unicorn/consistent-function-scoping": "off",
       },
     },
     {

.github/workflows/codeql-analysis.yml

@@ -18,7 +18,7 @@ on:
     # The branches below must be a subset of the branches above
     branches: [master]
   schedule:
-    - cron: '20 5 * * 2'
+    - cron: "20 5 * * 2"
 
 jobs:
   analyze:
@@ -70,4 +70,4 @@ jobs:
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v2
         with:
-          category: '/language:${{matrix.language}}'
+          category: "/language:${{matrix.language}}"

.github/workflows/reviewdog.yml

@@ -26,7 +26,7 @@ jobs:
           reporter: github-pr-review
           level: warning
           fail_on_error: false
-          prettier_flags: '**/*.+(js|json|ts|tsx|md|mdx|yml)'
+          prettier_flags: "**/*.+(js|json|ts|tsx|md|mdx|yml)"
 
       - name: ESLint
         uses: reviewdog/action-eslint@v1
@@ -46,7 +46,7 @@ jobs:
           filter_mode: file
           level: warning
           fail_on_error: false
-          stylelint_input: '**/*.+(ts|tsx)'
+          stylelint_input: "**/*.+(ts|tsx)"
 
       - name: TypeScript
         uses: EPMatt/reviewdog-action-tsc@v1

.storybook/global.css

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.@(story|stories).@(ts|tsx)"],
+  addons: [
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        backgrounds: false,
+      },
+    },
+    "@storybook/addon-mdx-gfm",
+  ],
+
+  staticDirs: ["../public"],
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: {
+      legacyRootApi: true,
+    },
+  },
+
+  core: {
+    disableTelemetry: true,
+  },
+
+  docs: {
+    autodocs: "tag",
+    defaultName: "Docs",
+  },
+};
+
+export default config;

.storybook/main.js

@@ -0,0 +1,12 @@
+<meta charset="utf-8" />
+<link rel="icon" href="favicon.ico" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="theme-color" content="#000000" />
+<meta name="description" content="Storybook of General Nordcloud UI library" />
+<link rel="apple-touch-icon" href="logo192.png" />
+<!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+<link rel="manifest" href="manifest.json" />
+<title>General Nordcloud UI Storybook</title>

.storybook/main.ts

@@ -4,5 +4,5 @@ import NCTheme from "./theme";
 addons.setConfig({
   theme: NCTheme,
   showNav: true,
-  showPanel: false,
+  showPanel: true,
 });

.storybook/manager-head.html

@@ -0,0 +1,9 @@
+<style>
+  #story-root {
+    padding: 0 2.5rem;
+  }
+
+  .sbdocs.sbdocs-content {
+    max-width: 1200px;
+  }
+</style>

.storybook/manager.js .storybook/manager.ts

@@ -0,0 +1,51 @@
+import { DocsPage, DocsContainer } from "@storybook/addon-docs";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { Preview } from "@storybook/react";
+import { GnuiContainer } from "../src/components/container";
+import { SetGlobalStyle } from "../src/theme/globals";
+
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS, // newViewports would be an ViewportMap. (see below for examples)
+      defaultViewport: "desktop",
+    },
+
+    options: {
+      sidebar: {
+        showRoots: true,
+      },
+      storySort: {
+        order: [
+          "Foundation",
+          ["Grid", "Colors", "Icons", "Spacing"],
+          "Typography",
+          "Components",
+          "Forms",
+          "Patterns",
+          "Pages",
+          "Widgets",
+        ],
+      },
+    },
+    viewMode: "docs",
+    docs: {
+      container: DocsContainer,
+      page: DocsPage,
+      canvas: {
+        layout: "padded",
+      },
+    },
+  },
+
+  decorators: [
+    (storyFn) => (
+      <GnuiContainer>
+        <SetGlobalStyle />
+        {storyFn()}
+      </GnuiContainer>
+    ),
+  ],
+};
+
+export default preview;

.storybook/preview-head.html

@@ -3,6 +3,10 @@ import logo from "../assets/nclogo.png";
 
 export default create({
   base: "light",
+  brandTitle: "Storybook of General Nordcloud UI library",
+  brandUrl: "https://nordcloud.com/",
+  brandImage: logo,
+  brandTarget: "_self",
 
   colorPrimary: "#161632",
   colorSecondary: "#ff2837",
@@ -31,8 +35,4 @@ export default create({
   inputBorder: "silver",
   inputTextColor: "black",
   inputBorderRadius: 4,
-
-  brandTitle: "GNUI",
-
-  brandImage: logo,
 });

.storybook/preview.js

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts", "**/*.tsx"]
+}

.storybook/preview.tsx

@@ -12,7 +12,7 @@ frontend:
   artifacts:
     baseDirectory: storybook-static
     files:
-      - '**/*'
+      - "**/*"
   cache:
     paths:
       - node_modules/**/*

.storybook/theme.js

@@ -4,11 +4,13 @@
   "project": ["src/**/*.{ts,tsx,mdx}!", ".storybook/**/*.js"],
   "ignoreDependencies": [
     // False-positives
-    "react-copy-to-clipboard",
+    "@typescript-eslint/parser",
+    "@storybook/addon-docs",
+    "@storybook/addon-viewport",
+    "@storybook/blocks",
     "lodash",
     "lodash.clonedeep",
     "@types/lodash.clonedeep",
-    "storybook",
     "webpack",
     // Can be listed explicitly in the future
     "@jest/types",