@camstack/addon-admin-ui 0.1.2 → 0.1.3

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

@@ -1,135 +0,0 @@
-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>
-  )
-}