@weaverclub/render 0.0.2 → 0.0.4

package/src/ui/components/skeleton.tsx

@@ -1,13 +0,0 @@
-import { cn } from '../cn'
-
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot="skeleton"
-			className={cn('bg-muted rounded-md animate-pulse', className)}
-			{...props}
-		/>
-	)
-}
-
-export { Skeleton }

package/src/ui/components/spinner.tsx

@@ -1,15 +0,0 @@
-import { Loader2Icon } from 'lucide-react'
-import { cn } from '../cn'
-
-function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
-	return (
-		<Loader2Icon
-			role="status"
-			aria-label="Loading"
-			className={cn('size-4 animate-spin', className)}
-			{...props}
-		/>
-	)
-}
-
-export { Spinner }

package/src/ui/components/tabButton.tsx

@@ -1,80 +0,0 @@
-import type { ComponentProps } from 'react'
-import { useActiveTab, useNewTab, useReplaceTab, useTabs } from '#ui/tabs'
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuTrigger
-} from './contextMenu'
-import { SidebarMenuButton } from './sidebar'
-
-export function TabButton({ story, ...props }: TabButtonProps) {
-	const [tabs] = useTabs()
-	const { activeTab, setActiveTab } = useActiveTab()
-	const newTab = useNewTab()
-	const replaceTab = useReplaceTab()
-
-	function handleOpen(state: 'temporary' | 'permanent') {
-		return () => {
-			const existingTab = tabs.find((tab) => tab.path === story.id)
-
-			if (existingTab) {
-				return setActiveTab(existingTab.id)
-			}
-
-			if (activeTab?.temporary) {
-				return replaceTab(activeTab.id, {
-					name: story.name,
-					path: story.id,
-					temporary: state === 'temporary'
-				})
-			}
-
-			return newTab({
-				name: story.name,
-				path: story.id,
-				temporary: state === 'temporary'
-			})
-		}
-	}
-
-	function handleOpenInNewTab() {
-		return () => {
-			newTab({
-				name: story.name,
-				path: story.id,
-				temporary: false
-			})
-		}
-	}
-
-	return (
-		<ContextMenu>
-			<ContextMenuTrigger
-				render={
-					<SidebarMenuButton
-						onClick={handleOpen('temporary')}
-						onDoubleClick={handleOpen('permanent')}
-						{...props}
-					/>
-				}
-			/>
-
-			<ContextMenuContent>
-				<ContextMenuItem onSelect={handleOpen('permanent')}>
-					Open
-				</ContextMenuItem>
-				<ContextMenuItem onSelect={handleOpenInNewTab()}>
-					Open in New Tab
-				</ContextMenuItem>
-			</ContextMenuContent>
-		</ContextMenu>
-	)
-}
-
-type TabButtonProps = ComponentProps<typeof SidebarMenuButton> & {
-	story: {
-		name: string
-		id: string
-	}
-}

package/src/ui/components/tabContent.tsx

@@ -1,20 +0,0 @@
-import { Tabs } from '@base-ui/react'
-import { useTabs } from '#ui/tabs'
-
-export function TabContent() {
-	const [tabs] = useTabs()
-
-	return (
-		<>
-			{tabs.map((tab) => (
-				<Tabs.Panel key={tab.id} value={tab.id}>
-					<iframe
-						src={`/iframe/${tab.path}`}
-						className="w-full h-full border-none bg-white"
-						title={tab.name}
-					/>
-				</Tabs.Panel>
-			))}
-		</>
-	)
-}

package/src/ui/components/tabList.tsx

@@ -1,53 +0,0 @@
-import { Tabs } from '@base-ui/react/tabs'
-import { ArrowLeftIcon, ArrowRightIcon, XIcon } from 'lucide-react'
-import { useCloseTab, useMarkTabAsPermanent, useTabs } from '#ui/tabs'
-import { Button } from './button'
-
-export function TabList() {
-	const [tabs] = useTabs()
-	const markTabAsPermanent = useMarkTabAsPermanent()
-	const closeTab = useCloseTab()
-
-	return (
-		<Tabs.List className="border-b h-8 bg-sidebar flex w-full">
-			{tabs.length > 0 && (
-				<div className="flex h-full items-center px-1.5 gap-0.5 border-r">
-					<Button variant="ghost" size="icon-sm">
-						<ArrowLeftIcon />
-					</Button>
-					<Button variant="ghost" size="icon-sm">
-						<ArrowRightIcon />
-					</Button>
-				</div>
-			)}
-			{tabs.map((tab) => (
-				<Tabs.Tab
-					nativeButton={false}
-					render={<div />}
-					key={tab.id}
-					value={tab.id}
-					className="px-6 h-8 border-r text-xs flex items-center justify-center relative group data-[temporary=true]:italic select-none"
-					data-temporary={tab.temporary}
-					onClick={() => {
-						if (tab.temporary) {
-							markTabAsPermanent(tab.id)
-						}
-					}}
-				>
-					{tab.name}
-					<Button
-						size="icon-xs"
-						variant="ghost"
-						className="absolute right-1 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-200 p-0"
-						onClick={(e) => {
-							e.stopPropagation()
-							closeTab(tab.id)
-						}}
-					>
-						<XIcon />
-					</Button>
-				</Tabs.Tab>
-			))}
-		</Tabs.List>
-	)
-}

