@easyops-cn/a2ui-react 0.0.0

package/src/0.8/utils/pathUtils.test.ts

@@ -0,0 +1,353 @@
+/**
+ * pathUtils Tests
+ *
+ * Tests for path utility functions used in A2UI data model operations.
+ */
+
+import { describe, it, expect } from 'vitest'
+import {
+  getValueByPath,
+  setValueByPath,
+  mergeAtPath,
+  normalizePath,
+  joinPaths,
+} from './pathUtils'
+import type { DataModel } from '../types'
+
+describe('pathUtils', () => {
+  describe('getValueByPath', () => {
+    const testModel: DataModel = {
+      user: {
+        name: 'John',
+        age: 30,
+        profile: {
+          email: 'john@example.com',
+          active: true,
+        },
+      },
+      items: ['a', 'b', 'c'],
+      count: 42,
+    }
+
+    it('should return entire data model for empty path', () => {
+      expect(getValueByPath(testModel, '')).toEqual(testModel)
+    })
+
+    it('should return entire data model for root path', () => {
+      expect(getValueByPath(testModel, '/')).toEqual(testModel)
+    })
+
+    it('should get top-level string value', () => {
+      const model = { name: 'test' }
+      expect(getValueByPath(model, '/name')).toBe('test')
+    })
+
+    it('should get top-level number value', () => {
+      expect(getValueByPath(testModel, '/count')).toBe(42)
+    })
+
+    it('should get top-level array value', () => {
+      expect(getValueByPath(testModel, '/items')).toEqual(['a', 'b', 'c'])
+    })
+
+    it('should get nested object value', () => {
+      expect(getValueByPath(testModel, '/user')).toEqual({
+        name: 'John',
+        age: 30,
+        profile: {
+          email: 'john@example.com',
+          active: true,
+        },
+      })
+    })
+
+    it('should get deeply nested string value', () => {
+      expect(getValueByPath(testModel, '/user/name')).toBe('John')
+    })
+
+    it('should get deeply nested number value', () => {
+      expect(getValueByPath(testModel, '/user/age')).toBe(30)
+    })
+
+    it('should get deeply nested object value', () => {
+      expect(getValueByPath(testModel, '/user/profile')).toEqual({
+        email: 'john@example.com',
+        active: true,
+      })
+    })
+
+    it('should get very deeply nested value', () => {
+      expect(getValueByPath(testModel, '/user/profile/email')).toBe(
+        'john@example.com'
+      )
+      expect(getValueByPath(testModel, '/user/profile/active')).toBe(true)
+    })
+
+    it('should return undefined for non-existent path', () => {
+      expect(getValueByPath(testModel, '/nonexistent')).toBeUndefined()
+    })
+
+    it('should return undefined for non-existent nested path', () => {
+      expect(getValueByPath(testModel, '/user/nonexistent')).toBeUndefined()
+    })
+
+    it('should return undefined for path through non-object', () => {
+      expect(getValueByPath(testModel, '/count/nested')).toBeUndefined()
+    })
+
+    it('should return undefined when intermediate value is null', () => {
+      const model = { user: null }
+      expect(getValueByPath(model, '/user/name')).toBeUndefined()
+    })
+
+    it('should return undefined when intermediate value is undefined', () => {
+      const model = { user: undefined }
+      expect(
+        getValueByPath(model as unknown as DataModel, '/user/name')
+      ).toBeUndefined()
+    })
+
+    it('should handle paths without leading slash', () => {
+      expect(getValueByPath(testModel, 'user/name')).toBe('John')
+    })
+
+    it('should handle empty data model', () => {
+      expect(getValueByPath({}, '/user/name')).toBeUndefined()
+    })
+  })
+
+  describe('setValueByPath', () => {
+    it('should return merged object for empty path with object value', () => {
+      const model = { a: 1 }
+      const result = setValueByPath(model, '', { b: 2 })
+      expect(result).toEqual({ a: 1, b: 2 })
+    })
+
+    it('should return merged object for root path with object value', () => {
+      const model = { a: 1 }
+      const result = setValueByPath(model, '/', { b: 2 })
+      expect(result).toEqual({ a: 1, b: 2 })
+    })
+
+    it('should return original model for root path with non-object value', () => {
+      const model = { a: 1 }
+      const result = setValueByPath(model, '/', 'string')
+      expect(result).toEqual({ a: 1 })
+    })
+
+    it('should return original model for root path with array value', () => {
+      const model = { a: 1 }
+      const result = setValueByPath(model, '/', [1, 2, 3])
+      expect(result).toEqual({ a: 1 })
+    })
+
+    it('should set top-level value', () => {
+      const model = { a: 1 }
+      const result = setValueByPath(model, '/b', 2)
+      expect(result).toEqual({ a: 1, b: 2 })
+    })
+
+    it('should update existing top-level value', () => {
+      const model = { a: 1 }
+      const result = setValueByPath(model, '/a', 2)
+      expect(result).toEqual({ a: 2 })
+    })
+
+    it('should set nested value in existing object', () => {
+      const model = { user: { name: 'John' } }
+      const result = setValueByPath(model, '/user/age', 30)
+      expect(result).toEqual({ user: { name: 'John', age: 30 } })
+    })
+
+    it('should update existing nested value', () => {
+      const model = { user: { name: 'John' } }
+      const result = setValueByPath(model, '/user/name', 'Jane')
+      expect(result).toEqual({ user: { name: 'Jane' } })
+    })
+
+    it('should create nested structure if not exists', () => {
+      const model = {}
+      const result = setValueByPath(
+        model,
+        '/user/profile/email',
+        'test@test.com'
+      )
+      expect(result).toEqual({
+        user: { profile: { email: 'test@test.com' } },
+      })
+    })
+
+    it('should replace non-object with object when setting nested path', () => {
+      const model = { user: 'string' }
+      const result = setValueByPath(model, '/user/name', 'John')
+      expect(result).toEqual({ user: { name: 'John' } })
+    })
+
+    it('should be immutable - not modify original model', () => {
+      const model = { user: { name: 'John' } }
+      const result = setValueByPath(model, '/user/name', 'Jane')
+      expect(model).toEqual({ user: { name: 'John' } })
+      expect(result).toEqual({ user: { name: 'Jane' } })
+    })
+
+    it('should handle setting null value', () => {
+      const model = { user: { name: 'John' } }
+      const result = setValueByPath(model, '/user/name', null)
+      expect(result).toEqual({ user: { name: null } })
+    })
+
+    it('should handle setting array value', () => {
+      const model = { items: [] }
+      const result = setValueByPath(model, '/items', ['a', 'b'])
+      expect(result).toEqual({ items: ['a', 'b'] })
+    })
+
+    it('should handle setting object value', () => {
+      const model = { user: null }
+      const result = setValueByPath(model, '/user', { name: 'John' })
+      expect(result).toEqual({ user: { name: 'John' } })
+    })
+  })
+
+  describe('mergeAtPath', () => {
+    it('should merge at root for empty path', () => {
+      const model = { a: 1 }
+      const result = mergeAtPath(model, '', { b: 2 })
+      expect(result).toEqual({ a: 1, b: 2 })
+    })
+
+    it('should merge at root for root path', () => {
+      const model = { a: 1 }
+      const result = mergeAtPath(model, '/', { b: 2 })
+      expect(result).toEqual({ a: 1, b: 2 })
+    })
+
+    it('should overwrite existing keys at root', () => {
+      const model = { a: 1, b: 2 }
+      const result = mergeAtPath(model, '/', { b: 3, c: 4 })
+      expect(result).toEqual({ a: 1, b: 3, c: 4 })
+    })
+
+    it('should merge at nested path', () => {
+      const model = { user: { name: 'John' } }
+      const result = mergeAtPath(model, '/user', { age: 30 })
+      expect(result).toEqual({ user: { name: 'John', age: 30 } })
+    })
+
+    it('should overwrite existing keys at nested path', () => {
+      const model = { user: { name: 'John', age: 25 } }
+      const result = mergeAtPath(model, '/user', { age: 30 })
+      expect(result).toEqual({ user: { name: 'John', age: 30 } })
+    })
+
+    it('should create path if not exists', () => {
+      const model = {}
+      const result = mergeAtPath(model, '/user', { name: 'John' })
+      expect(result).toEqual({ user: { name: 'John' } })
+    })
+
+    it('should replace non-object at path with merged result', () => {
+      const model = { user: 'string' }
+      const result = mergeAtPath(model, '/user', { name: 'John' })
+      expect(result).toEqual({ user: { name: 'John' } })
+    })
+
+    it('should handle array at path by treating as non-object', () => {
+      const model = { items: [1, 2, 3] }
+      const result = mergeAtPath(model, '/items', { a: 1 })
+      expect(result).toEqual({ items: { a: 1 } })
+    })
+
+    it('should be immutable - not modify original model', () => {
+      const model = { user: { name: 'John' } }
+      const result = mergeAtPath(model, '/user', { age: 30 })
+      expect(model).toEqual({ user: { name: 'John' } })
+      expect(result).toEqual({ user: { name: 'John', age: 30 } })
+    })
+  })
+
+  describe('normalizePath', () => {
+    it('should add leading slash if missing', () => {
+      expect(normalizePath('user/name')).toBe('/user/name')
+    })
+
+    it('should keep existing leading slash', () => {
+      expect(normalizePath('/user/name')).toBe('/user/name')
+    })
+
+    it('should remove trailing slash', () => {
+      expect(normalizePath('/user/name/')).toBe('/user/name')
+    })
+
+    it('should remove trailing slash but keep single root slash', () => {
+      expect(normalizePath('/')).toBe('/')
+    })
+
+    it('should handle single slash path', () => {
+      expect(normalizePath('/')).toBe('/')
+    })
+
+    it('should add leading and remove trailing slash', () => {
+      expect(normalizePath('user/name/')).toBe('/user/name')
+    })
+
+    it('should trim whitespace', () => {
+      expect(normalizePath('  /user/name  ')).toBe('/user/name')
+    })
+
+    it('should handle empty string', () => {
+      expect(normalizePath('')).toBe('/')
+    })
+
+    it('should handle whitespace only', () => {
+      expect(normalizePath('   ')).toBe('/')
+    })
+
+    it('should handle multiple trailing slashes', () => {
+      expect(normalizePath('/user/name//')).toBe('/user/name/')
+      // Note: only removes one trailing slash
+    })
+  })
+
+  describe('joinPaths', () => {
+    it('should join base and relative paths', () => {
+      expect(joinPaths('/user', 'name')).toBe('/user/name')
+    })
+
+    it('should handle leading slash in relative path', () => {
+      expect(joinPaths('/user', '/name')).toBe('/user/name')
+    })
+
+    it('should handle trailing slash in base path', () => {
+      expect(joinPaths('/user/', 'name')).toBe('/user/name')
+    })
+
+    it('should handle both leading and trailing slashes', () => {
+      expect(joinPaths('/user/', '/name/')).toBe('/user/name')
+    })
+
+    it('should return base path for empty relative path', () => {
+      expect(joinPaths('/user', '')).toBe('/user')
+    })
+
+    it('should handle root base path', () => {
+      expect(joinPaths('/', 'user')).toBe('/user')
+    })
+
+    it('should handle root base path with leading slash in relative', () => {
+      expect(joinPaths('/', '/user')).toBe('/user')
+    })
+
+    it('should normalize base path without leading slash', () => {
+      expect(joinPaths('user', 'name')).toBe('/user/name')
+    })
+
+    it('should handle multi-segment relative path', () => {
+      expect(joinPaths('/base', 'a/b/c')).toBe('/base/a/b/c')
+    })
+
+    it('should handle whitespace in relative path', () => {
+      expect(joinPaths('/user', '  name  ')).toBe('/user/name')
+    })
+  })
+})

