feat(web): MetadataFormRenderer + VibeErp theme + 6 custom widgets (1875c068) | Commits | 朱子纯 / vibe-erp-v0

Commit 1875c0687208112452491edde86d6eac2f34044d

Authored by zichun 2026-04-10 13:35:59 +0800

feat(web): MetadataFormRenderer + VibeErp theme + 6 custom widgets

Add the @rjsf-based metadata-driven form renderer with a custom
Tailwind theme matching the existing SPA styling and six ERP-specific
widgets: PartnerPicker, ItemPicker, UomSelector, LocationPicker,
MoneyInput, and QuantityInput.

Inline Side-by-side

Showing 9 changed files with 493 additions and 0 deletions

web/src/components/MetadataFormRenderer.tsx 0 → 100644

View file @1875c06

	1	+// Metadata-driven form renderer.
	2	+//
	3	+// Given a form definition slug, fetches the JSON Schema + UI Schema
	4	+// from the metadata API and renders a fully functional @rjsf form
	5	+// using the VibeErp theme and custom ERP widgets.
	6	+
	7	+import { useEffect, useState } from 'react'
	8	+import Form from '@rjsf/core'
	9	+import type { IChangeEvent } from '@rjsf/core'
	10	+import type { RJSFSchema, UiSchema } from '@rjsf/utils'
	11	+import validator from '@rjsf/validator-ajv8'
	12	+import { apiFetch } from '@/api/client'
	13	+import type { FormDefinition } from '@/types/api'
	14	+import { vibeWidgets } from '@/components/form-widgets'
	15	+import { vibeTemplates } from '@/components/form-widgets/vibeErpTheme'
	16	+import { Loading } from '@/components/Loading'
	17	+import { ErrorBox } from '@/components/ErrorBox'
	18	+
	19	+interface MetadataFormRendererProps {
	20	+ slug: string
	21	+ initialValues?: Record<string, unknown>
	22	+ onSubmit?: (values: Record<string, unknown>) => void
	23	+ readOnly?: boolean
	24	+}
	25	+
	26	+export function MetadataFormRenderer({
	27	+ slug,
	28	+ initialValues,
	29	+ onSubmit,
	30	+ readOnly = false,
	31	+}: MetadataFormRendererProps) {
	32	+ const [def, setDef] = useState<FormDefinition \| null>(null)
	33	+ const [loading, setLoading] = useState(true)
	34	+ const [error, setError] = useState<Error \| null>(null)
	35	+ const [formData, setFormData] = useState<Record<string, unknown>>(
	36	+ initialValues ?? {},
	37	+ )
	38	+
	39	+ useEffect(() => {
	40	+ setLoading(true)
	41	+ setError(null)
	42	+ apiFetch<FormDefinition>(`/api/v1/_meta/metadata/forms/${slug}`)
	43	+ .then((data) => {
	44	+ setDef(data)
	45	+ if (initialValues) setFormData(initialValues)
	46	+ })
	47	+ .catch((err: unknown) => {
	48	+ if (err instanceof Error) {
	49	+ setError(err)
	50	+ } else {
	51	+ setError(new Error(String(err)))
	52	+ }
	53	+ })
	54	+ .finally(() => setLoading(false))
	55	+ }, [slug, initialValues])
	56	+
	57	+ if (loading) return <Loading />
	58	+ if (error) return <ErrorBox error={error} />
	59	+ if (!def) return <ErrorBox error={new Error(`Form "${slug}" not found.`)} />
	60	+
	61	+ const handleChange = (e: IChangeEvent) => {
	62	+ setFormData((e.formData as Record<string, unknown>) ?? {})
	63	+ }
	64	+
	65	+ const handleSubmit = (e: IChangeEvent) => {
	66	+ onSubmit?.((e.formData as Record<string, unknown>) ?? {})
	67	+ }
	68	+
	69	+ return (
	70	+ <Form
	71	+ schema={def.jsonSchema as RJSFSchema}
	72	+ uiSchema={def.uiSchema as UiSchema}
	73	+ formData={formData}
	74	+ validator={validator}
	75	+ widgets={vibeWidgets}
	76	+ templates={vibeTemplates}
	77	+ readonly={readOnly}
	78	+ onChange={handleChange}
	79	+ onSubmit={handleSubmit}
	80	+ formContext={{ formData }}
	81	+ />
	82	+ )
	83	+}