package/src/ui/components/textarea.tsx

@@ -1,17 +0,0 @@
-import type * as React from 'react'
-import { cn } from '../cn'
-
-function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-	return (
-		<textarea
-			data-slot="textarea"
-			className={cn(
-				'border-input bg-input/20 dark:bg-input/30 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 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
-				className
-			)}
-			{...props}
-		/>
-	)
-}
-
-export { Textarea }

package/src/ui/components/tooltip.tsx

@@ -1,67 +0,0 @@
-import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
-import { cn } from '../cn'
-
-function TooltipProvider({
-	delay = 0,
-	...props
-}: TooltipPrimitive.Provider.Props) {
-	return (
-		<TooltipPrimitive.Provider
-			data-slot="tooltip-provider"
-			delay={delay}
-			{...props}
-		/>
-	)
-}
-
-function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
-	return (
-		<TooltipProvider>
-			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
-		</TooltipProvider>
-	)
-}
-
-function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
-	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-	className,
-	side = 'top',
-	sideOffset = 4,
-	align = 'center',
-	alignOffset = 0,
-	children,
-	...props
-}: TooltipPrimitive.Popup.Props &
-	Pick<
-		TooltipPrimitive.Positioner.Props,
-		'align' | 'alignOffset' | 'side' | 'sideOffset'
-	>) {
-	return (
-		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Positioner
-				align={align}
-				alignOffset={alignOffset}
-				side={side}
-				sideOffset={sideOffset}
-				className="isolate z-50"
-			>
-				<TooltipPrimitive.Popup
-					data-slot="tooltip-content"
-					className={cn(
-						'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)',
-						className
-					)}
-					{...props}
-				>
-					{children}
-					<TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
-				</TooltipPrimitive.Popup>
-			</TooltipPrimitive.Positioner>
-		</TooltipPrimitive.Portal>
-	)
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/ui/frontend.tsx

@@ -1,68 +0,0 @@
-import { createRoot, type Root } from 'react-dom/client'
-import './styles.css'
-import { App } from './app'
-
-const elem = document.getElementById('root')
-
-if (!elem) throw new Error('Root element not found')
-
-// HMR WebSocket client
-function setupHMR() {
-	let reconnectAttempts = 0
-	const maxReconnectAttempts = 10
-
-	function refreshIframes() {
-		// Find all iframes and refresh them by updating their src
-		const iframes = document.querySelectorAll('iframe')
-		iframes.forEach((iframe) => {
-			const currentSrc = iframe.src
-			// Add or update a cache-busting param
-			const url = new URL(currentSrc)
-			url.searchParams.set('_hmr', Date.now().toString())
-			iframe.src = url.toString()
-		})
-		console.log(`[HMR] Refreshed ${iframes.length} iframe(s)`)
-	}
-
-	function connect() {
-		const ws = new WebSocket(`ws://${location.host}/__hmr`)
-
-		ws.onopen = () => {
-			console.log('[HMR] Connected')
-			reconnectAttempts = 0
-		}
-
-		ws.onmessage = (event) => {
-			const data = JSON.parse(event.data)
-			if (data.type === 'reload') {
-				console.log('[HMR] Reloading iframes...')
-				refreshIframes()
-			}
-		}
-
-		ws.onclose = () => {
-			console.log('[HMR] Disconnected')
-			if (reconnectAttempts < maxReconnectAttempts) {
-				reconnectAttempts++
-				setTimeout(connect, 1000 * Math.min(reconnectAttempts, 5))
-			}
-		}
-
-		ws.onerror = () => ws.close()
-	}
-
-	connect()
-}
-
-if (import.meta.hot) {
-	let root: Root = import.meta.hot.data.root
-
-	if (!root) root = import.meta.hot.data.root = createRoot(elem)
-
-	root.render(<App />)
-} else {
-	createRoot(elem).render(<App />)
-}
-
-// Always set up our custom WebSocket HMR
-setupHMR()

package/src/ui/hooks/useMobile.ts

@@ -1,23 +0,0 @@
-import * as React from 'react'
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-	React.useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-
-		const onChange = () => {
-			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-		}
-
-		mql.addEventListener('change', onChange)
-
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-
-		return () => mql.removeEventListener('change', onChange)
-	}, [])
-
-	return !!isMobile
-}

package/src/ui/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Render</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./frontend.tsx"></script>
-  </body>
-</html>

package/src/ui/routeTree.gen.ts

