Add storybook

.changeset/cyan-ways-smile.md

@@ -0,0 +1,5 @@
+---
+'@omi3/ui': patch
+---
+
+add storybook

.gitignore

@@ -35,4 +35,5 @@ yarn-error.log*
 
 # Misc
 .DS_Store
-*.pem
+*.pem
+*storybook.log

packages/ui/.storybook/main.ts

@@ -0,0 +1,28 @@
+import { dirname, join } from 'path';
+
+import type { StorybookConfig } from '@storybook/nextjs';
+
+/**
+ * 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: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {},
+  },
+  features: {
+    experimentalRSC: true,
+  },
+};
+export default config;

packages/ui/.storybook/preview.ts

@@ -0,0 +1,19 @@
+import '../src/styles/neobrutalism.css';
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'centered',
+
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;

packages/ui/chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:6706eceec3e5356934ddbfac",
+  "storybookBaseDir": "packages/ui",
+  "zip": true
+}

packages/ui/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

packages/ui/package.json

@@ -20,23 +20,35 @@
     ".": "./src/index.ts"
   },
   "scripts": {
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "dev:story": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "next": "^14",
     "react": "^18.3.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
     "@omi3/eslint": "workspace:*",
     "@omi3/tailwind": "workspace:*",
     "@omi3/typescript": "workspace:*",
     "@omi3/utils": "workspace:*",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/nextjs": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@types/node": "^20.12.7",
     "@types/react": "^18.3.0",
     "autoprefixer": "^10.4.20",
+    "eslint-plugin-storybook": "^0.9.0",
     "next": "latest",
     "postcss": "^8.4.35",
     "react": "^18.3.0",
+    "storybook": "^8.3.5",
     "typescript": "^5.4.5"
   },
   "dependencies": {

packages/ui/src/components/ui/button/button.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from ".";
+
+const meta: Meta<typeof Button> = {
+  title: "UI/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "The Button component is a fundamental UI element used to trigger actions or events in a user interface. It is a clickable button that can be customized with various styles and functionalities to enhance user experience.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      description: "The variant of the button",
+      options: [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+      ],
+    },
+    size: {
+      control: "select",
+      description: "The size of the button",
+      options: ["default", "sm", "lg", "icon"],
+    },
+
+    disabled: { control: "boolean", description: "The disabled state of the button" },
+    asChild: { control: "boolean", description: "The asChild state of the button" },
+
+
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Default",
+    variant: "default"
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "neutral",
+    children: "Ghost",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: "link",
+    children: "Link",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "noShadow",
+    children: "Outline",
+  },
+};
+export const Reverse: Story = {
+  args: {
+    variant: "reverse",
+    children: "Reverse",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    children: "Destructive",
+  },
+};
+
+
+
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled",
+  },
+};
+

packages/ui/src/components/ui/button.tsx → packages/ui/src/components/ui/button/index.tsx

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 
+import { cn } from '@omi3/utils';
 import { Slot } from '@radix-ui/react-slot';
 import type { VariantProps } from 'class-variance-authority';
-import { cn } from '@omi3/utils';
 import { cva } from 'class-variance-authority';
 
 const buttonVariants = cva(

packages/ui/src/components/ui/input.tsx → packages/ui/src/components/ui/input/index.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={cn(
-        'rounded-base border-border font-base !text-text selection:bg-main focus:border-bg dark:border-darkBorder flex h-10 w-full border-2 bg-[#fffcf7] px-3 py-2 text-sm ring-offset-white transition-all selection:text-black file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 dark:ring-offset-black dark:focus-visible:ring-white',
+        'rounded-base border-border font-base !text-text selection:bg-main focus:border-bg dark:border-darkBorder flex h-10 w-full border-2 bg-[#fffcf7] px-3 py-2 text-sm ring-offset-white transition-all selection:text-black file:border-0 file:bg-[transparent] file:text-sm file:font-medium placeholder:text-text dark:placeholder:text-darkText focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondaryBlack focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 dark:ring-offset-secondaryBlack dark:focus-visible:ring-secondaryWhite',
         className,
       )}
       ref={ref}

packages/ui/src/components/ui/input/input.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from '.';
+
+const meta = {
+  title: "UI/Input",
+  component: Input,
+  parameters: {
+    docs: {
+      description: {
+        component: "The Input component is a fundamental UI element used to trigger actions or events in a user interface. It is a clickable button that can be customized with various styles and functionalities to enhance user experience.",
+      },
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};