@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/templates/ui-page/ui-template-code.tsx

@@ -0,0 +1,48 @@
+import { Check, Copy } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Button } from '../../components/button'
+
+export function UiTemplateCode({
+  code,
+  copyLabel = 'Copy code',
+}: {
+  code: string
+  copyLabel?: string
+}) {
+  const [copyState, setCopyState] = useState<'copied' | 'failed' | 'idle'>('idle')
+
+  useEffect(() => {
+    if (copyState === 'idle') return
+    const timeout = window.setTimeout(() => setCopyState('idle'), 4000)
+    return () => window.clearTimeout(timeout)
+  }, [copyState])
+
+  async function copyCode() {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopyState('copied')
+    } catch {
+      setCopyState('failed')
+    }
+  }
+
+  return (
+    <div className="relative overflow-hidden rounded-xl border bg-zinc-950 text-zinc-100">
+      <div className="flex items-center justify-between border-b border-white/10 px-4 py-2.5">
+        <span className="font-mono text-xs text-zinc-400">tsx</span>
+        <Button
+          className="text-zinc-300 hover:bg-white/10 hover:text-white"
+          onClick={copyCode}
+          size="sm"
+          variant="ghost"
+        >
+          {copyState === 'copied' ? <Check /> : <Copy />}
+          {copyState === 'copied' ? 'Copied' : copyState === 'failed' ? 'Copy failed' : copyLabel}
+        </Button>
+      </div>
+      <pre className="max-h-96 overflow-auto p-5 text-[13px] leading-6">
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}

package/src/templates/ui-page/ui-template-header.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Badge } from "../../components/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../../components/breadcrumb";
+import { Button } from "../../components/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../components/tooltip";
+import { cn } from "../../lib/utils";
+
+export type UiTemplateKind = "Block" | "Component" | "Layout" | "Page" | "Static Page" | "Template";
+
+export function UiTemplateHeader({
+  importPath,
+  kind,
+  name,
+  topologyLabelsVisible = false,
+}: {
+  importPath: string;
+  kind: UiTemplateKind;
+  name: string;
+  topologyLabelsVisible?: boolean;
+}) {
+  const [copyState, setCopyState] = useState<"copied" | "failed" | "idle">("idle");
+
+  useEffect(() => {
+    if (copyState === "idle") return;
+    const timeout = window.setTimeout(() => setCopyState("idle"), 2000);
+    return () => window.clearTimeout(timeout);
+  }, [copyState]);
+
+  async function copyImportPath() {
+    try {
+      await navigator.clipboard.writeText(importPath);
+      setCopyState("copied");
+    } catch {
+      setCopyState("failed");
+    }
+  }
+
+  const copyLabel =
+    copyState === "copied"
+      ? "Import path copied"
+      : copyState === "failed"
+        ? "Copy import path failed"
+        : "Copy import path";
+
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-20 flex min-h-14 items-center justify-between gap-4 border-b bg-background/95 pr-6 backdrop-blur lg:pr-10",
+        topologyLabelsVisible ? "pl-52" : "pl-6 lg:pl-10",
+      )}
+    >
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <Badge variant="secondary">{kind}</Badge>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage className="font-semibold">{name}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="flex min-w-0 items-center gap-1.5">
+        <code className="truncate rounded-md bg-muted px-2.5 py-1.5 text-sm">{importPath}</code>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger
+              render={<Button aria-label={copyLabel} size="icon-sm" variant="ghost" />}
+              onClick={copyImportPath}
+            >
+              {copyState === "copied" ? <Check /> : <Copy />}
+            </TooltipTrigger>
+            <TooltipContent>{copyLabel}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </header>
+  );
+}

package/src/templates/ui-page/ui-template-navigation.tsx

