@easyops-cn/a2ui-react 0.0.0 → 0.0.2

package/src/0.8/components/layout/ColumnComponent.tsx

@@ -1,93 +0,0 @@
-/**
- * ColumnComponent - Vertical flex container.
- */
-
-import { memo } from 'react'
-import type { ColumnComponentProps, Distribution, Alignment } from '@/0.8/types'
-import { useDataModel } from '@/0.8/hooks/useDataBinding'
-import { cn } from '@/lib/utils'
-import { getValueByPath } from '@/0.8/utils/pathUtils'
-import { ComponentRenderer } from '../ComponentRenderer'
-
-/**
- * Maps distribution values to Tailwind justify-content classes.
- */
-const distributionStyles: Record<Distribution, string> = {
-  start: 'justify-start',
-  center: 'justify-center',
-  end: 'justify-end',
-  spaceBetween: 'justify-between',
-  spaceAround: 'justify-around',
-  spaceEvenly: 'justify-evenly',
-}
-
-/**
- * Maps alignment values to Tailwind align-items classes.
- */
-const alignmentStyles: Record<Alignment, string> = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  stretch: 'items-stretch',
-}
-
-/**
- * Column component - vertical flex container.
- */
-export const ColumnComponent = memo(function ColumnComponent({
-  surfaceId,
-  children,
-  distribution = 'start',
-  alignment = 'stretch',
-}: ColumnComponentProps) {
-  const dataModel = useDataModel(surfaceId)
-
-  const className = cn(
-    'flex flex-col gap-4',
-    distributionStyles[distribution],
-    alignmentStyles[alignment]
-  )
-
-  // Render explicit list of children
-  if (children?.explicitList) {
-    return (
-      <div className={className}>
-        {children.explicitList.map((childId) => (
-          <ComponentRenderer
-            key={childId}
-            surfaceId={surfaceId}
-            componentId={childId}
-          />
-        ))}
-      </div>
-    )
-  }
-
-  // Render template-based children
-  if (children?.template) {
-    const { componentId, dataBinding } = children.template
-    const listData = getValueByPath(dataModel, dataBinding)
-
-    if (!listData || typeof listData !== 'object') {
-      return <div className={className} />
-    }
-
-    const items = Object.entries(listData as Record<string, unknown>)
-
-    return (
-      <div className={className}>
-        {items.map(([key]) => (
-          <ComponentRenderer
-            key={key}
-            surfaceId={surfaceId}
-            componentId={componentId}
-          />
-        ))}
-      </div>
-    )
-  }
-
-  return <div className={className} />
-})
-
-ColumnComponent.displayName = 'A2UI.Column'

package/src/0.8/components/layout/ListComponent.tsx

@@ -1,81 +0,0 @@
-/**
- * ListComponent - List container with vertical or horizontal direction.
- */
-
-import { memo } from 'react'
-import type { ListComponentProps, Alignment } from '@/0.8/types'
-import { useDataModel } from '@/0.8/hooks/useDataBinding'
-import { cn } from '@/lib/utils'
-import { getValueByPath } from '@/0.8/utils/pathUtils'
-import { ComponentRenderer } from '../ComponentRenderer'
-
-/**
- * Maps alignment values to Tailwind align-items classes.
- */
-const alignmentStyles: Record<Alignment, string> = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  stretch: 'items-stretch',
-}
-
-/**
- * List component - container for list items.
- */
-export const ListComponent = memo(function ListComponent({
-  surfaceId,
-  children,
-  direction = 'vertical',
-  alignment = 'stretch',
-}: ListComponentProps) {
-  const dataModel = useDataModel(surfaceId)
-
-  const className = cn(
-    'flex gap-3',
-    direction === 'horizontal' ? 'flex-row' : 'flex-col',
-    alignmentStyles[alignment]
-  )
-
-  // Render explicit list of children
-  if (children?.explicitList) {
-    return (
-      <div className={className}>
-        {children.explicitList.map((childId) => (
-          <ComponentRenderer
-            key={childId}
-            surfaceId={surfaceId}
-            componentId={childId}
-          />
-        ))}
-      </div>
-    )
-  }
-
-  // Render template-based children
-  if (children?.template) {
-    const { componentId, dataBinding } = children.template
-    const listData = getValueByPath(dataModel, dataBinding)
-
-    if (!listData || typeof listData !== 'object') {
-      return <div className={className} />
-    }
-
-    const items = Object.entries(listData as Record<string, unknown>)
-
-    return (
-      <div className={className}>
-        {items.map(([key]) => (
-          <ComponentRenderer
-            key={key}
-            surfaceId={surfaceId}
-            componentId={componentId}
-          />
-        ))}
-      </div>
-    )
-  }
-
-  return <div className={className} />
-})
-
-ListComponent.displayName = 'A2UI.List'

package/src/0.8/components/layout/ModalComponent.tsx

