Merge pull request #302 from ably/add-storybook

[WEB-3364] Storybook migration: Add Storybook

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     "plugin:react/recommended",
     "prettier",
     "plugin:cypress/recommended",
+    "plugin:storybook/recommended",
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -25,4 +26,22 @@ module.exports = {
       version: "detect",
     },
   },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      extends: [
+        "plugin:react/recommended",
+        "prettier",
+        "plugin:cypress/recommended",
+        "plugin:storybook/recommended",
+        "plugin:@typescript-eslint/recommended",
+      ],
+      plugins: ["@typescript-eslint"],
+      rules: {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-non-null-assertion": 0,
+        "react/display-name": "off",
+      },
+    },
+  ],
 };

.storybook/application.css

@@ -0,0 +1,26 @@
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
+
+.pi-checkered-bg {
+  --size: 0.25rem;
+  --double: calc(var(--size) * 2);
+  --bg: #eee;
+  --fg: #ddd;
+  background: linear-gradient(
+      45deg,
+      var(--fg) 25%,
+      transparent 25.1%,
+      transparent 74.9%,
+      var(--fg) 75%
+    ),
+    linear-gradient(
+      45deg,
+      var(--fg) 25%,
+      transparent 25.1%,
+      transparent 74.9%,
+      var(--fg) 75%
+    ),
+    var(--bg);
+  background-repeat: repeat, repeat;
+  background-position: 0 0, var(--size) var(--size);
+  background-size: var(--double) var(--double), var(--double) var(--double);
+}

.storybook/main.ts

@@ -0,0 +1,60 @@
+const path = require("path");
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  staticDirs: ["../public"],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+    {
+      name: "@storybook/addon-styling-webpack",
+
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 1,
+                },
+              },
+              {
+                loader: require.resolve("postcss-loader"),
+                options: {
+                  postcssOptions: {
+                    config: path.resolve(
+                      __dirname,
+                      "postcss.storybook.config.js"
+                    ),
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/manager-api";
+import theme from "./theme";
+import "./application.css";
+
+addons.setConfig({
+  theme,
+});

.storybook/postcss.storybook.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: [
+    "postcss-import",
+    "postcss-custom-properties",
+    "postcss-calc",
+    "autoprefixer",
+    "tailwindcss",
+  ],
+};

.storybook/preview.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { DocsContainer } from "@storybook/blocks";
+import { initialize, mswDecorator } from "msw-storybook-addon";
+
+import "./styles.css";
+import theme from "./theme";
+import loadIcons from "../src/core/icons";
+
+const docsContainer = ({ children, context, ...props }) => {
+  loadIcons();
+
+  return (
+    <DocsContainer context={context} {...props}>
+      {children}
+    </DocsContainer>
+  );
+};
+
+initialize({
+  onUnhandledRequest: "bypass",
+});
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      theme,
+      container: docsContainer,
+    },
+  },
+  decorators: [
+    mswDecorator,
+    (Story) => {
+      loadIcons();
+      return Story();
+    },
+  ],
+};
+
+export default preview;

.storybook/styles.css

@@ -0,0 +1,10 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "../src/core/fonts/jetBrains-mono.css";
+@import "../src/core/fonts/manrope.css";
+@import "../src/core/styles.css";
+@import "../src/reset/styles.css";
+
+@import "./application.css";

.storybook/theme.ts

