Add initial config for storybook

.gitignore

@@ -54,3 +54,5 @@ temp/
 dist/
 
 *.play.*
+
+*storybook.log

packages/ui/.storybook/main.js

@@ -0,0 +1,34 @@
+import {dirname, join} 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) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  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/react-vite'),
+    options: {},
+  },
+  // viteFinal: async (config) => {
+  //   config.css = config.css || {}
+  //   config.css.postcss = require('../../../apps/web/postcss.config.js')
+  //   return config
+  // },
+}
+export default config

packages/ui/.storybook/preview.js

@@ -0,0 +1,21 @@
+// import '../../../apps/web/app/global.css'
+
+if (typeof document !== 'undefined') {
+  const script = document.createElement('script')
+  script.src = 'https://cdn.tailwindcss.com'
+  document.head.appendChild(script)
+}
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

packages/ui/package.json

@@ -4,6 +4,10 @@
   "private": true,
   "sideEffects": false,
   "module": "./index.ts",
+  "scripts": {
+    "build-storybook": "storybook build",
+    "storybook": "storybook dev -p 6006"
+  },
   "dependencies": {
     "@glideapps/glide-data-grid": "5.2.1",
     "@monaco-editor/react": "4.4.6",
@@ -37,10 +41,21 @@
     "tailwind-merge": "1.6.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
     "@openint/cdk": "workspace:*",
     "@openint/engine-backend": "workspace:*",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@tanstack/react-query": "*",
-    "@types/react": "*"
+    "@types/react": "*",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.3.5"
   },
   "peerDependencies": {
     "react": "*",

packages/ui/stories/Button.stories.js

@@ -0,0 +1,29 @@
+import {fn} from '@storybook/test'
+import {Button} from '../shadcn/Button'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Example/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'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: {control: 'color'},
+  },
+  // 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()},
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    'aria-label': 'Copy to clipboard',
+    variant: 'default',
+    size: 'default',
+  },
+}