JSON-based programming language
+ hidden business logic
+ impossible debugging
+ weak type safety
+ inconsistent accessibility
+ configuration hell

Case type A punya 5 step.
Case type B punya 9 step.
Region X wajib field tambahan.
Risk high butuh approval tambahan.
Legal hold mengubah field menjadi readonly.
Supervisor bisa override beberapa step.
Feature flag mengaktifkan section baru.
Policy version lama harus tetap bisa dibuka.

if region === "X"
if risk === "HIGH"
if workflowVersion === "v3"
if user.role === "supervisor"
if caseType === "SPECIAL_INVESTIGATION"

Make variability configurable.
Keep product semantics in code.

1. Schema
2. Registry
3. Renderer
4. State/Workflow engine
5. Command boundary

type WorkflowConfig = {
  id: string;
  version: number;
  title: string;
  steps: StepConfig[];
};

type StepConfig = {
  id: string;
  title: string;
  sections: SectionConfig[];
  transitions: TransitionConfig[];
  visibleWhen?: Expression;
  permission?: Capability;
};

type SectionConfig = {
  id: string;
  title: string;
  fields: FieldConfig[];
  visibleWhen?: Expression;
};

type FieldConfig = {
  id: string;
  label: string;
  component: ComponentKey;
  path: string;
  required?: boolean;
  readonlyWhen?: Expression;
  visibleWhen?: Expression;
  validation?: ValidationRule[];
};

type ComponentKey =
  | "text"
  | "textarea"
  | "select"
  | "date"
  | "money"
  | "attachment"
  | "caseReference";

{
  "component": "AnyReactComponent",
  "props": {
    "onClick": "eval('deleteCase()')"
  }
}

{
  "component": "caseReference",
  "path": "relatedCaseId",
  "label": "Related case",
  "required": true
}

type FieldRendererProps = {
  field: FieldConfig;
  value: unknown;
  error?: string;
  readonly: boolean;
  onChange: (value: unknown) => void;
};

type FieldRegistry = Record<ComponentKey, React.ComponentType<FieldRendererProps>>;

const fieldRegistry: FieldRegistry = {
  text: TextField,
  textarea: TextAreaField,
  select: SelectField,
  date: DateField,
  money: MoneyField,
  attachment: AttachmentField,
  caseReference: CaseReferenceField,
};

function WorkflowRenderer({
  config,
  model,
  onModelChange,
}: {
  config: WorkflowConfig;
  model: Record<string, unknown>;
  onModelChange: (next: Record<string, unknown>) => void;
}) {
  return (
    <div>
      <h1>{config.title}</h1>
      {config.steps.map((step) => (
        <StepRenderer
          key={step.id}
          step={step}
          model={model}
          onModelChange={onModelChange}
        />
      ))}
    </div>
  );
}

function FieldRenderer({
  field,
  model,
  onModelChange,
}: {
  field: FieldConfig;
  model: Record<string, unknown>;
  onModelChange: (next: Record<string, unknown>) => void;
}) {
  const Component = fieldRegistry[field.component];

  if (!Component) {
    return <UnsupportedField field={field} />;
  }

  const visible = evaluateExpression(field.visibleWhen, model);
  if (!visible) return null;

  const readonly = evaluateExpression(field.readonlyWhen, model);
  const value = getByPath(model, field.path);

  return (
    <Component
      field={field}
      value={value}
      readonly={readonly}
      onChange={(nextValue) => {
        onModelChange(setByPath(model, field.path, nextValue));
      }}
    />
  );
}

Show section when risk == HIGH.
Readonly when case is CLOSED.
Require field when channel == EMAIL.
Allow transition when validation passes.

{
  "visibleWhen": "model.risk === 'HIGH' && user.role === 'supervisor'"
}

type Expression =
  | { op: "always" }
  | { op: "eq"; path: string; value: unknown }
  | { op: "neq"; path: string; value: unknown }
  | { op: "in"; path: string; values: unknown[] }
  | { op: "and"; conditions: Expression[] }
  | { op: "or"; conditions: Expression[] }
  | { op: "not"; condition: Expression }
  | { op: "hasCapability"; capability: Capability };

