chore(doc): refactor stories following the PR comment

gsoft-inc · Dec 15, 2023 · 6c781e4 · 6c781e4
1 parent 7921433
commit 6c781e4
Show file tree

Hide file tree

Showing 23 changed files with 159 additions and 128 deletions.
diff --git a/apps/docs/.storybook/global.css b/apps/docs/.storybook/global.css
@@ -1,20 +1,20 @@
 @import url("@/styles/tokens.css");
 
 .shd-container {
-    --rs-landing-demo-bg: #fff;
-    --rs-landing-demo-dot-color: #e2e3e4;
+    --sbt-container-background: var(--hd-white);
+    --sbt-container-color: var(--hd-neutral-50);
 
     width: 100%;
     min-height: 100vh;
     padding: 2rem;
     background:
-        linear-gradient(90deg,var(--rs-landing-demo-bg) 10px,transparent 1%) 50%,
-        linear-gradient(var(--rs-landing-demo-bg) 10px,transparent 1%) 50%,
-        var(--rs-landing-demo-dot-color);
+        linear-gradient(90deg,var(--sbt-container-background) 10px,transparent 1%) 50%,
+        linear-gradient(var(--sbt-container-background) 10px,transparent 1%) 50%,
+        var(--sbt-container-color);
     background-size: 12px 12px;
 }
 
 [data-theme="dark"] {
-    --rs-landing-demo-bg: #1e1e1e;
-    --rs-landing-demo-dot-color: #2e2e2e;
+    --sbt-container-background: var(--hd-neutral-900);
+    --sbt-container-color: var(--hd-neutral-800);
 }
diff --git a/apps/docs/components/copyButton/CopyButton.stories.tsx b/apps/docs/components/copyButton/CopyButton.stories.tsx
@@ -2,31 +2,28 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import CopyButton from "./CopyButton";
 
-const meta: Meta<typeof CopyButton> = {
-    title: "Component/Copy/Button",
-    component: CopyButton
-};
+const meta = {
+    title: "Component/CopyButton",
+    component: CopyButton,
+    args: {
+        text: "storybook is awesome",
+    }
+} satisfies Meta<typeof CopyButton>;
 
 export default meta;
-type Story = StoryObj<typeof CopyButton>;
+type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {
-        text: "this text can be copied in 1 click",
-        children: "this text can be copied in 1 click"
-    },
-};
+export const Default: Story = {};
 
 export const Inline: Story = {
     args: {
-        ...Default.args,
         variant: "inline"
     },
 };
 
 export const Ghost: Story = {
     args: {
-        ...Default.args,
-        variant: "ghost"
+        variant: "ghost",
+        children: "this text can be copied in 1 click"
     },
 };
diff --git a/apps/docs/components/copyButton/CopyButton.tsx b/apps/docs/components/copyButton/CopyButton.tsx
@@ -47,11 +47,7 @@ const CopyButton = (
             : CopiedSvg
     );
 
