Merge pull request #28 from xyhomi3/add-storybook

Storybook: Optimise config

.changeset/little-rats-join.md

@@ -0,0 +1,6 @@
+---
+'@omi3/ui': patch
+'@omi3/site': patch
+---
+
+optimize storybook configs

.gitignore

@@ -38,3 +38,4 @@ yarn-error.log*
 *.pem
 *storybook.log
 storybook-static
+test-results

.npmrc

@@ -1 +1 @@
-public-hoist-pattern=*
+public-hoist-pattern=*

packages/ui/.storybook/main.ts

@@ -10,7 +10,7 @@ function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),

packages/ui/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

packages/ui/.storybook/theme.js

@@ -0,0 +1,6 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  brandTitle: 'Omi3 UI',
+  brandTarget: '_self',
+});

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

@@ -1,42 +1,34 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from ".";
+import { Button } from '.';
+import { action } from '@storybook/addon-actions';
 
 const meta: Meta<typeof Button> = {
-  title: "UI/Button",
+  title: 'UI/Button',
   component: Button,
   parameters: {
-    layout: "centered",
+    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.",
+          '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",
-      ],
+      control: 'select',
+      description: 'La variante du bouton',
+      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
     },
     size: {
-      control: "select",
-      description: "The size of the button",
-      options: ["default", "sm", "lg", "icon"],
+      control: 'select',
+      description: 'La taille du bouton',
+      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" },
-
-
+    disabled: { control: 'boolean', description: "L'état désactivé du bouton" },
+    asChild: { control: 'boolean', description: "L'état asChild du bouton" },
+    onClick: { action: 'clicked' },
   },
 };
 
@@ -45,66 +37,72 @@ type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
   args: {
-    children: "Default",
-    variant: "default"
+    children: 'Default',
+    variant: 'default',
+    onClick: action('onClick'),
   },
 };
 
 export const Ghost: Story = {
   args: {
-    variant: "neutral",
-    children: "Ghost",
+    variant: 'neutral',
+    children: 'Ghost',
+    onClick: action('onClick'),
   },
 };
 
 export const Link: Story = {
   args: {
-    variant: "link",
-    children: "Link",
+    variant: 'link',
+    children: 'Link',
+    onClick: action('onClick'),
   },
 };
 
 export const Outline: Story = {
   args: {
-    variant: "noShadow",
-    children: "Outline",
+    variant: 'noShadow',
+    children: 'Outline',
+    onClick: action('onClick'),
   },
 };
+
 export const Reverse: Story = {
   args: {
-    variant: "reverse",
-    children: "Reverse",
+    variant: 'reverse',
+    children: 'Reverse',
+    onClick: action('onClick'),
   },
 };
 
 export const Destructive: Story = {
   args: {
-    variant: "destructive",
-    children: "Destructive",
+    variant: 'destructive',
+    children: 'Destructive',
+    onClick: action('onClick'),
   },
 };
 
-
-
-
 export const Small: Story = {
   args: {
-    size: "sm",
-    children: "Small",
+    size: 'sm',
+    children: 'Small',
+    onClick: action('onClick'),
   },
 };
 
 export const Large: Story = {
   args: {
-    size: "lg",
-    children: "Large",
+    size: 'lg',
+    children: 'Large',
+    onClick: action('onClick'),
   },
 };
 
 export const Disabled: Story = {
   args: {
     disabled: true,
-    children: "Disabled",
+    children: 'Disabled',
+    onClick: action('onClick'),
   },
 };
-

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-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',
+        '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-secondaryBlack/50 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

@@ -1,21 +1,60 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Input } from '.';
+import { Input } from ".";
+import { action } from '@storybook/addon-actions';
 
-const meta = {
+const meta: Meta<typeof Input> = {
   title: "UI/Input",
   component: Input,
   parameters: {
+    layout: "centered",
     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.",
+        component:
+          "The Input component is a fundamental UI element used for text or data input. It can be customized with various styles and functionalities to enhance user experience.",
       },
     },
   },
-} satisfies Meta<typeof Input>;
+  argTypes: {
+
+    disabled: { control: "boolean", description: "The disabled state of the input" },
+    placeholder: { control: "text", description: "The placeholder text of the input" },
+    onChange: { action: 'changed' },
+    onFocus: { action: 'focused' },
+    onBlur: { action: 'blurred' },
+  },
+};
 
 export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text",
+    onChange: action('onChange'),
+  },
+};
 
-type Story = StoryObj<typeof meta>;
+export const Password: Story = {
+  args: {
+    type: "password",
+    placeholder: "Password",
+    onChange: action('onChange'),
+  },
+};
+
+export const Email: Story = {
+  args: {
+    type: "email",
+    placeholder: "Email",
+    onChange: action('onChange'),
+  },
+};
 
-export const Default: Story = {};
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: "Disabled",
+    onChange: action('onChange'),
+  },
+};