working storybook

.eslintrc.cjs

@@ -1,11 +1,7 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

.ladle/components.tsx

@@ -0,0 +1 @@
+import "../src/index.css";

package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -23,13 +25,24 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./css": "./dist/style.css"
+    "./style.css": "./dist/style.css"
   },
   "dependencies": {
+    "@ladle/react": "^4.1.0",
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-onboarding": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
+    "@storybook/test": "^8.2.7",
     "@types/node": "^22.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -39,7 +52,9 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^3.3.3",
+    "storybook": "^8.2.7",
     "typescript": "5.4.2",
     "vite": "^5.3.4",
     "vite-plugin-dts": "4.0.0-beta.2"

src/components/button.tsx

@@ -1,8 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-
-type Props = ComponentPropsWithoutRef<"button">;
-
-export function Button(props: Props) {
-  console.log("button");
-  return <button {...props}>Hello World</button>;
-}

src/components/button/button.module.css

@@ -0,0 +1,28 @@
+.buttonRoot {
+    all: unset;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+}
+
+.buttonRoot.primary {
+    background-color: blue;
+    color: white;
+}
+
+.buttonRoot.secondary {
+    background-color: gray;
+    color: blue;
+}
+
+.buttonRoot:focus-visible{
+    outline: 2px solid blue;
+}
+
+.buttonRoot.fullWidth {
+    width: 100%;
+    justify-content: center;
+}

src/components/button/button.stories.tsx

@@ -0,0 +1,40 @@
+import { Button } from "./button";
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta = {
+  component: Button,
+  title: "Components/Button",
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary",
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    ...Primary.args,
+    fullWidth: true,
+    children: "Full Width",
+  },
+  render: (args) => {
+    const [count, setCount] = useState(0);
+    return (
+      <Button {...args} onClick={() => setCount(count + 1)} children={count} />
+    );
+  },
+};

src/components/button/button.tsx

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef } from "react";
+import s from "./button.module.css";
+import clsx from "clsx";
+type Props = ComponentPropsWithoutRef<"button"> & {
+  variant?: "primary" | "secondary";
+  fullWidth?: boolean;
+};
+
+export function Button({ variant = "primary", fullWidth, ...props }: Props) {
+  return (
+    <button
+      {...props}
+      className={clsx(s.buttonRoot, s[variant], fullWidth && s.fullWidth)}
+    />
+  );
+}

src/components/index.ts

@@ -1 +1 @@
-export * from "./button";
+export * from "./button/button.tsx";

src/index.css

@@ -0,0 +1,4 @@
+:root {
+    background-color: navy;
+    color: white;
+}

src/index.ts

@@ -1 +1,3 @@
+import "./index.css";
+
 export * from "./components";