function evaluateExpression(
  expression: Expression | undefined,
  model: Record<string, unknown>,
  capability?: (capability: Capability) => boolean
): boolean {
  if (!expression) return true;

  switch (expression.op) {
    case "always":
      return true;
    case "eq":
      return getByPath(model, expression.path) === expression.value;
    case "neq":
      return getByPath(model, expression.path) !== expression.value;
    case "in":
      return expression.values.includes(getByPath(model, expression.path));
    case "and":
      return expression.conditions.every((condition) =>
        evaluateExpression(condition, model, capability)
      );
    case "or":
      return expression.conditions.some((condition) =>
        evaluateExpression(condition, model, capability)
      );
    case "not":
      return !evaluateExpression(expression.condition, model, capability);
    case "hasCapability":
      return capability ? capability(expression.capability) : false;
    default:
      return assertNever(expression);
  }
}

type TransitionConfig = {
  id: string;
  label: string;
  from: string;
  to: string;
  capability?: Capability;
  guard?: Expression;
  command?: CommandConfig;
};

type CommandConfig = {
  type: "saveDraft" | "submitForReview" | "approve" | "reject" | "close";
  payloadMapping?: Record<string, string>;
};

function WorkflowActions({
  step,
  model,
  runCommand,
}: {
  step: StepConfig;
  model: Record<string, unknown>;
  runCommand: (command: CommandConfig) => Promise<void>;
}) {
  return (
    <div>
      {step.transitions.map((transition) => (
        <TransitionButton
          key={transition.id}
          transition={transition}
          model={model}
          runCommand={runCommand}
        />
      ))}
    </div>
  );
}

function TransitionButton({
  transition,
  model,
  runCommand,
}: {
  transition: TransitionConfig;
  model: Record<string, unknown>;
  runCommand: (command: CommandConfig) => Promise<void>;
}) {
  const decision = usePermission(transition.capability ?? "case.update");
  const guardPasses = evaluateExpression(transition.guard, model);
  const enabled = decision.allowed && guardPasses;

  return (
    <button
      type="button"
      disabled={!enabled}
      onClick={() => {
        if (!enabled || !transition.command) return;
        void runCommand(transition.command);
      }}
    >
      {transition.label}
    </button>
  );
}

type ConfigMetadata = {
  id: string;
  version: number;
  effectiveFrom?: string;
  effectiveTo?: string;
  status: "draft" | "active" | "deprecated";
  migrationFrom?: number;
};

A case created under workflow v3 must remain understandable after workflow v4 ships.

Schema validation
→ model validation
→ field validation
→ cross-field validation
→ step validation
→ transition guard
→ server validation

type ValidationRule =
  | { type: "required"; message?: string }
  | { type: "minLength"; value: number; message?: string }
  | { type: "maxLength"; value: number; message?: string }
  | { type: "pattern"; value: string; message?: string }
  | { type: "dateBefore"; path: string; message?: string }
  | { type: "custom"; id: string; message?: string };

type Validator = (
  value: unknown,
  model: Record<string, unknown>,
  rule: ValidationRule
) => string | null;

const validatorRegistry: Record<string, Validator> = {
  required(value, _model, rule) {
    return value == null || value === ""
      ? rule.message ?? "This field is required."
      : null;
  },
  minLength(value, _model, rule) {
    if (typeof value !== "string") return null;
    return value.length < rule.value
      ? rule.message ?? `Must be at least ${rule.value} characters.`
      : null;
  },
};

{ "path": "applicant.address.city" }

function setByPath(
  model: Record<string, unknown>,
  path: string,
  value: unknown
): Record<string, unknown> {
  const keys = path.split(".");
  const next = structuredClone(model);
  let cursor: Record<string, unknown> = next;

  for (const key of keys.slice(0, -1)) {
    const child = cursor[key];
    if (typeof child !== "object" || child == null) {
      cursor[key] = {};
    }
    cursor = cursor[key] as Record<string, unknown>;
  }

  cursor[keys[keys.length - 1]] = value;
  return next;
}