@@ -0,0 +1,60 @@
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export type UiTemplateNavigationItem = {
+  href: string
+  name: string
+}
+
+export function UiTemplateNavigation({
+  next,
+  previous,
+}: {
+  next?: UiTemplateNavigationItem
+  previous?: UiTemplateNavigationItem
+}) {
+  return (
+    <nav aria-label="Documentation navigation" className="grid gap-3 border-t pt-6 sm:grid-cols-2">
+      {previous ? <NavigationLink direction="previous" item={previous} /> : <span />}
+      {next ? <NavigationLink direction="next" item={next} /> : null}
+    </nav>
+  )
+}
+
+function NavigationLink({
+  direction,
+  item,
+}: {
+  direction: 'next' | 'previous'
+  item: UiTemplateNavigationItem
+}) {
+  const isPrevious = direction === 'previous'
+
+  return (
+    <a
+      aria-label={`${isPrevious ? 'Previous' : 'Next'}: ${item.name}`}
+      className={cn(
+        'group flex min-h-20 items-center gap-3 rounded-md border bg-card px-4 py-3 shadow-sm',
+        'transition-[transform,box-shadow,border-color] duration-200 ease-out',
+        'hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-md',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'motion-reduce:transform-none motion-reduce:transition-none',
+        isPrevious ? 'text-left' : 'justify-end text-right sm:col-start-2',
+      )}
+      href={item.href}
+    >
+      {isPrevious ? (
+        <ArrowLeft className="size-4 shrink-0 transition-transform group-hover:-translate-x-0.5 motion-reduce:transform-none" />
+      ) : null}
+      <span className="grid gap-1">
+        <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          {isPrevious ? 'Previous' : 'Next'}
+        </span>
+        <span className="font-semibold text-foreground">{item.name}</span>
+      </span>
+      {!isPrevious ? (
+        <ArrowRight className="size-4 shrink-0 transition-transform group-hover:translate-x-0.5 motion-reduce:transform-none" />
+      ) : null}
+    </a>
+  )
+}

package/src/templates/ui-page/ui-template-page.tsx

@@ -0,0 +1,97 @@
+import { useEffect, type ReactNode } from 'react';
+import { TopologyRegion, type InterfaceTopologyController } from '../../features/interface-topology';
+import { cn } from '../../lib/utils';
+import { UiBrowserFrame } from './ui-browser-frame';
+import { UiTemplateCode } from './ui-template-code';
+import { UiTemplateHeader, type UiTemplateKind } from './ui-template-header';
+import { UiTemplateNavigation, type UiTemplateNavigationItem } from './ui-template-navigation';
+
+export type UiTemplatePageProps = {
+  code: string;
+  codeCopyLabel?: string;
+  importPath: string;
+  kind: UiTemplateKind;
+  name: string;
+  navigation?: {
+    next?: UiTemplateNavigationItem;
+    previous?: UiTemplateNavigationItem;
+  };
+  preview: ReactNode;
+  previewClassName?: string;
+  showCode?: boolean;
+  topology: InterfaceTopologyController;
+  topologyIds: {
+    page: string;
+    preview: string;
+    usage: string;
+  };
+  usageDescription: ReactNode;
+  usageTitle?: string;
+};
+
+export function UiTemplatePage({
+  code,
+  codeCopyLabel,
+  importPath,
+  kind,
+  name,
+  navigation,
+  preview,
+  previewClassName,
+  showCode = true,
+  topology,
+  topologyIds,
+  usageDescription,
+  usageTitle,
+}: UiTemplatePageProps) {
+  const { setScope } = topology;
+
+  useEffect(() => {
+    setScope(topologyIds.preview);
+    return () => setScope(null);
+  }, [setScope, topologyIds.preview]);
+
+  return (
+    <TopologyRegion
+      as="main"
+      className="h-full overflow-y-auto bg-background"
+      id={topologyIds.page}
+      topology={topology}
+    >
+      <UiTemplateHeader
+        importPath={importPath}
+        kind={kind}
+        name={name}
+        topologyLabelsVisible={topology.labelsVisible}
+      />
+      <div className="grid min-w-0 gap-10 pt-12 pb-8">
+        <TopologyRegion
+          as="section"
+          className={cn('mx-auto w-[90%] min-w-0', previewClassName)}
+          id={topologyIds.preview}
+          topology={topology}
+        >
+          <UiBrowserFrame className={kind === 'Layout' ? 'rounded-none' : undefined} title={name}>
+            {preview}
+          </UiBrowserFrame>
+        </TopologyRegion>
+
+        <TopologyRegion
+          as="section"
+          className="mx-auto grid w-[90%] min-w-0 gap-5 pt-10 pb-8"
+          id={topologyIds.usage}
+          topology={topology}
+        >
+          <div className="grid gap-1.5">
+            <h2 className="text-xl font-semibold tracking-tight">
+              {usageTitle ?? `Use the shared ${name} ${kind.toLowerCase()}`}
+            </h2>
+            <div className="max-w-3xl text-sm leading-6 text-muted-foreground">{usageDescription}</div>
+          </div>
+          {showCode ? <UiTemplateCode code={code} copyLabel={codeCopyLabel} /> : null}
+          {navigation ? <UiTemplateNavigation next={navigation.next} previous={navigation.previous} /> : null}
+        </TopologyRegion>
+      </div>
+    </TopologyRegion>
+  );
+}

