feat: ✨ add storybook to cli

.eslintrc.json

@@ -5,7 +5,8 @@
     "next/core-web-vitals",
     "turbo",
     "prettier",
-    "plugin:tailwindcss/recommended"
+    "plugin:tailwindcss/recommended",
+    "plugin:storybook/recommended"
   ],
   "plugins": ["tailwindcss"],
   "ignorePatterns": ["**/fixtures/**"],

apps/www/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/nextjs"
+
+const config = {
+  stories: [
+    "../registry/stories/**/*.mdx",
+    "../registry/stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "./tokens/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {},
+} satisfies StorybookConfig
+
+export default config

apps/www/.storybook/preview-body.html

@@ -0,0 +1,6 @@
+<style>
+  :root {
+    /* HACK: related to https://github.com/vercel/geist-font/issues/72 */
+    --font-geist-sans: Inter, sans-serif;
+  }
+</style>

apps/www/.storybook/preview.tsx

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

apps/www/.storybook/tokens/color.stories.tsx

@@ -0,0 +1,125 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import resolveConfig from "tailwindcss/resolveConfig"
+
+import tailwindConfig from "../../tailwind.config.cjs"
+import { hexToHSL, hslToHex } from "./util"
+
+const meta: Meta<{
+  swatch: {
+    name: string
+    colors: Record<string, string>
+  }[]
+}> = {
+  title: "design/Color",
+  argTypes: {},
+  render: (args) => (
+    <table className="w-full table-auto text-left text-sm text-foreground rtl:text-right">
+      <thead className="text-xs bg-muted uppercase">
+        <tr>
+          <th scope="col" className="px-6 py-3">
+            Name
+          </th>
+          <th scope="col" className="px-6 py-3">
+            <span className="sr-only">Swatch</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {args.swatch.map(({ name, colors }) => (
+          <tr key={name} className="border-b bg-card">
+            <td className="px-6 py-4">{name}</td>
+            <td className="px-6 py-4">
+              <div className="flex overflow-x-clip rounded-md border shadow">
+                {Object.entries(colors).map(([name, value], idx) => {
+                  const isHex = value.startsWith("#")
+                  const style = window.getComputedStyle(document.body)
+                  const variable = value.match(/var\(([^)]+)\)/)?.[1] ?? ""
+                  const [h, s, l] =
+                    style.getPropertyValue(variable).match(/\d+/g) ?? []
+                  const colorHSL = isHex
+                    ? hexToHSL(value)
+                    : `hsl(${h}, ${s}%, ${l}%)`
+                  const colorHex = isHex
+                    ? value
+                    : hslToHex(Number(h), Number(s), Number(l))
+                  return (
+                    <div key={idx} className="flex w-full flex-col pb-2">
+                      <div
+                        className="h-16 w-full"
+                        style={{ backgroundColor: value }}
+                      ></div>
+                      <p className="text-center font-semibold">{name}</p>
+                      <p className="text-xs text-center opacity-70">
+                        {variable}
+                      </p>
+                      <p className="text-xs text-center">{colorHex}</p>
+                      <p className="text-xs text-center">{colorHSL}</p>
+                    </div>
+                  )
+                })}
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+}
+
+export default meta
+
+const fullConfig = resolveConfig(tailwindConfig)
+type ColorKey = keyof typeof fullConfig.theme.colors
+
+type Story = StoryObj<typeof meta>
+
+const functionalSwatch = [
+  "foreground",
+  "background",
+  "primary",
+  "secondary",
+  "card",
+  "accent",
+  "muted",
+  "popover",
+  "destructive",
+  "input",
+  "border",
+  "ring",
+] as unknown as Array<ColorKey>
+
+export const Functional: Story = {
+  args: {
+    swatch: Object.entries(fullConfig.theme.colors)
+      .filter((d) => functionalSwatch.includes(d[0] as ColorKey))
+      .sort(
+        ([a], [b]) =>
+          functionalSwatch.indexOf(a as ColorKey) -
+          functionalSwatch.indexOf(b as ColorKey)
+      )
+      .map(([name, colors]) => {
+        return {
+          name,
+          colors: typeof colors === "string" ? { [name]: colors } : colors,
+        }
+      }),
+  },
+}
+export const Tailwind: Story = {
+  args: {
+    swatch: Object.entries(fullConfig.theme.colors)
+      .filter(
+        (d) =>
+          ![...functionalSwatch, "inherit", "current", "transparent"].includes(
+            d[0] as keyof typeof fullConfig.theme.colors
+          )
+      )
+      .map(([name, colors]) => {
+        return {
+          name,
+          colors: typeof colors === "string" ? { [name]: colors } : colors,
+        }
+      }),
+  },
+}

apps/www/.storybook/tokens/radius.stories.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import resolveConfig from "tailwindcss/resolveConfig"
+
+import tailwindConfig from "../../tailwind.config.cjs"
+
+const fullConfig = resolveConfig(tailwindConfig)
+
+const meta: Meta<{
+  radius: {
+    name: string
+    value: string
+  }[]
+}> = {
+  title: "design/Radius",
+  argTypes: {},
+  args: {
+    radius: Object.keys(fullConfig.theme.borderRadius).map((name) => {
+      const value =
+        fullConfig.theme.borderRadius[
+          name as keyof typeof fullConfig.theme.borderRadius
+        ]
+      return {
+        name,
+        value,
+      }
+    }),
+  },
+  render: (args) => (
+    <table className="w-full table-auto text-left text-sm text-foreground rtl:text-right">
+      <thead className="text-xs bg-muted uppercase">
+        <tr>
+          <th scope="col" className="px-6 py-3">
+            Name
+          </th>
+          <th scope="col" className="hidden px-6 py-3 sm:table-cell">
+            Size
+          </th>
+          <th scope="col" className="px-6 py-3">
+            <span className="sr-only">Preview</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {args.radius.map(({ name, value }) => {
+          const style = window.getComputedStyle(document.body)
+          const variable = value.match(/var\(([^)]+)\)/)?.[1] ?? ""
+          const resolved = style.getPropertyValue(variable)
+          const resolvedValue = value.replace(/var\(--(.*?)\)/, resolved)
+          return (
+            <tr key={name} className="border-b bg-card">
+              <td className="px-6 py-4">{name}</td>
+              <td className="hidden px-6 py-4 sm:table-cell">
+                {resolvedValue}
+              </td>
+              <td className="px-6 py-4">
+                <div
+                  className="size-20 border-2 bg-background"
+                  style={{ borderRadius: value }}
+                />
+              </td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Core: Story = {}

apps/www/.storybook/tokens/shadow.stories.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import resolveConfig from "tailwindcss/resolveConfig"
+
+import tailwindConfig from "../../tailwind.config.cjs"
+
+const fullConfig = resolveConfig(tailwindConfig)
+
+const meta: Meta<{
+  shadow: {
+    name: string
+    value: string
+  }[]
+}> = {
+  title: "design/Shadow",
+  argTypes: {},
+  args: {
+    shadow: Object.keys(fullConfig.theme.boxShadow).map((name) => {
+      const value =
+        fullConfig.theme.boxShadow[
+          name as keyof typeof fullConfig.theme.boxShadow
+        ]
+      return {
+        name,
+        value,
+      }
+    }),
+  },
+  render: (args) => (
+    <table className="w-full table-auto text-left text-sm text-foreground rtl:text-right">
+      <thead className="text-xs bg-muted uppercase">
+        <tr>
+          <th scope="col" className="px-6 py-3">
+            Name
+          </th>
+          <th scope="col" className="hidden px-6 py-3 sm:table-cell">
+            Size
+          </th>
+          <th scope="col" className="px-6 py-3">
+            <span className="sr-only">Preview</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {args.shadow.map(({ name, value }) => {
+          const style = window.getComputedStyle(document.body)
+          const variable = value.match(/var\(([^)]+),/)?.[1] ?? ""
+          const resolved = style.getPropertyValue(variable)
+          const resolvedValue = value
+            .replace(/var\(--(.*?)\)/, resolved)
+            .replace(/,/g, ",\n")
+            .replace(/\n\n/g, "\n")
+          return (
+            <tr key={name} className="border-b bg-card">
+              <td className="px-6 py-4">{name}</td>
+              <td className="hidden whitespace-pre-line px-6 py-4 sm:table-cell">
+                {resolvedValue}
+              </td>
+              <td className="px-6 py-4">
+                <div
+                  className="size-20 rounded border bg-background"
+                  style={{ boxShadow: value }}
+                />
+              </td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Core: Story = {}