@easyops-cn/a2ui-react 0.0.1 → 0.0.2

package/src/components/ui/select.tsx

@@ -1,188 +0,0 @@
-import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = 'default',
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: 'sm' | 'default'
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = 'item-aligned',
-  align = 'center',
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            'p-1',
-            position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span
-        data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
-      >
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

package/src/components/ui/separator.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-
-import { cn } from '@/lib/utils'
-
-function Separator({
-  className,
-  orientation = 'horizontal',
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }

package/src/components/ui/slider.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
-
-import { cn } from '@/lib/utils'
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
-  )
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        className
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  )
-}
-
-export { Slider }

package/src/components/ui/tabs.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-
-import { cn } from '@/lib/utils'
-
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn('flex flex-col gap-2', className)}
-      {...props}
-    />
-  )
-}
-
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn('flex-1 outline-none', className)}
-      {...props}
-    />
-  )
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/index.ts

@@ -1 +0,0 @@
-export * as v0_8 from './0.8'

package/src/lib/utils.ts

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

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src", "vite.config.ts", "vitest.setup.ts"]
-}

package/vite.config.ts

@@ -1,29 +0,0 @@
-import { resolve } from 'node:path'
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import dts from 'vite-plugin-dts'
-import tsconfigPaths from 'vite-tsconfig-paths'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    tsconfigPaths(),
-    dts({
-      include: ['src'],
-      outDir: 'dist',
-    }),
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom', 'react/jsx-runtime'],
-      output: {
-        preserveModules: true,
-        preserveModulesRoot: 'src',
-      },
-    },
-  },
-})

package/vitest.config.ts

@@ -1,22 +0,0 @@
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
-import { resolve } from 'path'
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-    },
-  },
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./vitest.setup.ts'],
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-    },
-  },
-})

package/vitest.setup.ts

@@ -1,8 +0,0 @@
-import '@testing-library/jest-dom/vitest'
-
-// Mock ResizeObserver for Radix UI components (Slider, etc.)
-global.ResizeObserver = class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}

package/website/README.md

@@ -1,4 +0,0 @@
-```sh
-npm run build -w website
-npm run serve -w website
-```

package/website/assets/favicon.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
-<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
-  <!-- <rect x="0" y="0" width="512" height="512" fill="white" stroke="none"></rect> -->
-  <circle cx="256" cy="256" r="256" fill="white" stroke="none"></circle>
-  <g transform="translate(112 64) scale(0.75)">
-    <path d="M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z" fill="#009488" stroke="none" />
-  </g>
-</svg>

package/website/content/api.md

@@ -1,108 +0,0 @@
-# API Reference
-
-## Core
-
-```typescript
-/**
- * Main entry component for rendering A2UI messages.
- * @param messages - Array of A2UI messages to render
- * @param onAction - Callback when an action is dispatched
- * @param components - Custom component overrides
- */
-function A2UIRenderer(props: {
-  messages: A2UIMessage[]
-  onAction?: (action: A2UIAction) => void
-  components?: Map<string, React.ComponentType<any>>
-}): React.ReactElement
-
-/**
- * A2UI message from server to client.
- * Only one of the fields should be set per message.
- */
-interface A2UIMessage {
-  beginRendering?: BeginRenderingPayload
-  surfaceUpdate?: SurfaceUpdatePayload
-  dataModelUpdate?: DataModelUpdatePayload
-  deleteSurface?: DeleteSurfacePayload
-}
-
-/**
- * Resolved action payload sent to the action handler.
- */
-interface A2UIAction {
-  surfaceId: string
-  name: string
-  context: Record<string, unknown>
-  sourceComponentId: string
-}
-```
-
-## Hooks
-
-```typescript
-/**
- * Returns a function to dispatch actions from custom components.
- */
-function useDispatchAction(): (
-  surfaceId: string,
-  componentId: string,
-  action: Action
-) => void
-
-/**
- * Resolves a ValueSource to its actual value.
- * @param surfaceId - The surface ID for data model lookup
- * @param source - The value source (literal or path reference)
- * @param defaultValue - Default value if source is undefined or path not found
- */
-function useDataBinding<T = unknown>(
-  surfaceId: string,
-  source: ValueSource | undefined,
-  defaultValue?: T
-): T
-
-/**
- * Hook for two-way data binding in form components.
- * @param surfaceId - The surface ID
- * @param source - The value source (must be a path reference for setting)
- * @param defaultValue - Default value if not found
- * @returns Tuple of [value, setValue]
- */
-function useFormBinding<T = unknown>(
-  surfaceId: string,
-  source: ValueSource | undefined,
-  defaultValue?: T
-): [T, (value: T) => void]
-```
-
-## Others
-
-```typescript
-/**
- * Renders a component by ID from the component registry.
- * @param surfaceId - The surface ID
- * @param componentId - The component ID to render
- */
-function ComponentRenderer(props: {
-  surfaceId: string
-  componentId: string
-}): React.ReactElement
-
-/**
- * Represents a value source - either a literal value or a reference to a data model path.
- */
-type ValueSource =
-  | { literalString: string }
-  | { literalNumber: number }
-  | { literalBoolean: boolean }
-  | { literalArray: string[] }
-  | { path: string }
-
-/**
- * Action definition (attached to Button components).
- */
-interface Action {
-  name: string
-  context?: ActionContextItem[]
-}
-```

