Add Storybook configuration and files

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+# Storybook
+storybook-static

apps/docs/.eslintrc.js

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@codefast/eslint-config/next.js"],
+  extends: ["@codefast/eslint-config/next.js", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: true,

apps/docs/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

apps/docs/.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+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: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

apps/docs/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import "@/app/globals.css";
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

apps/docs/package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build": "next build",
-    "dev": "next dev",
-    "lint": "next lint",
-    "start": "next start",
-    "clean": "rm -rf .next && rm -rf .turbo && rm -rf node_modules"
+    "build": "storybook build",
+    "clean": "rm -rf .next && rm -rf .turbo && rm -rf storybook-static && rm -rf node_modules",
+    "dev": "storybook dev -p 6006",
+    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0",
+    "start": "serve storybook-static",
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "@codefast/ui": "workspace:*",
@@ -16,15 +17,27 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.1.3",
+    "@chromatic-com/storybook": "^1.2.22",
     "@codefast/eslint-config": "workspace:*",
+    "@next/eslint-plugin-next": "^14.1.3",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/nextjs": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "@types/eslint": "^8.56.5",
     "@types/node": "^20.11.28",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
+    "eslint-plugin-storybook": "^0.8.0",
     "postcss": "^8.4.35",
+    "serve": "^14.2.1",
+    "storybook": "^8.0.0",
     "tailwindcss": "^3.3.0",
     "typescript": "^5.4.2"
   }

apps/docs/stories/button.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button } from "@codefast/ui/button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "UIs/Button",
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    appName: "Codefast",
+    children: "Click me",
+  },
+};

packages/ui/src/button.tsx

@@ -3,6 +3,7 @@
 import { cn } from "./utils";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /* The name of the app that the button is in. */
   appName: string;
 }