-    const content = (
-        variant === "ghost"
-            ? children
-            : CopySvg
-    );
+    const content = children ?? CopySvg
 
     return (
         <Button isDisabled={isCopied} onPress={copy} className={classes} aria-label="Copy" {...rest}>

diff --git a/apps/docs/components/iconTable/IconTable.stories.tsx b/apps/docs/components/iconTable/IconTable.stories.tsx
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { IconTable } from "./IconTable";
 
-const meta: Meta<typeof IconTable> = {
+const meta = {
     title: "Component/IconTable",
-    component: IconTable
-};
+    component: IconTable,
+} satisfies Meta<typeof IconTable>;
 
 export default meta;
-type Story = StoryObj<typeof IconTable>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/preview/Preview.stories.tsx b/apps/docs/components/preview/Preview.stories.tsx
@@ -2,17 +2,15 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Preview from "./Preview";
 
-const meta: Meta<typeof Preview> = {
+const meta = {
     title: "Component/Preview",
     component: Preview
-};
+} satisfies Meta<typeof Preview>
 
 export default meta;
-type Story = StoryObj<typeof Preview>;
+type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {}
-};
+export const Default: Story = {};
 
 export const Color: Story = {
     args: {
@@ -38,6 +36,14 @@ export const FontSize: Story = {
     }
 }
 
+export const FontWeight: Story = {
+    args: {
+        category: "fontWeight",
+        name: "font-weight-400",
+        value: "400"
+    }
+}
+
 export const LineHeight: Story = {
     args: {
         category: "lineHeight",
@@ -61,3 +67,11 @@ export const Size: Story = {
         value: "8rem"
     }
 }
+
+export const Shadow: Story = {
+    args: {
+        category: "shadow",
+        name: "shadow-sm",
+        value: "0 1px 6px 0 rgba(60, 60, 60, 0.10)"
+    }
+}
diff --git a/apps/docs/components/tableSection/TableSection.stories.tsx b/apps/docs/components/tableSection/TableSection.stories.tsx
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import TableSection from "./TableSection";
 
-const meta: Meta<typeof TableSection> = {
+const meta = {
     title: "Component/TableSection",
     component: TableSection
-};
+} satisfies Meta<typeof TableSection>;
 
 export default meta;
-type Story = StoryObj<typeof TableSection>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/tabs/Tabs.stories.tsx b/apps/docs/components/tabs/Tabs.stories.tsx
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Tabs from "./Tabs";
 
-const meta: Meta<typeof Tabs> = {
+const meta = {
     title: "Component/Tabs",
     component: Tabs
-};
+} satisfies Meta<typeof Tabs>;
 
 export default meta;
-type Story = StoryObj<typeof Tabs>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/themeSwitch/ThemeSwitch.stories.tsx b/apps/docs/components/themeSwitch/ThemeSwitch.stories.tsx
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import ThemeSwitch from "./ThemeSwitch";
 
-const meta: Meta<typeof ThemeSwitch> = {
+const meta = {
     title: "Component/Theme Switch",
     component: ThemeSwitch
-};
+} satisfies Meta<typeof ThemeSwitch>;
 
 export default meta;
-type Story = StoryObj<typeof ThemeSwitch>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/ui/card/Card.stories.ts b/apps/docs/components/ui/card/Card.stories.ts
@@ -2,14 +2,16 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Card from "./Card";
 
-const meta: Meta<typeof Card> = {
+const meta = {
     title: "Ui/Card",
     component: Card
-};
+} satisfies Meta<typeof Card>;
 
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    args: {}
+    args: {
+        children: "Card content"
+    }
 };
diff --git a/apps/docs/components/ui/code/Code.stories.ts b/apps/docs/components/ui/code/Code.stories.ts
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Code from "./Code";
 
-const meta: Meta<typeof Code> = {
+const meta = {
     title: "Ui/Code",
     component: Code
-}
+} satisfies Meta<typeof Code>;
 
 export default meta;
-type Story = StoryObj<typeof Code>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/ui/header/Header.stories.ts b/apps/docs/components/ui/header/Header.stories.ts
@@ -2,14 +2,12 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Header from "./Header";
 
-const meta: Meta<typeof Header> = {
+const meta = {
     title: "Ui/Header",
     component: Header
-};
+} satisfies Meta<typeof Header>
 
 export default meta;
-type Story = StoryObj<typeof Header>;
+type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {}
-};
+export const Default: Story = {};
diff --git a/apps/docs/components/ui/iconButton/IconButton.stories.tsx b/apps/docs/components/ui/iconButton/IconButton.stories.tsx
@@ -2,18 +2,18 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import IconButton from "./IconButton";
 
-const meta: Meta<typeof IconButton> = {
+const meta = {
     title: "Ui/IconButton",
     component: IconButton
-};
+} satisfies Meta<typeof IconButton>;
 
 export default meta;
-type Story = StoryObj<typeof IconButton>;
+type Story = StoryObj<typeof meta>;
 
