Add Storybook boilerplate to design-system package (#1660)

.gitignore

@@ -104,3 +104,6 @@ seed-users.json
 *.tfstate.*
 *.secrets.tfvars
 *.pem
+
+# Workspace-specific
+/packages/hash/design-system/storybook-static

.markdownlintignore

@@ -120,3 +120,6 @@ seed-users.json
 *.tfstate.*
 *.secrets.tfvars
 *.pem
+
+# Workspace-specific
+/packages/hash/design-system/storybook-static

.prettierignore

@@ -133,3 +133,6 @@ seed-users.json
 *.tfstate.*
 *.secrets.tfvars
 *.pem
+
+# Workspace-specific
+/packages/hash/design-system/storybook-static

libs/javascript/@local/eslint-config/generate-ignore-patterns.cjs

@@ -25,7 +25,7 @@ module.exports = (workspaceDirPath) => {
     );
   }
 
-  const workspaceDirPrefix = `${path
+  const workspaceDirPrefix = `/${path
     .relative(monorepoRoot, workspaceDirPath)
     .replace(/\\/g, "/")}/`;
 

libs/javascript/@local/eslint-config/legacy-base-eslintrc-to-refactor.cjs

@@ -296,6 +296,15 @@ module.exports = {
         ],
       },
     },
+    {
+      files: [".storybook/*", "**/*.stories.{j,t}s{x,}"],
+      rules: {
+        "import/no-extraneous-dependencies": [
+          "error",
+          { devDependencies: true },
+        ],
+      },
+    },
     {
       files: ["*.config.{c,m,}{j,t}s", "*.d.ts", "*rc.{c,m,}js"],
       rules: {

packages/hash/design-system/.eslintrc.cjs

@@ -1,6 +1,10 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   ...require("@local/eslint-config/generate-workspace-config.cjs")(__dirname),
+  extends: [
+    "plugin:storybook/recommended",
+    "@local/eslint-config/legacy-base-eslintrc-to-refactor.cjs",
+  ],
   rules: {
     ...require("@local/eslint-config/temporarily-disable-rules.cjs")([
       /* 2022-11-29:  14 */ "@typescript-eslint/no-unsafe-assignment",
@@ -18,5 +22,17 @@ module.exports = {
         ],
       },
     ],
+    "storybook/no-uninstalled-addons": [
+      "error",
+      { packageJsonLocation: `${__dirname}/package.json` },
+    ],
   },
+  overrides: [
+    {
+      files: ["*.stories.{j,t}s{x,}"],
+      rules: {
+        "import/no-default-export": "off",
+      },
+    },
+  ],
 };

packages/hash/design-system/.storybook/main.js

@@ -0,0 +1,18 @@
+module.exports = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    docsPage: true,
+  },
+};

packages/hash/design-system/.storybook/preview.js

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

packages/hash/design-system/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

packages/hash/design-system/package.json

@@ -7,9 +7,11 @@
   "main": "./src/ui.ts",
   "types": "./src/ui.ts",
   "scripts": {
+    "build-storybook": "storybook build",
     "fix:eslint": "eslint --fix .",
     "lint:eslint": "eslint --report-unused-disable-directives .",
     "lint:tsc": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
     "test": "jest"
   },
   "dependencies": {
@@ -22,11 +24,22 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "7.20.2",
+    "@babel/preset-typescript": "7.18.6",
     "@local/eslint-config": "0.0.0-private",
     "@local/tsconfig": "0.0.0-private",
+    "@storybook/addon-essentials": "^7.0.0-beta.6",
+    "@storybook/addon-interactions": "^7.0.0-beta.6",
+    "@storybook/addon-links": "^7.0.0-beta.6",
+    "@storybook/blocks": "^7.0.0-beta.6",
+    "@storybook/react": "^7.0.0-beta.6",
+    "@storybook/react-webpack5": "^7.0.0-beta.6",
+    "@storybook/testing-library": "^0.0.14-next.1",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
     "eslint": "8.29.0",
+    "eslint-plugin-storybook": "0.6.8",
+    "storybook": "^7.0.0-beta.6",
     "typescript": "4.9.4"
   },
   "peerDependencies": {