Remove Storybook + unused components (#4517)

knip.json

@@ -1,29 +1,25 @@
 {
 	"$schema": "https://unpkg.com/knip@latest/schema.json",
-	"entry": ["src/extension.ts", "src/activate/index.ts", "webview-ui/src/index.tsx"],
-	"project": ["src/**/*.ts", "webview-ui/src/**/*.{ts,tsx}"],
 	"ignore": [
-		"**/__mocks__/**",
 		"**/__tests__/**",
-		"**/test/**",
-		"**/*.test.ts",
-		"**/*.test.tsx",
-		"**/stories/**",
-		"bin/**",
 		"apps/vscode-e2e/**",
-		"packages/evals/**",
-		"src/extension/**",
+		"src/extension/api.ts",
 		"src/activate/**",
-		"src/workers/**",
-		"src/schemas/ipc.ts",
+		"src/workers/countTokens.ts",
 		"src/extension.ts",
-		"scripts/**",
-		"vitest.config.ts"
+		"scripts/**"
 	],
 	"workspaces": {
+		"src": {
+			"entry": ["extension.ts"],
+			"project": ["**/*.ts"]
+		},
 		"webview-ui": {
 			"entry": ["src/index.tsx"],
 			"project": ["src/**/*.{ts,tsx}"]
+		},
+		"packages/{build,cloud,evals,ipc,telemetry,types}": {
+			"project": ["src/**/*.ts"]
 		}
 	}
 }

webview-ui/.storybook/main.ts

@@ -1,11 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite"
-
-const config: StorybookConfig = {
-	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-	addons: ["@storybook/addon-essentials", "storybook-dark-mode"],
-	framework: {
-		name: "@storybook/react-vite",
-		options: {},
-	},
-}
-export default config

webview-ui/.storybook/preview.ts

@@ -1,17 +0,0 @@
-import type { Preview } from "@storybook/react"
-
-import "./vscode.css"
-import "../src/index.css"
-
-const preview: Preview = {
-	parameters: {
-		controls: {
-			matchers: {
-				color: /(background|color)$/i,
-				date: /Date$/i,
-			},
-		},
-	},
-}
-
-export default preview

webview-ui/.storybook/vscode.css

@@ -1,56 +0,0 @@
-/**
- * Use `Developer: Generate Color Theme From Current Settings` to generate themes
- * using your current VSCode settings.
- *
- * See: https://code.visualstudio.com/docs/getstarted/themes
- */
-
-:root {
-	/**
-	 * The styles below have been defined for Tailwind.
-	 */
-
-	--vscode-foreground: #d1d5da; /* "foreground" */
-
-	--vscode-editor-foreground: #e1e4e8; /* "editor.foreground" */
-	--vscode-editor-background: #24292e; /* "editor.background" */
-
-	--vscode-button-foreground: #dcffe4; /* "button.foreground" */
-	--vscode-button-background: #176f2c; /* "button.background" */
-	--vscode-button-secondaryForeground: #ffffff; /* "button.secondaryForeground" */
-	--vscode-button-secondaryBackground: #444d56; /* "button.secondaryBackground" */
-
-	--vscode-dropdown-foreground: #e1e4e8; /* "dropdown.foreground" */
-	--vscode-dropdown-background: #2f363d; /* "dropdown.background" */
-	--vscode-dropdown-border: #1b1f23; /* "dropdown.border" */
-
-	--vscode-input-foreground: #e1e4e8; /* "input.foreground" */
-	--vscode-input-background: #2f363d; /* "input.background" */
-	--vscode-input-border: #1b1f23; /* "input.border" */
-
-	--vscode-focusBorder: #005cc5; /* "focusBorder" */
-
-	--vscode-badge-foreground: #c8e1ff; /* "badge.foreground" */
-	--vscode-badge-background: #044289; /* "badge.background" */
-
-	--vscode-notifications-foreground: #e1e4e8; /* "notifications.foreground" */
-	--vscode-notifications-background: #2f363d; /* "notifications.background" */
-	--vscode-notifications-border: #1b1f23; /* "notifications.border" */
-
-	--vscode-descriptionForeground: #959da5; /* "descriptionForeground" */
-	--vscode-errorForeground: #f97583; /* "errorForeground" */
-
-	--vscode-list-hoverForeground: #e1e4e8; /* "list.hoverForeground" */
-	--vscode-list-hoverBackground: #282e34; /* "list.hoverBackground" */
-	--vscode-list-focusBackground: #044289; /* "list.focusBackground" */
-
-	/**
-	 * The styles below are used in the @shadcn/ui + Tailwind theme but are
-	 * not exposed as `--color-vscode-*` variables.
-	 */
-
-	--vscode-menu-background: #2f363d; /* "menu.background" [MISSING] */
-	--vscode-menu-foreground: #e1e4e8; /* "menu.foreground" [MISSING] */
-
-	--vscode-disabledForeground: #cccccc; /* "disabledForeground" [MISSING] */
-}

webview-ui/package.json

@@ -12,8 +12,6 @@
 		"build": "tsc -b && vite build",
 		"build:nightly": "tsc -b && vite build --mode nightly",
 		"preview": "vite preview",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
 		"clean": "rimraf ../src/webview-ui/build ../apps/vscode-nightly/build/webview-ui tsconfig.tsbuildinfo .turbo"
 	},
 	"dependencies": {
@@ -80,10 +78,6 @@
 		"@jest/globals": "^29.7.0",
 		"@roo-code/config-eslint": "workspace:^",
 		"@roo-code/config-typescript": "workspace:^",
-		"@storybook/addon-essentials": "^8.5.6",
-		"@storybook/blocks": "^8.5.6",
-		"@storybook/react": "^9.0.0",
-		"@storybook/react-vite": "^9.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.6.1",
@@ -99,8 +93,6 @@
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-simple-dot-reporter": "^1.0.5",
-		"storybook": "^9.0.0",
-		"storybook-dark-mode": "^4.0.2",
 		"ts-jest": "^29.2.5",
 		"typescript": "5.8.3",
 		"vite": "6.3.5"

webview-ui/src/components/ui/chat/Chat.tsx

@@ -1,29 +0,0 @@
-import { HTMLAttributes } from "react"
-
-import { cn } from "@/lib/utils"
-
-import { ChatHandler } from "./types"
-import { ChatProvider } from "./ChatProvider"
-import { ChatMessages } from "./ChatMessages"
-import { ChatInput } from "./ChatInput"
-
-type ChatProps = HTMLAttributes<HTMLDivElement> & {
-	assistantName: string
-	handler: ChatHandler
-}
-
-export const Chat = ({ assistantName, handler, ...props }: ChatProps) => (
-	<ChatProvider value={{ assistantName, ...handler }}>
-		<InnerChat {...props} />
-	</ChatProvider>
-)
-
-type InnerChatProps = HTMLAttributes<HTMLDivElement>
-
-const InnerChat = ({ className, children, ...props }: InnerChatProps) => (
-	<div className={cn("relative flex flex-col flex-1 min-h-0", className)} {...props}>
-		<ChatMessages />
-		{children}
-		<ChatInput />
-	</div>
-)

webview-ui/src/components/ui/chat/ChatInput.tsx

@@ -1,100 +0,0 @@
-import { PaperPlaneIcon, StopIcon } from "@radix-ui/react-icons"
-
-import { Button, AutosizeTextarea } from "@/components/ui"
-
-import { ChatInputProvider } from "./ChatInputProvider"
-import { useChatUI } from "./useChatUI"
-import { useChatInput } from "./useChatInput"
-
-export function ChatInput() {
-	const { input, setInput, append, isLoading } = useChatUI()
-	const isDisabled = isLoading || !input.trim()
-
-	const submit = async () => {
-		if (input.trim() === "") {
-			return
-		}
-
-		setInput("")
-		await append({ role: "user", content: input })
-	}
-
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault()
-		await submit()
-	}
-
-	const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-		if (isDisabled) {
-			return
-		}
-
-		if (e.key === "Enter" && !e.shiftKey) {
-			e.preventDefault()
-			await submit()
-		}
-	}
-
-	return (
-		<ChatInputProvider value={{ isDisabled, handleKeyDown, handleSubmit }}>
-			<div className="border-t border-vscode-editor-background p-3">
-				<ChatInputForm />
-			</div>
-		</ChatInputProvider>
-	)
-}
-
-function ChatInputForm() {
-	const { handleSubmit } = useChatInput()
-
-	return (
-		<form onSubmit={handleSubmit} className="relative">
-			<ChatInputField />
-			<ChatInputSubmit />
-		</form>
-	)
-}
-
-interface ChatInputFieldProps {
-	placeholder?: string
-}
-
-function ChatInputField({ placeholder = "Chat" }: ChatInputFieldProps) {
-	const { input, setInput } = useChatUI()
-	const { handleKeyDown } = useChatInput()
-
-	return (
-		<AutosizeTextarea
-			name="input"
-			placeholder={placeholder}
-			minHeight={75}
-			maxHeight={200}
-			value={input}
-			onChange={({ target: { value } }) => setInput(value)}
-			onKeyDown={handleKeyDown}
-			className="resize-none px-3 pt-3 pb-[50px]"
-		/>
-	)
-}
-
-function ChatInputSubmit() {
-	const { isLoading, stop } = useChatUI()
-	const { isDisabled } = useChatInput()
-	const isStoppable = isLoading && !!stop
-
-	return (
-		<div className="absolute bottom-[1px] left-[1px] right-[1px] h-[40px] bg-input border-t border-vscode-editor-background rounded-b-md p-1">
-			<div className="flex flex-row-reverse items-center gap-2">
-				{isStoppable ? (
-					<Button type="button" variant="ghost" size="sm" onClick={stop}>
-						<StopIcon className="text-destructive" />
-					</Button>
-				) : (
-					<Button type="submit" variant="ghost" size="icon" disabled={isDisabled}>
-						<PaperPlaneIcon />
-					</Button>
-				)}
-			</div>
-		</div>
-	)
-}

