chore(plugin-git): add storybook setup

Author: antfubot

plugins/git/.gitignore

@@ -4,3 +4,4 @@ next-env.d.ts
 node_modules
 out
 .turbo
+storybook-static

plugins/git/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import tailwindcss from '@tailwindcss/vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/client/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  viteFinal(viteConfig) {
+    viteConfig.plugins ??= []
+    viteConfig.plugins.push(tailwindcss())
+    return viteConfig
+  },
+}
+
+export default config

plugins/git/.storybook/preview.tsx

@@ -0,0 +1,42 @@
+import type { Decorator, Preview } from '@storybook/react-vite'
+import { useEffect } from 'react'
+import '../src/client/app/globals.css'
+
+const withTheme: Decorator = (Story, context) => {
+  const theme = context.globals.theme ?? 'dark'
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+  }, [theme])
+  return (
+    <div className="bg-background text-foreground min-h-svh p-6">
+      <div className="mx-auto max-w-2xl">
+        <Story />
+      </div>
+    </div>
+  )
+}
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    controls: { expanded: true },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Color theme',
+      defaultValue: 'dark',
+      toolbar: {
+        title: 'Theme',
+        icon: 'contrast',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [withTheme],
+}
+
+export default preview

plugins/git/package.json

@@ -39,6 +39,8 @@
     "dev": "node scripts/dev.mjs",
     "dev:server": "node src/cli.ts",
     "dev:client": "next dev src/client",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static",
     "watch": "tsdown --watch",
     "prepack": "pnpm run build",
     "test": "vitest run"
@@ -52,7 +54,11 @@
     "@radix-ui/react-separator": "catalog:frontend",
     "@radix-ui/react-slot": "catalog:frontend",
     "@radix-ui/react-tabs": "catalog:frontend",
+    "@storybook/addon-a11y": "catalog:frontend",
+    "@storybook/addon-docs": "catalog:frontend",
+    "@storybook/react-vite": "catalog:frontend",
     "@tailwindcss/postcss": "catalog:frontend",
+    "@tailwindcss/vite": "catalog:frontend",
     "@types/react": "catalog:types",
     "@types/react-dom": "catalog:types",
     "class-variance-authority": "catalog:frontend",
@@ -63,6 +69,7 @@
     "next": "catalog:frontend",
     "react": "catalog:frontend",
     "react-dom": "catalog:frontend",
+    "storybook": "catalog:frontend",
     "tailwind-merge": "catalog:frontend",
     "tailwindcss": "catalog:frontend",
     "tsdown": "catalog:build",

plugins/git/src/client/components/views/log-panel-view.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Commit } from '../../../index'
+import { LogPanelView } from './log-panel-view'
+
+const now = Date.now()
+
+const commits: Commit[] = [
+  { hash: 'a1b2c3d4e5f6', shortHash: 'a1b2c3d', parents: ['b2c3d4e', 'c3d4e5f'], author: 'Ada Lovelace', email: 'ada@example.dev', date: now - 36e5, subject: 'Merge branch feature/graph into main', body: '', refs: ['HEAD -> main'] },
+  { hash: 'b2c3d4e', shortHash: 'b2c3d4e', parents: ['d4e5f60'], author: 'Ada Lovelace', email: 'ada@example.dev', date: now - 72e5, subject: 'Tidy up dashboard layout', body: '', refs: [] },
+  { hash: 'c3d4e5f', shortHash: 'c3d4e5f', parents: ['d4e5f60'], author: 'Lin Chen', email: 'lin@example.dev', date: now - 9e6, subject: 'Add commit graph lanes', body: '', refs: ['origin/feature/graph'] },
+  { hash: 'd4e5f60', shortHash: 'd4e5f60', parents: [], author: 'Ada Lovelace', email: 'ada@example.dev', date: now - 9e8, subject: 'Initial commit', body: '', refs: ['v0.1.0'] },
+]
+
+const meta = {
+  title: 'Panels/Log',
+  component: LogPanelView,
+  args: {
+    rpcConnected: true,
+    isRepo: true,
+    commits,
+    hasMore: false,
+    loading: false,
+    error: null,
+    liveBackend: true,
+    onRefresh: () => undefined,
+    onLoadMore: () => undefined,
+  },
+} satisfies Meta<typeof LogPanelView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+export const Connecting: Story = { args: { rpcConnected: false } }
+export const Empty: Story = { args: { commits: [] } }
+export const NotARepo: Story = { args: { isRepo: false, commits: [] } }
+export const HasMore: Story = { args: { hasMore: true } }
+export const StaticMode: Story = { args: { hasMore: true, liveBackend: false } }
+export const Error: Story = { args: { error: 'fatal: bad revision' } }