Add shadcn/ui + Storybook

webview-ui/src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				outline: "border border-input bg-foreground shadow-sm hover:bg-foreground/80",
+				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "h-9 w-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+)
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button"
+		return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+	},
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

webview-ui/src/index.css

@@ -1,44 +1,64 @@
 @import "tailwindcss";
 
+@plugin "tailwindcss-animate";
+
+@theme {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 4px);
+}
+
 @layer base {
-	/* Theme Variables - VSCode Integration */
 	:root {
-		/* Base Colors */
 		--background: var(--vscode-editor-background);
 		--foreground: var(--vscode-editor-foreground);
-
-		/* Component Colors */
 		--card: var(--vscode-editor-background);
 		--card-foreground: var(--vscode-editor-foreground);
 		--popover: var(--vscode-menu-background, var(--vscode-editor-background));
 		--popover-foreground: var(--vscode-menu-foreground, var(--vscode-editor-foreground));
-
-		/* Button Colors */
 		--primary: var(--vscode-button-background);
 		--primary-foreground: var(--vscode-button-foreground);
 		--secondary: var(--vscode-button-secondaryBackground);
 		--secondary-foreground: var(--vscode-button-secondaryForeground);
-		--accent: var(--vscode-focusBorder);
-		--accent-foreground: var(--vscode-button-foreground);
-
-		/* State Colors */
 		--muted: var(--vscode-disabledForeground);
 		--muted-foreground: var(--vscode-descriptionForeground);
+		--accent: var(--vscode-input-border);
+		--accent-foreground: var(--vscode-button-foreground);
 		--destructive: var(--vscode-errorForeground);
-		--destructive-foreground: var(--vscode-editor-background);
-
-		/* UI Elements */
+		--destructive-foreground: var(--vscode-button-foreground);
 		--border: var(--vscode-widget-border);
 		--input: var(--vscode-input-background);
-		--ring: var(--vscode-focusBorder);
-		--radius: 0.5rem;
-
-		/* Chart Colors - Using VSCode's chart colors */
+		--ring: var(--vscode-input-border);
 		--chart-1: var(--vscode-charts-red);
 		--chart-2: var(--vscode-charts-blue);
 		--chart-3: var(--vscode-charts-yellow);
 		--chart-4: var(--vscode-charts-orange);
 		--chart-5: var(--vscode-charts-green);
+		--radius: 0.5rem;
 	}
 }
 
@@ -70,10 +90,10 @@ vscode-button::part(control):focus {
 	outline: none;
 }
 
-/*
-Use vscode native scrollbar styles
-https://github.com/gitkraken/vscode-gitlens/blob/b1d71d4844523e8b2ef16f9e007068e91f46fd88/src/webviews/apps/home/home.scss
-*/
+/**
+ * Use vscode native scrollbar styles
+ * https://github.com/gitkraken/vscode-gitlens/blob/b1d71d4844523e8b2ef16f9e007068e91f46fd88/src/webviews/apps/home/home.scss
+ */
 
 html {
 	height: 100%;
@@ -163,10 +183,11 @@ The above scrollbar styling uses some transparent background color magic to acco
 	background-color: transparent;
 }
 
-/*
-Dropdown label
-https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#with-label
-*/
+/**
+ * Dropdown label
+ * https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#with-label
+ */
+
 .dropdown-container {
 	box-sizing: border-box;
 	display: flex;
@@ -174,6 +195,7 @@ https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#wi
 	align-items: flex-start;
 	justify-content: flex-start;
 }
+
 .dropdown-container label {
 	display: block;
 	color: var(--vscode-foreground);
@@ -184,6 +206,7 @@ https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#wi
 }
 
 /* Fix dropdown double scrollbar overflow */
+
 #api-provider > div > ul {
 	overflow: unset;
 }
@@ -197,18 +220,20 @@ vscode-dropdown::part(listbox) {
 }
 
 /* Faded icon buttons in textfields */
-
 .input-icon-button {
 	cursor: pointer;
 	opacity: 0.65;
 }
+
 .input-icon-button:hover {
 	opacity: 1;
 }
+
 .input-icon-button.disabled {
 	cursor: not-allowed;
 	opacity: 0.4;
 }
+
 .input-icon-button.disabled:hover {
 	opacity: 0.4;
 }
@@ -220,10 +245,6 @@ vscode-dropdown::part(listbox) {
 	border-radius: 3px;
 	box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
 	color: transparent;
-	/* padding: 0.5px;
-	margin: -0.5px;
-	position: relative;
-	bottom: -0.5px; */
 }
 
 .mention-context-highlight {

webview-ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

webview-ui/src/stories/Button.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+
+import { Button } from "@/components/ui/button"
+
+const meta = {
+	title: "Example/Button",
+	component: Button,
+	parameters: { layout: "centered" },
+	tags: ["autodocs"],
+	argTypes: {},
+	args: { onClick: fn(), children: "Button" },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		variant: "default",
+	},
+}
+
+export const Secondary: Story = {
+	args: {
+		variant: "secondary",
+	},
+}
+
+export const Outline: Story = {
+	args: {
+		variant: "outline",
+	},
+}
+
+export const Ghost: Story = {
+	args: {
+		variant: "ghost",
+	},
+}
+
+export const Link: Story = {
+	args: {
+		variant: "link",
+	},
+}
+
+export const Destructive: Story = {
+	args: {
+		variant: "destructive",
+	},
+}

webview-ui/src/stories/Welcome.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Welcome" />
+
+# Welcome
+
+This Roo Code storybook is used to independently develop components for the Roo Code webview UI.