webview-ui/src/components/ui/chat/ChatInputProvider.ts

@@ -1,11 +0,0 @@
-import { createContext } from "react"
-
-interface ChatInputContext {
-	isDisabled: boolean
-	handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
-	handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void
-}
-
-export const chatInputContext = createContext<ChatInputContext | null>(null)
-
-export const ChatInputProvider = chatInputContext.Provider

webview-ui/src/components/ui/chat/ChatMessage.tsx

@@ -1,105 +0,0 @@
-import { useMemo } from "react"
-import { CopyIcon, CheckIcon } from "@radix-ui/react-icons"
-import { BrainCircuit, CircleUserRound } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { useClipboard } from "@/components/ui/hooks"
-import { Badge } from "@/components/ui"
-import { Markdown } from "@/components/ui/markdown"
-
-import { BadgeData, ChatHandler, Message, MessageAnnotationType } from "./types"
-import { ChatMessageProvider } from "./ChatMessageProvider"
-import { useChatUI } from "./useChatUI"
-import { useChatMessage } from "./useChatMessage"
-
-interface ChatMessageProps {
-	message: Message
-	isLast: boolean
-	isHeaderVisible: boolean
-	isLoading?: boolean
-	append?: ChatHandler["append"]
-}
-
-export function ChatMessage({ message, isLast, isHeaderVisible }: ChatMessageProps) {
-	const badges = useMemo(
-		() =>
-			message.annotations
-				?.filter(({ type }) => type === MessageAnnotationType.BADGE)
-				.map(({ data }) => data as BadgeData),
-		[message.annotations],
-	)
-
-	return (
-		<ChatMessageProvider value={{ message, isLast }}>
-			<div
-				className={cn("relative group flex flex-col text-secondary-foreground", {
-					"bg-vscode-input-background/50": message.role === "user",
-				})}>
-				{isHeaderVisible && <ChatMessageHeader badges={badges} />}
-				<ChatMessageContent isHeaderVisible={isHeaderVisible} />
-				<ChatMessageActions />
-			</div>
-		</ChatMessageProvider>
-	)
-}
-
-interface ChatMessageHeaderProps {
-	badges?: BadgeData[]
-}
-
-function ChatMessageHeader({ badges }: ChatMessageHeaderProps) {
-	return (
-		<div className="flex flex-row items-center justify-between border-t border-accent px-3 pt-3 pb-1">
-			<ChatMessageAvatar />
-			{badges?.map(({ label, variant = "outline" }) => (
-				<Badge variant={variant} key={label}>
-					{label}
-				</Badge>
-			))}
-		</div>
-	)
-}
-
-const icons: Record<string, React.ReactNode> = {
-	user: <CircleUserRound className="h-4 w-4" />,
-	assistant: <BrainCircuit className="h-4 w-4" />,
-}
-
-function ChatMessageAvatar() {
-	const { assistantName } = useChatUI()
-	const { message } = useChatMessage()
-
-	return icons[message.role] ? (
-		<div className="flex flex-row items-center gap-1">
-			<div className="opacity-25 select-none">{icons[message.role]}</div>
-			<div className="text-muted">{message.role === "user" ? "You" : assistantName}</div>
-		</div>
-	) : null
-}
-
-interface ChatMessageContentProps {
-	isHeaderVisible: boolean
-}
-
-function ChatMessageContent({ isHeaderVisible }: ChatMessageContentProps) {
-	const { message } = useChatMessage()
-
-	return (
-		<div className={cn("flex flex-col gap-4 flex-1 min-w-0 px-4 pb-6", { "pt-4": isHeaderVisible })}>
-			<Markdown content={message.content} />
-		</div>
-	)
-}
-
-function ChatMessageActions() {
-	const { message } = useChatMessage()
-	const { isCopied, copy } = useClipboard()
-
-	return (
-		<div
-			className="absolute right-2 bottom-2 opacity-0 group-hover:opacity-25 cursor-pointer"
-			onClick={() => copy(message.content)}>
-			{isCopied ? <CheckIcon /> : <CopyIcon />}
-		</div>
-	)
-}

webview-ui/src/components/ui/chat/ChatMessageProvider.ts

@@ -1,12 +0,0 @@
-import { createContext } from "react"
-
-import { Message } from "./types"
-
-export interface ChatMessageContext {
-	message: Message
-	isLast: boolean
-}
-
-export const chatMessageContext = createContext<ChatMessageContext | null>(null)
-
-export const ChatMessageProvider = chatMessageContext.Provider

webview-ui/src/components/ui/chat/ChatMessages.tsx

@@ -1,41 +0,0 @@
-import { useEffect, useRef } from "react"
-import { Virtuoso, VirtuosoHandle } from "react-virtuoso"
-
-import { useChatUI } from "./useChatUI"
-import { ChatMessage } from "./ChatMessage"
-
-export function ChatMessages() {
-	const { messages, isLoading, append } = useChatUI()
-	const messageCount = messages.length
-	const virtuoso = useRef<VirtuosoHandle>(null)
-
-	useEffect(() => {
-		if (!virtuoso.current) {
-			return
-		}
-
-		requestAnimationFrame(() =>
-			virtuoso.current?.scrollToIndex({ index: messageCount - 1, align: "end", behavior: "smooth" }),
-		)
-	}, [messageCount])
-
-	return (
-		<Virtuoso
-			ref={virtuoso}
-			data={messages}
-			totalCount={messageCount}
-			itemContent={(index, message) => (
-				<ChatMessage
-					key={index}
-					message={message}
-					isHeaderVisible={
-						!!message.annotations?.length || index === 0 || messages[index - 1].role !== message.role
-					}
-					isLast={index === messageCount - 1}
-					isLoading={isLoading}
-					append={append}
-				/>
-			)}
-		/>
-	)
-}

