@easyops-cn/a2ui-react 0.0.0

package/src/0.8/components/interactive/ButtonComponent.tsx

@@ -0,0 +1,44 @@
+/**
+ * ButtonComponent - Clickable button that triggers actions.
+ */
+
+import { memo, useCallback } from 'react'
+import type { ButtonComponentProps } from '@/0.8/types'
+import { useDispatchAction } from '@/0.8/hooks/useDispatchAction'
+import { Button } from '@/components/ui/button'
+import { ComponentRenderer } from '../ComponentRenderer'
+
+/**
+ * Button component - triggers actions on click.
+ */
+export const ButtonComponent = memo(function ButtonComponent({
+  surfaceId,
+  componentId,
+  child,
+  primary = false,
+  action,
+}: ButtonComponentProps) {
+  const dispatchAction = useDispatchAction()
+
+  const handleClick = useCallback(() => {
+    if (action) {
+      dispatchAction(surfaceId, componentId, action)
+    }
+  }, [dispatchAction, surfaceId, componentId, action])
+
+  return (
+    <Button
+      variant={primary ? 'default' : 'outline'}
+      onClick={handleClick}
+      className="inline-flex items-center justify-center"
+    >
+      {child ? (
+        <ComponentRenderer surfaceId={surfaceId} componentId={child} />
+      ) : (
+        'Button'
+      )}
+    </Button>
+  )
+})
+
+ButtonComponent.displayName = 'A2UI.Button'

package/src/0.8/components/interactive/CheckBoxComponent.tsx

@@ -0,0 +1,45 @@
+/**
+ * CheckBoxComponent - Checkbox input with two-way binding.
+ */
+
+import { memo, useCallback } from 'react'
+import type { CheckBoxComponentProps } from '@/0.8/types'
+import { useDataBinding, useFormBinding } from '@/0.8/hooks/useDataBinding'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+/**
+ * CheckBox component - checkbox input with label.
+ */
+export const CheckBoxComponent = memo(function CheckBoxComponent({
+  surfaceId,
+  componentId,
+  label,
+  value,
+}: CheckBoxComponentProps) {
+  const labelText = useDataBinding<string>(surfaceId, label, '')
+  const [checked, setChecked] = useFormBinding<boolean>(surfaceId, value, false)
+
+  const handleChange = useCallback(
+    (newChecked: boolean) => {
+      setChecked(newChecked)
+    },
+    [setChecked]
+  )
+
+  const id = `checkbox-${componentId}`
+
+  return (
+    <div className={cn('flex items-center gap-3')}>
+      <Checkbox id={id} checked={checked} onCheckedChange={handleChange} />
+      {labelText && (
+        <Label htmlFor={id} className="cursor-pointer">
+          {labelText}
+        </Label>
+      )}
+    </div>
+  )
+})
+
+CheckBoxComponent.displayName = 'A2UI.CheckBox'

package/src/0.8/components/interactive/DateTimeInputComponent.tsx

