refactor: UI components and add new Badge, Checkbox, RadioGroup

.storybook/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

.storybook/main.ts

@@ -5,12 +5,20 @@ import path from "path";
 const projectRoot = path.resolve(process.cwd());
 
 const config: StorybookConfig = {
-  stories: ["../packages/shared-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    {
+      directory: "../packages/shared-ui/src",
+      files: "**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    },
+  ],
   addons: ["@storybook/addon-essentials"],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+  docs: {
+    autodocs: true,
+  },
   staticDirs: ["../apps/landing/public"],
   async viteFinal(config) {
     const webRoot = path.resolve(projectRoot, "apps/landing");

.storybook/preview.tsx

@@ -1,12 +1,19 @@
-import React from "react";
-
 import type { Preview } from "@storybook/react";
 
+import { AppModalProvider } from "../packages/shared-ui/src/components/app-modal";
 import "../packages/shared-ui/src/global.css";
 import "./preview.css";
 
 const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <AppModalProvider>
+        <Story />
+      </AppModalProvider>
+    ),
+  ],
   parameters: {
+    layout: "centered",
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -18,7 +25,7 @@ const preview: Preview = {
       values: [
         {
           name: "light",
-          value: "oklch(0.9843 0.0017 247.8393)",
+          value: "#ffffff",
         },
         {
           name: "dark",
@@ -27,22 +34,6 @@ const preview: Preview = {
       ],
     },
   },
-  decorators: [
-    (Story) => (
-      <div
-        className="bg-background text-foreground antialiased"
-        style={
-          {
-            "--font-dm-sans": '"DM Sans", sans-serif',
-            "--font-instrument-serif": '"Instrument Serif", serif',
-            "--font-jetbrains-mono": '"JetBrains Mono", monospace',
-          } as React.CSSProperties
-        }
-      >
-        <Story />
-      </div>
-    ),
-  ],
 };
 
 export default preview;

.storybook/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"]
+}

package.json

@@ -21,9 +21,13 @@
     "@tailwindcss/postcss": "^4",
     "@tailwindcss/vite": "^4",
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
     "eslint-plugin-storybook": "^10.1.10",
     "prettier": "^3.7.4",
     "prettier-plugin-tailwindcss": "^0.7.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "storybook": "^8.6.15",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",

packages/shared-ui/package.json

@@ -35,13 +35,20 @@
     "@base-ui/react": "^1.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "countries-list": "^3.4.1",
+    "country-flag-icons": "^1.6.20",
+    "framer-motion": "^12.43.0",
+    "libphonenumber-js": "^1.13.11",
+    "react-syntax-highlighter": "^16.1.1",
+    "react-useanimations": "^2.10.0",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4",
     "@tailwindcss/postcss": "^4",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "tailwindcss": "^4",
     "tsup": "^8",
     "typescript": "^5"

packages/shared-ui/src/components/app-modal/app-modal.stories.tsx

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Button } from "../../ui/button"
+import { Input } from "../../ui/input"
+import { AppModal } from "./index"
+
+const meta: Meta = {
+  title: "Components/AppModal",
+  decorators: [
+    (Story) => (
+      <div className="flex min-h-24 items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Small: Story = {
+  render: () => (
+    <Button
+      onClick={() =>
+        AppModal.open({
+          size: "small",
+          title: "Enable live routing",
+          description:
+            "Traffic will start following this rule immediately. You can pause it later from the rule list.",
+          primaryButton: { children: "Enable" },
+          secondaryButton: { children: "Cancel" },
+        })
+      }
+    >
+      Open small modal
+    </Button>
+  ),
+}
+
+export const Medium: Story = {
+  render: () => (
+    <Button
+      onClick={() =>
+        AppModal.open({
+          size: "medium",
+          title: "Invite a teammate",
+          description:
+            "They’ll get access to this workspace’s routing rules and destination weights.",
+          content: (
+            <Input type="email" placeholder="nina.v@example.com" aria-label="Email" />
+          ),
+          primaryButton: { children: "Send invite" },
+          secondaryButton: { children: "Cancel" },
+        })
+      }
+    >
+      Open medium modal
+    </Button>
+  ),
+}
+
+export const Full: Story = {
+  render: () => (
+    <Button
+      onClick={() =>
+        AppModal.open({
+          size: "full",
+          title: "Rule editor",
+          description:
+            "Build the full routing rule in a dedicated canvas. Save when the conditions and destinations look right.",
+          content: (
+            <div className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
+              Condition and destination rows go here.
+            </div>
+          ),
+          primaryButton: { children: "Save rule" },
+          secondaryButton: { children: "Cancel" },
+        })
+      }
+    >
+      Open full-screen modal
+    </Button>
+  ),
+}
+
+export const CustomFooter: Story = {
+  render: () => (
+    <Button
+      onClick={() =>
+        AppModal.open({
+          title: "Export report",
+          description: "Choose how you want to download this routing report.",
+          footer: (
+            <div className="flex w-full items-center justify-between gap-3">
+              <Button variant="ghost" onClick={() => AppModal.close()}>
+                Cancel
+              </Button>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => AppModal.close()}>
+                  CSV
+                </Button>
+                <Button onClick={() => AppModal.close()}>PDF</Button>
+              </div>
+            </div>
+          ),
+        })
+      }
+    >
+      Open with custom footer
+    </Button>
+  ),
+}
+
+export const Destructive: Story = {
+  render: () => (
+    <Button
+      variant="destructive"
+      onClick={() =>
+        AppModal.open({
+          title: "Delete this rule?",
+          description:
+            "This can’t be undone. Live traffic using this rule will fall back to the default route.",
+          primaryButton: {
+            children: "Delete rule",
+            variant: "destructive",
+            onClick: () => AppModal.close(),
+          },
+          secondaryButton: { children: "Keep rule" },
+        })
+      }
+    >
+      Open delete confirmation
+    </Button>
+  ),
+}
+
+export const NoCloseButton: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() =>
+        AppModal.open({
+          showCloseButton: false,
+          title: "Processing payout",
+          description:
+            "Don’t close this window until the export finishes. You’ll get a download when it’s ready.",
+          primaryButton: {
+            children: "Stay on this page",
+            onClick: () => AppModal.close(),
+          },
+        })
+      }
+    >
+      Open (no X button)
+    </Button>
+  ),
+}
+
+export const Steps: Story = {
+  render: () => (
+    <Button
+      variant="secondary"
+      onClick={() =>
+        AppModal.open({
+          step: "Step 1 of 2",
+          title: "Modal title",
+          description:
+            "Body copy sits here. Footer keeps one primary and a quiet secondary.",
+          primaryButton: {
+            children: "Continue",
+            onClick: () =>
+              AppModal.updateConfig({
+                step: "Step 2 of 2",
+                title: "Almost done",
+                description: "Confirm to finish this flow.",
+                primaryButton: {
+                  children: "Done",
+                  onClick: () => AppModal.close(),
+                },
+              }),
+          },
+          secondaryButton: { children: "Cancel" },
+        })
+      }
+    >
+      Open step flow
+    </Button>
+  ),
+}