@@ -0,0 +1,12 @@
+import { create } from "@storybook/theming/create";
+
+const brandImage =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4IiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTA4IDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoJPGcgY2xhc3M9InRleHQiPgoJCTxwYXRoIGQ9Ik02OC41MTk5IDIyLjY4NTZWMkg3Mi4yNTQ1VjkuNDg4OTVDNzMuNTE5NCA4LjI4NDYzIDc1LjE0ODggNy42MTY2OSA3Ni44NjkzIDcuNjE2NjlDODAuOTA3MyA3LjYxNjY5IDg0LjQ4OTggMTAuNjkzMiA4NC40ODk4IDE1LjMyODNDODQuNDg5OCAxOS45NjMzIDgwLjkwNzMgMjMuMDUgNzYuODY5MyAyMy4wNUM3NS4wNTc3IDIzLjA1IDczLjM0NzEgMjIuMzMxNCA3Mi4wNzIzIDIxLjAyNTlWMjIuNjg1Nkg2OC41MTk5Wk04MC43NTUzIDE1LjMyODNDODAuNzU1MyAxMi43Mzc1IDc4LjkxMzUgMTAuOTI2IDc2LjUwNDkgMTAuOTI2Qzc0LjE1NzEgMTAuOTI2IDcyLjM0NTYgMTIuNjQ2NCA3Mi4yNTQ1IDE1LjE0NjFWMTUuMzI4M0M3Mi4yNTQ1IDE3LjkxOSA3NC4wOTYyIDE5LjczMDUgNzYuNTA0OSAxOS43MzA1Qzc4LjkxMzUgMTkuNzMwNSA4MC43NTUzIDE3LjkxOSA4MC43NTUzIDE1LjMyODNaTTg2LjIyMDIgMjIuNjg1NlYySDg5Ljk1NDdWMjIuNjg1Nkg4Ni4yMjAyWk05NS4xNzY1IDI4LjA0OTNMOTcuMzUyNSAyMi44NTc3TDkxLjQ0MiA3Ljk4MTAzSDk1LjQ4TDk5LjI0NDcgMTguMzc0NEwxMDMuMDcgNy45ODEwM0gxMDcuMTY5TDk5LjE1MzYgMjguMDU5NEg5NS4xNzY1VjI4LjA0OTNaTTYyLjU4OTYgNy45ODEwM1Y5Ljg1MzI0QzYxLjI5NCA4LjQzNjQyIDU5LjQ4MjQgNy42MjY4NCA1Ny42MjA0IDcuNjI2ODRDNTMuNTgyNiA3LjYyNjg0IDUwIDEwLjcwMzQgNTAgMTUuMzM4NEM1MCAxOS45ODM1IDUzLjU4MjYgMjMuMDUgNTcuNjIwNCAyMy4wNUM1OS41NTM3IDIzLjA1IDYxLjM4NTEgMjIuMjEgNjIuNzEwOSAyMC43MDIxVjIyLjY5NTdINjUuOTY5N1Y3Ljk4MTAzSDYyLjU4OTZaTTYyLjIyNTMgMTUuMzI4M0M2Mi4yMjUzIDE3Ljg4ODcgNjAuMzgzNSAxOS43MzA1IDU3Ljk3NDggMTkuNzMwNUM1NS41NjYxIDE5LjczMDUgNTMuNzI0MiAxNy44ODg3IDUzLjcyNDIgMTUuMzI4M0M1My43MjQyIDEyLjc2NzkgNTUuNTY2MSAxMC45MjYgNTcuOTc0OCAxMC45MjZDNjAuMzIyNiAxMC45MjYgNjIuMTM0MiAxMi42NzY4IDYyLjIyNTMgMTUuMTQ2MVYxNS4zMjgzWiIgZmlsbD0iY3VycmVudENvbG9yIiAvPgoJPC9nPgoJPGcgY2xhc3M9InRyaWFuZ2xlIj4KCQk8cGF0aCBkPSJNMTkuMDk2OCAwTDMuMTE3MDEgMjkuMjQ3M0wwIDI3LjA2MTRMMTQuNzg1NiAwSDE5LjA5NjhaTTE5LjMxOTQgMEwzNS4yOTkyIDI5LjI0NzNMMzguNDE2MiAyNy4wNjE0TDIzLjYzMDYgMEgxOS4zMTk0WiIgZmlsbD0idXJsKCNncmFkaWVudCkiIC8+CgkJPHBhdGggZD0iTTM1LjA3NjUgMjkuNDE5NEwxOS4yMDgxIDE2Ljk5MThMMy4zMzk2NiAyOS40MTk0TDYuNTc4MTMgMzEuNjg2M0wxOS4yMDgxIDIxLjc5ODlMMzEuODM4MSAzMS42ODYzTDM1LjA3NjUgMjkuNDE5NFoiIGZpbGw9InVybCgjZ3JhZGllbnQpIiAvPgoJPC9nPgoJPGRlZnM+CgkJPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjE5LjIwODEiIHkxPSIwIiB4Mj0iMyIgeTI9IjI4LjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KCQkJPHN0b3Agc3RvcC1jb2xvcj0iI0ZGMDkwMiIgLz4KCQkJPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkY1MjE1IiAvPgoJCTwvbGluZWFyR3JhZGllbnQ+Cgk8L2RlZnM+Cjwvc3ZnPgo=";
+
+export default create({
+  base: "light",
+  brandTitle: "Ably UI",
+  brandImage,
+  brandTarget: "_self",
+  fontBase: '"Manrope", "Open Sans", sans-serif',
+});

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore"
+}

global.d.ts

@@ -0,0 +1,5 @@
+declare module "*.png";
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package.json

@@ -21,6 +21,16 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
     "@prettier/plugin-ruby": "^1.5.2",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-styling-webpack": "^0.0.5",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-webpack5": "^7.6.4",
+    "@storybook/test": "^7.6.4",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.0.2",
     "babel-loader": "^8.2.0",
     "blink-diff": "^1.0.13",
@@ -31,17 +41,24 @@
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-storybook": "^0.6.15",
+    "extra-watch-webpack-plugin": "^1.0.3",
     "find-imports": "^1.1.0",
     "mini-css-extract-plugin": "^1.2.1",
+    "msw": "1.3.2",
+    "msw-storybook-addon": "^1.10.0",
     "null-loader": "^4.0.1",
     "postcss": "^8.1.10",
     "postcss-calc": "^7.0.5",
     "postcss-custom-properties": "^10.0.0",
     "postcss-import": "^13.0.0",
     "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
+    "storybook": "^7.6.4",
+    "style-loader": "^3.3.3",
     "svg-spritemap-webpack-plugin": "^3.7.1",
     "tailwindcss": "^3.3.6",
+    "typescript": "5.3.3",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.2.0",
     "yargs": "^16.2.0"
@@ -51,14 +68,16 @@
     "build:verbose": "node scripts/build.js -v",
     "watch": "node scripts/build.js -w",
     "dev": "./scripts/cleanstart.sh",
-    "format:check": "yarn prettier -c *.js src src/**/*.jsx cypress",
-    "format:write": "yarn prettier -w *.js src src/**/*.jsx cypress",
-    "lint": "eslint *.js src src/**/*.jsx cypress",
+    "format:check": "yarn prettier -c *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
+    "format:write": "yarn prettier -w *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
+    "lint": "eslint *.{js,ts} src/**/*.{js,jsx,ts,tsx} cypress",
     "cy:open": "cypress open",
     "cy:headless": "cypress run --quiet",
     "update:all": "./scripts/update-dependents.sh",
     "pre-release": "./scripts/pre-release.sh",
-    "release": "./scripts/release.sh"
+    "release": "./scripts/release.sh",
+    "storybook": "storybook dev -p 6006 --no-version-updates",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
@@ -87,5 +106,8 @@
     "react",
     "view-components"
   ],
-  "author": "Ably Real-time Ltd <[email protected]>"
-}
+  "author": "Ably Real-time Ltd <[email protected]>",
+  "msw": {
+    "workerDirectory": "public"
+  }
+}

postcss.config.js

@@ -1,8 +1,7 @@
-module.exports = {
-  plugins: [
-    "postcss-import",
-    "postcss-custom-properties",
-    "postcss-calc",
-    "autoprefixer",
-  ],
+export default {
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };