@weaverclub/render 0.0.2 → 0.0.3

package/src/server/backend.ts

@@ -1,104 +0,0 @@
-import { BunContext } from '@effect/platform-bun'
-import { Console, Effect } from 'effect'
-import type { CSS } from '#core/css/css'
-import type { ReactStory } from '#react/reactStory'
-import index from '../ui/index.html'
-import { getStories } from './api/getStories'
-import { renderIframe } from './api/renderIframe'
-
-// Track connected WebSocket clients for HMR
-const hmrClients = new Set<{ send: (msg: string) => void }>()
-
-export const notifyHmrClients = () => {
-	for (const client of hmrClients) {
-		try {
-			client.send(JSON.stringify({ type: 'reload' }))
-		} catch {
-			hmrClients.delete(client)
-		}
-	}
-}
-
-// Mutable state for HMR updates
-// biome-ignore lint/suspicious/noExplicitAny: Required for story typing
-let currentStories: ReactStory<any>[] = []
-let currentCss: CSS[] = []
-let currentProjectRoot = ''
-
-export const updateBackendState = ({
-	stories,
-	css,
-	projectRoot
-}: StartBackendArgs) => {
-	currentStories = stories
-	currentCss = css
-	currentProjectRoot = projectRoot
-}
-
-export const startBackend = ({ stories, css, projectRoot }: StartBackendArgs) =>
-	Effect.sync(() => {
-		// Initialize mutable state
-		currentStories = stories
-		currentCss = css
-		currentProjectRoot = projectRoot
-
-		return Bun.serve({
-			port: 3210,
-			routes: {
-				'/iframe/*': {
-					GET: (request) =>
-						Effect.runPromise(
-							renderIframe({
-								request,
-								stories: currentStories,
-								css: currentCss,
-								projectRoot: currentProjectRoot
-							}).pipe(Effect.provide(BunContext.layer))
-						)
-				},
-				'/api/stories': {
-					GET: (request) =>
-						Effect.runSync(getStories({ request, stories: currentStories }))
-				},
-				// Explicit routes for UI paths
-				'/': index,
-				'/index.html': index
-			},
-			// @ts-expect-error
-			fetch(req, server) {
-				const url = new URL(req.url)
-
-				// Handle WebSocket upgrade for HMR
-				if (url.pathname === '/__hmr') {
-					const upgraded = server.upgrade(req)
-					if (upgraded) return undefined
-					return new Response('WebSocket upgrade failed', { status: 500 })
-				}
-
-				// Fall back to index for any other paths (SPA routing)
-				return index
-			},
-			websocket: {
-				open(ws) {
-					hmrClients.add(ws)
-					console.log('🔌 HMR client connected')
-				},
-				close(ws) {
-					hmrClients.delete(ws)
-					console.log('🔌 HMR client disconnected')
-				},
-				message(_ws, _message) {
-					// No client messages expected
-				}
-			}
-		})
-	}).pipe(
-		Effect.tap(() => Console.log('Backend started on http://localhost:3210'))
-	)
-
-type StartBackendArgs = {
-	// biome-ignore lint/suspicious/noExplicitAny: Required for story typing
-	stories: ReactStory<any>[]
-	css: CSS[]
-	projectRoot: string
-}

package/src/server/streaming.ts

@@ -1,16 +0,0 @@
-import { Effect } from 'effect'
-
-export const streamToString = Effect.fn(function* (stream: ReadableStream) {
-	const reader = stream.getReader()
-	const chunks: Uint8Array[] = []
-
-	while (true) {
-		const { done, value } = yield* Effect.tryPromise(() => reader.read())
-
-		if (done) break
-
-		chunks.push(value)
-	}
-
-	return new TextDecoder().decode(Buffer.concat(chunks))
-})

package/src/ui/api.ts

@@ -1,16 +0,0 @@
-import { QueryClient } from '@tanstack/react-query'
-
-export const queryClient = new QueryClient()
-
-export async function getStories(): Promise<GetStoriesResponse> {
-	return fetch('/api/stories').then((res) => res.json())
-}
-
-export type GetStoriesResponse = {
-	[category: string]: Story[]
-}
-
-export type Story = {
-	name: string
-	path: string
-}

package/src/ui/app.tsx