package/website/content/index.md

@@ -1,126 +0,0 @@
-A React renderer library for [A2UI](https://a2ui.org) protocol.
-
-Supports all components in A2UI standard catalog out of the box. Built with [shadcn/ui](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/).
-
-Currently A2UI protocol v0.8 is fully supported. Work on v0.9 is in progress.
-
-## Installation
-
-```sh
-npm install @easyops-cn/a2ui-react
-```
-
-## Usage
-
-First, use the `@source` directive to tell Tailwind to scan the library code for class names in your global CSS:
-
-```css
-@source "../node_modules/@easyops-cn/a2ui-react";
-```
-
-Next, use the `A2UIRenderer` component to render A2UI messages:
-
-```tsx
-import {
-  A2UIRenderer,
-  type A2UIMessage,
-  type A2UIAction,
-} from '@easyops-cn/a2ui-react/0.8'
-
-function App() {
-  const messages: A2UIMessage[] = []
-
-  const handleAction = (action: A2UIAction) => {
-    console.log('Action received:', action)
-  }
-
-  return <A2UIRenderer messages={messages} onAction={handleAction} />
-}
-```
-
-### Custom components
-
-You can override default components or add new custom components via the `components` prop, which takes a `Map<string, React.ComponentType>`.
-
-```tsx
-import {
-  A2UIRenderer,
-  A2UIMessage,
-  A2UIAction,
-} from '@easyops-cn/a2ui-react/0.8'
-
-const ComponentsMap = new Map<string, React.ComponentType<any>>([
-  // Override default Button component with a custom one
-  ['Button', CustomButtonComponent],
-
-  // Add a new custom Switch component
-  ['Switch', CustomSwitchComponent],
-])
-
-function App() {
-  return (
-    <A2UIRenderer
-      components={ComponentsMap}
-      messages={messages}
-      onAction={handleAction}
-    />
-  )
-}
-```
-
-Custom button component with action dispatch:
-
-```tsx
-import {
-  useDispatchAction,
-  ComponentRenderer,
-  type ButtonComponentProps,
-} from '@easyops-cn/a2ui-react/0.8'
-
-export function CustomButtonComponent({
-  surfaceId,
-  componentId,
-  child,
-  action,
-}: ButtonComponentProps) {
-  const dispatchAction = useDispatchAction()
-
-  const handleClick = () => {
-    if (action) {
-      dispatchAction(surfaceId, componentId, action)
-    }
-  }
-
-  return (
-    <button onClick={handleClick}>
-      <ComponentRenderer surfaceId={surfaceId} componentId={child} />
-    </button>
-  )
-}
-```
-
-Custom switch component with data binding:
-
-```tsx
-import { useDataBinding, useFormBinding } from '@easyops-cn/a2ui-react/0.8'
-
-export function CustomSwitchComponent({
-  surfaceId,
-  componentId,
-  label,
-  value,
-}: SwitchComponentProps) {
-  const labelText = useDataBinding<string>(surfaceId, label, '')
-  const [checked, setChecked] = useFormBinding<boolean>(surfaceId, value, false)
-
-  const handleChange = (newChecked: boolean) => {
-    setChecked(newChecked)
-  }
-
-  return (
-    <Switch checked={checked} onChange={handleChange}>
-      {labelText}
-    </Switch>
-  )
-}
-```