@@ -0,0 +1,176 @@
+/**
+ * DateTimeInputComponent - Date and/or time input with two-way binding.
+ * Uses shadcn/ui Calendar and Popover components.
+ */
+
+import { memo, useCallback, useMemo } from 'react'
+import { CalendarIcon } from 'lucide-react'
+import { format, parse, isValid } from 'date-fns'
+import type { DateTimeInputComponentProps } from '@/0.8/types'
+import { useFormBinding } from '@/0.8/hooks/useDataBinding'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Input } from '@/components/ui/input'
+
+/**
+ * DateTimeInput component - date/time picker using Calendar and Popover.
+ */
+export const DateTimeInputComponent = memo(function DateTimeInputComponent({
+  surfaceId,
+  componentId,
+  value,
+  enableDate = true,
+  enableTime = false,
+}: DateTimeInputComponentProps) {
+  const [dateValue, setDateValue] = useFormBinding<string>(surfaceId, value, '')
+
+  // Parse the string value to Date object
+  const selectedDate = useMemo(() => {
+    if (!dateValue) return undefined
+
+    let date: Date | undefined
+    if (enableDate && enableTime) {
+      // datetime-local format: "YYYY-MM-DDTHH:mm"
+      date = parse(dateValue, "yyyy-MM-dd'T'HH:mm", new Date())
+    } else if (enableDate) {
+      // date format: "YYYY-MM-DD"
+      date = parse(dateValue, 'yyyy-MM-dd', new Date())
+    } else if (enableTime) {
+      // time format: "HH:mm" - create a date with today's date
+      date = parse(dateValue, 'HH:mm', new Date())
+    }
+
+    return date && isValid(date) ? date : undefined
+  }, [dateValue, enableDate, enableTime])
+
+  // Extract time parts for time input
+  const timeValue = useMemo(() => {
+    if (!selectedDate || !enableTime) return ''
+    return format(selectedDate, 'HH:mm')
+  }, [selectedDate, enableTime])
+
+  // Handle date selection from calendar
+  const handleDateSelect = useCallback(
+    (date: Date | undefined) => {
+      if (!date) {
+        setDateValue('')
+        return
+      }
+
+      if (enableDate && enableTime) {
+        // Preserve existing time if any
+        const existingTime = selectedDate
+          ? format(selectedDate, 'HH:mm')
+          : '00:00'
+        const [hours, minutes] = existingTime.split(':').map(Number)
+        date.setHours(hours, minutes)
+        setDateValue(format(date, "yyyy-MM-dd'T'HH:mm"))
+      } else {
+        setDateValue(format(date, 'yyyy-MM-dd'))
+      }
+    },
+    [setDateValue, enableDate, enableTime, selectedDate]
+  )
+
+  // Handle time change
+  const handleTimeChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newTime = e.target.value
+      if (!newTime) return
+
+      const [hours, minutes] = newTime.split(':').map(Number)
+
+      if (enableDate && enableTime) {
+        // Update time on existing date or use today
+        const baseDate = selectedDate || new Date()
+        baseDate.setHours(hours, minutes)
+        setDateValue(format(baseDate, "yyyy-MM-dd'T'HH:mm"))
+      } else if (enableTime && !enableDate) {
+        // Time only mode
+        setDateValue(newTime)
+      }
+    },
+    [setDateValue, enableDate, enableTime, selectedDate]
+  )
+
+  // Format display text
+  const displayText = useMemo(() => {
+    if (!selectedDate) {
+      if (enableDate && enableTime) return '选择日期和时间'
+      if (enableDate) return '选择日期'
+      return '选择时间'
+    }
+
+    if (enableDate && enableTime) {
+      return format(selectedDate, 'yyyy-MM-dd HH:mm')
+    } else if (enableDate) {
+      return format(selectedDate, 'yyyy-MM-dd')
+    } else {
+      return format(selectedDate, 'HH:mm')
+    }
+  }, [selectedDate, enableDate, enableTime])
+
+  const id = `datetime-${componentId}`
+
+  // Time-only mode: just show time input
+  if (enableTime && !enableDate) {
+    return (
+      <div className={cn('flex flex-col gap-2')}>
+        <Input
+          id={id}
+          type="time"
+          value={dateValue}
+          onChange={handleTimeChange}
+          className="w-full"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-2')}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            variant="outline"
+            className={cn(
+              'w-full justify-start text-left font-normal',
+              !selectedDate && 'text-muted-foreground'
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {displayText}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={selectedDate}
+            onSelect={handleDateSelect}
+            captionLayout="dropdown"
+            initialFocus
+          />
+          {enableTime && (
+            <div className="border-t p-3">
+              <Input
+                type="time"
+                value={timeValue}
+                onChange={handleTimeChange}
+                className="w-full"
+              />
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+})
+
+DateTimeInputComponent.displayName = 'A2UI.DateTimeInput'

package/src/0.8/components/interactive/MultipleChoiceComponent.tsx

@@ -0,0 +1,157 @@
+/**
+ * MultipleChoiceComponent - Dropdown/Select input with two-way binding.
+ * Supports both single selection (dropdown) and multi-selection (checkboxes).
+ */
+
+import { memo, useCallback } from 'react'
+import type { MultipleChoiceComponentProps, ValueSource } from '@/0.8/types'
+import { useDataBinding, useFormBinding } from '@/0.8/hooks/useDataBinding'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+/**
+ * MultipleChoice component - dropdown/select input.
+ * When maxAllowedSelections === 1, renders as a dropdown.
+ * When maxAllowedSelections > 1 or undefined, renders as checkboxes for multi-select.
+ */
+export const MultipleChoiceComponent = memo(function MultipleChoiceComponent({
+  surfaceId,
+  componentId,
+  selections,
+  options,
+  maxAllowedSelections,
+}: MultipleChoiceComponentProps) {
+  const [selectedValue, setSelectedValue] = useFormBinding<string | string[]>(
+    surfaceId,
+    selections,
+    maxAllowedSelections === 1 ? '' : []
+  )
+
+  const handleSingleChange = useCallback(
+    (value: string) => {
+      setSelectedValue(value)
+    },
+    [setSelectedValue]
+  )
+
+  const handleMultiChange = useCallback(
+    (value: string, checked: boolean) => {
+      const currentSelections = Array.isArray(selectedValue)
+        ? selectedValue
+        : selectedValue
+          ? [selectedValue]
+          : []
+
+      if (checked) {
+        // Check if we've reached the max allowed selections
+        if (
+          maxAllowedSelections !== undefined &&
+          currentSelections.length >= maxAllowedSelections
+        ) {
+          return
+        }
+        setSelectedValue([...currentSelections, value])
+      } else {
+        setSelectedValue(currentSelections.filter((v) => v !== value))
+      }
+    },
+    [selectedValue, setSelectedValue, maxAllowedSelections]
+  )
+
+  const id = `multiplechoice-${componentId}`
+
+  if (!options || options.length === 0) {
+    return null
+  }
+
+  // Single selection mode - use dropdown
+  if (maxAllowedSelections === 1) {
+    const currentValue = Array.isArray(selectedValue)
+      ? selectedValue[0] || ''
+      : selectedValue
+
+    return (
+      <div className={cn('flex flex-col gap-2')}>
+        <Select value={currentValue} onValueChange={handleSingleChange}>
+          <SelectTrigger id={id}>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                <OptionLabel surfaceId={surfaceId} label={option.label} />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  // Multi-selection mode - use checkboxes
+  const currentSelections = Array.isArray(selectedValue)
+    ? selectedValue
+    : selectedValue
+      ? [selectedValue]
+      : []
+
+  const isMaxReached =
+    maxAllowedSelections !== undefined &&
+    currentSelections.length >= maxAllowedSelections
+
+  return (
+    <div className={cn('flex flex-col gap-2')}>
+      {options.map((option) => {
+        const isChecked = currentSelections.includes(option.value)
+        const isDisabled = !isChecked && isMaxReached
+        const checkboxId = `${id}-${option.value}`
+
+        return (
+          <div key={option.value} className="flex items-center gap-2">
+            <Checkbox
+              id={checkboxId}
+              checked={isChecked}
+              disabled={isDisabled}
+              onCheckedChange={(checked) =>
+                handleMultiChange(option.value, checked === true)
+              }
+            />
+            <Label
+              htmlFor={checkboxId}
+              className={cn(
+                'cursor-pointer',
+                isDisabled && 'cursor-not-allowed opacity-50'
+              )}
+            >
+              <OptionLabel surfaceId={surfaceId} label={option.label} />
+            </Label>
+          </div>
+        )
+      })}
+    </div>
+  )
+})
+
+/**
+ * Helper component to resolve option labels.
+ */
+function OptionLabel({
+  surfaceId,
+  label,
+}: {
+  surfaceId: string
+  label: ValueSource | undefined
+}) {
+  const labelText = useDataBinding<string>(surfaceId, label, '')
+  return <>{labelText}</>
+}
+
+MultipleChoiceComponent.displayName = 'A2UI.MultipleChoice'

package/src/0.8/components/interactive/SliderComponent.tsx

@@ -0,0 +1,53 @@
+/**
+ * SliderComponent - Slider input with two-way binding.
+ */
+
+import { memo, useCallback } from 'react'
+import type { SliderComponentProps } from '@/0.8/types'
+import { useFormBinding } from '@/0.8/hooks/useDataBinding'
+import { Slider } from '@/components/ui/slider'
+import { cn } from '@/lib/utils'
+
+/**
+ * Slider component - range slider input.
+ */
+export const SliderComponent = memo(function SliderComponent({
+  surfaceId,
+  value,
+  minValue = 0,
+  maxValue = 100,
+}: SliderComponentProps) {
+  const [sliderValue, setSliderValue] = useFormBinding<number>(
+    surfaceId,
+    value,
+    minValue
+  )
+
+  const handleChange = useCallback(
+    (values: number[]) => {
+      if (values.length > 0) {
+        setSliderValue(values[0])
+      }
+    },
+    [setSliderValue]
+  )
+
+  return (
+    <div className={cn('flex flex-col gap-2 py-2')}>
+      <Slider
+        value={[sliderValue]}
+        onValueChange={handleChange}
+        min={minValue}
+        max={maxValue}
+        step={1}
+      />
+      <div className="flex justify-between text-sm text-muted-foreground">
+        <span>{minValue}</span>
+        <span className="font-medium text-foreground">{sliderValue}</span>
+        <span>{maxValue}</span>
+      </div>
+    </div>
+  )
+})
+
+SliderComponent.displayName = 'A2UI.Slider'

package/src/0.8/components/interactive/TextFieldComponent.tsx

@@ -0,0 +1,65 @@
+/**
+ * TextFieldComponent - Text input field with two-way binding.
+ */
+
+import { memo, useCallback } from 'react'
+import type { TextFieldComponentProps } from '@/0.8/types'
+import { useDataBinding, useFormBinding } from '@/0.8/hooks/useDataBinding'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+/**
+ * Maps textFieldType to HTML input type.
+ */
+const inputTypeMap: Record<string, string> = {
+  shortText: 'text',
+  longText: 'text', // Uses textarea
+  number: 'number',
+  date: 'date',
+  obscured: 'password',
+}
+
+/**
+ * TextField component - text input with label.
+ */
+export const TextFieldComponent = memo(function TextFieldComponent({
+  surfaceId,
+  componentId,
+  label,
+  text,
+  textFieldType = 'shortText',
+}: TextFieldComponentProps) {
+  const labelText = useDataBinding<string>(surfaceId, label, '')
+  const [value, setValue] = useFormBinding<string>(surfaceId, text, '')
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setValue(e.target.value)
+    },
+    [setValue]
+  )
+
+  const id = `textfield-${componentId}`
+  const inputType = inputTypeMap[textFieldType] || 'text'
+  const isLongText = textFieldType === 'longText'
+
+  return (
+    <div className={cn('flex flex-col gap-2')}>
+      {labelText && <Label htmlFor={id}>{labelText}</Label>}
+      {isLongText ? (
+        <Textarea
+          id={id}
+          value={value}
+          onChange={handleChange}
+          className="min-h-[100px]"
+        />
+      ) : (
+        <Input id={id} type={inputType} value={value} onChange={handleChange} />
+      )}
+    </div>
+  )
+})
+
+TextFieldComponent.displayName = 'A2UI.TextField'

package/src/0.8/components/interactive/index.ts

@@ -0,0 +1,10 @@
+/**
+ * A2UI React Renderer - Interactive Components
+ */
+
+export { ButtonComponent } from './ButtonComponent'
+export { CheckBoxComponent } from './CheckBoxComponent'
+export { TextFieldComponent } from './TextFieldComponent'
+export { DateTimeInputComponent } from './DateTimeInputComponent'
+export { MultipleChoiceComponent } from './MultipleChoiceComponent'
+export { SliderComponent } from './SliderComponent'