@@ -1,23 +0,0 @@
-import { Tabs } from '@base-ui/react'
-import { QueryClientProvider } from '@tanstack/react-query'
-import { queryClient } from './api'
-import { AppSidebar } from './components/appSidebar'
-import { SidebarProvider } from './components/sidebar'
-import { TabContent } from './components/tabContent'
-import { TabList } from './components/tabList'
-
-export function App() {
-	return (
-		<QueryClientProvider client={queryClient}>
-			<SidebarProvider>
-				<AppSidebar />
-				<main className="flex flex-col w-full">
-					<Tabs.Root>
-						<TabList />
-						<TabContent />
-					</Tabs.Root>
-				</main>
-			</SidebarProvider>
-		</QueryClientProvider>
-	)
-}

package/src/ui/cn.ts

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

package/src/ui/components/appSidebar.tsx

@@ -1,76 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { getStories } from '#ui/api'
-import { Button } from './button'
-import { Kbd } from './kdb'
-import {
-	Sidebar,
-	SidebarContent,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarHeader,
-	SidebarMenu
-} from './sidebar'
-import { Spinner } from './spinner'
-import { TabButton } from './tabButton'
-
-export function AppSidebar() {
-	const { data, isLoading, error } = useQuery({
-		queryKey: ['stories'],
-		queryFn: getStories
-	})
-
-	return (
-		<Sidebar>
-			<SidebarHeader>
-				<Button
-					variant="outline"
-					size="lg"
-					className="flex justify-between gap-1 w-full text-zinc-500 font-normal"
-				>
-					<span>Search...</span>
-					<Kbd>⌘ K</Kbd>
-				</Button>
-			</SidebarHeader>
-
-			<SidebarContent>
-				{isLoading && (
-					<div className="w-full py-8 flex items-center justify-center">
-						<Spinner />
-					</div>
-				)}
-				{error && (
-					<div className="w-full py-8 flex flex-col items-center justify-center text-center gap-2">
-						<p className="text-xs text-destructive font-medium">
-							Failed to load stories.
-						</p>
-						<p className="text-xs text-muted-foreground">
-							Check if your server is running and accessible.
-						</p>
-					</div>
-				)}
-				{data &&
-					Object.keys(data).map((storyGroup) => (
-						<SidebarGroup key={storyGroup}>
-							<SidebarGroupLabel>{storyGroup}</SidebarGroupLabel>
-							<SidebarGroupContent>
-								<SidebarMenu>
-									{data[storyGroup]?.map((story) => (
-										<TabButton
-											key={story.path}
-											story={{
-												id: story.path,
-												name: story.name
-											}}
-										>
-											<span>{story.name}</span>
-										</TabButton>
-									))}
-								</SidebarMenu>
-							</SidebarGroupContent>
-						</SidebarGroup>
-					))}
-			</SidebarContent>
-		</Sidebar>
-	)
-}

package/src/ui/components/button.stories.tsx

@@ -1,32 +0,0 @@
-import { controls } from '#react/reactControlBuilder'
-import { story } from '#react/reactStory'
-import { Button } from './button'
-
-const buttonControls = controls<typeof Button>()
-	.variant('variant', {
-		defaultValue: 'default',
-		options: ['default', 'destructive', 'ghost', 'outline', 'secondary', 'link']
-	})
-	.variant('size', {
-		defaultValue: 'default',
-		options: [
-			'default',
-			'xs',
-			'sm',
-			'lg',
-			'icon',
-			'icon-xs',
-			'icon-sm',
-			'icon-lg'
-		]
-	})
-	.bool('disabled', {
-		defaultValue: false
-	})
-
-export const Story = story({
-	name: 'UI/Button',
-	component: Button,
-	controls: buttonControls,
-	render: (props) => <Button {...props}>Click me</Button>
-})

package/src/ui/components/button.tsx