webview-ui/src/components/ui/chat/ChatProvider.ts

@@ -1,11 +0,0 @@
-import { createContext } from "react"
-
-import { ChatHandler } from "./types"
-
-type ChatContext = ChatHandler & {
-	assistantName: string
-}
-
-export const chatContext = createContext<ChatContext | null>(null)
-
-export const ChatProvider = chatContext.Provider

webview-ui/src/components/ui/chat/index.ts

@@ -1,2 +0,0 @@
-export * from "./types"
-export * from "./Chat"

webview-ui/src/components/ui/chat/types.ts

@@ -1,39 +0,0 @@
-export interface Message {
-	role: "system" | "user" | "assistant" | "data"
-	content: string
-	annotations?: MessageAnnotation[]
-}
-
-export type ChatHandler = {
-	isLoading: boolean
-	setIsLoading: (isLoading: boolean, message?: string) => void
-
-	loadingMessage?: string
-	setLoadingMessage?: (message: string) => void
-
-	input: string
-	setInput: (input: string) => void
-
-	messages: Message[]
-
-	reload?: (options?: { data?: any }) => void
-	stop?: () => void
-	append: (message: Message, options?: { data?: any }) => Promise<string | null | undefined>
-	reset?: () => void
-}
-
-export enum MessageAnnotationType {
-	BADGE = "badge",
-}
-
-export type BadgeData = {
-	label: string
-	variant?: "default" | "secondary" | "destructive" | "outline"
-}
-
-export type AnnotationData = BadgeData
-
-export type MessageAnnotation = {
-	type: MessageAnnotationType
-	data: AnnotationData
-}

webview-ui/src/components/ui/chat/useChatInput.ts

@@ -1,13 +0,0 @@
-import { useContext } from "react"
-
-import { chatInputContext } from "./ChatInputProvider"
-
-export const useChatInput = () => {
-	const context = useContext(chatInputContext)
-
-	if (!context) {
-		throw new Error("useChatInput must be used within a ChatInputProvider")
-	}
-
-	return context
-}

