feat: add sample components & stories

components/Button/Button.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./Button"
+
+const meta: Meta<typeof Button> = {
+  title: "Button",
+  component: Button,
+  args: {
+    intent: "primary",
+    disabled: false,
+    children: "Button",
+    size: "lg",
+  },
+  argTypes: {
+    intent: {
+      options: ["primary", "secondary",],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["sm", "lg"],
+      control: { type: "select" },
+    },
+  },
+}
+
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = {
+  render: (args) => <Button {...args} />,
+}
+
+export default meta

components/Button/Button.tsx

@@ -0,0 +1,48 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { twMerge } from "tailwind-merge"
+
+const button = cva(
+  [
+    "justify-center",
+    "inline-flex",
+    "items-center",
+    "rounded-xl",
+    "text-center",
+    "border",
+    "border-blue-400",
+    "transition-colors",
+    "delay-50",
+  ],
+  {
+    variants: {
+      intent: {
+        primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
+        secondary: ["bg-transparent", "text-blue-400", "hover:enabled:bg-blue-400", "hover:enabled:text-white"],
+      },
+      size: {
+        sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
+        lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
+      },
+      disabled: { true: ["opacity-30"], false: [] },
+    },
+    defaultVariants: {
+      intent: "primary",
+      size: "lg",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled">,
+    VariantProps<typeof button> {
+  disabled?: boolean
+}
+
+export function Button({ className, intent, size, disabled, ...props }: ButtonProps) {
+  return (
+    <button className={twMerge(button({ intent, size, className, disabled }))} disabled={disabled} {...props}>
+      {props.children}
+    </button>
+  )
+}