@easyops-cn/a2ui-react 0.0.0 → 0.0.2

package/src/0.8/components/UnknownComponent.tsx

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

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

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

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

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

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

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