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>
+  )
+}

components/Tooltip/Tooltip.tsx

@@ -0,0 +1,73 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip"
+import { cva, VariantProps } from "class-variance-authority"
+import React from "react"
+import { twMerge } from "tailwind-merge"
+
+const tooltipContent = cva([], {
+  variants: {
+    intent: {
+      primary: ["rounded-0.5md", "bg-zinc-700", "font-open-sans", "text-white"],
+    },
+    size: {
+      md: ["px-4", "py-2.5", "text-2xs"],
+    },
+  },
+  defaultVariants: {
+    intent: "primary",
+    size: "md",
+  },
+})
+
+const tooltipArrow = cva([], {
+  variants: {
+    intent: {
+      primary: ["fill-zinc-700"],
+    },
+    size: {
+      md: ["w-4", "h-2"],
+    },
+  },
+  defaultVariants: {
+    intent: "primary",
+    size: "md",
+  },
+})
+
+export interface TooltipProps extends VariantProps<typeof tooltipContent>, RadixTooltip.TooltipProps {
+  explainer: React.ReactElement | string
+  children: React.ReactElement
+  className?: string
+  withArrow?: boolean
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+export function Tooltip({
+  children,
+  explainer,
+  open,
+  defaultOpen,
+  onOpenChange,
+  intent,
+  size,
+  side = "top",
+  className,
+  withArrow,
+}: TooltipProps) {
+  return (
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} delayDuration={200}>
+        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltip.Content
+            side={side}
+            sideOffset={5}
+            className={twMerge(tooltipContent({ intent, size, className }))}
+          >
+            {explainer}
+            {withArrow ? <RadixTooltip.Arrow className={twMerge(tooltipArrow({ intent, size, className }))} /> : null}
+          </RadixTooltip.Content>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  )
+}