webview-ui/src/components/ui/chat/useChatMessage.ts

@@ -1,13 +0,0 @@
-import { useContext } from "react"
-
-import { chatMessageContext } from "./ChatMessageProvider"
-
-export const useChatMessage = () => {
-	const context = useContext(chatMessageContext)
-
-	if (!context) {
-		throw new Error("useChatMessage must be used within a ChatMessageProvider")
-	}
-
-	return context
-}

webview-ui/src/components/ui/chat/useChatUI.ts

@@ -1,13 +0,0 @@
-import { useContext } from "react"
-
-import { chatContext } from "./ChatProvider"
-
-export const useChatUI = () => {
-	const context = useContext(chatContext)
-
-	if (!context) {
-		throw new Error("useChatUI must be used within a ChatProvider")
-	}
-
-	return context
-}

webview-ui/src/components/ui/markdown/Blockquote.tsx

@@ -1,3 +0,0 @@
-export const Blockquote = ({ children }: { children: React.ReactNode }) => {
-	return <div className="border-l-3 border-accent italic pl-2 py-2 mb-2">{children}</div>
-}

webview-ui/src/components/ui/markdown/CodeBlock.tsx

@@ -1,72 +0,0 @@
-import { FC, memo, useState, useEffect, useCallback } from "react"
-import { codeToHtml } from "shiki"
-import { CopyIcon, CheckIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import { useClipboard } from "@/components/ui/hooks"
-import { Button } from "@/components/ui"
-
-interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-	language: string
-	value: string
-}
-
-export const CodeBlock: FC<CodeBlockProps> = memo(({ language, value, className, ...props }) => {
-	const [highlightedCode, setHighlightedCode] = useState<string>("")
-	const { isCopied, copy } = useClipboard()
-
-	const onCopy = useCallback(() => {
-		if (!isCopied) {
-			copy(value)
-		}
-	}, [isCopied, copy, value])
-
-	useEffect(() => {
-		const highlight = async () => {
-			const theme = "github-dark" // Use VSCode's current theme.
-
-			try {
-				const html = await codeToHtml(value, {
-					lang: language,
-					theme,
-					transformers: [
-						{
-							pre(node) {
-								node.properties.class = cn(className, "overflow-x-auto")
-								return node
-							},
-							code(node) {
-								node.properties.style = "background-color: transparent !important;"
-								return node
-							},
-						},
-					],
-				})
-
-				setHighlightedCode(html)
-			} catch (_e) {
-				setHighlightedCode(value)
-			}
-		}
-
-		highlight()
-	}, [language, value, className])
-
-	return (
-		<div className="relative" {...props}>
-			<div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
-			<Button
-				variant="outline"
-				size="icon"
-				className="absolute top-1 right-1 cursor-pointer bg-black/10"
-				onClick={onCopy}>
-				{isCopied ? (
-					<CheckIcon style={{ width: 12, height: 12 }} />
-				) : (
-					<CopyIcon style={{ width: 12, height: 12 }} />
-				)}
-			</Button>
-		</div>
-	)
-})
-CodeBlock.displayName = "CodeBlock"

webview-ui/src/components/ui/markdown/Markdown.tsx