@@ -1,41 +0,0 @@
-/**
- * ModalComponent - Modal/Dialog container.
- */
-
-import { memo, useState } from 'react'
-import type { ModalComponentProps } from '@/0.8/types'
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
-import { ComponentRenderer } from '../ComponentRenderer'
-
-/**
- * Modal component - dialog container with trigger.
- */
-export const ModalComponent = memo(function ModalComponent({
-  surfaceId,
-  entryPointChild,
-  contentChild,
-}: ModalComponentProps) {
-  const [open, setOpen] = useState(false)
-
-  if (!entryPointChild || !contentChild) {
-    return null
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <div className="cursor-pointer">
-          <ComponentRenderer
-            surfaceId={surfaceId}
-            componentId={entryPointChild}
-          />
-        </div>
-      </DialogTrigger>
-      <DialogContent>
-        <ComponentRenderer surfaceId={surfaceId} componentId={contentChild} />
-      </DialogContent>
-    </Dialog>
-  )
-})
-
-ModalComponent.displayName = 'A2UI.Modal'

package/src/0.8/components/layout/RowComponent.tsx

@@ -1,94 +0,0 @@
-/**
- * RowComponent - Horizontal flex container.
- */
-
-import { memo } from 'react'
-import type { RowComponentProps, Distribution, Alignment } from '@/0.8/types'
-import { useDataModel } from '@/0.8/hooks/useDataBinding'
-import { cn } from '@/lib/utils'
-import { getValueByPath } from '@/0.8/utils/pathUtils'
-import { ComponentRenderer } from '../ComponentRenderer'
-
-/**
- * Maps distribution values to Tailwind justify-content classes.
- */
-const distributionStyles: Record<Distribution, string> = {
-  start: 'justify-start',
-  center: 'justify-center',
-  end: 'justify-end',
-  spaceBetween: 'justify-between',
-  spaceAround: 'justify-around',
-  spaceEvenly: 'justify-evenly',
-}
-
-/**
- * Maps alignment values to Tailwind align-items classes.
- */
-const alignmentStyles: Record<Alignment, string> = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  stretch: 'items-stretch',
-}
-
-/**
- * Row component - horizontal flex container.
- */
-export const RowComponent = memo(function RowComponent({
-  surfaceId,
-  children,
-  distribution = 'start',
-  alignment = 'stretch',
-}: RowComponentProps) {
-  const dataModel = useDataModel(surfaceId)
-
-  const className = cn(
-    'flex flex-row gap-3',
-    distributionStyles[distribution],
-    alignmentStyles[alignment]
-  )
-
-  // Render explicit list of children
-  if (children?.explicitList) {
-    return (
-      <div className={className}>
-        {children.explicitList.map((childId) => (
-          <ComponentRenderer
-            key={childId}
-            surfaceId={surfaceId}
-            componentId={childId}
-          />
-        ))}
-      </div>
-    )
-  }
-
-  // Render template-based children
-  if (children?.template) {
-    const { componentId, dataBinding } = children.template
-    const listData = getValueByPath(dataModel, dataBinding)
-
-    if (!listData || typeof listData !== 'object') {
-      return <div className={className} />
-    }
-
-    // listData is a Map-like object where each value represents an item
-    const items = Object.entries(listData as Record<string, unknown>)
-
-    return (
-      <div className={className}>
-        {items.map(([key]) => (
-          <ComponentRenderer
-            key={key}
-            surfaceId={surfaceId}
-            componentId={componentId}
-          />
-        ))}
-      </div>
-    )
-  }
-
-  return <div className={className} />
-})
-
-RowComponent.displayName = 'A2UI.Row'

package/src/0.8/components/layout/TabsComponent.tsx

@@ -1,59 +0,0 @@
-/**
- * TabsComponent - Tabbed content container.
- */
-
-import { memo } from 'react'
-import type { TabsComponentProps, ValueSource } from '@/0.8/types'
-import { useDataBinding } from '@/0.8/hooks/useDataBinding'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { ComponentRenderer } from '../ComponentRenderer'
-
-/**
- * Tabs component - tabbed content container.
- */
-export const TabsComponent = memo(function TabsComponent({
-  surfaceId,
-  tabItems,
-}: TabsComponentProps) {
-  if (!tabItems || tabItems.length === 0) {
-    return null
-  }
-
-  // Get the first tab as default
-  const defaultTab = tabItems[0].child
-
-  return (
-    <Tabs defaultValue={defaultTab} className="w-full">
-      <TabsList>
-        {tabItems.map((item, index) => (
-          <TabsTrigger key={item.child} value={item.child}>
-            <TabTitle surfaceId={surfaceId} title={item.title} index={index} />
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {tabItems.map((item) => (
-        <TabsContent key={item.child} value={item.child}>
-          <ComponentRenderer surfaceId={surfaceId} componentId={item.child} />
-        </TabsContent>
-      ))}
-    </Tabs>
-  )
-})
-
-/**
- * Helper component to resolve tab titles.
- */
-function TabTitle({
-  surfaceId,
-  title,
-  index,
-}: {
-  surfaceId: string
-  title: ValueSource | undefined
-  index: number
-}) {
-  const titleText = useDataBinding<string>(surfaceId, title, `Tab ${index + 1}`)
-  return <>{titleText}</>
-}
-
-TabsComponent.displayName = 'A2UI.Tabs'

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

@@ -1,10 +0,0 @@
-/**
- * A2UI React Renderer - Layout Components
- */
-
-export { RowComponent } from './RowComponent'
-export { ColumnComponent } from './ColumnComponent'
-export { ListComponent } from './ListComponent'
-export { CardComponent } from './CardComponent'
-export { TabsComponent } from './TabsComponent'
-export { ModalComponent } from './ModalComponent'