refactor(json-render-ui): one component per file

Split the grouped component modules (layout/controls/data/typography/icon) into
one file per catalog component — Stack, Card, Divider, Text, Badge, CodeBlock,
Button, Icon, TextInput, Switch, KeyValueTable, DataTable, Progress, Tree — so
each is individually importable and easy to locate. Shared helpers (JrComponent,
toNumber, formatValue) live in _shared; the internal error placeholder stays in
_error. No behavior change.

Created with the help of an agent.

Author: antfubot

packages/json-render-ui/src/components/Badge.ts

@@ -0,0 +1,30 @@
+import type { JrComponent } from './_shared'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import { h } from 'vue'
+
+interface BadgeProps {
+  text?: string
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info'
+  minWidth?: number
+}
+
+// Map the catalog's semantic variants onto `@antfu/design` `DisplayBadge`
+// palette color names (`false` = neutral/muted). The resulting
+// `badge-color-<name>` classes are safelisted (see the package uno.config and
+// the JSON-Render docs) since a spec picks the variant at runtime.
+const badgeColor: Record<string, boolean | string> = {
+  default: false,
+  success: 'green',
+  warning: 'amber',
+  danger: 'red',
+  info: 'blue',
+}
+
+export const Badge: JrComponent<BadgeProps> = ({ props, children }) => {
+  const style = props.minWidth != null ? { minWidth: `${props.minWidth}px` } : undefined
+  return h(
+    DisplayBadge,
+    { text: props.text, color: badgeColor[props.variant ?? 'default'], style },
+    props.text ? undefined : () => children,
+  )
+}

packages/json-render-ui/src/components/Button.ts

@@ -0,0 +1,44 @@
+import type { JrComponent } from './_shared'
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
+import { h } from 'vue'
+import { Icon } from './Icon'
+
+interface ButtonProps {
+  label?: string
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
+  /** Icon name resolved at runtime (e.g. `ph:arrow-clockwise`). */
+  icon?: string
+  disabled?: boolean
+  loading?: boolean
+}
+
+// Catalog variant → `@antfu/design` ActionButton variant. `danger` has no
+// upstream variant, so it renders as `primary` with a red override.
+const buttonVariant: Record<string, string> = {
+  primary: 'primary',
+  secondary: 'action',
+  ghost: 'text',
+  danger: 'primary',
+}
+
+export const Button: JrComponent<ButtonProps> = ({ props, on }) => {
+  const variant = props.variant ?? 'secondary'
+  return h(
+    ActionButton,
+    {
+      variant: buttonVariant[variant] ?? 'action',
+      disabled: props.disabled,
+      loading: props.loading,
+      // `danger` isn't an ActionButton variant — override the primary tint.
+      class: variant === 'danger' ? 'bg-red! color-white! border-red! hover:bg-red/90!' : undefined,
+      onClick: () => on('press').emit(),
+    },
+    // Render the dynamic Icon in the slot (ActionButton's own `icon` prop is a
+    // static UnoCSS class, unsuited to spec-supplied names). Skip it while
+    // loading — ActionButton already shows its spinner.
+    () => [
+      props.icon && !props.loading ? Icon({ props: { name: props.icon, size: 16 } } as Parameters<typeof Icon>[0]) : null,
+      props.label ? h('span', props.label) : null,
+    ],
+  )
+}

packages/json-render-ui/src/components/Card.ts

@@ -0,0 +1,37 @@
+import type { JrComponent } from './_shared'
+import LayoutCard from '@antfu/design/components/Layout/LayoutCard.vue'
+import { h } from 'vue'
+
+interface CardProps {
+  title?: string
+  border?: boolean
+  collapsible?: boolean
+  defaultCollapsed?: boolean
+  loading?: boolean
+}
+
+const headerClass = 'flex items-center justify-between px4 py2.5 border-b border-base color-base font-medium text-sm'
+
+// Wraps `@antfu/design` LayoutCard for the bordered surface, composing the
+// title/collapsible header on top (LayoutCard is a plain surface).
+export const Card: JrComponent<CardProps> = ({ props, children, loading }) => {
+  const isLoading = loading || props.loading
+  const body = isLoading
+    ? h('div', { class: 'color-faint text-sm' }, 'Loading…')
+    : (children as any)
+
+  if (props.collapsible) {
+    return h(LayoutCard, { padding: false }, () => h('details', { open: !props.defaultCollapsed }, [
+      h('summary', { class: `${headerClass} cursor-pointer select-none list-none` }, [
+        h('span', props.title ?? ''),
+        h('span', { class: 'color-faint text-xs' }, '▾'),
+      ]),
+      h('div', { class: 'p4' }, [body]),
+    ]))
+  }
+
+  return h(LayoutCard, { padding: false }, () => [
+    props.title ? h('div', { class: headerClass }, props.title) : null,
+    h('div', { class: 'p4' }, [body]),
+  ])
+}