@@ -1,35 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-
-export interface FileRoutesByFullPath {}
-export interface FileRoutesByTo {}
-export interface FileRoutesById {
-	__root__: typeof rootRouteImport
-}
-export interface FileRouteTypes {
-	fileRoutesByFullPath: FileRoutesByFullPath
-	fullPaths: never
-	fileRoutesByTo: FileRoutesByTo
-	to: never
-	id: '__root__'
-	fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {}
-
-declare module '@tanstack/react-router' {
-	interface FileRoutesByPath {}
-}
-
-const rootRouteChildren: RootRouteChildren = {}
-export const routeTree = rootRouteImport
-	._addFileChildren(rootRouteChildren)
-	._addFileTypes<FileRouteTypes>()

package/src/ui/routes/__root.tsx

@@ -1,9 +0,0 @@
-import { createRootRoute, Outlet } from '@tanstack/react-router'
-
-export const Route = createRootRoute({
-	component: RootComponent
-})
-
-function RootComponent() {
-	return <Outlet />
-}

package/src/ui/styles.css

@@ -1,123 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(0.577 0.245 27.325);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.145 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.145 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.985 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.396 0.141 25.723);
-	--destructive-foreground: oklch(0.637 0.237 25.331);
-	--border: oklch(0.269 0 0);
-	--input: oklch(0.269 0 0);
-	--ring: oklch(0.439 0 0);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.269 0 0);
-	--sidebar-ring: oklch(0.439 0 0);
-}
-
-@theme inline {
-	--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-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-	* {
-		@apply border-border outline-ring/50;
-	}
-	body {
-		@apply bg-background text-foreground;
-	}
-}

package/src/ui/tabs.tsx

@@ -1,89 +0,0 @@
-import { createMemoryHistory, type RouterHistory } from '@tanstack/react-router'
-import { atom, useAtom } from 'jotai'
-import { atomWithStorage } from 'jotai/utils'
-
-export const activeTabIdAtom = atomWithStorage<string | null>(
-	'activeTabId',
-	null
-)
-export const tabsAtom = atomWithStorage<Tab[]>('tabs', [])
-export const tabsHistoryAtom = atom<Record<string, RouterHistory>>((get) =>
-	get(tabsAtom).reduce(
-		(acc, tab) => {
-			acc[tab.id] = createMemoryHistory({
-				initialEntries: [tab.path]
-			})
-			return acc
-		},
-		{} as Record<string, RouterHistory>
-	)
-)
-
-export function useTabs() {
-	return useAtom(tabsAtom)
-}
-
-export function useActiveTab() {
-	const [tabs] = useAtom(tabsAtom)
-	const [activeTabId, setActiveTab] = useAtom(activeTabIdAtom)
-	const [tabsHistory] = useAtom(tabsHistoryAtom)
-
-	const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? null
-	const tabHistory = activeTabId ? tabsHistory[activeTabId] : null
-
-	return { activeTab, setActiveTab, tabHistory }
-}
-
-export function useNewTab() {
-	const [, setTabs] = useAtom(tabsAtom)
-	const [, setActiveTab] = useAtom(activeTabIdAtom)
-
-	return (tab: Omit<Tab, 'id'>) => {
-		const id = crypto.randomUUID()
-
-		setTabs((tabs) => [...tabs, { ...tab, id }])
-		setActiveTab(id)
-
-		return id
-	}
-}
-
-export function useMarkTabAsPermanent() {
-	const [tabs, setTabs] = useAtom(tabsAtom)
-
-	return (id: string) => {
-		setTabs(
-			tabs.map((tab) => (tab.id === id ? { ...tab, temporary: false } : tab))
-		)
-	}
-}
-
-export function useCloseTab() {
-	const [tabs, setTabs] = useAtom(tabsAtom)
-	const [activeTabId, setActiveTab] = useAtom(activeTabIdAtom)
-
-	return (id: string) => {
-		setTabs(tabs.filter((tab) => tab.id !== id))
-
-		if (activeTabId === id) {
-			const tabIndex = tabs.findIndex((tab) => tab.id === id)
-			const newActiveTab = tabs[tabIndex - 1] || tabs[tabIndex + 1] || null
-			setActiveTab(newActiveTab ? newActiveTab.id : null)
-		}
-	}
-}
-
-export function useReplaceTab() {
-	const [tabs, setTabs] = useAtom(tabsAtom)
-
-	return (id: string, newTab: Omit<Tab, 'id'>) => {
-		setTabs(tabs.map((tab) => (tab.id === id ? { ...newTab, id } : tab)))
-	}
-}
-
-export type Tab = {
-	id: string
-	name: string
-	path: string
-	temporary: boolean
-}

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-	"compilerOptions": {
-		"module": "ESNext",
-		"target": "ESNext",
-		"moduleResolution": "bundler",
-		"strict": true,
-		"noUncheckedIndexedAccess": true,
-		"baseUrl": ".",
-		"skipLibCheck": true,
-		"noFallthroughCasesInSwitch": true,
-		"noImplicitOverride": true,
-		"lib": ["ESNext", "DOM"],
-		"moduleDetection": "force",
-		"jsx": "react-jsx",
-		"paths": {
-			"#*": ["./src/*"]
-		},
-		"plugins": [
-			{
-				"name": "@effect/language-service"
-			}
-		]
-	},
-	"exclude": ["dist", "node_modules"]
-}

package/tsr.config.json

@@ -1,6 +0,0 @@
-{
-	"routesDirectory": "./src/ui/routes",
-	"generatedRouteTree": "./src/ui/routeTree.gen.ts",
-	"routeFileIgnorePrefix": "-",
-	"quoteStyle": "single"
-}