...	...

web/src/components/form-widgets/ItemPicker.tsx 0 → 100644

View file @1875c06

	1	+// Item picker widget for @rjsf forms.
	2	+// Fetches catalog items from the API and renders a <select> dropdown
	3	+// showing "code -- name" for each item.
	4	+
	5	+import { useEffect, useState } from 'react'
	6	+import type { WidgetProps } from '@rjsf/utils'
	7	+import { catalog } from '@/api/client'
	8	+import type { Item } from '@/types/api'
	9	+
	10	+export function ItemPicker(props: WidgetProps) {
	11	+ const { id, value, required, disabled, readonly, onChange } = props
	12	+ const [items, setItems] = useState<Item[]>([])
	13	+
	14	+ useEffect(() => {
	15	+ catalog.listItems().then(setItems).catch(() => setItems([]))
	16	+ }, [])
	17	+
	18	+ return (
	19	+ <select
	20	+ id={id}
	21	+ value={value ?? ''}
	22	+ required={required}
	23	+ disabled={disabled \|\| readonly}
	24	+ onChange={(e) => onChange(e.target.value \|\| undefined)}
	25	+ className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
	26	+ >
	27	+ <option value="">—</option>
	28	+ {items.map((item) => (
	29	+ <option key={item.id} value={item.code}>
	30	+ {item.code} — {item.name}
	31	+ </option>
	32	+ ))}
	33	+ </select>
	34	+ )
	35	+}
...	...

web/src/components/form-widgets/LocationPicker.tsx 0 → 100644

View file @1875c06

	1	+// Location picker widget for @rjsf forms.
	2	+// Fetches inventory locations from the API and renders a <select> dropdown
	3	+// showing "code -- name" for each location.
	4	+
	5	+import { useEffect, useState } from 'react'
	6	+import type { WidgetProps } from '@rjsf/utils'
	7	+import { inventory } from '@/api/client'
	8	+import type { Location } from '@/types/api'
	9	+
	10	+export function LocationPicker(props: WidgetProps) {
	11	+ const { id, value, required, disabled, readonly, onChange } = props
	12	+ const [locations, setLocations] = useState<Location[]>([])
	13	+
	14	+ useEffect(() => {
	15	+ inventory.listLocations().then(setLocations).catch(() => setLocations([]))
	16	+ }, [])
	17	+
	18	+ return (
	19	+ <select
	20	+ id={id}
	21	+ value={value ?? ''}
	22	+ required={required}
	23	+ disabled={disabled \|\| readonly}
	24	+ onChange={(e) => onChange(e.target.value \|\| undefined)}
	25	+ className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
	26	+ >
	27	+ <option value="">—</option>
	28	+ {locations.map((loc) => (
	29	+ <option key={loc.id} value={loc.code}>
	30	+ {loc.code} — {loc.name}
	31	+ </option>
	32	+ ))}
	33	+ </select>
	34	+ )
	35	+}
...	...

web/src/components/form-widgets/MoneyInput.tsx 0 → 100644

View file @1875c06

	1	+// Money input widget for @rjsf forms.
	2	+// A simple number input with step="0.01" for currency values.
	3	+
	4	+import type { WidgetProps } from '@rjsf/utils'
	5	+
	6	+export function MoneyInput(props: WidgetProps) {
	7	+ const { id, value, required, disabled, readonly, onChange } = props
	8	+
	9	+ return (
	10	+ <input
	11	+ id={id}
	12	+ type="number"
	13	+ step="0.01"
	14	+ value={value ?? ''}
	15	+ required={required}
	16	+ disabled={disabled \|\| readonly}
	17	+ onChange={(e) =>
	18	+ onChange(e.target.value === '' ? undefined : Number(e.target.value))
	19	+ }
	20	+ className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
	21	+ />
	22	+ )
	23	+}
...	...

web/src/components/form-widgets/PartnerPicker.tsx 0 → 100644