@@ -1,81 +0,0 @@
-import { FC, memo } from "react"
-import ReactMarkdown, { Options } from "react-markdown"
-import remarkGfm from "remark-gfm"
-
-import { Separator } from "@/components/ui"
-
-import { CodeBlock } from "./CodeBlock"
-import { Blockquote } from "./Blockquote"
-
-const MemoizedReactMarkdown: FC<Options> = memo(
-	ReactMarkdown,
-	(prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className,
-)
-
-export function Markdown({ content }: { content: string }) {
-	return (
-		<MemoizedReactMarkdown
-			remarkPlugins={[remarkGfm]}
-			className="custom-markdown break-words"
-			components={{
-				p({ children }) {
-					return <div className="mb-2 last:mb-0">{children}</div>
-				},
-				hr() {
-					return <Separator />
-				},
-				ol({ children }) {
-					return (
-						<ol className="list-decimal pl-4 [&>li]:mb-1 [&>li:last-child]:mb-0 [&>li>ul]:mt-1 [&>li>ol]:mt-1">
-							{children}
-						</ol>
-					)
-				},
-				ul({ children }) {
-					return (
-						<ul className="list-disc pl-4 [&>li]:mb-1 [&>li:last-child]:mb-0 [&>li>ul]:mt-1 [&>li>ol]:mt-1">
-							{children}
-						</ul>
-					)
-				},
-				blockquote({ children }) {
-					return <Blockquote>{children}</Blockquote>
-				},
-				code({ className, children, ...props }) {
-					if (children && Array.isArray(children) && children.length) {
-						if (children[0] === "▍") {
-							return <span className="mt-1 animate-pulse cursor-default">▍</span>
-						}
-
-						children[0] = (children[0] as string).replace("`▍`", "▍")
-					}
-
-					const match = /language-(\w+)/.exec(className || "")
-
-					const isInline =
-						props.node?.position && props.node.position.start.line === props.node.position.end.line
-
-					return isInline ? (
-						<code className={className} {...props}>
-							{children}
-						</code>
-					) : (
-						<CodeBlock
-							language={(match && match[1]) || ""}
-							value={String(children).replace(/\n$/, "")}
-							className="rounded-xs p-3 mb-2"
-						/>
-					)
-				},
-				a({ href, children }) {
-					return (
-						<a href={href} target="_blank" rel="noopener noreferrer">
-							{children}
-						</a>
-					)
-				},
-			}}>
-			{content}
-		</MemoizedReactMarkdown>
-	)
-}

webview-ui/src/components/ui/markdown/index.ts

@@ -1 +0,0 @@
-export * from "./Markdown"

webview-ui/src/stories/AutosizeTextarea.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { AutosizeTextarea } from "@src/components/ui/autosize-textarea"
-
-const meta: Meta<typeof AutosizeTextarea> = {
-	title: "Primitives/AutosizeTextarea",
-	component: AutosizeTextarea,
-	tags: ["autodocs"],
-	args: {
-		minHeight: 40,
-		maxHeight: 400,
-		placeholder: "This textarea will expand as you type.",
-		className: "p-2",
-	},
-}
-
-export default meta
-
-type Story = StoryObj<typeof AutosizeTextarea>
-
-export const Default: Story = {
-	args: {},
-}

webview-ui/src/stories/Badge.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { Badge } from "@/components/ui"
-
-const meta: Meta<typeof Badge> = {
-	title: "Primitives/Badge",
-	component: Badge,
-	tags: ["autodocs"],
-	args: {
-		children: "Badge",
-	},
-}
-
-export default meta
-
-type Story = StoryObj<typeof Badge>
-
-export const Default: Story = {
-	args: {
-		children: "Default",
-	},
-}
-
-export const Secondary: Story = {
-	args: {
-		variant: "secondary",
-		children: "Secondary",
-	},
-}
-
-export const Destructive: Story = {
-	args: {
-		variant: "destructive",
-		children: "Destructive",
-	},
-}
-
-export const Outline: Story = {
-	args: {
-		variant: "outline",
-		children: "Outline",
-	},
-}

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

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { Button } from "@/components/ui"
-
-const meta = {
-	title: "primitives/Button",
-	component: Button,
-	parameters: { layout: "centered" },
-	tags: ["autodocs"],
-	argTypes: {
-		variant: {
-			control: "select",
-			options: ["default", "secondary", "outline", "ghost", "link", "destructive"],
-			type: "string",
-			table: {
-				defaultValue: {
-					summary: "default",
-				},
-			},
-		},
-		size: {
-			control: "select",
-			options: ["default", "sm", "lg", "icon"],
-			type: "string",
-			table: {
-				defaultValue: {
-					summary: "default",
-				},
-			},
-		},
-		children: {
-			table: {
-				disable: true,
-			},
-		},
-		asChild: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-	args: {
-		children: "Button",
-	},
-} satisfies Meta<typeof Button>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	name: "Default",
-}
-
-export const Secondary: Story = {
-	name: "Secondary",
-	args: {
-		variant: "secondary",
-	},
-}
-
-export const Destructive: Story = {
-	name: "Destructive",
-	args: {
-		variant: "destructive",
-	},
-}
-
-export const Outline: Story = {
-	name: "Outline",
-	args: {
-		variant: "outline",
-	},
-}
-
-export const Ghost: Story = {
-	name: "Ghost",
-	args: {
-		variant: "ghost",
-	},
-}
-
-export const Link: Story = {
-	name: "Link",
-	args: {
-		variant: "link",
-	},
-}
-
-export const Combobox: Story = {
-	name: "Combobox",
-	args: {
-		variant: "combobox",
-	},
-}

webview-ui/src/stories/Chat.stories.tsx

@@ -1,51 +0,0 @@
-import { useState } from "react"
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { Chat, ChatHandler, Message } from "@/components/ui/chat"
-
-const meta = {
-	title: "ui/Chat",
-	component: Chat,
-	parameters: { layout: "centered" },
-	tags: ["autodocs"],
-} satisfies Meta<typeof Chat>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	name: "Chat",
-	args: {
-		assistantName: "Assistant",
-		handler: {} as ChatHandler,
-	},
-	render: function StorybookChat() {
-		const handler = useStorybookChat()
-		return (
-			<Chat
-				assistantName="Assistant"
-				handler={handler}
-				className="border w-[460px] h-[640px] bg-vscode-editor-background"
-			/>
-		)
-	},
-}
-
-const useStorybookChat = (): ChatHandler => {
-	const [isLoading, setIsLoading] = useState(false)
-	const [input, setInput] = useState("")
-	const [messages, setMessages] = useState<Message[]>([])
-
-	const append = async (message: Message, _options?: { data?: any }) => {
-		const echo: Message = {
-			...message,
-			role: "assistant",
-			content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-		}
-		setMessages((prev) => [...prev, message, echo])
-		return Promise.resolve(null)
-	}
-
-	return { isLoading, setIsLoading, input, setInput, messages, append }
-}

