@easyops-cn/a2ui-react 0.0.0 → 0.0.2

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

@@ -1,44 +0,0 @@
-/**
- * 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

@@ -1,45 +0,0 @@
-/**
- * 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

@@ -1,176 +0,0 @@
-/**
- * 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

@@ -1,157 +0,0 @@
-/**
- * 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

@@ -1,53 +0,0 @@
-/**
- * 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

@@ -1,65 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-/**
- * 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'