@easyops-cn/a2ui-react 0.0.1 → 0.0.3

package/CONTRIBUTING.md

@@ -1,97 +0,0 @@
-# Contributing to A2UI React
-
-Thank you for your interest in contributing to `@easyops-cn/a2ui-react`!
-
-## Project Overview
-
-A2UI React Renderer - A React implementation for rendering A2UI protocol. This is a library package that downstream developers consume.
-
-## Monorepo Structure
-
-This is an npm workspaces monorepo:
-
-- Root package: `@easyops-cn/a2ui-react` - The main library
-- `website/` - Documentation site using plain-blog
-- `playground/` - Live demo workspace for real-time A2UI rendering development
-
-## Development Setup
-
-1. Clone the repository
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-## Commands
-
-### Library (root)
-
-```bash
-npm run build        # TypeScript compile + Vite build (outputs to dist/)
-npm run dev          # Start Vite dev server for local development
-npm test             # Run Vitest in watch mode
-npm run test:run     # Run tests once
-npm run lint         # Run ESLint
-npm run lint:fix     # ESLint with auto-fix
-```
-
-### Website
-
-```bash
-npm run build -w website     # Build website (outputs to website/dist/)
-npm run serve -w website     # Serve built website locally
-```
-
-### Playground
-
-```bash
-npm run dev -w playground    # Start playground dev server for live A2UI demos
-npm run build -w playground  # Build playground
-```
-
-## Key Directories
-
-- `src/0.8/contexts/` - React context providers (Surface, DataModel, Action)
-- `src/0.8/hooks/` - Custom hooks for data binding and actions
-- `src/0.8/components/` - Component implementations (display/, layout/, interactive/)
-- `src/0.8/schemas/` - JSON schemas for A2UI protocol
-- `src/components/ui/` - shadcn/ui primitives
-
-## Testing
-
-Tests are co-located with source files (`*.test.tsx`). Uses Vitest + React Testing Library + jsdom.
-
-Run tests before submitting:
-
-```bash
-npm run test:run
-```
-
-## Code Style
-
-Run linting before submitting:
-
-```bash
-npm run lint
-```
-
-To auto-fix issues:
-
-```bash
-npm run lint:fix
-```
-
-## Technologies
-
-- TypeScript 5.9
-- React 19
-- Radix UI (for UI primitives)
-- Tailwind CSS (via class-variance-authority)
-
-## Pull Request Process
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Run tests and linting
-5. Submit a pull request

package/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

package/eslint.config.js

@@ -1,25 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import tseslint from 'typescript-eslint'
-import eslintConfigPrettier from 'eslint-config-prettier'
-
-export default tseslint.config(
-  { ignores: ['dist', 'node_modules', 'coverage'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-hooks/set-state-in-effect': 'off',
-    },
-  },
-  eslintConfigPrettier
-)

package/netlify.toml

@@ -1,50 +0,0 @@
-[[redirects]]
-  from = "/"
-  to = "/a2ui-react/"
-  status = 302
-  force = true
-
-[[headers]]
-  for = "*.js" # js files should be set this way
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.css" # css files too
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.json"
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.svg"
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.png"
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.jpg"
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.gif"
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.ttf"
-  [headers.values]
-    Cache-Control = "public, max-age=604800"
-
-[[headers]]
-  for = "*.map"
-  [headers.values]
-    Cache-Control = "public, max-age=604800"

package/playground/README.md

@@ -1,75 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
-
-Note: This will impact Vite dev & build performances.
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

package/playground/index.html

@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>A2UI React Renderer Playground</title>
-    <script>
-      // Initialize theme before page renders to prevent flash
-      (function() {
-        const stored = localStorage.getItem('theme');
-        if (stored === 'dark' || stored === 'light') {
-          document.documentElement.dataset.theme = stored;
-        }
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/playground/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "playground",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@codemirror/lang-json": "^6.0.2",
-    "@easyops-cn/a2ui-react": "file:..",
-    "@tailwindcss/vite": "^4.1.18",
-    "@uiw/react-codemirror": "^4.25.4",
-    "lucide-react": "^0.562.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "tailwindcss": "^4.1.18",
-    "tw-animate-css": "^1.4.0"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.6",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "globals": "^17.0.0",
-    "typescript": "~5.9.3",
-    "vite": "^7.2.4"
-  }
-}

package/playground/public/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/playground/src/App.css