webview-ui/src/stories/Collapsible.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@src/components/ui/collapsible"
-import { Button } from "@src/components/ui/button"
-import { ChevronsUpDown } from "lucide-react"
-
-const meta: Meta<typeof Collapsible> = {
-	title: "Primitives/Collapsible",
-	component: Collapsible,
-	tags: ["autodocs"],
-}
-
-export default meta
-
-type Story = StoryObj<typeof Collapsible>
-
-export const Default: Story = {
-	render: () => <CollapsibleDemo />,
-}
-
-const CollapsibleDemo = () => {
-	const [isOpen, setIsOpen] = useState(false)
-
-	return (
-		<Collapsible open={isOpen} onOpenChange={setIsOpen}>
-			<CollapsibleTrigger asChild>
-				<Button variant="ghost">
-					Hello
-					<ChevronsUpDown className="size-4" />
-				</Button>
-			</CollapsibleTrigger>
-			<CollapsibleContent className="p-2">👋</CollapsibleContent>
-		</Collapsible>
-	)
-}

webview-ui/src/stories/Combobox.stories.tsx

@@ -1,99 +0,0 @@
-import { useState } from "react"
-import type { Meta, StoryObj } from "@storybook/react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import {
-	Button,
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui"
-
-const meta = {
-	title: "primitives/Combobox",
-	component: Combobox,
-	parameters: { layout: "centered" },
-	tags: ["autodocs"],
-} satisfies Meta<typeof Combobox>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	name: "Combobox",
-	render: () => <Combobox />,
-}
-
-const frameworks = [
-	{
-		value: "next.js",
-		label: "Next.js",
-	},
-	{
-		value: "sveltekit",
-		label: "SvelteKit",
-	},
-	{
-		value: "nuxt.js",
-		label: "Nuxt.js",
-	},
-	{
-		value: "remix",
-		label: "Remix",
-	},
-	{
-		value: "astro",
-		label: "Astro",
-	},
-]
-
-function Combobox() {
-	const [open, setOpen] = useState(false)
-	const [value, setValue] = useState("")
-
-	return (
-		<Popover open={open} onOpenChange={setOpen}>
-			<PopoverTrigger asChild>
-				<Button variant="combobox" role="combobox" aria-expanded={open} className="w-[200px] justify-between">
-					{value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..."}
-					<CaretSortIcon className="opacity-50" />
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent className="w-[200px] p-0">
-				<Command>
-					<CommandInput placeholder="Search framework..." className="h-9" />
-					<CommandList>
-						<CommandEmpty>No framework found.</CommandEmpty>
-						<CommandGroup>
-							{frameworks.map((framework) => (
-								<CommandItem
-									key={framework.value}
-									value={framework.value}
-									onSelect={(currentValue) => {
-										setValue(currentValue === value ? "" : currentValue)
-										setOpen(false)
-									}}>
-									{framework.label}
-									<CheckIcon
-										className={cn(
-											"ml-auto",
-											value === framework.value ? "opacity-100" : "opacity-0",
-										)}
-									/>
-								</CommandItem>
-							))}
-						</CommandGroup>
-					</CommandList>
-				</Command>
-			</PopoverContent>
-		</Popover>
-	)
-}

webview-ui/src/stories/DropdownMenu.stories.tsx

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import {
-	HamburgerMenuIcon,
-	BorderLeftIcon,
-	BorderRightIcon,
-	BorderBottomIcon,
-	BorderTopIcon,
-	TextAlignLeftIcon,
-	TextAlignCenterIcon,
-	TextAlignRightIcon,
-} from "@radix-ui/react-icons"
-
-import {
-	Button,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuTrigger,
-} from "@/components/ui"
-
-const meta = {
-	title: "primitives/DropdownMenu",
-	component: DropdownMenu,
-	parameters: { layout: "centered" },
-	tags: ["autodocs"],
-} satisfies Meta<typeof DropdownMenu>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	name: "DropdownMenu",
-	render: () => (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button variant="ghost" size="icon">
-					<HamburgerMenuIcon />
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent>
-				<DropdownMenuLabel>Label</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				<DropdownMenuGroup>
-					<DropdownMenuItem>Item 1</DropdownMenuItem>
-					<DropdownMenuItem>
-						Item 2<DropdownMenuShortcut>⌘2</DropdownMenuShortcut>
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	),
-}
-
-type DropdownMenuVariantProps = {
-	side?: "top" | "bottom" | "left" | "right"
-	align?: "start" | "center" | "end"
-	children?: React.ReactNode
-}
-
-const DropdownMenuVariant = ({ side = "bottom", align = "center", children }: DropdownMenuVariantProps) => (
-	<DropdownMenu>
-		<DropdownMenuTrigger asChild>
-			<Button variant="ghost" size="icon">
-				{children}
-			</Button>
-		</DropdownMenuTrigger>
-		<DropdownMenuContent side={side} align={align}>
-			<DropdownMenuItem>Foo</DropdownMenuItem>
-			<DropdownMenuItem>Bar</DropdownMenuItem>
-			<DropdownMenuItem>Baz</DropdownMenuItem>
-		</DropdownMenuContent>
-	</DropdownMenu>
-)
-
-export const Placements: Story = {
-	render: () => (
-		<div className="flex gap-2">
-			<DropdownMenuVariant side="top">
-				<BorderTopIcon />
-			</DropdownMenuVariant>
-			<DropdownMenuVariant side="bottom">
-				<BorderBottomIcon />
-			</DropdownMenuVariant>
-			<DropdownMenuVariant side="left">
-				<BorderLeftIcon />
-			</DropdownMenuVariant>
-			<DropdownMenuVariant side="right">
-				<BorderRightIcon />
-			</DropdownMenuVariant>
-		</div>
-	),
-}
-
-export const Alignments: Story = {
-	render: () => (
-		<div className="flex gap-2">
-			<DropdownMenuVariant align="center">
-				<TextAlignCenterIcon />
-			</DropdownMenuVariant>
-			<DropdownMenuVariant align="end">
-				<TextAlignRightIcon />
-			</DropdownMenuVariant>
-			<DropdownMenuVariant align="start">
-				<TextAlignLeftIcon />
-			</DropdownMenuVariant>
-		</div>
-	),
-}

webview-ui/src/stories/Progress.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { Progress } from "@/components/ui"
-
-const meta: Meta<typeof Progress> = {
-	title: "Primitives/Progress",
-	component: Progress,
-	parameters: {
-		layout: "centered",
-	},
-	args: {
-		className: "w-[300px]",
-	},
-	tags: ["autodocs"],
-}
-
-export default meta
-
-type Story = StoryObj<typeof Progress>
-
-export const Default: Story = {
-	args: {
-		value: 50,
-	},
-}

webview-ui/src/stories/Slider.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { Slider } from "@/components/ui"
-
-const meta: Meta<typeof Slider> = {
-	title: "Primitives/Slider",
-	component: Slider,
-	parameters: {
-		layout: "centered",
-	},
-	args: {
-		defaultValue: [50],
-		max: 100,
-		min: 0,
-		step: 1,
-		className: "w-[300px]",
-	},
-	tags: ["autodocs"],
-}
-
-export default meta
-
-type Story = StoryObj<typeof Slider>
-
-export const Default: Story = {
-	args: {
-		defaultValue: [50],
-		max: 100,
-		min: 0,
-		step: 1,
-	},
-}

webview-ui/src/stories/Welcome.mdx

@@ -1,7 +0,0 @@
-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.