Merge pull request #1 from alterviewxyz/feat/add-storybook

Feat/add storybook

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: CI
+name: Build & Test
 
 on:
   push:

.github/workflows/storybook.yml

@@ -0,0 +1,46 @@
+name: Storybook
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the repository
+      - uses: actions/checkout@v4
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      # Setup pnpm
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      # Install dependencies
+      - name: Install Dependencies
+        run: pnpm install
+
+      # Build Storybook
+      - name: Build Storybook
+        run: pnpm run build-storybook
+
+      # Deploy to GitHub Pages (only on push to main)
+      - name: Deploy to GitHub Pages
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist-storybook
+          # Optionally specify the branch
+          # publish_branch: gh-pages

.gitignore

@@ -54,3 +54,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log
+/dist-storybook

apps/web/.eslintrc.cjs

@@ -1,5 +1,8 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@rentment/eslint-config/web.config.mjs"],
+  extends: [
+    "@rentment/eslint-config/web.config.mjs",
+    "plugin:storybook/recommended",
+  ],
 };

apps/web/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+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-onboarding"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;

apps/web/.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import "../src/App.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+// Optional: Add global decorators
+export const decorators = [
+  (Story) => (
+    <div style={{ margin: "3em" }}>
+      <Story />
+    </div>
+  ),
+];
+
+export default preview;

apps/web/package.json

@@ -7,7 +7,9 @@
     "dev": "vite --clearScreen false",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --config ../../packages/eslint-config/web.config.mjs"
+    "lint": "eslint . --config ../../packages/eslint-config/web.config.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o ../../dist-storybook"
   },
   "dependencies": {
     "@rentment/ui": "workspace:*",
@@ -16,13 +18,23 @@
     "react-icons": "^5.3.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
     "@eslint/js": "^9.13.0",
     "@rentment/eslint-config": "workspace:*",
     "@rentment/typescript-config": "workspace:*",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "eslint-plugin-storybook": "^0.11.0",
     "globals": "^15.11.0",
+    "storybook": "^8.4.2",
     "typescript": "~5.6.2",
     "vite": "^5.4.10"
   }

apps/web/src/App.tsx

@@ -3,7 +3,7 @@ import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
 import { FaSignInAlt } from "react-icons/fa";
-import Button from "./components/Button/Button";
+import { Button } from "./components";
 
 function App() {
   const [count, setCount] = useState(0);
@@ -40,97 +40,97 @@ function App() {
         }}
       >
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="primary"
           variant="solid"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="primary"
           variant="outline"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="primary"
           variant="text"
           icon={<FaSignInAlt />}
         />
 
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="secondary"
           variant="solid"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="secondary"
           variant="outline"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="secondary"
           variant="text"
           icon={<FaSignInAlt />}
         />
 
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="black"
           variant="solid"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="black"
           variant="outline"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="black"
           variant="text"
           icon={<FaSignInAlt />}
         />
 
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="white"
           variant="solid"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="white"
           variant="outline"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           color="white"
           variant="text"
           icon={<FaSignInAlt />}
         />
 
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           disabled={true}
           color="primary"
           variant="solid"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           disabled={true}
           color="primary"
           variant="outline"
           icon={<FaSignInAlt />}
         />
         <Button
-          text="متن دکمه"
+          label="متن دکمه"
           disabled={true}
           color="primary"
           variant="text"

apps/web/src/components/Button/Button.stories.ts

@@ -0,0 +1,99 @@
+// Button.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "./Button";
+
+// Meta configuration for the Button component
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+        options: ["primary", "secondary", "black", "white"],
+      },
+    },
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "outline", "text"],
+      },
+    },
+    disabled: { control: "boolean" },
+    onClick: { action: "clicked" },
+  },
+  args: {
+    onClick: () => {},
+    label: "متن دکمه",
+    color: "primary",
+    variant: "solid",
+    disabled: false,
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Primary: Story = {
+  args: {
+    color: "primary",
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "outline", "text"],
+      },
+    },
+    disabled: { control: "boolean" },
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    color: "secondary",
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "outline", "text"],
+      },
+    },
+    disabled: { control: "boolean" },
+  },
+};
+
+export const Black: Story = {
+  args: {
+    color: "black",
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "outline", "text"],
+      },
+    },
+    disabled: { control: "boolean" },
+  },
+};
+
+export const White: Story = {
+  args: {
+    color: "white",
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "outline", "text"],
+      },
+    },
+    disabled: { control: "boolean" },
+  },
+};