@camstack/addon-admin-ui 0.1.1

package/src/components/form-builder/FormBuilder.tsx

@@ -0,0 +1,135 @@
+import { useState } from 'react'
+import type { ConfigUISchema, ConfigSection } from '../../types/config-ui'
+import { FormField } from './FormField'
+
+// ---------------------------------------------------------------------------
+// Translation support
+// ---------------------------------------------------------------------------
+
+/**
+ * Optional function that resolves an i18n key to a translated string.
+ * When provided, labels and descriptions that look like i18n keys
+ * (contain at least one dot, e.g. 'addon.settings.title') are passed
+ * through this function. Plain text labels are returned as-is.
+ */
+export type TranslationFn = (key: string) => string
+
+/** Returns true if the string looks like an i18n key (contains a dot separator) */
+function isI18nKey(value: string): boolean {
+  return /^[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)+$/.test(value)
+}
+
+/** Resolve a label/description through the translation function if applicable */
+export function resolveLabel(value: string | undefined, t?: TranslationFn): string | undefined {
+  if (value === undefined) return undefined
+  if (t && isI18nKey(value)) return t(value)
+  return value
+}
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface FormBuilderProps {
+  schema: ConfigUISchema
+  values: Record<string, unknown>
+  onChange: (values: Record<string, unknown>) => void
+  disabled?: boolean
+  /** Optional translation function for resolving i18n keys in labels and descriptions */
+  translationFn?: TranslationFn
+}
+
+// ---------------------------------------------------------------------------
+// Section renderer
+// ---------------------------------------------------------------------------
+
+function SectionCard({
+  section,
+  values,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  section: ConfigSection
+  values: Record<string, unknown>
+  onChange: (key: string, value: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const [collapsed, setCollapsed] = useState(section.defaultCollapsed ?? false)
+  const isAccordion = section.style === 'accordion'
+
+  const columns = section.columns ?? 2
+  const gridClass =
+    columns === 1
+      ? 'grid-cols-1'
+      : columns === 3
+      ? 'grid-cols-3'
+      : columns === 4
+      ? 'grid-cols-4'
+      : 'grid-cols-2'
+
+  return (
+    <div className="rounded-lg border border-border bg-surface p-4">
+      <div
+        className={[
+          'flex items-center justify-between mb-3',
+          isAccordion ? 'cursor-pointer' : '',
+        ].join(' ')}
+        onClick={isAccordion ? () => setCollapsed((c) => !c) : undefined}
+      >
+        <div>
+          <h3 className="text-xs font-semibold text-foreground-subtle uppercase tracking-wider">
+            {resolveLabel(section.title, translationFn)}
+          </h3>
+          {section.description && (
+            <p className="text-[10px] text-foreground-subtle mt-0.5">{resolveLabel(section.description, translationFn)}</p>
+          )}
+        </div>
+        {isAccordion && (
+          <span className="text-foreground-subtle text-xs ml-2">{collapsed ? '▸' : '▾'}</span>
+        )}
+      </div>
+
+      {!collapsed && (
+        <div className={`grid ${gridClass} gap-x-4 gap-y-3`}>
+          {section.fields.map((field) => (
+            <FormField
+              key={field.key}
+              field={field}
+              values={values}
+              onChange={onChange}
+              disabled={disabled}
+              translationFn={translationFn}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// FormBuilder
+// ---------------------------------------------------------------------------
+
+export function FormBuilder({ schema, values, onChange, disabled, translationFn }: FormBuilderProps) {
+  const handleFieldChange = (key: string, value: unknown) => {
+    onChange({ ...values, [key]: value })
+  }
+
+  return (
+    <div className="space-y-4">
+      {schema.sections.map((section) => (
+        <SectionCard
+          key={section.id}
+          section={section}
+          values={values}
+          onChange={handleFieldChange}
+          disabled={disabled}
+          translationFn={translationFn}
+        />
+      ))}
+    </div>
+  )
+}