@easyops-cn/a2ui-react 0.0.0

package/src/0.8/components/UnknownComponent.tsx

@@ -0,0 +1,49 @@
+/**
+ * UnknownComponent - Placeholder for unknown component types in development mode.
+ *
+ * In development mode, renders a visible placeholder to help developers
+ * identify missing or misspelled component types.
+ * In production mode, this component should not be rendered (ComponentRenderer skips unknown types).
+ */
+
+import type { BaseComponentProps } from '../types'
+
+/**
+ * Props for UnknownComponent.
+ */
+export interface UnknownComponentProps extends BaseComponentProps {
+  /** The unknown component type name */
+  componentType: string
+}
+
+/**
+ * Placeholder component for unknown types in development mode.
+ *
+ * Displays a warning box with the unknown component type name
+ * to help developers identify configuration issues.
+ */
+export function UnknownComponent({
+  componentId,
+  componentType,
+}: UnknownComponentProps) {
+  return (
+    <div
+      style={{
+        padding: '8px 12px',
+        margin: '4px',
+        backgroundColor: '#fff3cd',
+        border: '1px solid #ffc107',
+        borderRadius: '4px',
+        color: '#856404',
+        fontSize: '12px',
+        fontFamily: 'monospace',
+      }}
+    >
+      <strong>Unknown component:</strong> {componentType}
+      <br />
+      <span style={{ opacity: 0.7 }}>ID: {componentId}</span>
+    </div>
+  )
+}
+
+UnknownComponent.displayName = 'A2UI.UnknownComponent'

package/src/0.8/components/display/AudioPlayerComponent.tsx

@@ -0,0 +1,37 @@
+/**
+ * AudioPlayerComponent - Displays an audio player.
+ */
+
+import { memo } from 'react'
+import type { AudioPlayerComponentProps } from '@/0.8/types'
+import { useDataBinding } from '@/0.8/hooks/useDataBinding'
+import { cn } from '@/lib/utils'
+
+/**
+ * AudioPlayer component for playing audio content.
+ */
+export const AudioPlayerComponent = memo(function AudioPlayerComponent({
+  surfaceId,
+  url,
+  description,
+}: AudioPlayerComponentProps) {
+  const audioUrl = useDataBinding<string>(surfaceId, url, '')
+  const descriptionText = useDataBinding<string>(surfaceId, description, '')
+
+  if (!audioUrl) {
+    return null
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-2')}>
+      {descriptionText && (
+        <p className="text-sm text-muted-foreground">{descriptionText}</p>
+      )}
+      <audio src={audioUrl} controls className="w-full">
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  )
+})
+
+AudioPlayerComponent.displayName = 'A2UI.AudioPlayer'

package/src/0.8/components/display/DividerComponent.tsx

@@ -0,0 +1,23 @@
+/**
+ * DividerComponent - Displays a separator line.
+ */
+
+import { memo } from 'react'
+import type { DividerComponentProps } from '@/0.8/types'
+import { Separator } from '@/components/ui/separator'
+
+/**
+ * Divider component for visual separation.
+ */
+export const DividerComponent = memo(function DividerComponent({
+  axis = 'horizontal',
+}: DividerComponentProps) {
+  return (
+    <Separator
+      orientation={axis}
+      className={axis === 'vertical' ? 'self-stretch h-auto!' : 'w-full'}
+    />
+  )
+})
+
+DividerComponent.displayName = 'A2UI.Divider'

package/src/0.8/components/display/IconComponent.tsx