View file @1875c06

	1	+// Partner picker widget for @rjsf forms.
	2	+// Fetches partners from the API and renders a <select> dropdown
	3	+// showing "code -- name" for each partner.
	4	+
	5	+import { useEffect, useState } from 'react'
	6	+import type { WidgetProps } from '@rjsf/utils'
	7	+import { partners } from '@/api/client'
	8	+import type { Partner } from '@/types/api'
	9	+
	10	+export function PartnerPicker(props: WidgetProps) {
	11	+ const { id, value, required, disabled, readonly, onChange } = props
	12	+ const [items, setItems] = useState<Partner[]>([])
	13	+
	14	+ useEffect(() => {
	15	+ partners.list().then(setItems).catch(() => setItems([]))
	16	+ }, [])
	17	+
	18	+ return (
	19	+ <select
	20	+ id={id}
	21	+ value={value ?? ''}
	22	+ required={required}
	23	+ disabled={disabled \|\| readonly}
	24	+ onChange={(e) => onChange(e.target.value \|\| undefined)}
	25	+ className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
	26	+ >
	27	+ <option value="">—</option>
	28	+ {items.map((p) => (
	29	+ <option key={p.id} value={p.code}>
	30	+ {p.code} — {p.name}
	31	+ </option>
	32	+ ))}
	33	+ </select>
	34	+ )
	35	+}
...	...

web/src/components/form-widgets/QuantityInput.tsx 0 → 100644

View file @1875c06

	1	+// Quantity input widget for @rjsf forms.
	2	+// A simple number input with step="0.01" for quantity values.
	3	+
	4	+import type { WidgetProps } from '@rjsf/utils'
	5	+
	6	+export function QuantityInput(props: WidgetProps) {
	7	+ const { id, value, required, disabled, readonly, onChange } = props
	8	+
	9	+ return (
	10	+ <input
	11	+ id={id}
	12	+ type="number"
	13	+ step="0.01"
	14	+ value={value ?? ''}
	15	+ required={required}
	16	+ disabled={disabled \|\| readonly}
	17	+ onChange={(e) =>
	18	+ onChange(e.target.value === '' ? undefined : Number(e.target.value))
	19	+ }
	20	+ className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
	21	+ />
	22	+ )
	23	+}
...	...

web/src/components/form-widgets/UomSelector.tsx 0 → 100644

View file @1875c06

	1	+// UoM selector widget for @rjsf forms.
	2	+// Fetches units of measure from the API and renders a <select> dropdown
	3	+// showing "code -- name" for each UoM.
	4	+
	5	+import { useEffect, useState } from 'react'
	6	+import type { WidgetProps } from '@rjsf/utils'
	7	+import { catalog } from '@/api/client'
	8	+import type { Uom } from '@/types/api'
	9	+
	10	+export function UomSelector(props: WidgetProps) {
	11	+ const { id, value, required, disabled, readonly, onChange } = props
	12	+ const [uoms, setUoms] = useState<Uom[]>([])
	13	+
	14	+ useEffect(() => {
	15	+ catalog.listUoms().then(setUoms).catch(() => setUoms([]))
	16	+ }, [])
	17	+
	18	+ return (
	19	+ <select
	20	+ id={id}
	21	+ value={value ?? ''}
	22	+ required={required}
	23	+ disabled={disabled \|\| readonly}
	24	+ onChange={(e) => onChange(e.target.value \|\| undefined)}
	25	+ className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
	26	+ >
	27	+ <option value="">—</option>
	28	+ {uoms.map((u) => (
	29	+ <option key={u.id} value={u.code}>
	30	+ {u.code} — {u.name}
	31	+ </option>
	32	+ ))}
	33	+ </select>
	34	+ )
	35	+}
...	...

web/src/components/form-widgets/index.ts 0 → 100644