packages/json-render-ui/src/components/CodeBlock.ts

@@ -0,0 +1,27 @@
+import type { JrComponent } from './_shared'
+import { h } from 'vue'
+
+interface CodeBlockProps {
+  code?: string
+  language?: string
+  filename?: string
+  height?: number
+}
+
+export const CodeBlock: JrComponent<CodeBlockProps> = ({ props }) => {
+  const header = props.filename || props.language
+    ? h('div', { class: 'flex items-center justify-between px2 py1 border-b border-base bg-secondary text-xs color-faint' }, [
+        h('span', props.filename ?? ''),
+        props.language ? h('span', { class: 'font-mono uppercase' }, props.language) : null,
+      ])
+    : null
+  const preStyle = props.height != null ? { maxHeight: `${props.height}px` } : undefined
+  return h('div', { 'class': 'rounded border border-base overflow-hidden bg-base', 'data-language': props.language }, [
+    header,
+    h(
+      'pre',
+      { class: 'p2 text-sm font-mono overflow-auto color-base', style: preStyle },
+      h('code', props.code ?? ''),
+    ),
+  ])
+}

packages/json-render-ui/src/components/DataTable.ts

@@ -0,0 +1,50 @@
+import type { JrComponent } from './_shared'
+import { useBoundProp } from '@json-render/vue'
+import { h } from 'vue'
+import { formatValue } from './_shared'
+
+interface DataTableColumn { key: string, label?: string }
+interface DataTableProps {
+  columns?: (string | DataTableColumn)[]
+  rows?: Record<string, unknown>[]
+  height?: number
+  loading?: boolean
+}
+
+function normalizeColumns(columns: DataTableProps['columns'], rows: DataTableProps['rows']): DataTableColumn[] {
+  if (columns?.length)
+    return columns.map(c => (typeof c === 'string' ? { key: c } : c))
+  const first = rows?.[0]
+  return first ? Object.keys(first).map(key => ({ key })) : []
+}
+
+// `@antfu/design` LayoutDataTable has no per-row click or loading state, both of
+// which the catalog requires (`rowClick`, `loading`), so this stays custom on
+// the shared tokens. (A candidate to contribute back upstream.)
+export const DataTable: JrComponent<DataTableProps> = ({ props, on, bindings, loading }) => {
+  if (loading || props.loading)
+    return h('div', { class: 'color-faint text-sm' }, 'Loading…')
+  const rows = props.rows ?? []
+  const columns = normalizeColumns(props.columns, rows)
+  const [, setSelected] = useBoundProp<unknown>(undefined, bindings?.value)
+  const wrapperStyle = props.height != null ? { maxHeight: `${props.height}px` } : undefined
+
+  return h('div', { class: 'rounded border border-base overflow-auto', style: wrapperStyle }, [
+    h('table', { class: 'w-full text-sm border-collapse' }, [
+      h('thead', { class: 'sticky top-0 bg-secondary' }, [
+        h('tr', columns.map(col =>
+          h('th', { class: 'text-left px2 py1.5 color-muted font-medium border-b border-base' }, col.label ?? col.key))),
+      ]),
+      h('tbody', rows.map((row, index) =>
+        h('tr', {
+          class: 'border-b border-base hover:bg-secondary cursor-pointer',
+          onClick: () => {
+            // Deliver row + index into bound state, then fire the action.
+            setSelected({ row, index })
+            on('rowClick').emit()
+          },
+        }, columns.map(col =>
+          h('td', { class: 'px2 py1 color-base font-mono' }, formatValue(row[col.key])))))),
+    ]),
+  ])
+}