function useWorkflowRuntime(workflowId: string, recordId: string) {
  const configQuery = useWorkflowConfigQuery(workflowId);
  const recordQuery = useWorkflowRecordQuery(recordId);
  const saveMutation = useSaveWorkflowMutation(recordId);
  const transitionMutation = useWorkflowTransitionMutation(recordId);

  const config = configQuery.data;
  const record = recordQuery.data;

  const [draft, setDraft] = useState(() => record?.model ?? {});

  useEffect(() => {
    if (!record) return;
    setDraft(record.model);
  }, [record?.version]);

  const runtime = useMemo(() => {
    if (!config || !record) return null;

    return createWorkflowRuntime({
      config,
      record,
      draft,
    });
  }, [config, record, draft]);

  return {
    isLoading: configQuery.isLoading || recordQuery.isLoading,
    error: configQuery.error ?? recordQuery.error,
    config,
    record,
    draft,
    setDraft,
    runtime,
    saveDraft: () => saveMutation.mutateAsync({ model: draft }),
    runTransition: (transitionId: string) =>
      transitionMutation.mutateAsync({ transitionId, model: draft }),
    isSaving: saveMutation.isPending,
    isTransitioning: transitionMutation.isPending,
  };
}

function WorkflowPage() {
  const { workflowId, recordId } = useParams();
  const workflow = useWorkflowRuntime(workflowId!, recordId!);

  if (workflow.isLoading) return <WorkflowSkeleton />;
  if (workflow.error) return <WorkflowError error={workflow.error} />;
  if (!workflow.config || !workflow.runtime) return <WorkflowUnavailable />;

  return (
    <WorkflowRenderer
      config={workflow.config}
      runtime={workflow.runtime}
      model={workflow.draft}
      onModelChange={workflow.setDraft}
      onSaveDraft={workflow.saveDraft}
      onRunTransition={workflow.runTransition}
    />
  );
}

function parseWorkflowConfig(input: unknown): WorkflowConfig {
  const result = WorkflowConfigSchema.safeParse(input);

  if (!result.success) {
    throw new Error("Invalid workflow configuration");
  }

  return result.data;
}

configuration authoring time
configuration publish time
server API response time
frontend runtime parse time
renderer unsupported-component fallback

[ ] Accepts value and onChange
[ ] Supports readonly
[ ] Supports disabled if applicable
[ ] Emits normalized value
[ ] Handles validation error
[ ] Has accessible label association
[ ] Does not own server mutation directly
[ ] Does not read global domain state implicitly
[ ] Is keyboard accessible
[ ] Has Storybook scenarios
[ ] Has regression tests

function SpecialCaseField() {
  const caseId = useParams().caseId;
  const mutation = useSpecialMutation(caseId);

  return <button onClick={() => mutation.mutate()}>Do Special Thing</button>;
}

function SpecialCaseField({ value, onChange, readonly, field }: FieldRendererProps) {
  return (
    <SpecialCaseSelector
      label={field.label}
      value={value as string | null}
      readonly={readonly}
      onChange={onChange}
    />
  );
}

type SectionConfig = {
  id: string;
  title: string;
  permission?: Capability;
  fields: FieldConfig[];
};

function SectionRenderer({ section, model }: SectionRendererProps) {
  const decision = usePermission(section.permission ?? "case.read");

  if (!decision.allowed) {
    return null;
  }

  return (
    <section>
      <h2>{section.title}</h2>
      {section.fields.map((field) => (
        <FieldRenderer key={field.id} field={field} model={model} />
      ))}
    </section>
  );
}

const updateDecision = usePermission(field.updatePermission ?? "case.update");
const readonly = !updateDecision.allowed || evaluateExpression(field.readonlyWhen, model);

type CommandHandler = (args: {
  command: CommandConfig;
  model: Record<string, unknown>;
  record: WorkflowRecord;
}) => Promise<void>;

const commandHandlers: Record<CommandConfig["type"], CommandHandler> = {
  async saveDraft({ model, record }) {
    await api.saveDraft(record.id, model);
  },
  async submitForReview({ model, record }) {
    await api.submitForReview(record.id, model);
  },
  async approve({ record }) {
    await api.approve(record.id);
  },
  async reject({ record }) {
    await api.reject(record.id);
  },
  async close({ record }) {
    await api.close(record.id);
  },
};