View file @1875c06

	1	+// Widget registry for the @rjsf form renderer.
	2	+// Maps widget identifiers used in uiSchema to their React components.
	3	+
	4	+import type { RegistryWidgetsType } from '@rjsf/utils'
	5	+import { PartnerPicker } from './PartnerPicker'
	6	+import { ItemPicker } from './ItemPicker'
	7	+import { UomSelector } from './UomSelector'
	8	+import { LocationPicker } from './LocationPicker'
	9	+import { MoneyInput } from './MoneyInput'
	10	+import { QuantityInput } from './QuantityInput'
	11	+
	12	+export const vibeWidgets: RegistryWidgetsType = {
	13	+ 'partner-picker': PartnerPicker,
	14	+ 'item-picker': ItemPicker,
	15	+ 'uom-selector': UomSelector,
	16	+ 'location-picker': LocationPicker,
	17	+ 'money-input': MoneyInput,
	18	+ 'quantity-input': QuantityInput,
	19	+}
...	...

web/src/components/form-widgets/vibeErpTheme.tsx 0 → 100644

View file @1875c06

	1	+// Custom @rjsf theme for vibe_erp.
	2	+//
	3	+// Applies the same Tailwind CSS classes used throughout the existing
	4	+// SPA so that metadata-driven forms blend in seamlessly with the
	5	+// hand-coded pages.
	6	+
	7	+import type {
	8	+ BaseInputTemplateProps,
	9	+ ErrorListProps,
	10	+ FieldTemplateProps,
	11	+ ObjectFieldTemplateProps,
	12	+ SubmitButtonProps,
	13	+ RJSFSchema,
	14	+ StrictRJSFSchema,
	15	+ FormContextType,
	16	+} from '@rjsf/utils'
	17	+import {
	18	+ getSubmitButtonOptions,
	19	+ getInputProps,
	20	+} from '@rjsf/utils'
	21	+
	22	+// ── Visibility condition ────────────────────────────────────────────
	23	+// A field's uiSchema can declare:
	24	+// { "ui:visible": { "field": "otherField", "equals": "someValue" } }
	25	+// When the condition is not met the field is hidden entirely.
	26	+
	27	+interface VisibleCondition {
	28	+ field: string
	29	+ equals: unknown
	30	+}
	31	+
	32	+function isVisible(
	33	+ uiSchema: Record<string, unknown> \| undefined,
	34	+ formData: Record<string, unknown> \| undefined,
	35	+): boolean {
	36	+ if (!uiSchema) return true
	37	+ const cond = uiSchema['ui:visible'] as VisibleCondition \| undefined
	38	+ if (!cond) return true
	39	+ if (!formData) return false
	40	+ return formData[cond.field] === cond.equals
	41	+}
	42	+
	43	+// ── BaseInputTemplate ───────────────────────────────────────────────
	44	+
	45	+export function BaseInputTemplate<
	46	+ T = unknown,
	47	+ S extends StrictRJSFSchema = RJSFSchema,
	48	+ F extends FormContextType = Record<string, unknown>,
	49	+>(props: BaseInputTemplateProps<T, S, F>) {
	50	+ const {
	51	+ id,
	52	+ type,
	53	+ value,
	54	+ readonly,
	55	+ disabled,
	56	+ autofocus,
	57	+ onChange,
	58	+ onBlur,
	59	+ onFocus,
	60	+ schema,
	61	+ options,
	62	+ } = props
	63	+
	64	+ const { type: inputType, ...restInputProps } = getInputProps<T, S, F>(schema, type, options)
	65	+
	66	+ return (
	67	+ <input
	68	+ id={id}
	69	+ className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
	70	+ readOnly={readonly}
	71	+ disabled={disabled}
	72	+ autoFocus={autofocus}
	73	+ value={value == null ? '' : String(value)}
	74	+ onChange={(e) => onChange(e.target.value === '' ? options.emptyValue : e.target.value)}
	75	+ onBlur={(e) => onBlur(id, e.target.value)}
	76	+ onFocus={(e) => onFocus(id, e.target.value)}
	77	+ type={inputType ?? type}
	78	+ {...restInputProps}
	79	+ />
	80	+ )
	81	+}
	82	+
	83	+// ── FieldTemplate ───────────────────────────────────────────────────
	84	+
	85	+export function FieldTemplate<
	86	+ T = unknown,
	87	+ S extends StrictRJSFSchema = RJSFSchema,
	88	+ F extends FormContextType = Record<string, unknown>,
	89	+>(props: FieldTemplateProps<T, S, F>) {
	90	+ const {
	91	+ id,
	92	+ label,
	93	+ required,
	94	+ children,
	95	+ errors,
	96	+ help,
	97	+ description,
	98	+ hidden,
	99	+ uiSchema,
	100	+ formContext,
	101	+ } = props
	102	+
	103	+ // Check ui:visible condition
	104	+ const ctx = formContext as { formData?: Record<string, unknown> } \| undefined
	105	+ if (
	106	+ hidden \|\|
	107	+ !isVisible(uiSchema as Record<string, unknown> \| undefined, ctx?.formData)
	108	+ ) {
	109	+ return null
	110	+ }
	111	+
	112	+ return (
	113	+ <div className="mb-3">
	114	+ {label && id !== 'root' && (
	115	+ <label htmlFor={id} className="block text-sm font-medium text-slate-700">
	116	+ {label}
	117	+ {required && <span className="text-rose-500 ml-0.5">*</span>}
	118	+ </label>
	119	+ )}
	120	+ {description && (
	121	+ <p className="text-xs text-slate-500 mt-0.5">{description}</p>
	122	+ )}
	123	+ {children}
	124	+ {errors}
	125	+ {help}
	126	+ </div>
	127	+ )
	128	+}
	129	+
	130	+// ── ObjectFieldTemplate ─────────────────────────────────────────────
	131	+
	132	+export function ObjectFieldTemplate<
	133	+ T = unknown,
	134	+ S extends StrictRJSFSchema = RJSFSchema,
	135	+ F extends FormContextType = Record<string, unknown>,
	136	+>(props: ObjectFieldTemplateProps<T, S, F>) {
	137	+ const { title, description, properties } = props
	138	+
	139	+ return (
	140	+ <div className="space-y-4">
	141	+ {title && (
	142	+ <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-400 mb-3">
	143	+ {title}
	144	+ </h3>
	145	+ )}
	146	+ {description && (
	147	+ <p className="text-sm text-slate-500 mb-2">{description}</p>
	148	+ )}
	149	+ {properties.map((prop) => prop.content)}
	150	+ </div>
	151	+ )
	152	+}
	153	+
	154	+// ── ErrorList ────────────────────────────────────────────────────────
	155	+
	156	+export function ErrorList<
	157	+ T = unknown,
	158	+ S extends StrictRJSFSchema = RJSFSchema,
	159	+ F extends FormContextType = Record<string, unknown>,
	160	+>(props: ErrorListProps<T, S, F>) {
	161	+ const { errors } = props
	162	+ if (!errors \|\| errors.length === 0) return null
	163	+
	164	+ return (
	165	+ <div className="rounded-md border border-rose-200 bg-rose-50 p-3 mb-4">
	166	+ <ul className="list-disc list-inside space-y-1">
	167	+ {errors.map((err, i) => (
	168	+ <li key={i} className="text-sm text-rose-600">
	169	+ {err.stack}
	170	+ </li>
	171	+ ))}
	172	+ </ul>
	173	+ </div>
	174	+ )
	175	+}
	176	+
	177	+// ── SubmitButton ─────────────────────────────────────────────────────
	178	+
	179	+export function SubmitButton<
	180	+ T = unknown,
	181	+ S extends StrictRJSFSchema = RJSFSchema,
	182	+ F extends FormContextType = Record<string, unknown>,
	183	+>(props: SubmitButtonProps<T, S, F>) {
	184	+ const { uiSchema } = props
	185	+ const { submitText, norender } = getSubmitButtonOptions(uiSchema)
	186	+ if (norender) return null
	187	+
	188	+ return (
	189	+ <div className="mt-4">
	190	+ <button type="submit" className="btn-primary">
	191	+ {submitText}
	192	+ </button>
	193	+ </div>
	194	+ )
	195	+}
	196	+
	197	+// ── Assembled templates export ──────────────────────────────────────
	198	+
	199	+export const vibeTemplates = {
	200	+ BaseInputTemplate,
	201	+ FieldTemplate,
	202	+ ObjectFieldTemplate,
	203	+ ButtonTemplates: { SubmitButton },
	204	+ ErrorListTemplate: ErrorList,
	205	+}
...	...