package/src/theme/index.ts

@@ -0,0 +1,12 @@
+export { ThemeProvider, useColorTheme, useTheme } from './theme-provider'
+export { ThemeSelector } from './theme-selector'
+export {
+  COLOR_THEME_ATTRIBUTE,
+  COLOR_THEME_STORAGE_KEY,
+  THEME_STORAGE_KEY,
+  colorThemes,
+  isColorThemeId,
+  isThemeMode,
+  themeModes,
+} from './theme-config'
+export type { ColorThemeId, ThemeMode } from './theme-config'

package/src/theme/theme-config.ts

@@ -0,0 +1,30 @@
+export const themeModes = [
+  { id: 'light', name: 'Light' },
+  { id: 'dark', name: 'Dark' },
+  { id: 'system', name: 'System' },
+] as const
+
+export type ThemeMode = (typeof themeModes)[number]['id']
+
+export const colorThemes = [
+  { id: 'neutral', name: 'Neutral', swatchClassName: 'bg-zinc-700 dark:bg-zinc-300' },
+  { id: 'blue', name: 'Blue', swatchClassName: 'bg-blue-600' },
+  { id: 'violet', name: 'Violet', swatchClassName: 'bg-violet-600' },
+  { id: 'emerald', name: 'Emerald', swatchClassName: 'bg-emerald-600' },
+  { id: 'orange', name: 'Orange', swatchClassName: 'bg-orange-600' },
+  { id: 'studio', name: 'Studio', swatchClassName: 'bg-[#191a1c]' },
+] as const
+
+export type ColorThemeId = (typeof colorThemes)[number]['id']
+
+export const COLOR_THEME_ATTRIBUTE = 'data-color-theme'
+export const COLOR_THEME_STORAGE_KEY = 'codexsun.ui.color-theme'
+export const THEME_STORAGE_KEY = 'codexsun.ui.theme'
+
+export function isColorThemeId(value: string | null): value is ColorThemeId {
+  return colorThemes.some((theme) => theme.id === value)
+}
+
+export function isThemeMode(value: string | undefined): value is ThemeMode {
+  return themeModes.some((mode) => mode.id === value)
+}