{
  "command": {
    "method": "DELETE",
    "url": "/admin/users/123"
  }
}

{
  "command": {
    "type": "approve"
  }
}

type WorkflowUiEvent =
  | {
      type: "workflow_config_loaded";
      workflowId: string;
      version: number;
    }
  | {
      type: "workflow_field_changed";
      workflowId: string;
      fieldId: string;
    }
  | {
      type: "workflow_transition_clicked";
      workflowId: string;
      transitionId: string;
    }
  | {
      type: "workflow_transition_denied";
      workflowId: string;
      transitionId: string;
      reason: string;
    }
  | {
      type: "workflow_config_error";
      workflowId: string;
      errorCode: string;
    };

Workflow ID
Config version
Current step
Visible sections
Hidden sections and reasons
Validation errors
Available transitions
Denied transitions and reasons
Pending command

invalid component key rejected
missing field path rejected
duplicate field id rejected
transition target must exist
unknown validator rejected

eq works
and/or/not works
unknown path returns false or configured default
capability expression calls permission service

renders text field
hides section when condition false
makes field readonly when condition true
shows unsupported component fallback
preserves stable field identity

only valid transitions shown
denied transition disabled
transition command called with mapped payload
server validation error mapped to field
stale transition rejection refreshes record

workflow-config-v1.json
workflow-config-v2.json
workflow-config-v3.json

many fields
many expressions
many permissions
many validations
large model object
frequent keystrokes
context fan-out
expensive registry components

type WorkflowRuntime = {
  stepsById: Map<string, StepConfig>;
  fieldsById: Map<string, FieldConfig>;
  fieldsByPath: Map<string, FieldConfig>;
  transitionsById: Map<string, TransitionConfig>;
  dependencyGraph: Map<string, string[]>;
};

When model.risk changes, which fields/sections/guards need reevaluation?

{
  "onClick": "if (user.role === 'admin') fetch('/delete')"
}

Use registry-based commands and limited expression AST.

Old records break after new config ships.

Version config and store workflow version with record.

Renderer has huge switch statements for business cases.

Move semantics to config schema, domain hook, command registry, or workflow runtime.

Field component reads route params, query cache, and mutations directly.

Field components receive value/onChange/readonly/error. Commands live at workflow boundary.

Hidden field still fails required validation.

Validation must account for visibility and workflow step.

Transition shown enabled but backend denies.

Treat as stale permission/resource state. Refresh record and show authorization conflict.

Config authors create invalid or inaccessible workflows.

Validate at publish time. Provide preview, lint, and test harness.

[ ] What variation is truly configurable?
[ ] What variation stays in code?
[ ] Who authors config?
[ ] How is config validated before publish?
[ ] How is config versioned?
[ ] Can old records still render?
[ ] What is the component registry contract?
[ ] What is the expression language boundary?
[ ] Are commands registry-based instead of arbitrary endpoints?
[ ] Where is server authorization enforced?
[ ] How are permissions represented in config?
[ ] How are field/step/transition validations layered?
[ ] How is performance measured for large workflows?
[ ] How is config behavior tested?
[ ] How do we debug hidden fields, denied actions, and validation errors?
[ ] What is the migration plan if config shape changes?

src/
  features/
    workflow-runtime/
      api/
        workflowConfigApi.ts
        workflowRecordApi.ts
      model/
        workflowConfigSchema.ts
        workflowRuntime.ts
        expressionEvaluator.ts
        validationEngine.ts
        commandRegistry.ts
      ui/
        WorkflowRenderer.tsx
        StepRenderer.tsx
        SectionRenderer.tsx
        FieldRenderer.tsx
        WorkflowActions.tsx
      registry/
        fieldRegistry.ts
        validatorRegistry.ts
      hooks/
        useWorkflowRuntime.ts
      testing/
        workflowFixtures.ts
        renderWorkflow.tsx

Page
→ useWorkflowRuntime
→ workflow model/api/registry
→ renderer
→ approved field components

Config describes approved product variation.
Registry supplies approved behavior.
Renderer interprets config predictably.
Workflow machine controls transitions.
Command boundary talks to backend.
Backend remains authoritative.