@@ -0,0 +1,137 @@
+/**
+ * IconComponent - Displays icons from the A2UI icon set.
+ */
+
+import { memo } from 'react'
+import type { IconComponentProps } from '@/0.8/types'
+import { useDataBinding } from '@/0.8/hooks/useDataBinding'
+import {
+  User,
+  Plus,
+  ArrowLeft,
+  ArrowRight,
+  Paperclip,
+  Calendar,
+  Phone,
+  Camera,
+  Check,
+  X,
+  Trash2,
+  Download,
+  Pencil,
+  CalendarDays,
+  AlertCircle,
+  Heart,
+  HeartOff,
+  Folder,
+  HelpCircle,
+  Home,
+  Info,
+  MapPin,
+  Lock,
+  Unlock,
+  Mail,
+  Menu,
+  MoreVertical,
+  MoreHorizontal,
+  BellOff,
+  Bell,
+  CreditCard,
+  UserCircle,
+  Image,
+  Printer,
+  RefreshCw,
+  Search,
+  Send,
+  Settings,
+  Share2,
+  ShoppingCart,
+  Star,
+  StarHalf,
+  StarOff,
+  Upload,
+  Eye,
+  EyeOff,
+  AlertTriangle,
+  type LucideIcon,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Maps A2UI icon names to Lucide React icons.
+ */
+const iconMap: Record<string, LucideIcon> = {
+  accountCircle: UserCircle,
+  add: Plus,
+  arrowBack: ArrowLeft,
+  arrowForward: ArrowRight,
+  attachFile: Paperclip,
+  calendarToday: Calendar,
+  call: Phone,
+  camera: Camera,
+  check: Check,
+  close: X,
+  delete: Trash2,
+  download: Download,
+  edit: Pencil,
+  event: CalendarDays,
+  error: AlertCircle,
+  favorite: Heart,
+  favoriteOff: HeartOff,
+  folder: Folder,
+  help: HelpCircle,
+  home: Home,
+  info: Info,
+  locationOn: MapPin,
+  lock: Lock,
+  lockOpen: Unlock,
+  mail: Mail,
+  menu: Menu,
+  moreVert: MoreVertical,
+  moreHoriz: MoreHorizontal,
+  notificationsOff: BellOff,
+  notifications: Bell,
+  payment: CreditCard,
+  person: User,
+  phone: Phone,
+  photo: Image,
+  print: Printer,
+  refresh: RefreshCw,
+  search: Search,
+  send: Send,
+  settings: Settings,
+  share: Share2,
+  shoppingCart: ShoppingCart,
+  star: Star,
+  starHalf: StarHalf,
+  starOff: StarOff,
+  upload: Upload,
+  visibility: Eye,
+  visibilityOff: EyeOff,
+  warning: AlertTriangle,
+}
+
+/**
+ * Icon component for displaying icons from the A2UI icon set.
+ */
+export const IconComponent = memo(function IconComponent({
+  surfaceId,
+  name,
+}: IconComponentProps) {
+  const iconName = useDataBinding<string>(surfaceId, name, '')
+
+  if (!iconName) {
+    return null
+  }
+
+  const Icon = iconMap[iconName]
+
+  if (!Icon) {
+    console.warn(`A2UI: Unknown icon name: ${iconName}`)
+    return null
+  }
+
+  return <Icon className={cn('w-5 h-5')} />
+})
+
+IconComponent.displayName = 'A2UI.Icon'

package/src/0.8/components/display/ImageComponent.tsx

@@ -0,0 +1,57 @@
+/**
+ * ImageComponent - Displays an image with configurable sizing and fit.
+ */
+
+import { memo } from 'react'
+import type { ImageComponentProps } from '@/0.8/types'
+import { useDataBinding } from '@/0.8/hooks/useDataBinding'
+import { cn } from '@/lib/utils'
+
+/**
+ * Maps fit property to CSS object-fit values.
+ */
+const fitStyles: Record<string, string> = {
+  contain: 'object-contain',
+  cover: 'object-cover',
+  fill: 'object-fill',
+  none: 'object-none',
+  'scale-down': 'object-scale-down',
+}
+
+/**
+ * Maps usageHint to size and style classes.
+ */
+const usageHintStyles: Record<string, string> = {
+  icon: 'w-6 h-6',
+  avatar: 'w-10 h-10 rounded-full',
+  smallFeature: 'w-16 h-16',
+  mediumFeature: 'w-32 h-32',
+  largeFeature: 'w-48 h-48',
+  header: 'w-full h-48',
+}
+
+/**
+ * Image component for displaying images.
+ * Supports different sizes via usageHint and object-fit via fit property.
+ */
+export const ImageComponent = memo(function ImageComponent({
+  surfaceId,
+  url,
+  fit = 'cover',
+  usageHint,
+}: ImageComponentProps) {
+  const imageUrl = useDataBinding<string>(surfaceId, url, '')
+
+  if (!imageUrl) {
+    return null
+  }
+
+  const className = cn(
+    fitStyles[fit] || fitStyles.cover,
+    usageHint && usageHintStyles[usageHint]
+  )
+
+  return <img src={imageUrl} alt="" className={className} loading="lazy" />
+})
+
+ImageComponent.displayName = 'A2UI.Image'

package/src/0.8/components/display/TextComponent.tsx

@@ -0,0 +1,56 @@
+/**
+ * TextComponent - Displays text content with optional Markdown support.
+ */
+
+import { memo, type JSX } from 'react'
+import type { TextComponentProps } from '@/0.8/types'
+import { useDataBinding } from '@/0.8/hooks/useDataBinding'
+import { cn } from '@/lib/utils'
+
+/**
+ * Maps usageHint to Tailwind CSS classes.
+ */
+const usageHintStyles: Record<string, string> = {
+  h1: 'text-3xl font-bold tracking-tight',
+  h2: 'text-2xl font-semibold tracking-tight',
+  h3: 'text-xl font-semibold',
+  h4: 'text-lg font-semibold',
+  h5: 'text-base font-semibold',
+  caption: 'text-sm text-muted-foreground',
+  body: 'text-base',
+}
+
+/**
+ * Maps usageHint to HTML element type.
+ */
+const usageHintElements: Record<string, keyof JSX.IntrinsicElements> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  caption: 'span',
+  body: 'p',
+}
+
+/**
+ * Text component for displaying text content.
+ * Supports basic Markdown formatting and different text styles via usageHint.
+ */
+export const TextComponent = memo(function TextComponent({
+  surfaceId,
+  text,
+  usageHint = 'body',
+}: TextComponentProps) {
+  const textValue = useDataBinding<string>(surfaceId, text, '')
+
+  const className = cn(usageHintStyles[usageHint] || usageHintStyles.body)
+
+  const Element = (usageHintElements[usageHint] as 'p') || 'p'
+
+  // For now, render as plain text
+  // TODO: Add Markdown support if needed
+  return <Element className={className}>{textValue}</Element>
+})
+
+TextComponent.displayName = 'A2UI.Text'

package/src/0.8/components/display/VideoComponent.tsx

@@ -0,0 +1,31 @@
+/**
+ * VideoComponent - Displays video content.
+ */
+
+import { memo } from 'react'
+import type { VideoComponentProps } from '@/0.8/types'
+import { useDataBinding } from '@/0.8/hooks/useDataBinding'
+import { cn } from '@/lib/utils'
+
+/**
+ * Video component for displaying video content.
+ */
+export const VideoComponent = memo(function VideoComponent({
+  surfaceId,
+  url,
+}: VideoComponentProps) {
+  const videoUrl = useDataBinding<string>(surfaceId, url, '')
+
+  if (!videoUrl) {
+    return null
+  }
+
+  return (
+    <video src={videoUrl} controls className={cn('w-full rounded-lg')}>
+      <track kind="captions" />
+      Your browser does not support the video tag.
+    </video>
+  )
+})
+
+VideoComponent.displayName = 'A2UI.Video'