packages/json-render-ui/src/components/Divider.ts

@@ -0,0 +1,6 @@
+import type { JrComponent } from './_shared'
+import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
+import { h } from 'vue'
+
+export const Divider: JrComponent<{ label?: string }> = ({ props }) =>
+  h(LayoutSeparator, { label: props.label })

…es/json-render-ui/src/components/icon.ts …es/json-render-ui/src/components/Icon.tspackages/json-render-ui/src/components/icon.ts renamed to packages/json-render-ui/src/components/Icon.ts packages/json-render-ui/src/components/icon.ts renamed to packages/json-render-ui/src/components/Icon.ts

@@ -0,0 +1,18 @@
+import type { JrComponent } from './_shared'
+import DisplayKeyValue from '@antfu/design/components/Display/DisplayKeyValue.vue'
+import { h } from 'vue'
+import { formatValue } from './_shared'
+
+interface KeyValueTableProps {
+  data?: Record<string, unknown>
+  loading?: boolean
+}
+
+// Renders each entry as an `@antfu/design` DisplayKeyValue row.
+export const KeyValueTable: JrComponent<KeyValueTableProps> = ({ props, loading }) => {
+  if (loading || props.loading)
+    return h('div', { class: 'color-faint text-sm' }, 'Loading…')
+  const entries = Object.entries(props.data ?? {})
+  return h('div', { class: 'flex flex-col gap-1' }, entries.map(([key, value]) =>
+    h(DisplayKeyValue, { key, label: key, value: formatValue(value) })))
+}

packages/json-render-ui/src/components/KeyValueTable.ts

@@ -0,0 +1,24 @@
+import type { JrComponent } from './_shared'
+import DisplayProgressBar from '@antfu/design/components/Display/DisplayProgressBar.vue'
+import { h } from 'vue'
+import { toNumber } from './_shared'
+
+interface ProgressProps {
+  value?: number
+  max?: number
+  label?: string
+}
+
+// Wraps `@antfu/design` DisplayProgressBar (which takes a 0–1 ratio), adding the
+// catalog's visible label + percentage row.
+export const Progress: JrComponent<ProgressProps> = ({ props }) => {
+  const max = toNumber(props.max, 100)
+  const value = toNumber(props.value, 0)
+  const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0
+  return h('div', { class: 'flex flex-col gap-1' }, [
+    props.label
+      ? h('div', { class: 'flex justify-between text-xs color-muted' }, [h('span', props.label), h('span', `${Math.round(ratio * 100)}%`)])
+      : null,
+    h(DisplayProgressBar, { value: ratio, label: props.label }),
+  ])
+}

packages/json-render-ui/src/components/Progress.ts

@@ -0,0 +1,43 @@
+import type { JrComponent } from './_shared'
+import { h } from 'vue'
+import { toNumber } from './_shared'
+
+interface StackProps {
+  direction?: 'row' | 'column'
+  gap?: number
+  padding?: number
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around'
+  wrap?: boolean
+  flex?: number | string
+}
+
+const alignMap: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' }
+const justifyMap: Record<string, string> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+}
+
+// A flex layout primitive — `@antfu/design` has no generic Stack, so this stays
+// a thin custom component built on the shared tokens.
+export const Stack: JrComponent<StackProps> = ({ props, children }) => {
+  const style: Record<string, string> = {
+    display: 'flex',
+    flexDirection: props.direction === 'row' ? 'row' : 'column',
+    gap: `${toNumber(props.gap, 8)}px`,
+  }
+  if (props.padding != null)
+    style.padding = `${toNumber(props.padding, 0)}px`
+  if (props.align)
+    style.alignItems = alignMap[props.align] ?? props.align
+  if (props.justify)
+    style.justifyContent = justifyMap[props.justify] ?? props.justify
+  if (props.wrap)
+    style.flexWrap = 'wrap'
+  if (props.flex != null)
+    style.flex = String(props.flex)
+  return h('div', { style }, children as any)
+}