feat: add storybook [MDS-1442] (#224)

* feat: add storybook [MDS-1442] * fix: remove unnecesary files [MDS-1442] * feat: add storybook [MDS-1442] * Prettified Code! * fix: put themes.css in the last line [MDS-1442] * Prettified Code! * feat: add stories to gitignore [MDS-1442] * fix: ignore public/stories in cspell.json [MDS-1442] * feat: add storybook:build to main build script [MDS-1442] * fix: modify build:storybook script to prevent copying public files into subdirectory issue * fix: remove output files [MDS-1442] * fix: remove .gitignore change [MDS-1442] --------- Co-authored-by: robb91-dev <[email protected]>
coingaming · Dec 20, 2024 · 02677a6 · 02677a6
1 parent 15211ae
commit 02677a6
Show file tree

Hide file tree

Showing 17 changed files with 5,108 additions and 120 deletions.
diff --git a/.changeset/nice-falcons-invite.md b/.changeset/nice-falcons-invite.md
@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+feat: add storybook [MDS-1442]
diff --git a/.gitignore b/.gitignore
@@ -33,6 +33,7 @@ cache
 
 # next.js
 /docs/.next
+/docs/public/stories/
 /.next/
 /out/
 

diff --git a/cspell.json b/cspell.json
@@ -20,6 +20,7 @@
     ".git",
     "node_modules",
     "docs/generated/changelog.ts",
+    "docs/public/stories/**",
     ".config/aws-task-definition.json",
     ".config/Dockerfile",
     ".gitignore",

diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
@@ -1,4 +1,8 @@
 {
   "plugins": ["prettier"],
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:storybook/recommended"
+  ]
 }
diff --git a/docs/.storybook/main.ts b/docs/.storybook/main.ts
@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../app/stories/**/*.mdx",
+    "../app/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;
diff --git a/docs/.storybook/preview-body.html b/docs/.storybook/preview-body.html
@@ -0,0 +1,7 @@
+<html>
+  <body
+    class="light-theme theme-moon-light flex items-center justify-center h-screen"
+  >
+    <div id="storybook-root"></div>
+  </body>
+</html>
diff --git a/docs/.storybook/preview.ts b/docs/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../app/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/docs/app/globals.css b/docs/app/globals.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "./themes.css";
 
 /* @font-face {
   font-family: 'DM Sans';

diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -3,7 +3,6 @@ import { SearchProvider } from "@/components/search/SearchProvider";
 import { useSearchActions } from "@/components/search/useSearchActions";
 import { cookies } from "next/headers";
 import "./globals.css";
-import "./themes.css";
 import { mergeClassnames } from "@heathmont/moon-base-tw";
 import GoogleAnalytics from "@/components/GoogleAnalytics";
 

diff --git a/docs/app/stories/Avatar.stories.tsx b/docs/app/stories/Avatar.stories.tsx
@@ -0,0 +1,15 @@
+import { Avatar as AvatarComponent } from "@heathmont/moon-core-tw";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AvatarComponent> = {
+  component: AvatarComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof AvatarComponent>;
+
+export const Avatar: Story = {
+  args: {
+    size: "sm",
+  },
+};
diff --git a/docs/app/stories/Button.stories.tsx b/docs/app/stories/Button.stories.tsx
@@ -0,0 +1,20 @@
+import { Button as ButtonComponent } from "@heathmont/moon-core-tw";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ButtonComponent> = {
+  component: ButtonComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonComponent>;
+
+export const Button: Story = {
+  args: {
+    children: <span>Click me</span>,
+    variant: "primary",
+    size: "xl",
+    disabled: false,
+    fullWidth: false,
+    animation: "pulse",
+  },
+};
diff --git a/docs/app/stories/Chip.stories.tsx b/docs/app/stories/Chip.stories.tsx
@@ -0,0 +1,21 @@
+import { Chip as ChipComponent } from "@heathmont/moon-core-tw";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ChipComponent> = {
+  component: ChipComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChipComponent>;
+
+const args = {
+  isActive: true,
+  size: "md",
+  isStroke: true,
+  children: <span>To the moon</span>,
+};
+
+export const Chip: Story = {
+  args,
+};
diff --git a/docs/app/stories/Textarea.stories.tsx b/docs/app/stories/Textarea.stories.tsx
@@ -0,0 +1,16 @@
+import { Textarea as TextareaComponent } from "@heathmont/moon-core-tw";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TextareaComponent> = {
+  component: TextareaComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextareaComponent>;
+
+export const Textarea: Story = {
+  args: {
+    error: false,
+  },
+};
diff --git a/docs/app/stories/page.tsx b/docs/app/stories/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function StoriesPage() {
+  redirect("/stories/index.html");
+}
diff --git a/docs/app/types.ts b/docs/app/types.ts
@@ -909,6 +909,12 @@ export type Examples = {
       }
     }
   },
+  "stories": {
+    "Avatar.stories": "string",
+    "Button.stories": "string",
+    "Chip.stories": "string",
+    "Textarea.stories": "string"
+  },
   "themes": {
     "ColorSet": "string",
     "MainColors": "string",

diff --git a/docs/package.json b/docs/package.json
@@ -12,15 +12,17 @@
     "build:changelog": "node scripts/buildChangelog.mjs",
     "build:installation": "node scripts/buildInstallation.mjs",
     "build:contribution": "node scripts/buildContribution.mjs",
-    "build": "pnpm run build:types && pnpm run build:components && pnpm run build:dict && pnpm build:descriptions && pnpm build:changelog && pnpm build:installation && pnpm build:contribution && pnpm run lint:components && pnpm run lint:descriptions && pnpm run lint:changelog && next build",
+    "build": "pnpm run build:types && pnpm run build:components && pnpm run build:dict && pnpm build:descriptions && pnpm build:changelog && pnpm build:installation && pnpm build:contribution && pnpm build:storybook && pnpm run lint:components && pnpm run lint:descriptions && pnpm run lint:changelog && next build",
     "lint": "next lint",
     "lint:components": "prettier --write ./components.constants.mjs",
     "lint:descriptions": "prettier --write ./generated/componentDescriptions.ts",
     "lint:changelog": "prettier --write ./generated/changelog.ts",
     "start": "next start -p 80",
     "test": "playwright test",
     "test:pa11y": "node scripts/cli/index.mjs pa11y",
-    "clean:next": "rimraf .next"
+    "clean:next": "rimraf .next",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build -o .storybook/temp-dist && rm -rf public/stories && mv .storybook/temp-dist public/stories"
   },
   "dependencies": {
     "@heathmont/moon-base-tw": "workspace:^10.18.1",
@@ -33,15 +35,23 @@
     "commander": "^11.1.0",
     "next": "14.0.3",
     "next-mdx-remote": "^4.4.1",
-    "react-syntax-highlighter": "^15.5.0",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.49.0",
+    "react-syntax-highlighter": "^15.5.0",
     "sharp": "^0.33.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
     "@playwright/test": "^1.40.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -53,8 +63,10 @@
     "eslint-config-next": "14.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-storybook": "^0.11.1",
     "pa11y": "^6.2.3",
     "postcss": "^8",
+    "storybook": "^8.4.7",
     "tailwindcss": "^3.4.3",
     "typescript": "^5"
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ cache @@
     # next.js
     /docs/.next
+    /docs/public/stories/
     /.next/
     /out/
@@ Expand Down @@