@easyops-cn/a2ui-react 0.0.0

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

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

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

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

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

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

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