package/src/theme/theme-provider.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import * as React from 'react'
+
+import {
+  COLOR_THEME_ATTRIBUTE,
+  COLOR_THEME_STORAGE_KEY,
+  THEME_STORAGE_KEY,
+  isColorThemeId,
+  isThemeMode,
+  type ColorThemeId,
+  type ThemeMode,
+} from './theme-config'
+
+type ColorThemeContextValue = {
+  colorTheme: ColorThemeId
+  setColorTheme: (theme: ColorThemeId) => void
+}
+
+type ThemeContextValue = {
+  resolvedTheme: 'dark' | 'light'
+  setTheme: (theme: ThemeMode) => void
+  theme: ThemeMode
+}
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  colorStorageKey?: string
+  defaultColorTheme?: ColorThemeId
+  defaultTheme?: ThemeMode
+  storageKey?: string
+}
+
+const ColorThemeContext = React.createContext<ColorThemeContextValue | null>(null)
+const ThemeContext = React.createContext<ThemeContextValue | null>(null)
+
+export function ThemeProvider({
+  children,
+  colorStorageKey = COLOR_THEME_STORAGE_KEY,
+  defaultColorTheme = 'neutral',
+  defaultTheme = 'system',
+  storageKey = THEME_STORAGE_KEY,
+}: ThemeProviderProps) {
+  const [colorTheme, setColorThemeState] = React.useState<ColorThemeId>(() =>
+    readColorTheme(colorStorageKey, defaultColorTheme),
+  )
+  const [theme, setThemeState] = React.useState<ThemeMode>(() => readTheme(storageKey, defaultTheme))
+  const resolvedTheme = resolveTheme(theme)
+
+  const setColorTheme = React.useCallback(
+    (nextTheme: ColorThemeId) => {
+      setColorThemeState(nextTheme)
+      writeStorage(colorStorageKey, nextTheme)
+    },
+    [colorStorageKey],
+  )
+  const setTheme = React.useCallback(
+    (nextTheme: ThemeMode) => {
+      setThemeState(nextTheme)
+      writeStorage(storageKey, nextTheme)
+    },
+    [storageKey],
+  )
+
+  React.useEffect(() => {
+    document.documentElement.setAttribute(COLOR_THEME_ATTRIBUTE, colorTheme)
+  }, [colorTheme])
+  React.useEffect(() => {
+    document.documentElement.classList.remove('dark', 'light')
+    document.documentElement.classList.add(resolvedTheme)
+    document.documentElement.style.colorScheme = resolvedTheme
+  }, [resolvedTheme])
+  React.useEffect(() => subscribeToStorage(colorStorageKey, defaultColorTheme, setColorThemeState), [colorStorageKey, defaultColorTheme])
+  React.useEffect(() => subscribeToStorage(storageKey, defaultTheme, setThemeState), [defaultTheme, storageKey])
+  React.useEffect(() => subscribeToSystemTheme(theme, setThemeState), [theme])
+
+  return (
+    <ThemeContext.Provider value={{ resolvedTheme, setTheme, theme }}>
+      <ColorThemeContext.Provider value={{ colorTheme, setColorTheme }}>{children}</ColorThemeContext.Provider>
+    </ThemeContext.Provider>
+  )
+}
+
+export function useColorTheme(): ColorThemeContextValue {
+  const context = React.useContext(ColorThemeContext)
+  if (!context) throw new Error('useColorTheme must be used inside ThemeProvider.')
+  return context
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = React.useContext(ThemeContext)
+  if (!context) throw new Error('useTheme must be used inside ThemeProvider.')
+  return context
+}
+
+function readColorTheme(storageKey: string, fallback: ColorThemeId): ColorThemeId {
+  const value = readStorage(storageKey)
+  return isColorThemeId(value) ? value : fallback
+}
+
+function readTheme(storageKey: string, fallback: ThemeMode): ThemeMode {
+  const value = readStorage(storageKey)
+  return isThemeMode(value ?? undefined) ? (value as ThemeMode) : fallback
+}
+
+function resolveTheme(theme: ThemeMode): 'dark' | 'light' {
+  if (theme !== 'system') return theme
+  return typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function subscribeToStorage<T extends string>(storageKey: string, fallback: T, setValue: (value: T) => void) {
+  function sync(event: StorageEvent) {
+    if (event.key === storageKey) setValue((event.newValue ?? fallback) as T)
+  }
+  window.addEventListener('storage', sync)
+  return () => window.removeEventListener('storage', sync)
+}
+
+function subscribeToSystemTheme(theme: ThemeMode, setTheme: (theme: ThemeMode) => void) {
+  if (theme !== 'system') return undefined
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  const sync = () => setTheme('system')
+  media.addEventListener('change', sync)
+  return () => media.removeEventListener('change', sync)
+}
+
+function readStorage(storageKey: string): string | null {
+  if (typeof window === 'undefined') return null
+  try {
+    return window.localStorage.getItem(storageKey)
+  } catch {
+    return null
+  }
+}
+
+function writeStorage(storageKey: string, value: string) {
+  try {
+    window.localStorage.setItem(storageKey, value)
+  } catch {
+    // Keep the active theme when browser storage is unavailable.
+  }
+}

package/src/theme/theme-selector.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { LaptopIcon, MoonIcon, SunIcon, type LucideIcon } from 'lucide-react'
+
+import { cn } from '../lib/utils'
+import { colorThemes, isThemeMode, themeModes, type ThemeMode } from './theme-config'
+import { useColorTheme, useTheme } from './theme-provider'
+
+const modeIcons: Record<ThemeMode, LucideIcon> = {
+  dark: MoonIcon,
+  light: SunIcon,
+  system: LaptopIcon,
+}
+
+export function ThemeSelector({ className }: { className?: string }) {
+  const { colorTheme, setColorTheme } = useColorTheme()
+  const { setTheme, theme } = useTheme()
+  const activeMode = isThemeMode(theme) ? theme : 'system'
+
+  return (
+    <div className={cn('grid gap-4', className)}>
+      <fieldset className="grid gap-2">
+        <legend className="text-sm font-medium">Mode</legend>
+        <div className="grid grid-cols-3 gap-1 rounded-lg bg-muted p-1">
+          {themeModes.map((mode) => {
+            const Icon = modeIcons[mode.id]
+            const active = activeMode === mode.id
+            return (
+              <button
+                aria-pressed={active}
+                className={cn(
+                  'flex h-8 items-center justify-center gap-1.5 rounded-md px-2 text-sm transition-colors',
+                  active
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+                key={mode.id}
+                onClick={() => setTheme(mode.id)}
+                type="button"
+              >
+                <Icon className="size-3.5" />
+                <span>{mode.name}</span>
+              </button>
+            )
+          })}
+        </div>
+      </fieldset>
+
+      <fieldset className="grid gap-2">
+        <legend className="text-sm font-medium">Color</legend>
+        <div className="grid grid-cols-5 gap-1.5">
+          {colorThemes.map((color) => {
+            const active = colorTheme === color.id
+            return (
+              <button
+                aria-label={`${color.name} color theme`}
+                aria-pressed={active}
+                className={cn(
+                  'grid size-9 place-items-center rounded-lg border bg-background transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  active && 'border-primary ring-2 ring-primary/25',
+                )}
+                key={color.id}
+                onClick={() => setColorTheme(color.id)}
+                title={color.name}
+                type="button"
+              >
+                <span className={cn('size-4 rounded-full', color.swatchClassName)} />
+              </button>
+            )
+          })}
+        </div>
+      </fieldset>
+    </div>
+  )
+}

package/src/tokens/index.ts

@@ -0,0 +1,15 @@
+export const designTokens = {
+  color: {
+    accent: '#0ea5e9',
+    background: '#0b1020',
+    foreground: '#f1f5f9',
+  },
+  radius: {
+    medium: '0.75rem',
+    small: '0.5rem',
+  },
+  space: {
+    medium: '1rem',
+    small: '0.5rem',
+  },
+} as const

package/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+interface ImportMeta {
+  readonly env: Readonly<Record<string, string | undefined>>
+}