@@ -1,256 +0,0 @@
-/* Layout */
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* Header - 与 website 保持一致 */
-.app-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 32px 16px;
-  max-width: 1240px;
-  margin: 0 auto;
-  width: 100%;
-  flex-shrink: 0;
-  line-height: 28px;
-}
-
-.app-title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 25px;
-  color: var(--primary-color);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.app-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-nav {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-nav a {
-  color: var(--text-color);
-  font-size: 16px;
-  font-weight: 500;
-  text-decoration: none;
-  padding: 6px 8px;
-  transition: color 0.2s ease;
-}
-
-.header-nav a:hover {
-  color: var(--primary-color);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-
-.header-nav a.active {
-  color: var(--primary-color);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-
-.header-nav a[target='_blank'] {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25em;
-}
-
-/* Theme Toggle */
-.theme-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: none;
-  border-radius: 8px;
-  background-color: transparent;
-  color: var(--text-color);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.theme-toggle:hover {
-  background-color: var(--muted-color);
-}
-
-.theme-toggle:focus {
-  outline: 2px solid var(--text-color);
-  outline-offset: 2px;
-}
-
-/* Main Content */
-.main-content {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  padding: 0 16px 24px;
-  gap: 24px;
-  max-width: 1240px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-/* Split Panel Layout */
-.panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-
-.panel-header {
-  padding: 0;
-  font-weight: 600;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-color);
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  height: 44px;
-}
-
-/* Editor Panel */
-.editor-panel .panel-content {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--editor-bg);
-}
-
-/* Preview Panel */
-.preview-panel .panel-content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 16px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--preview-bg);
-}
-
-/* Example Selector */
-.example-selector {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  text-transform: none;
-  letter-spacing: normal;
-  font-weight: normal;
-}
-
-.example-selector-label {
-  font-weight: 600;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-}
-
-.example-selector-dropdown {
-  padding: 4px 8px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  font-size: 14px;
-  cursor: pointer;
-  min-width: 150px;
-}
-
-.example-selector-dropdown:focus {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 1px;
-}
-
-.example-selector-description {
-  font-size: 12px;
-  color: var(--text-color);
-  opacity: 0.7;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* JSON Editor */
-.json-editor {
-  height: 100%;
-  overflow: auto;
-}
-
-.json-editor .cm-editor {
-  height: 100%;
-}
-
-.json-editor .cm-scroller {
-  font-family:
-    'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-/* Preview */
-.preview-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-color);
-  opacity: 0.6;
-  font-style: italic;
-}
-
-/* Responsive */
-@media (max-width: 1023px) {
-  .main-content {
-    flex-direction: column;
-  }
-
-  .panel {
-    min-height: 300px;
-  }
-}
-
-@media (max-width: 703px) {
-  .app-title {
-    flex: 0 0 100%;
-  }
-
-  .header-right {
-    flex: 0 0 calc(100% + 6px);
-    margin-left: -6px;
-  }
-}
-
-@media (min-width: 704px) {
-  .app-title {
-    font-size: 24px;
-  }
-}

package/playground/src/App.tsx

@@ -1,115 +0,0 @@
-import { useState, useCallback, useEffect } from 'react'
-import type { A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
-import { Header } from './components/Header'
-import { ThemeToggle } from './components/ThemeToggle'
-import { JsonEditor } from './components/JsonEditor'
-import { Preview } from './components/Preview'
-import { ExampleSelector } from './components/ExampleSelector'
-import { useTheme } from './hooks/useTheme'
-import { examples } from './data/examples'
-import './App.css'
-
-function getInitialExampleId(): string {
-  const params = new URLSearchParams(window.location.search)
-  const exampleId = params.get('example')
-  if (exampleId && examples.some((e) => e.id === exampleId)) {
-    return exampleId
-  }
-  return examples[0]?.id ?? ''
-}
-
-function App() {
-  const { theme, toggleTheme } = useTheme()
-  const [selectedExampleId, setSelectedExampleId] =
-    useState(getInitialExampleId)
-  const [jsonContent, setJsonContent] = useState('')
-  const [parsedMessages, setParsedMessages] = useState<A2UIMessage[] | null>(
-    null
-  )
-  const [parseError, setParseError] = useState<string | null>(null)
-
-  // Load initial example
-  useEffect(() => {
-    const example = examples.find((e) => e.id === selectedExampleId)
-    if (example) {
-      const json = JSON.stringify(example.messages, null, 2)
-      setJsonContent(json)
-      setParsedMessages(example.messages)
-      setParseError(null)
-    }
-  }, [])
-
-  const handleJsonChange = useCallback((value: string) => {
-    setJsonContent(value)
-    try {
-      const parsed = JSON.parse(value)
-      if (!Array.isArray(parsed)) {
-        setParseError('JSON must be an array of A2UI messages')
-        setParsedMessages(null)
-      } else {
-        setParsedMessages(parsed)
-        setParseError(null)
-      }
-    } catch (e) {
-      setParseError(e instanceof Error ? e.message : 'Invalid JSON')
-      setParsedMessages(null)
-    }
-  }, [])
-
-  const handleExampleSelect = useCallback((id: string) => {
-    setSelectedExampleId(id)
-    const example = examples.find((e) => e.id === id)
-    if (example) {
-      const json = JSON.stringify(example.messages, null, 2)
-      setJsonContent(json)
-      setParsedMessages(example.messages)
-      setParseError(null)
-      // Update URL query parameter
-      const url = new URL(window.location.href)
-      url.searchParams.set('example', id)
-      window.history.replaceState(null, '', url.toString())
-    }
-  }, [])
-
-  const handleAction = useCallback((action: A2UIAction) => {
-    console.log('Action dispatched:', action)
-  }, [])
-
-  return (
-    <div className="app">
-      <Header title="A2UI React Renderer">
-        <ThemeToggle theme={theme} onToggle={toggleTheme} />
-      </Header>
-      <main className="main-content">
-        <div className="panel editor-panel">
-          <div className="panel-header">
-            <ExampleSelector
-              examples={examples}
-              selectedId={selectedExampleId}
-              onSelect={handleExampleSelect}
-            />
-          </div>
-          <div className="panel-content">
-            <JsonEditor
-              value={jsonContent}
-              onChange={handleJsonChange}
-              theme={theme}
-            />
-          </div>
-        </div>
-        <div className="panel preview-panel">
-          <div className="panel-header">Preview</div>
-          <div className="panel-content">
-            <Preview
-              messages={parsedMessages}
-              error={parseError}
-              onAction={handleAction}
-            />
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
-
-export default App