package/src/0.8/utils/pathUtils.ts

@@ -0,0 +1,200 @@
+/**
+ * Path utility functions for A2UI data model operations.
+ */
+
+import type { DataModel, DataModelValue } from '../types'
+
+/**
+ * Gets a value from the data model by path.
+ *
+ * @param dataModel - The data model to read from
+ * @param path - The path to the value (e.g., "/user/name")
+ * @returns The value at the path, or undefined if not found
+ *
+ * @example
+ * const model = { user: { name: "John" } };
+ * getValueByPath(model, "/user/name"); // "John"
+ * getValueByPath(model, "/user/age");  // undefined
+ */
+export function getValueByPath(
+  dataModel: DataModel,
+  path: string
+): DataModelValue | undefined {
+  if (!path || path === '/') {
+    return dataModel as DataModelValue
+  }
+
+  // Split path: "/user/name" -> ["user", "name"]
+  const keys = path.split('/').filter(Boolean)
+  let current: unknown = dataModel
+
+  for (const key of keys) {
+    if (current === null || current === undefined) {
+      return undefined
+    }
+
+    if (typeof current !== 'object') {
+      return undefined
+    }
+
+    current = (current as Record<string, unknown>)[key]
+  }
+
+  return current as DataModelValue | undefined
+}
+
+/**
+ * Sets a value in the data model by path, returning a new data model.
+ * This function is immutable - it does not modify the original data model.
+ *
+ * @param dataModel - The data model to update
+ * @param path - The path to set (e.g., "/user/name")
+ * @param value - The value to set
+ * @returns A new data model with the value set
+ *
+ * @example
+ * const model = { user: { name: "John" } };
+ * setValueByPath(model, "/user/name", "Jane");
+ * // Returns: { user: { name: "Jane" } }
+ */
+export function setValueByPath(
+  dataModel: DataModel,
+  path: string,
+  value: unknown
+): DataModel {
+  if (!path || path === '/') {
+    // Replace the entire data model
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      return { ...dataModel, ...(value as DataModel) }
+    }
+    return dataModel
+  }
+
+  // Split path: "/user/name" -> ["user", "name"]
+  const keys = path.split('/').filter(Boolean)
+
+  // Recursive helper to build the new object structure
+  function setNested(
+    obj: DataModel,
+    remainingKeys: string[],
+    val: unknown
+  ): DataModel {
+    if (remainingKeys.length === 0) {
+      // This shouldn't happen, but handle gracefully
+      if (typeof val === 'object' && val !== null && !Array.isArray(val)) {
+        return { ...obj, ...(val as DataModel) }
+      }
+      return obj
+    }
+
+    const [key, ...rest] = remainingKeys
+
+    if (rest.length === 0) {
+      // Last key - set the value
+      return {
+        ...obj,
+        [key]: val as DataModelValue,
+      }
+    }
+
+    // Intermediate key - recurse
+    const existingValue = obj[key]
+    const nestedObj =
+      typeof existingValue === 'object' &&
+      existingValue !== null &&
+      !Array.isArray(existingValue)
+        ? (existingValue as DataModel)
+        : {}
+
+    return {
+      ...obj,
+      [key]: setNested(nestedObj, rest, val),
+    }
+  }
+
+  return setNested(dataModel, keys, value)
+}
+
+/**
+ * Merges data into the data model at a given path.
+ * This is used for dataModelUpdate messages where contents are merged.
+ *
+ * @param dataModel - The data model to update
+ * @param path - The path to merge at (e.g., "/form")
+ * @param data - The data to merge
+ * @returns A new data model with the data merged
+ */
+export function mergeAtPath(
+  dataModel: DataModel,
+  path: string,
+  data: Record<string, unknown>
+): DataModel {
+  if (!path || path === '/') {
+    // Merge at root
+    return { ...dataModel, ...data } as DataModel
+  }
+
+  // Get current value at path
+  const current = getValueByPath(dataModel, path)
+  const currentObj =
+    typeof current === 'object' && current !== null && !Array.isArray(current)
+      ? (current as DataModel)
+      : {}
+
+  // Merge and set
+  const merged = { ...currentObj, ...data }
+  return setValueByPath(dataModel, path, merged)
+}
+
+/**
+ * Normalizes a path to ensure it starts with "/" and has no trailing "/".
+ *
+ * @param path - The path to normalize
+ * @returns The normalized path
+ *
+ * @example
+ * normalizePath("user/name");   // "/user/name"
+ * normalizePath("/user/name/"); // "/user/name"
+ */
+export function normalizePath(path: string): string {
+  let normalized = path.trim()
+
+  // Ensure starts with /
+  if (!normalized.startsWith('/')) {
+    normalized = '/' + normalized
+  }
+
+  // Remove trailing / (except for root path)
+  if (normalized.length > 1 && normalized.endsWith('/')) {
+    normalized = normalized.slice(0, -1)
+  }
+
+  return normalized
+}
+
+/**
+ * Joins two paths together.
+ *
+ * @param basePath - The base path
+ * @param relativePath - The relative path to join
+ * @returns The joined path
+ *
+ * @example
+ * joinPaths("/user", "name");     // "/user/name"
+ * joinPaths("/user", "/name");    // "/user/name"
+ * joinPaths("/user/", "/name/");  // "/user/name"
+ */
+export function joinPaths(basePath: string, relativePath: string): string {
+  const base = normalizePath(basePath)
+  const relative = relativePath.trim().replace(/^\/+/, '').replace(/\/+$/, '')
+
+  if (!relative) {
+    return base
+  }
+
+  if (base === '/') {
+    return '/' + relative
+  }
+
+  return base + '/' + relative
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }