@startsimpli/ui 0.4.33 → 0.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.33",
+  "version": "0.4.35",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -33,8 +33,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "0.4.27",
-    "@startsimpli/api": "0.5.33"
+    "@startsimpli/api": "0.5.35",
+    "@startsimpli/auth": "0.4.28"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/index.ts

@@ -92,6 +92,9 @@ export * from './wizard'
 // Account (profile + password forms)
 export * from './account'
 
+// Schema builder (no-code entity-type/field builder — startsim-768w.10.4 S2)
+export * from './schema'
+
 // Compose flow (auto-save, header, status, confirmation dialog)
 export * from './compose'
 

package/src/components/schema/SchemaTypeBuilder.tsx

@@ -0,0 +1,285 @@
+'use client'
+
+import { useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Checkbox } from '../ui/checkbox'
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '../ui/select'
+import { notify as defaultNotify } from '../toast'
+import { cn } from '../../lib/utils'
+import {
+  type DataType,
+  type DraftAttribute,
+  type AttributePayload,
+  DATA_TYPES,
+  blankAttribute,
+  toKey,
+  draftToAttributePayloads,
+} from './schema-builder-core'
+
+/** The type the backend echoes back after creation (only `id` is required). */
+export interface CreatedType {
+  id: number
+  key: string
+  label: string
+}
+
+/** A minimal notifier surface; defaults to @startsimpli/ui's toast notify. */
+export interface SchemaTypeBuilderNotifier {
+  success?: (message: string) => void
+  error?: (message: string) => void
+}
+
+/** Theme slots so a consuming app can restyle the builder without forking it. */
+export interface SchemaTypeBuilderClassNames {
+  root?: string
+  card?: string
+  fieldRow?: string
+  submit?: string
+}
+
+export interface SchemaTypeBuilderProps {
+  /** Persist the entity type. Must resolve to at least its server-assigned id. */
+  createType: (input: { key: string; label: string }) => Promise<{ id: number }>
+  /** Persist one attribute against the just-created type. */
+  createAttribute: (input: AttributePayload) => Promise<unknown>
+  /** Fired after the type and all its attributes are created (navigate / refetch here). */
+  onCreated?: (created: CreatedType) => void
+  /** Inject a notifier; defaults to the shared @startsimpli/ui notify. */
+  notify?: SchemaTypeBuilderNotifier
+  /** Override the submit label (default "Create type"). */
+  submitLabel?: string
+  classNames?: SchemaTypeBuilderClassNames
+}
+
+/**
+ * No-code entity-type builder, promoted from frontend-starter (rule #9). The
+ * persistence layer is injected via `createType`/`createAttribute` props so the
+ * component carries no API client, router, or query-cache coupling — the
+ * consuming app wires those in a thin wrapper and handles post-create
+ * navigation/refetch in `onCreated`.
+ */
+export function SchemaTypeBuilder({
+  createType,
+  createAttribute,
+  onCreated,
+  notify = defaultNotify,
+  submitLabel = 'Create type',
+  classNames,
+}: SchemaTypeBuilderProps) {
+  const [label, setLabel] = useState('')
+  const [keyOverride, setKeyOverride] = useState('')
+  const [attributes, setAttributes] = useState<DraftAttribute[]>([blankAttribute()])
+  const [saving, setSaving] = useState(false)
+
+  const effectiveKey = keyOverride.trim() || toKey(label)
+
+  function updateAttr(index: number, patch: Partial<DraftAttribute>) {
+    setAttributes((prev) => prev.map((a, i) => (i === index ? { ...a, ...patch } : a)))
+  }
+
+  function addAttr() {
+    setAttributes((prev) => [...prev, blankAttribute()])
+  }
+
+  function removeAttr(index: number) {
+    setAttributes((prev) => prev.filter((_, i) => i !== index))
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!label.trim() || !effectiveKey) {
+      notify.error?.('Give your type a name.')
+      return
+    }
+    setSaving(true)
+    try {
+      const type = await createType({ key: effectiveKey, label: label.trim() })
+
+      // Create each declared attribute, in order; the backend attaches them to
+      // the type by id. Blank rows + enum config are handled by the pure helper.
+      for (const payload of draftToAttributePayloads(type.id, attributes)) {
+        await createAttribute(payload)
+      }
+
+      notify.success?.(`Created "${label.trim()}".`)
+      onCreated?.({ id: type.id, key: effectiveKey, label: label.trim() })
+    } catch (err) {
+      notify.error?.(err instanceof Error ? err.message : 'Could not create the type.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('space-y-6', classNames?.root)}>
+      <Card className={classNames?.card}>
+        <CardHeader>
+          <CardTitle>Type details</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="type-label">Name</Label>
+            <Input
+              id="type-label"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="e.g. Customer, Invoice, Property"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="type-key">Key (optional)</Label>
+            <Input
+              id="type-key"
+              value={keyOverride}
+              onChange={(e) => setKeyOverride(e.target.value)}
+              placeholder={toKey(label) || 'auto-generated from the name'}
+            />
+            <p className="text-xs text-gray-500">
+              Stable identifier used in URLs and the API. Defaults to{' '}
+              <span className="font-mono">{effectiveKey || '—'}</span>.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className={classNames?.card}>
+        <CardHeader>
+          <CardTitle>Fields</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {attributes.map((attr, i) => (
+            <div
+              key={i}
+              className={cn(
+                'grid items-end gap-3 sm:grid-cols-[1fr_180px_auto_auto]',
+                classNames?.fieldRow,
+              )}
+            >
+              <div className="space-y-1.5">
+                <Label htmlFor={`attr-name-${i}`}>Field name</Label>
+                <Input
+                  id={`attr-name-${i}`}
+                  value={attr.name}
+                  onChange={(e) => updateAttr(i, { name: e.target.value })}
+                  placeholder="e.g. email, due_date, amount"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>Type</Label>
+                <Select
+                  value={attr.dataType}
+                  onValueChange={(v) => updateAttr(i, { dataType: v as DataType })}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DATA_TYPES.map((dt) => (
+                      <SelectItem key={dt.value} value={dt.value}>
+                        {dt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex items-center gap-2 pb-2.5">
+                <Checkbox
+                  id={`attr-required-${i}`}
+                  checked={attr.required}
+                  onCheckedChange={(c) => updateAttr(i, { required: c === true })}
+                />
+                <Label htmlFor={`attr-required-${i}`}>Required</Label>
+              </div>
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => removeAttr(i)}
+                aria-label="Remove field"
+                disabled={attributes.length === 1}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+
+              {attr.dataType === 'enum' && (
+                <div className="space-y-1.5 sm:col-span-4">
+                  <Label htmlFor={`attr-choices-${i}`}>Choices (comma-separated)</Label>
+                  <Input
+                    id={`attr-choices-${i}`}
+                    value={attr.choices}
+                    onChange={(e) => updateAttr(i, { choices: e.target.value })}
+                    placeholder="e.g. Open, In progress, Done"
+                  />
+                </div>
+              )}
+
+              {(attr.dataType === 'number' || attr.dataType === 'integer') && (
+                <div className="grid gap-3 sm:col-span-4 sm:grid-cols-2">
+                  <div className="space-y-1.5">
+                    <Label htmlFor={`attr-min-${i}`}>Minimum (optional)</Label>
+                    <Input
+                      id={`attr-min-${i}`}
+                      type="number"
+                      value={attr.min}
+                      onChange={(e) => updateAttr(i, { min: e.target.value })}
+                      placeholder="e.g. 0"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor={`attr-max-${i}`}>Maximum (optional)</Label>
+                    <Input
+                      id={`attr-max-${i}`}
+                      type="number"
+                      value={attr.max}
+                      onChange={(e) => updateAttr(i, { max: e.target.value })}
+                      placeholder="e.g. 100"
+                    />
+                  </div>
+                </div>
+              )}
+
+              {(attr.dataType === 'text' || attr.dataType === 'longtext') && (
+                <div className="space-y-1.5 sm:col-span-4">
+                  <Label htmlFor={`attr-regex-${i}`}>Pattern (regex, optional)</Label>
+                  <Input
+                    id={`attr-regex-${i}`}
+                    value={attr.regex}
+                    onChange={(e) => updateAttr(i, { regex: e.target.value })}
+                    placeholder="e.g. [^@]+@[^@]+\.[^@]+"
+                  />
+                  <p className="text-xs text-gray-500">
+                    Values must fully match this pattern.
+                  </p>
+                </div>
+              )}
+            </div>
+          ))}
+
+          <Button type="button" variant="outline" onClick={addAttr}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add field
+          </Button>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button type="submit" disabled={saving} className={classNames?.submit}>
+          {saving ? 'Creating…' : submitLabel}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/src/components/schema/__tests__/SchemaTypeBuilder.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { SchemaTypeBuilder } from '../SchemaTypeBuilder'
+
+/**
+ * Light render coverage for the promoted, API-injected builder. We exercise the
+ * default text-field path only — Radix Select interaction in jsdom is a known
+ * rabbit hole, and the dataType/enum branching is covered exhaustively by the
+ * pure draftToAttributePayloads specs.
+ */
+function setup() {
+  const createType = jest.fn().mockResolvedValue({ id: 42 })
+  const createAttribute = jest.fn().mockResolvedValue({ id: 1 })
+  const onCreated = jest.fn()
+  const notify = { success: jest.fn(), error: jest.fn() }
+  render(
+    <SchemaTypeBuilder
+      createType={createType}
+      createAttribute={createAttribute}
+      onCreated={onCreated}
+      notify={notify}
+    />,
+  )
+  return { createType, createAttribute, onCreated, notify, user: userEvent.setup() }
+}
+
+describe('SchemaTypeBuilder', () => {
+  it('renders the type-name field and a create button without any foundry-api import', () => {
+    setup()
+    expect(screen.getByLabelText('Name')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /create type/i })).toBeInTheDocument()
+  })
+
+  it('submits the injected createType + createAttribute with the slugified key and trimmed field name', async () => {
+    const { createType, createAttribute, onCreated, user } = setup()
+
+    await user.type(screen.getByLabelText('Name'), 'Customer')
+    await user.type(screen.getByLabelText('Field name'), 'email')
+    await user.click(screen.getByRole('button', { name: /create type/i }))
+
+    await waitFor(() => expect(createType).toHaveBeenCalledTimes(1))
+    expect(createType).toHaveBeenCalledWith({ key: 'customer', label: 'Customer' })
+    expect(createAttribute).toHaveBeenCalledWith({
+      entityType: 42,
+      name: 'email',
+      dataType: 'text',
+      required: false,
+      config: {},
+    })
+    expect(onCreated).toHaveBeenCalledWith({ id: 42, key: 'customer', label: 'Customer' })
+  })
+
+  it('refuses to submit (and warns) when no name is given', async () => {
+    const { createType, notify, user } = setup()
+    await user.click(screen.getByRole('button', { name: /create type/i }))
+    expect(createType).not.toHaveBeenCalled()
+    expect(notify.error).toHaveBeenCalled()
+  })
+})

package/src/components/schema/__tests__/schema-builder-core.test.ts

@@ -0,0 +1,126 @@
+import {
+  toKey,
+  blankAttribute,
+  draftToAttributePayloads,
+  DATA_TYPES,
+  type DraftAttribute,
+} from '../schema-builder-core'
+
+describe('toKey', () => {
+  it('slugifies a label into a stable lowercase key', () => {
+    expect(toKey('Customer')).toBe('customer')
+    expect(toKey('Purchase Order')).toBe('purchase_order')
+    expect(toKey('  Invoice #2024 ')).toBe('invoice_2024')
+  })
+
+  it('collapses runs of non-alphanumerics and trims edge underscores', () => {
+    expect(toKey('A -- B')).toBe('a_b')
+    expect(toKey('***weird***')).toBe('weird')
+    expect(toKey('')).toBe('')
+  })
+})
+
+describe('blankAttribute', () => {
+  it('defaults to a non-required text field with no choices/bounds/regex', () => {
+    expect(blankAttribute()).toEqual({
+      name: '',
+      dataType: 'text',
+      required: false,
+      choices: '',
+      min: '',
+      max: '',
+      regex: '',
+    })
+  })
+})
+
+describe('draftToAttributePayloads', () => {
+  const text = (over: Partial<DraftAttribute> = {}): DraftAttribute => ({
+    ...blankAttribute(),
+    name: 'email',
+    ...over,
+  })
+
+  it('drops blank-name rows and trims names', () => {
+    const payloads = draftToAttributePayloads(7, [
+      text({ name: '  email ' }),
+      text({ name: '' }),
+      text({ name: '   ' }),
+    ])
+    expect(payloads).toHaveLength(1)
+    expect(payloads[0]).toMatchObject({ entityType: 7, name: 'email', config: {} })
+  })
+
+  it('builds enum config.choices from the comma-separated input (trimmed, empties removed)', () => {
+    const [payload] = draftToAttributePayloads(3, [
+      text({ name: 'status', dataType: 'enum', choices: 'Open, In progress , ,Done' }),
+    ])
+    expect(payload).toMatchObject({
+      entityType: 3,
+      name: 'status',
+      dataType: 'enum',
+      config: { choices: ['Open', 'In progress', 'Done'] },
+    })
+  })
+
+  it('carries the required flag and uses an empty config for non-enum fields', () => {
+    const [payload] = draftToAttributePayloads(1, [
+      text({ name: 'amount', dataType: 'number', required: true }),
+    ])
+    expect(payload).toEqual({
+      entityType: 1,
+      name: 'amount',
+      dataType: 'number',
+      required: true,
+      config: {},
+    })
+  })
+
+  it('builds numeric config.min/max from the min/max inputs (number/integer)', () => {
+    const [payload] = draftToAttributePayloads(5, [
+      text({ name: 'qty', dataType: 'integer', min: '1', max: '10' }),
+    ])
+    expect(payload).toMatchObject({
+      name: 'qty',
+      dataType: 'integer',
+      config: { min: 1, max: 10 },
+    })
+  })
+
+  it('sets only the numeric bounds that are provided (blank min/max omitted)', () => {
+    const [payload] = draftToAttributePayloads(5, [
+      text({ name: 'score', dataType: 'number', min: '0', max: '' }),
+    ])
+    expect(payload.config).toEqual({ min: 0 })
+  })
+
+  it('builds text config.regex from the regex input (text/longtext)', () => {
+    const [payload] = draftToAttributePayloads(5, [
+      text({ name: 'email', dataType: 'text', regex: '[^@]+@[^@]+' }),
+    ])
+    expect(payload.config).toEqual({ regex: '[^@]+@[^@]+' })
+  })
+
+  it('keeps config keys scoped to the dataType (no cross-contamination)', () => {
+    // text reads only regex; a stray min/max/choices must not leak into config.
+    const [payload] = draftToAttributePayloads(5, [
+      text({ name: 'note', dataType: 'text', min: '1', max: '9', choices: 'a,b' }),
+    ])
+    expect(payload.config).toEqual({})
+  })
+})
+
+describe('DATA_TYPES', () => {
+  it('exposes the eight backend data types as {value,label} options', () => {
+    expect(DATA_TYPES.map((d) => d.value)).toEqual([
+      'text',
+      'longtext',
+      'number',
+      'integer',
+      'boolean',
+      'date',
+      'enum',
+      'json',
+    ])
+  })
+})

package/src/components/schema/index.ts

@@ -0,0 +1,14 @@
+export { SchemaTypeBuilder } from './SchemaTypeBuilder'
+export type {
+  SchemaTypeBuilderProps,
+  SchemaTypeBuilderClassNames,
+  SchemaTypeBuilderNotifier,
+  CreatedType,
+} from './SchemaTypeBuilder'
+export {
+  DATA_TYPES,
+  blankAttribute,
+  toKey,
+  draftToAttributePayloads,
+} from './schema-builder-core'
+export type { DataType, DraftAttribute, AttributePayload } from './schema-builder-core'

package/src/components/schema/schema-builder-core.ts

@@ -0,0 +1,108 @@
+/**
+ * Pure, render-free helpers for the no-code SchemaTypeBuilder. Promoted into
+ * packages/ui (startsim-768w.10.4 S2) from frontend-starter's type-builder-core
+ * so the bug-prone bits — slugifying a label into a stable key and turning draft
+ * field rows into createAttribute() payloads (enum config, blank-row skipping) —
+ * are unit-testable without rendering and reusable by any consuming app.
+ *
+ * The eight DataType values mirror the tenant-starter AttributeDef.data_type
+ * choices (apps/schema_registry/models.py). Keep them in lockstep with the
+ * backend; the builder offers exactly these.
+ */
+
+export type DataType =
+  | 'text'
+  | 'longtext'
+  | 'number'
+  | 'integer'
+  | 'boolean'
+  | 'date'
+  | 'enum'
+  | 'json'
+
+export const DATA_TYPES: { value: DataType; label: string }[] = [
+  { value: 'text', label: 'Short text' },
+  { value: 'longtext', label: 'Long text' },
+  { value: 'number', label: 'Number (decimal)' },
+  { value: 'integer', label: 'Whole number' },
+  { value: 'boolean', label: 'Yes / No' },
+  { value: 'date', label: 'Date' },
+  { value: 'enum', label: 'Choice (pick one)' },
+  { value: 'json', label: 'Structured (JSON)' },
+]
+
+export interface DraftAttribute {
+  name: string
+  dataType: DataType
+  required: boolean
+  /** Comma-separated choices, only used when dataType === 'enum'. */
+  choices: string
+  /** Lower bound, only used when dataType is number/integer (blank = none). */
+  min: string
+  /** Upper bound, only used when dataType is number/integer (blank = none). */
+  max: string
+  /** Validation pattern, only used when dataType is text/longtext (blank = none). */
+  regex: string
+}
+
+export function blankAttribute(): DraftAttribute {
+  return { name: '', dataType: 'text', required: false, choices: '', min: '', max: '', regex: '' }
+}
+
+/** Slugify a label into a stable, lowercase key the backend stores. */
+export function toKey(label: string): string {
+  return label
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '')
+}
+
+export interface AttributePayload {
+  entityType: number
+  name: string
+  dataType: DataType
+  required: boolean
+  config: Record<string, unknown>
+}
+
+/**
+ * Turn the draft field rows into createAttribute() inputs for a just-created
+ * type: drop blank-name rows, trim names, and build enum `config.choices` from
+ * the comma-separated input (trimmed, empties removed).
+ */
+export function draftToAttributePayloads(
+  entityTypeId: number,
+  drafts: DraftAttribute[],
+): AttributePayload[] {
+  const out: AttributePayload[] = []
+  for (const attr of drafts) {
+    const name = attr.name.trim()
+    if (!name) continue
+    // Config keys are scoped to the dataType + match what the backend enforces
+    // (enum: choices, number/integer: min/max, text/longtext: regex). Numeric
+    // bounds + regex are omitted when blank; an enum always carries its choices.
+    const config: Record<string, unknown> = {}
+    if (attr.dataType === 'enum') {
+      config.choices = attr.choices
+        .split(',')
+        .map((c) => c.trim())
+        .filter(Boolean)
+    } else if (attr.dataType === 'number' || attr.dataType === 'integer') {
+      const min = Number(attr.min)
+      const max = Number(attr.max)
+      if (attr.min.trim() !== '' && !Number.isNaN(min)) config.min = min
+      if (attr.max.trim() !== '' && !Number.isNaN(max)) config.max = max
+    } else if (attr.dataType === 'text' || attr.dataType === 'longtext') {
+      if (attr.regex.trim() !== '') config.regex = attr.regex.trim()
+    }
+    out.push({
+      entityType: entityTypeId,
+      name,
+      dataType: attr.dataType,
+      required: attr.required,
+      config,
+    })
+  }
+  return out
+}