Add doc components on storybook (#117)

apps/docs/.storybook/global.css

@@ -1,7 +1,20 @@
 @import url("@/styles/tokens.css");
 
-.hd-container {
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--hd-color-surface-primary);
+.shd-container {
+    --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(--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"] {
+    --sbt-container-background: var(--hd-neutral-900);
+    --sbt-container-color: var(--hd-neutral-800);
 }

apps/docs/.storybook/preview.tsx

@@ -5,8 +5,8 @@ import "../app/globals.css";
 // Storybook styles
 import "./global.css";
 
-const Container = ({ children, theme }) => (
-    <div className="container" data-theme={theme}>{children}</div>
+const Container = ({ children, theme }: { children: React.ReactNode, theme: "light" | "dark"}) => (
+    <div className="shd-container" data-theme={theme}>{children}</div>
 )
 
 const preview: Preview = {

apps/docs/app/playground/page.tsx

@@ -11,7 +11,8 @@ export default function PlaygroundPage() {
                 flexDirection: "column",
                 gap: "0.75rem",
                 marginBlock: "2rem"
-            }}>
+            }}
+            >
                 <li>
                     <Link href="/playground/codeblock">Codeblock →</Link>
                 </li>

apps/docs/components/copyButton/CopyButton.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import CopyButton from "./CopyButton";
+
+const meta = {
+    title: "Component/CopyButton",
+    component: CopyButton,
+    args: {
+        text: "storybook is awesome"
+    }
+} satisfies Meta<typeof CopyButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Inline: Story = {
+    args: {
+        variant: "inline"
+    }
+};
+
+export const Ghost: Story = {
+    args: {
+        variant: "ghost",
+        children: "this text can be copied in 1 click"
+    }
+};

apps/docs/components/copyButton/CopyButton.tsx

@@ -1,37 +1,57 @@
 "use client";
 
+import React from "react";
 import clsx from "clsx";
-import React, { type ReactNode } from "react";
 
 import { Button } from "react-aria-components";
 
 import "./copyButton.css";
 
 interface CopyButtonProps {
+    variant?: "default" | "inline" | "ghost";
     text: string;
     className?: string;
-    children?: ReactNode;
     onCopy?: () => void;
-    isCopied: boolean;
-    setIsCopied: React.Dispatch<React.SetStateAction<boolean>>;
+    copyMessage?: string;
 }
 
-const CopyButton = ({ text, className, children, onCopy, isCopied, setIsCopied }: CopyButtonProps) => {
-    const classes = clsx("hd-copy-button", className);
+const CopiedSvg = <svg width="24" height="24" className="hd-copy-button__icon" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m5 11.75 5 5 9-9.5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>;
+// eslint-disable-next-line max-len
+const CopySvg = <svg width="16" height="16" className="hd-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 CopyButton = (
+    { text, className, children, onCopy, variant = "default", copyMessage = "Copied!", ...rest }: React.PropsWithChildren<CopyButtonProps>) => {
+    const [isCopied, setIsCopied] = React.useState(false);
+
+    const classes = clsx("hd-copy-button", {
+        [`hd-copy-button--${variant}`]: variant !== "default"
+    }, className);
 
     const copy = async () => {
         await navigator.clipboard.writeText(text);
         setIsCopied(true);
         onCopy?.();
 
-        setTimeout(() => {
+        const timer = setTimeout(() => {
             setIsCopied(false);
         }, 5000);
+
+        return () => {
+            clearTimeout(timer);
+        };
     };
 
+    const status = (
+        variant === "ghost"
+            ? <span className="hd-copy-button__status">{copyMessage}</span>
+            : CopiedSvg
+    );
+
+    const content = children ?? CopySvg;
+
     return (
-        <Button isDisabled={isCopied} onPress={copy} className={classes} aria-label="Copy">
-            {children}
+        <Button isDisabled={isCopied} onPress={copy} className={classes} aria-label="Copy" {...rest}>
+            {isCopied ? status : content}
         </Button>
     );
 };

apps/docs/components/copyButton/copyButton.css

@@ -1,13 +1,36 @@
 .hd-copy-button {
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: transparent;
     border: none;
-    border-radius: var(--hd-space-1);
-    cursor: pointer;
+    aspect-ratio: 1/1;
+    border-radius: var(--hd-space-05);
+    width: var(--hd-space-4);
+    background-color: transparent;
+}
+
+.hd-copy-button:not([disabled]):hover {
+    background-color: var(--hd-color-neutral-surface-weak);
+}
+
+.hd-copy-button__icon {
+    stroke: currentcolor;
 }
 
 .hd-copy-button[disabled]:hover {
     cursor: not-allowed;
 }
+
+.hd-copy-button--inline {
+    width: var(--hd-space-3);
+}
+
+.hd-copy-button--ghost {
+    aspect-ratio: unset;
+    width: auto;
+}
+
+.hd-copy-button--ghost:not([disabled]):hover {
+    background-color: transparent;
+}

apps/docs/components/iconTable/IconItem.tsx

@@ -17,8 +17,6 @@ function toKebabCase(str: string) {
 }
 
 const IconItem: React.FC<IconItemProps> = ({ name, type, size }) => {
-    const [isCopied, setIsCopied] = React.useState(false);
-
     const getIconNumericSize = (iconSize: IconItemProps["size"]) => {
         switch (iconSize) {
             case "sm":
@@ -45,13 +43,11 @@ const IconItem: React.FC<IconItemProps> = ({ name, type, size }) => {
         <>
             <div className="hd-icon-item">
                 <div className="hd-icon-item-content">
-                    <CopyButton className="hd-icon-item-copy" text={copyString} isCopied={isCopied} setIsCopied={setIsCopied}>
-                        {isCopied ? <span className="hd-icon-item__copy-status">Copied!</span> :
-                            <span className="hd-icon-item__icon">
-                                <Component size={size} />
-                            </span>
-                        }
-                    </CopyButton>
+                    <span className="hd-icon-item__icon">
+                        <CopyButton className="hd-icon-item-copy" text={copyString} variant="ghost">
+                            <Component size={size} />
+                        </CopyButton>
+                    </span>
                     <div className="hd-icon-item__title">
                         {formattedName}
                     </div>

apps/docs/components/iconTable/IconTable.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IconTable } from "./IconTable";
+
+const meta = {
+    title: "Component/IconTable",
+    component: IconTable
+} satisfies Meta<typeof IconTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        size: "lg",
+        type: "react"
+    }
+};

apps/docs/components/iconTable/iconItem.css

@@ -14,25 +14,18 @@
     flex-direction: column;
 }
 
-.hd-icon-item__icon {
-    align-items: center;
-    border-radius: var(--hd-space-1);
-    display: flex;
-    height: 3rem;
-    justify-content: center;
-    transition: opacity 0.2s ease-in-out;
+.hd-icon-item__icon,
+.hd-icon-item-copy {
+    aspect-ratio: 1;
     width: 3rem;
 }
 
-.hd-icon-item__copy-status {
+.hd-icon-item__icon {
     align-items: center;
-    color: var(--hd-color-accent-text);
+    border-radius: var(--hd-space-1);
     display: flex;
-    font-size: 0.875rem;
-    height: 3rem;
     justify-content: center;
     transition: opacity 0.2s ease-in-out;
-    width: 3rem;
 }
 
 .hd-icon-item-copy:not([disabled]):hover {