@@ -1,55 +0,0 @@
-import { Button as ButtonPrimitive } from '@base-ui/react/button'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../cn'
-
-const buttonVariants = cva(
-	"focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-	{
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
-				outline:
-					'border-border dark:bg-input/20 dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
-				secondary:
-					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-				ghost:
-					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-				destructive:
-					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
-				link: 'text-primary underline-offset-4 hover:underline'
-			},
-			size: {
-				default:
-					"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-				xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
-				sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-				lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
-				icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
-				'icon-xs': "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
-				'icon-sm': "size-6 [&_svg:not([class*='size-'])]:size-3",
-				'icon-lg': "size-8 [&_svg:not([class*='size-'])]:size-4"
-			}
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
-	}
-)
-
-function Button({
-	className,
-	variant = 'default',
-	size = 'default',
-	...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
-	return (
-		<ButtonPrimitive
-			data-slot="button"
-			className={cn(buttonVariants({ variant, size, className }))}
-			{...props}
-		/>
-	)
-}
-
-export { Button, buttonVariants }

package/src/ui/components/command.tsx

@@ -1,187 +0,0 @@
-import { Command as CommandPrimitive } from 'cmdk'
-import { CheckIcon, SearchIcon } from 'lucide-react'
-import type * as React from 'react'
-import { cn } from '../cn'
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle
-} from './dialog'
-import { InputGroup, InputGroupAddon } from './inputGroup'
-
-function Command({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-	return (
-		<CommandPrimitive
-			data-slot="command"
-			className={cn(
-				'bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden',
-				className
-			)}
-			{...props}
-		/>
-	)
-}
-
-function CommandDialog({
-	title = 'Command Palette',
-	description = 'Search for a command to run...',
-	children,
-	className,
-	showCloseButton = false,
-	...props
-}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
-	title?: string
-	description?: string
-	className?: string
-	showCloseButton?: boolean
-	children: React.ReactNode
-}) {
-	return (
-		<Dialog {...props}>
-			<DialogHeader className="sr-only">
-				<DialogTitle>{title}</DialogTitle>
-				<DialogDescription>{description}</DialogDescription>
-			</DialogHeader>
-			<DialogContent
-				className={cn('rounded-xl! p-0 overflow-hidden p-0', className)}
-				showCloseButton={showCloseButton}
-			>
-				{children}
-			</DialogContent>
-		</Dialog>
-	)
-}
-
-function CommandInput({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-	return (
-		<div data-slot="command-input-wrapper" className="p-1 pb-0">
-			<InputGroup className="bg-input/20 dark:bg-input/30 h-8!">
-				<CommandPrimitive.Input
-					data-slot="command-input"
-					className={cn(
-						'w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-						className
-					)}
-					{...props}
-				/>
-				<InputGroupAddon>
-					<SearchIcon className="size-3.5 shrink-0 opacity-50" />
-				</InputGroupAddon>
-			</InputGroup>
-		</div>
-	)
-}
-
-function CommandList({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-	return (
-		<CommandPrimitive.List
-			data-slot="command-list"
-			className={cn(
-				'no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto',
-				className
-			)}
-			{...props}
-		/>
-	)
-}
-
-function CommandEmpty({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-	return (
-		<CommandPrimitive.Empty
-			data-slot="command-empty"
-			className={cn('py-6 text-center text-xs/relaxed', className)}
-			{...props}
-		/>
-	)
-}
-
-function CommandGroup({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-	return (
-		<CommandPrimitive.Group
-			data-slot="command-group"
-			className={cn(
-				'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
-				className
-			)}
-			{...props}
-		/>
-	)
-}
-
-function CommandSeparator({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-	return (
-		<CommandPrimitive.Separator
-			data-slot="command-separator"
-			className={cn('bg-border/50 -mx-1 my-1 h-px', className)}
-			{...props}
-		/>
-	)
-}
-
-function CommandItem({
-	className,
-	children,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-	return (
-		<CommandPrimitive.Item
-			data-slot="command-item"
-			className={cn(
-				"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-				className
-			)}
-			{...props}
-		>
-			{children}
-			<CheckIcon className="ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
-		</CommandPrimitive.Item>
-	)
-}
-
-function CommandShortcut({
-	className,
-	...props
-}: React.ComponentProps<'span'>) {
-	return (
-		<span
-			data-slot="command-shortcut"
-			className={cn(
-				'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest',
-				className
-			)}
-			{...props}
-		/>
-	)
-}
-
-export {
-	Command,
-	CommandDialog,
-	CommandInput,
-	CommandList,
-	CommandEmpty,
-	CommandGroup,
-	CommandItem,
-	CommandShortcut,
-	CommandSeparator
-}