feat: add Storybook for component design

packages/client/.gitignore

@@ -2,4 +2,5 @@ public/assets
 
 ## Panda
 styled-system
-styled-system-studio
+styled-system-studio
+*storybook.log

packages/client/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "storybook-solidjs-vite";
+
+const config: StorybookConfig = {
+  stories: ["../**/*.mdx", "../**/*.story.@(js|jsx|mjs|ts|tsx)"],
+  // stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "storybook-solidjs-vite",
+    options: {},
+  },
+};
+export default config;

packages/client/.storybook/panda.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

packages/client/.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import { ApplyGlobalStyles, ThemeProvider, darkTheme } from "@revolt/ui";
+import "@revolt/ui/styles";
+
+import "./panda.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (story) => (
+      <ThemeProvider theme={darkTheme("#FF5733", false)}>
+        {story} <ApplyGlobalStyles />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default preview;

packages/client/components/ui/components/design/atoms/inputs/Button.story.tsx

@@ -0,0 +1,79 @@
+import type { ComponentProps } from "solid-js";
+
+import type { Meta, StoryObj } from "@storybook/html";
+
+import { Button } from "./Button";
+
+type Story = StoryObj<ComponentProps<typeof Button>>;
+
+export default {
+  title: "Design System/Atoms/Inputs/Button",
+  tags: ["autodocs"],
+  render: (props: any) => <Button {...props} />,
+  argTypes: {
+    size: {
+      options: ["normal", "icon", "fluid"],
+      control: { type: "radio" },
+    },
+    variant: {
+      options: ["primary", "secondary", "plain", "success", "warning", "error"],
+      control: { type: "radio" },
+    },
+  },
+} as Meta<ComponentProps<typeof Button>>;
+
+export const Primary: Story = {
+  args: {
+    children: "Hello, I'm a button!",
+    size: "normal",
+    variant: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary Style",
+    size: "normal",
+    variant: "secondary",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    children: "Awesome!",
+    size: "normal",
+    variant: "success",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    children: "This looks wrong...",
+    size: "normal",
+    variant: "warning",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    children: "Stop! Look at me first!",
+    size: "normal",
+    variant: "error",
+  },
+};
+
+export const Plain: Story = {
+  args: {
+    children: "Just some plain old text...",
+    size: "fluid",
+    variant: "plain",
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    children: "🦄",
+    size: "icon",
+    variant: "secondary",
+  },
+};

packages/client/package.json

@@ -11,22 +11,35 @@
     "typecheck": "tsc --noEmit",
     "serve": "vite preview",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
     "@pandacss/dev": "^0.35.0",
     "@solid-devtools/transform": "^0.10.4",
     "@solidjs/testing-library": "^0.8.6",
+    "@storybook/addon-essentials": "8.2.0-alpha.5",
+    "@storybook/addon-interactions": "8.2.0-alpha.5",
+    "@storybook/addon-links": "8.2.0-alpha.5",
+    "@storybook/blocks": "8.2.0-alpha.5",
+    "@storybook/html": "^8.1.6",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@types/hast": "^3.0.4",
     "@types/lodash.defaultsdeep": "^4.6.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/unist": "^3.0.2",
+    "@vitest/coverage-v8": "^1.6.0",
     "babel-plugin-codegen": "^4.1.5",
     "jsdom": "^24.0.0",
     "lnk": "^1.1.0",
     "rehype-stringify": "^10.0.0",
     "revolt.js": "workspace:^",
+    "storybook": "8.2.0-alpha.5",
+    "storybook-solidjs": "^1.0.0-beta.2",
+    "storybook-solidjs-vite": "^1.0.0-beta.2",
     "typescript": "^5.4.2",
     "vite": "^5.1.6",
     "vite-plugin-inspect": "^0.8.3",
@@ -93,4 +106,4 @@
     "workbox-precaching": "^7.0.0"
   },
   "private": true
-}
+}

packages/client/postcss.config.cjs

@@ -1,5 +1,3 @@
 module.exports = {
-  plugins: {
-    '@pandacss/dev/postcss': {},
-  },
-}
+  plugins: [require("@pandacss/dev/postcss")()],
+};