feat(ui): doc of dialog and sheet

packages/competition/src/pages/login/page.module.scss

@@ -1,14 +1,14 @@
 @use "../../variables" as *;
 .login-background {
-  background: radial-gradient(circle at 30% 30%, #20afff, transparent),
-    radial-gradient(circle at 65% 35%, #ffce20, transparent),
-    radial-gradient(circle at 25% 85%, #ff8b20, transparent),
-    radial-gradient(circle at 65% 100%, #20ffd7, transparent);
   background-blend-mode: screen;
   position: relative;
   height: 100vh;
   width: 100vw;
   @include flex-center();
+  background: radial-gradient(circle at 30% 30%, #20afff, transparent),
+    radial-gradient(circle at 65% 35%, #ffce20, transparent),
+    radial-gradient(circle at 25% 85%, #ff8b20, transparent),
+    radial-gradient(circle at 65% 100%, #20ffd7, transparent);
   .login-card-container {
     animation-name: login-card-show;
     animation-duration: 1s;

packages/ui/.storybook/main.ts

@@ -2,8 +2,8 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import { withoutVitePlugins } from '@storybook/builder-vite';
 
 const config: StorybookConfig = {
-  stories: ['../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-actions'],
+  stories: ['../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../lib/**/*.mdx'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-actions', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

packages/ui/lib/Dialog/Dialog.mdx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/blocks';
+import { useState } from 'react';
+
+import * as DialogStories from './Dialog.stories';
+import { Dialog } from './Dialog';
+import { Button } from '../Button';
+
+<Meta of={DialogStories} />
+
+# Dialog
+
+export const ShowDialog = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>Show Dialog</Button>
+      <Dialog
+        visible={visible}
+        onCancel={() => setVisible(false)}
+      />
+    </>
+  );
+};
+
+<ShowDialog />

packages/ui/lib/Dialog/Dialog.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  // tags: ['autodocs'],
   argTypes: {
     size: {
       options: ['small', 'medium', 'large'],

packages/ui/lib/Sheet/Sheet.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/blocks';
+import { useState } from 'react';
+
+import * as SheetStories from './Sheet.stories';
+import { Button } from '../Button';
+import { Sheet, SheetWrapper } from '.';
+
+<Meta of={SheetStories} />
+
+# Sheet
+
+export const ShowSheet = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>Show Dialog</Button>
+      <Sheet
+        visible={visible}
+        onCancel={() => setVisible(false)}
+      />
+    </>
+
+);
+};
+
+<ShowSheet />

packages/ui/lib/Sheet/Sheet.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
+  // tags: ['autodocs'],
   argTypes: {},
 } satisfies Meta<typeof Sheet>;
 

packages/ui/package.json

@@ -84,6 +84,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
+    "@storybook/addon-docs": "^7.6.17",
     "@types/react-transition-group": "^4.4.10",
     "zustand": "^4.4.7"
   }