WEB-1344 chore: Add storybook (makeplane#4490)

* Add storybbok integration for UI package * Exclude stories from tailwind config * Update gitignore * chore: disable lint stage --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
wangxukun · May 22, 2024 · e99a7ac · e99a7ac
1 parent c096158
commit e99a7ac
Show file tree

Hide file tree

Showing 11 changed files with 5,359 additions and 688 deletions.
diff --git a/.eslintrc-staged.js b/.eslintrc-staged.js
@@ -7,9 +7,6 @@ module.exports = {
   root: true,
   extends: [
     "custom",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
   ],
   parser: "@typescript-eslint/parser",
   settings: {

diff --git a/.gitignore b/.gitignore
@@ -81,4 +81,7 @@ tmp/
 ## packages
 dist
 .temp/
-deploy/selfhost/plane-app/
+deploy/selfhost/plane-app/
+## Storybook
+*storybook.log
+output.css
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1 +0,0 @@
-yarn lint-staged

diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
@@ -16,6 +16,7 @@ module.exports = {
       "./ui/**/*.tsx",
       "../packages/ui/**/*.{js,ts,jsx,tsx}",
       "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
+      "!../packages/ui/**/*.stories{js,ts,jsx,tsx}",
     ],
   },
   theme: {

diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    "@storybook/addon-styling-webpack"
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {},
+  },
+};
+export default config;
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+import "../styles/output.css";
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -14,7 +14,10 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react --minify",
     "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "postcss": "postcss styles/globals.css -o styles/output.css --watch"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",
@@ -30,14 +33,30 @@
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.4.0",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-onboarding": "^8.1.1",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-webpack5": "^8.1.1",
+    "@storybook/test": "^8.1.1",
     "@types/node": "^20.5.2",
     "@types/react": "^18.2.42",
     "@types/react-color": "^3.0.9",
     "@types/react-dom": "^18.2.17",
+    "autoprefixer": "^10.4.19",
     "classnames": "^2.3.2",
     "eslint-config-custom": "*",
+    "postcss-cli": "^11.0.0",
+    "postcss-nested": "^6.0.1",
     "react": "^18.2.0",
+    "storybook": "^8.1.1",
     "tailwind-config-custom": "*",
+    "tailwindcss": "^3.4.3",
     "tsconfig": "*",
     "tsup": "^5.10.1",
     "typescript": "4.7.4"

diff --git a/packages/ui/src/avatar/avatar.stories.tsx b/packages/ui/src/avatar/avatar.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Avatar } from "./avatar";
+
+const meta: Meta<typeof Avatar> = {
+  title: "Avatar",
+  component: Avatar,
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: { name: "John Doe" },
+};
+
+export const Large: Story = {
+  args: { name: "John Doe" },
+};