-const iconCopie = <svg stroke="currentColor" width="16" height="16" className="hd-codeblock-copy-button__icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /><path d="M3.33337 9.99992H2.66671C2.31309 9.99992 1.97395 9.85944 1.7239 9.60939C1.47385 9.35935 1.33337 9.02021 1.33337 8.66659V2.66659C1.33337 2.31296 1.47385 1.97382 1.7239 1.72378C1.97395 1.47373 2.31309 1.33325 2.66671 1.33325H8.66671C9.02033 1.33325 9.35947 1.47373 9.60952 1.72378C9.85956 1.97382 10 2.31296 10 2.66659V3.33325" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
+const copyIcon = <svg stroke="currentColor" width="16" height="16" className="hd-codeblock-copy-button__icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /><path d="M3.33337 9.99992H2.66671C2.31309 9.99992 1.97395 9.85944 1.7239 9.60939C1.47385 9.35935 1.33337 9.02021 1.33337 8.66659V2.66659C1.33337 2.31296 1.47385 1.97382 1.7239 1.72378C1.97395 1.47373 2.31309 1.33325 2.66671 1.33325H8.66671C9.02033 1.33325 9.35947 1.47373 9.60952 1.72378C9.85956 1.97382 10 2.31296 10 2.66659V3.33325" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
 
 export const Default: Story = {
     args: {
-        children: iconCopie
+        children: copyIcon
     }
 }
diff --git a/apps/docs/components/ui/image/Image.stories.tsx b/apps/docs/components/ui/image/Image.stories.tsx
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import Image from './Image';
 
-const meta: Meta<typeof Image> = {
+const meta = {
     title: 'Ui/Image',
     component: Image
-};
+} satisfies Meta<typeof Image>
 
 export default meta;
-type Story = StoryObj<typeof Image>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/ui/mobileMenu/MobileMenu.stories.tsx b/apps/docs/components/ui/mobileMenu/MobileMenu.stories.tsx
@@ -3,24 +3,24 @@ import type { Meta, StoryObj } from "@storybook/react";
 import MobileMenu from "./MobileMenu";
 import MobileMenuTrigger from "./MobileMenuTrigger";
 
-const meta: Meta<typeof MobileMenu> = {
+const meta = {
     title: "Mobile/Menu",
-    component: MobileMenu
-};
+    component: MobileMenu,
+    parameters: {
+        viewport: {
+            defaultViewport: "mobile1"
+        }
+    }
+} satisfies Meta<typeof MobileMenu>;
 
 export default meta;
-type Story = StoryObj<typeof MobileMenu>;
+type Story = StoryObj<typeof meta>;
 type TriggerStory = StoryObj<typeof MobileMenuTrigger>;
 
 export const Default: Story = {
     args: {
         isOpen: true
     },
-    parameters: {
-        viewport: {
-            defaultViewport: "mobile1"
-        }
-    }
 }
 
 export const Trigger: TriggerStory = {
@@ -32,9 +32,4 @@ export const Trigger: TriggerStory = {
             <MobileMenuTrigger {...args} />
         )
     },
-    parameters: {
-        viewport: {
-            defaultViewport: "mobile1"
-        }
-    }
 };
diff --git a/apps/docs/components/ui/nav/Nav.stories.tsx b/apps/docs/components/ui/nav/Nav.stories.tsx
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Nav from "./Nav";
 
-const meta: Meta<typeof Nav> = {
+const meta = {
     title: "Ui/Nav",
     component: Nav
-};
+} satisfies Meta<typeof Nav>;
 
 export default meta;
-type Story = StoryObj<typeof Nav>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/ui/overlay/Overlay.stories.ts b/apps/docs/components/ui/overlay/Overlay.stories.ts
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Overlay from "./Overlay";
 
-const meta: Meta<typeof Overlay> = {
+const meta = {
     title: "Ui/Overlay",
     component: Overlay
-};
+} satisfies Meta<typeof Overlay>;
 
 export default meta;
-type Story = StoryObj<typeof Overlay>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {

diff --git a/apps/docs/components/ui/pre/Pre.stories.tsx b/apps/docs/components/ui/pre/Pre.stories.tsx
@@ -2,13 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Pre from "./Pre";
 
-const meta: Meta<typeof Pre> = {
+const meta = {
     title: "Ui/Pre",
     component: Pre
-};
+} satisfies Meta<typeof Pre>;
 
 export default meta;
-type Story = StoryObj<typeof Pre>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {