feat: port existing ably-ui content to SB stories, strip out TW layer…

…s where they conflict

.prettierignore

@@ -3,4 +3,4 @@ vendor
 ./reset
 ./preview/public
 ./preview/tmp
-node_modules
+node_modules

.storybook/application.css

@@ -0,0 +1,28 @@
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
+
+@layer components {
+  .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.js → .storybook/main.ts

@@ -3,10 +3,21 @@ 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-onboarding",
     "@storybook/addon-interactions",
     "@storybook/addon-styling-webpack",
     {
@@ -42,19 +53,8 @@ const config = {
       },
     },
   ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
-  },
   docs: {
     autodocs: "tag",
   },
-  core: {
-    disableTelemetry: true,
-  },
 };
 export default config;

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { DocsContainer } from "@storybook/blocks";
+import { rest } from "msw";
+import { initialize, mswDecorator } from "msw-storybook-addon";
+
+import "./styles.css";
+import theme from "./theme";
+import "../src/core/utils/syntax-highlighter";
+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

@@ -7,3 +7,7 @@
 
 @import "../reset/styles.css";
 @import "../core/styles.css";
+
+@import "./application.css";
+
+@import "../src/core/utils/syntax-highlighter.css";

.storybook/theme.ts

@@ -6,7 +6,7 @@ const brandImage =
 export default create({
   base: "light",
   brandTitle: "Ably UI",
-  brandUrl: "https://ably.com",
   brandImage,
   brandTarget: "_self",
+  fontBase: '"Manrope", "Open Sans", sans-serif',
 });

global.d.ts

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

package.json

@@ -24,7 +24,6 @@
     "@storybook/addon-essentials": "^7.6.4",
     "@storybook/addon-interactions": "^7.6.4",
     "@storybook/addon-links": "^7.6.4",
-    "@storybook/addon-onboarding": "^1.0.10",
     "@storybook/addon-styling-webpack": "^0.0.5",
     "@storybook/blocks": "^7.6.4",
     "@storybook/react": "^7.6.4",
@@ -44,6 +43,8 @@
     "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",
@@ -55,6 +56,7 @@
     "style-loader": "^3.3.3",
     "svg-spritemap-webpack-plugin": "^3.7.1",
     "tailwindcss": "^3.3.6",
+    "vite": "^4.5.2",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.2.0",
     "yargs": "^16.2.0"
@@ -102,5 +104,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: {},
+  },
 };