diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index af6f672..3ad11bc 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,4 +1,4 @@
-name: CI
+name: Build & Test
on:
push:
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
new file mode 100644
index 0000000..fc006b7
--- /dev/null
+++ b/.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
diff --git a/.gitignore b/.gitignore
index e2bfa23..5299244 100644
--- a/.gitignore
+++ b/.gitignore
@@ -54,3 +54,6 @@ dist-ssr
*.njsproj
*.sln
*.sw?
+
+*storybook.log
+/dist-storybook
\ No newline at end of file
diff --git a/apps/web/.eslintrc.cjs b/apps/web/.eslintrc.cjs
index 6d980e9..432891d 100644
--- a/apps/web/.eslintrc.cjs
+++ b/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",
+ ],
};
diff --git a/apps/web/.storybook/main.ts b/apps/web/.storybook/main.ts
new file mode 100644
index 0000000..714d8f0
--- /dev/null
+++ b/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;
diff --git a/apps/web/.storybook/preview.tsx b/apps/web/.storybook/preview.tsx
new file mode 100644
index 0000000..4e346cb
--- /dev/null
+++ b/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) => (
+
+
+
+ ),
+];
+
+export default preview;
diff --git a/apps/web/package.json b/apps/web/package.json
index 0c22f39..4fc48f0 100644
--- a/apps/web/package.json
+++ b/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"
}
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index da7a285..7d4aa37 100644
--- a/apps/web/src/App.tsx
+++ b/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() {
}}
>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>