From 009332adbf3ebf2c2bfddacc2eed6ee430a5c78b Mon Sep 17 00:00:00 2001 From: Babayaga Date: Fri, 3 Apr 2026 17:15:16 +0200 Subject: [PATCH] types:vfs/cats/groups/posts/pages --- packages/ui/docs/types.md | 238 ++++++------ .../components/admin/ProductTypeDataForms.tsx | 108 ++++++ .../src/components/admin/ProductsManager.tsx | 249 +++++++++++-- .../src/modules/ecommerce/client-products.ts | 4 + .../pages/editor/UserPageTypeFields.tsx | 5 +- .../ui/src/modules/types/RJSFTemplates.tsx | 49 ++- packages/ui/src/modules/types/TypeBuilder.tsx | 19 +- .../ui/src/modules/types/TypeCategoryTree.tsx | 64 +++- .../ui/src/modules/types/TypeRenderer.tsx | 5 +- .../ui/src/modules/types/appPickerWidgets.tsx | 338 ++++++++++++++++++ .../types/builder/TypeBuilderContent.tsx | 173 ++++++++- .../types/builder/appPickerWidgetOptions.ts | 48 +++ .../src/modules/types/builder/components.tsx | 2 +- .../types/builder/typeBuilderCollision.ts | 49 +++ .../ui/src/modules/types/builder/utils.ts | 7 +- .../modules/types/categoryPickerWidget.tsx | 39 ++ .../src/modules/types/groupPickerWidget.tsx | 39 ++ .../src/modules/types/rjsfButtonTemplates.tsx | 130 +++++++ .../src/modules/types/rjsfWidgetRegistry.ts | 20 ++ packages/ui/src/modules/types/schema-utils.ts | 16 +- .../ui/src/modules/types/userPickerWidget.tsx | 38 ++ 21 files changed, 1476 insertions(+), 164 deletions(-) create mode 100644 packages/ui/src/components/admin/ProductTypeDataForms.tsx create mode 100644 packages/ui/src/modules/types/appPickerWidgets.tsx create mode 100644 packages/ui/src/modules/types/builder/appPickerWidgetOptions.ts create mode 100644 packages/ui/src/modules/types/builder/typeBuilderCollision.ts create mode 100644 packages/ui/src/modules/types/categoryPickerWidget.tsx create mode 100644 packages/ui/src/modules/types/groupPickerWidget.tsx create mode 100644 packages/ui/src/modules/types/rjsfButtonTemplates.tsx create mode 100644 packages/ui/src/modules/types/rjsfWidgetRegistry.ts create mode 100644 packages/ui/src/modules/types/userPickerWidget.tsx diff --git a/packages/ui/docs/types.md b/packages/ui/docs/types.md index 163a1a0f..4986d509 100644 --- a/packages/ui/docs/types.md +++ b/packages/ui/docs/types.md @@ -1,148 +1,178 @@ # Unified Type System -The Type System provides a flexible, schema-driven way to define data structures, enums, flags, and relationships within the Polymech platform. It is built on top of Supabase (PostgreSQL) and supports inheritance, validation (JSON Schema), and strict typing. +Schema-driven definitions for structures, enums, flags, and field wrappers. Persisted in PostgreSQL (Supabase), exposed under `/api/types`, and edited in the app via **visual builder** (`TypeBuilder`) or **JSON schema / UI schema** (`TypeRenderer`). Runtime forms use **@rjsf/core** with templates in `src/modules/types/RJSFTemplates.tsx`. -## Database Schema +For a deeper architecture walkthrough (diagrams, sequence sketches), see [`type-system.md`](./type-system.md). -The system consists of the following core tables in the `public` schema. +--- -### Core Tables +## Type kinds (`types.kind`) -#### `types` -The main table storing type definitions. +| Kind | Role | +|------|------| +| `primitive` | Built-in value kinds: `string`, `int`, `float`, `bool`, `array`, `object`, `enum`, `flags`, `reference`, `alias`, … | +| `enum` | Custom enum: values live in `type_enum_values`. | +| `flags` | Custom flags: values live in `type_flag_values`. | +| `structure` | Object shape: members listed in `type_structure_fields`. | +| `field` | **Per-structure field row**: name `{StructureName}.{fieldName}`, `parent_type_id` → the **value** type (primitive, custom enum, flags, nested structure, array target, …). Referenced by `type_structure_fields.field_type_id`. | +| `alias` | Treated as string in generated JSON Schema until fully resolved. | -- `id`: UUID (Primary Key) -- `name`: Text (Unique constraint usually desired but not strictly enforced at DB level yet) -- `kind`: Enum (`primitive`, `enum`, `flags`, `structure`, `alias`) -- `parent_type_id`: UUID (Foreign Key -> `types.id`). Supports inheritance. -- `description`: Text (Optional) -- `json_schema`: JSONB (JSON Schema fragment validation) -- `owner_id`: UUID (Foreign Key -> `auth.users.id`) -- `visibility`: Enum (`public`, `private`, `custom`) -- `meta`: JSONB (Arbitrary metadata) -- `settings`: JSONB (UI/Editor settings) -- `created_at`, `updated_at`: Timestamps +Structures never point `field_type_id` at a bare custom enum id; they point at a **`field` row** whose parent is that enum. That allows per-field `meta`, `settings` (defaults, `items_type_id`, `group`), and descriptions. -#### `type_enum_values` -Values for `enum` types. +--- -- `id`: UUID -- `type_id`: UUID (FK -> `types.id`) -- `value`: Text (The raw value) -- `label`: Text (Display label) -- `order`: Integer (Sort order) +## Database (summary) -#### `type_flag_values` -Bit definitions for `flags` types. +### `types` -- `id`: UUID -- `type_id`: UUID (FK -> `types.id`) -- `name`: Text (Flag name) -- `bit`: Integer (Power of 2 or bit index) +- `id`, `name`, `kind`, `parent_type_id` (inheritance / alias target / **field → value type**) +- `description`, `json_schema` (JSONB), `owner_id`, `visibility` (`public` \| `private` \| `custom`) +- `meta` (JSONB) — e.g. `meta.uiSchema` for RJSF overrides on this type +- `settings` (JSONB) — e.g. `default_value`, `items_type_id`, `group` on **field** kinds +- `created_at`, `updated_at` -#### `type_structure_fields` -Field definitions for `structure` types. +### `type_enum_values` / `type_flag_values` -- `id`: UUID -- `structure_type_id`: UUID (FK -> `types.id`) -- `field_name`: Text -- `field_type_id`: UUID (FK -> `types.id`) -- `required`: Boolean -- `default_value`: JSONB -- `order`: Integer +- Enum: `type_id`, `value`, `label`, `order` +- Flags: `type_id`, `name`, `bit` -#### `type_casts` -Transformation rules between types. +### `type_structure_fields` -- `from_type_id`: UUID -- `to_type_id`: UUID -- `cast_kind`: Enum (`implicit`, `explicit`, `lossy`) -- `description`: Text +- `structure_type_id` → structure `types.id` +- `field_name`, `field_type_id` → **`kind: field`** type id (not the raw enum id) +- `required`, `default_value` (JSONB), `order` -## Access Control (RLS) +`required` is also reflected in generated JSON Schema `required[]`. If you edit the JSON Schema tab and save, the client can sync `structure_fields[].required` from `json_schema.required` when that array is present. -Row Level Security is enabled on all tables. +### `type_casts` -### Policies -- **Read**: - - `public` types are visible to **all users** (authenticated and anonymous). - - `private` and `custom` types are visible only to their **owner** (creator) and **admins**. -- **Write** (Create, Update, Delete): - - **Owners** can modify their own types. - - **Admins** can modify any type. - - Ordinary users cannot modify system types (types with no owner or owned by system). +Transformation metadata between types (`from_type_id`, `to_type_id`, `cast_kind`, …). -## API Endpoints +--- -The type system is exposed via a RESTful API under `/api/types`. +## Server API (`/api/types`) -### List Types -`GET /api/types` +Implemented in `server/src/products/serving/db/db-types.ts`. OpenAPI route definitions and Zod shapes live in that file (`TypeWithRelationsSchema`, `ExtendedTypeInsertSchema`, `ExtendedTypeUpdateSchema`). -**Query Parameters:** -- `kind`: Filter by type kind (e.g., `structure`). -- `parentTypeId`: Filter by parent type. -- `visibility`: Filter by visibility. +List/detail responses **enrich** each row in memory with: -### Get Type Details -`GET /api/types/:id` +- `structure_fields`, `enum_values`, `flag_values` -Returns the full type definition, including: -- Enum values (if enum) -- Flag values (if flags) -- Structure fields (if structure) -- Cast definitions +`type_casts` are loaded into the server cache object but **not** attached per type in JSON responses (only the three relations above). -### Create Type -`POST /api/types` +### `GET /api/types` -Creates a new type. Supports atomic creation of children (enums/flags/fields). +**Query** (all optional, exact match filters): + +- `kind` — e.g. `structure`, `enum`, `field` +- `parentTypeId` — types whose `parent_type_id` equals this id +- `visibility` — `public` \| `private` \| `custom` + +**Response header:** `X-Cache: HIT` \| `MISS` (server aggregate cache). + +Returns a **sorted** array (by `name`). + +### `GET /api/types/:id` + +Returns one enriched type, or **404** `{ "error": "Type not found" }` if the id is missing from the cache map (same backing data as the list endpoint). + +### `POST /api/types` + +Body uses **snake_case** keys matching persistence, e.g.: -**Body Payload:** ```json { - "name": "MyType", + "name": "MyEnum", "kind": "enum", - "description": "A custom enum", + "description": "…", "visibility": "public", - "enumValues": [ - { "value": "A", "label": "Option A" }, - { "value": "B", "label": "Option B" } + "enum_values": [ + { "value": "a", "label": "A", "order": 0 }, + { "value": "b", "label": "B", "order": 1 } ] } ``` -### Update Type -`PATCH /api/types/:id` +Structures can send `structure_fields` in the same request; nested `field` types are usually created first (see app flow). -Updates metadata (name, description, visibility, etc.). -*Note: Child modifications (adding fields/enums) should be handled via separate specific updates or by implementing deep update logic.* +**Auth:** If `Authorization: Bearer ` is present and resolves to a user, **`owner_id`** is set on the new row from that user. -### Delete Type -`DELETE /api/types/:id` +**Response:** **200** with the full enriched type (same shape as GET by id). -Deletes a type and cascades to its children (values, fields). +### `PATCH /api/types/:id` -## Primitive Types +**Core row** (`types` table): the handler updates only **`name`**, **`description`**, **`json_schema`**, **`visibility`**, **`meta`**, **`settings`** — read from the parsed body. Because the server forwards those properties explicitly, keys **missing** from JSON arrive as **`undefined`** in JS; verify your client / PostgREST behavior (unintended **`null`** clears are possible if you PATCH with a sparse body). The app’s `updateType` client usually sends a merged object for `meta` when needed. -The system is seeded with the following primitive types (immutable system types): -- `bool` -- `int` -- `float` -- `string` -- `array` -- `object` -- `enum` -- `flags` -- `reference` -- `alias` +**Not** updated via this path: **`kind`**, **`parent_type_id`**, **`owner_id`** (change those only with direct DB / a different API if added later). -- `alias` +**Child tables** (only when the corresponding key is present and is an array): -## Caching & Consistency +| Key | Behavior | +|-----|----------| +| `structure_fields` | **Replace** all rows for this structure (delete by `structure_type_id`, then insert). | +| `enum_values` | **Replace** all rows for this enum type. | +| `flag_values` | **Replace** all rows for this flags type. | +| `fieldsToDelete` | After the above, **`deleteType`** each id (e.g. orphaned **`field`** types). | -The Type System uses a high-performance in-memory caching layer (`AppCache`) to ensure fast read access. +**Response:** **200** with the full enriched type after `flushTypeCache()` and `appCache.notify('type', id, 'update')`. -- **Read Operations**: Responses for `/api/types` are cached with a 5-minute TTL. -- **Write Operations**: Creating, Updating, or Deleting types immediately **invalidates** the cache. -- **Real-time Updates**: Clients connected to the SSE stream (`/api/stream`) receive `app-update` events (type: `types`), allowing UIs to refresh schemas instantly without manual reloading. +### `DELETE /api/types/:id` + +Deletes the **`types`** row (CASCADE removes `type_structure_fields` links). If the deleted row was a **structure**, the server then **best-effort deletes** the former `field_type_id` entries (no longer referenced). Failures on that second step are logged but do not roll back the main delete. + +**Response:** **200** `{ "success": true }`, plus cache flush / notify. + +--- + +## Caching + +- Server: in-memory cache for the types aggregate (`getTypeState` in `db-types.ts`), TTL **5 minutes**; **create / update / delete** call **`flushTypeCache()`** and **`appCache.notify('type', id, …)`** for downstream listeners. +- Client: `fetchWithDeduplication` / invalidation in `src/modules/types/client-types.ts` (`invalidateCache` on create/update/delete). + +--- + +## Client modules (pm-pics) + +| Area | Location | +|------|----------| +| Fetch / CRUD | `src/modules/types/client-types.ts` | +| Schema + UI generation | `src/modules/types/schema-utils.ts` — `generateSchemaForType`, `generateUiSchemaForType`, `deepMergeUiSchema` | +| Editor shell | `src/modules/types/TypesEditor.tsx` — visual vs detail mode, save handlers | +| Visual builder | `src/modules/types/TypeBuilder.tsx`, `builder/TypeBuilderContent.tsx` | +| JSON / preview | `src/modules/types/TypeRenderer.tsx` | +| RJSF widgets/templates | `src/modules/types/RJSFTemplates.tsx` | + +### Generated JSON Schema & UI schema + +- For `structure` / `enum` / `flags`, the UI builds from **`generateSchemaForType`** / **`generateUiSchemaForType`**, then merges **`meta.uiSchema`** from the type with `deepMergeUiSchema` (structure-level overrides win on conflicts). +- **`meta.uiSchema`** holds RJSF keys: per-property widgets, `ui:group` for sections, nested `items` for arrays, root `ui:classNames`, etc. +- Field-level customization also lives on the **`field`** type: `field.meta.uiSchema` and `field.settings` (group, defaults, `items_type_id`). The visual builder merges structure `meta.uiSchema[fieldName]` with the field type when loading so JSON-tab edits round-trip. + +### Field parent resolution (critical) + +- Palette drops store `refId` = chosen type id. When loading from DB, **`structureFieldToBuilderElement`** sets `type` and **`refId`** from `field.parent_type_id`** so saves resolve the value type, not the `Struct.field` name string. +- **`generateSchemaForType`** treats `kind === 'field'` as a transparent wrapper and resolves through `parent_type_id`. + +### Forms & groups + +- Custom **`ObjectFieldTemplate`** groups properties by `ui:group` (collapsible sections). +- Default widgets: enum → `select`, flags → `checkboxes`, custom widgets registered in `customWidgets`. + +--- + +## Primitive types (seed) + +Typical seeds include: `string`, `int`, `float`, `bool`, `array`, `object`, `enum`, `flags`, `reference`, `alias`. + +Using the **primitive** `enum` / `flags` in a structure yields **empty** enums until you use a **custom** `enum` / `flags` type with values defined — custom types carry `enum_values` / `flag_values` in API responses. + +--- + +## Access control (RLS) + +Row Level Security applies on the underlying tables. Typical intent: + +- **Read**: `public` types visible broadly; `private` / `custom` restricted by owner/admin rules (see policies in Supabase). +- **Write**: owners and admins per product rules. + +Exact policies live with the database migrations; treat this section as behavioral summary, not the source of truth for SQL. diff --git a/packages/ui/src/components/admin/ProductTypeDataForms.tsx b/packages/ui/src/components/admin/ProductTypeDataForms.tsx new file mode 100644 index 00000000..6eba80b3 --- /dev/null +++ b/packages/ui/src/components/admin/ProductTypeDataForms.tsx @@ -0,0 +1,108 @@ +import React, { useMemo } from 'react'; +import Form from '@rjsf/core'; +import validator from '@rjsf/validator-ajv8'; +import { rjsfWidgetRegistry } from '@/modules/types/rjsfWidgetRegistry'; +import { customTemplates } from '@/modules/types/RJSFTemplates'; +import { generateSchemaForType, generateUiSchemaForType, deepMergeUiSchema } from '@/modules/types/schema-utils'; +import type { TypeDefinition } from '@/modules/types/client-types'; +import { Label } from '@/components/ui/label'; +import { T } from '@/i18n'; + +const SingleTypeForm = ({ + typeId, + typeDef, + types, + formData, + onChange, + disabled, +}: { + typeId: string; + typeDef: TypeDefinition; + types: TypeDefinition[]; + formData: Record; + onChange: (fd: Record) => void; + disabled?: boolean; +}) => { + const jsonSchema = useMemo(() => generateSchemaForType(typeId, types), [typeId, types]); + const uiSchema = useMemo(() => { + const gen = generateUiSchemaForType(typeId, types); + return deepMergeUiSchema(gen, typeDef.meta?.uiSchema || {}); + }, [typeId, types, typeDef.meta?.uiSchema]); + + return ( +
+ +
onChange((fd || {}) as Record)} + > + . + +
+ ); +}; + +export interface ProductTypeDataFormsProps { + /** Structure (and other) type ids configured for this product */ + typeIds: string[]; + /** Full type registry from `fetchTypes()` — required so `generateSchemaForType` can resolve fields (enums, primitives, field rows, nested structures). */ + types: TypeDefinition[]; + /** Per-type id → form payload (structure field values) */ + value: Record>; + onChange: (typeId: string, formData: Record) => void; + disabled?: boolean; +} + +/** + * Renders one @rjsf form per assigned type so product settings can hold structured payloads + * (e.g. pricing dimensions) defined in the type system. + */ +export const ProductTypeDataForms: React.FC = ({ + typeIds, + types, + value, + onChange, + disabled, +}) => { + const resolved = useMemo(() => { + return typeIds + .map((id) => ({ id, def: types.find((t) => t.id === id) })) + .filter((x): x is { id: string; def: TypeDefinition } => !!x.def); + }, [typeIds, types]); + + if (resolved.length === 0) { + return ( +

+ Assign structure types in Product Settings to edit type-based fields here. +

+ ); + } + + return ( +
+ {resolved.map(({ id, def }) => ( + onChange(id, fd)} + disabled={disabled} + /> + ))} +
+ ); +}; diff --git a/packages/ui/src/components/admin/ProductsManager.tsx b/packages/ui/src/components/admin/ProductsManager.tsx index 43a8c643..579f3122 100644 --- a/packages/ui/src/components/admin/ProductsManager.tsx +++ b/packages/ui/src/components/admin/ProductsManager.tsx @@ -1,4 +1,5 @@ -import { useState, useEffect, useCallback, useRef } from 'react'; +import { useState, useEffect, useCallback, useRef, useMemo } from 'react'; +import { useQuery } from '@tanstack/react-query'; import { toast } from 'sonner'; import { T, translate } from '@/i18n'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; @@ -9,27 +10,56 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from ' import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; -import { Switch } from '@/components/ui/switch'; +import { Checkbox } from '@/components/ui/checkbox'; import { fetchProducts, createProduct, updateProduct, deleteProduct, Product } from '@/modules/ecommerce/client-products'; +import { fetchTypes } from '@/modules/types/client-types'; import { VariablesEditor } from '@/components/variables/VariablesEditor'; import { GroupPicker } from '@/components/admin/GroupPicker'; +import { ProductTypeDataForms } from '@/components/admin/ProductTypeDataForms'; import { Badge } from '@/components/ui/badge'; +/** Merge list row + optional snake_case / legacy keys so Edit form matches DB after Settings save (avoids race before loadProducts finishes). */ +function normalizeProductSettings(raw: Record | null | undefined): Record { + const s: Record = raw && typeof raw === 'object' ? { ...raw } : {}; + const ids = + s.assignedTypeIds ?? + s.assigned_type_ids; + if (ids !== undefined) { + s.assignedTypeIds = Array.isArray(ids) ? ids : []; + } + return s; +} + const PRODUCT_VARIABLE_SCHEMA = { enabled: { label: translate("Enabled"), description: translate("Is the product enabled?") }, default_cost_units: { label: translate("Default Cost Units"), description: translate("Cost per use") }, default_rate_limit: { label: translate("Default Rate Limit"), description: translate("Requests per window limit") }, - default_rate_window: { label: translate("Default Rate Window Time"), description: translate("Time window in seconds") } + default_rate_window: { label: translate("Default Rate Window Time"), description: translate("Time window in seconds") }, + productTypeData: { + label: translate("Type data (per type id)"), + description: translate("JSON map of type id → payload; edited in Product Edit or here."), + }, }; const ProductsManager = () => { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); - `` const [isCreateOpen, setIsCreateOpen] = useState(false); const [editingProduct, setEditingProduct] = useState(null); const [deletingProduct, setDeletingProduct] = useState(null); const [settingsProduct, setSettingsProduct] = useState(null); + /** Mirrors CategoryManager `meta.assignedTypes` — type ids allowed for this product's edit form */ + const [settingsAssignedTypeIds, setSettingsAssignedTypeIds] = useState([]); + + const { data: allTypes = [] } = useQuery({ + queryKey: ['types', 'all', 'products'], + queryFn: () => fetchTypes(), + staleTime: 1000 * 60 * 2, + }); + const assignableTypes = useMemo( + () => allTypes.filter((t) => t.kind === 'structure' || t.kind === 'alias'), + [allTypes] + ); // Form states const [formData, setFormData] = useState({ @@ -66,23 +96,79 @@ const ProductsManager = () => { setIsCreateOpen(true); }; - const handleEditOpen = (product: Product) => { + const handleEditOpen = async (product: Product) => { + setEditingProduct(product); setFormData({ name: product.name, - slug: product.slug, // Can't typically change slug but we might allow or hide + slug: product.slug, description: product.description || '', - settings: product.settings || {} + settings: normalizeProductSettings(product.settings as Record), + }); + try { + const list = await fetchProducts(); + const fresh = list.find((row) => row.id === product.id) ?? product; + setProducts(list); + setEditingProduct(fresh); + setFormData({ + name: fresh.name, + slug: fresh.slug, + description: fresh.description || '', + settings: normalizeProductSettings(fresh.settings as Record), + }); + } catch (e) { + console.error(e); + } + }; + + const handleProductTypeDataChange = (typeId: string, data: Record) => { + setFormData((prev) => ({ + ...prev, + settings: { + ...(prev.settings || {}), + productTypeData: { + ...((prev.settings?.productTypeData as Record>) || {}), + [typeId]: data, + }, + }, + })); + }; + + const handleFormAssignedTypeToggle = (typeId: string, checked: boolean) => { + setFormData((prev) => { + const current = (prev.settings?.assignedTypeIds as string[] | undefined) || []; + const nextIds = checked ? [...new Set([...current, typeId])] : current.filter((id) => id !== typeId); + const ptd = { ...((prev.settings?.productTypeData as Record>) || {}) }; + if (!checked) delete ptd[typeId]; + return { + ...prev, + settings: { + ...(prev.settings || {}), + assignedTypeIds: nextIds, + productTypeData: ptd, + }, + }; }); - setEditingProduct(product); }; const handleSave = async () => { try { + const base = (editingProduct?.settings || {}) as Record; + const mergedSettings = { ...base, ...formData.settings } as Record; + const assignedIds = (mergedSettings.assignedTypeIds as string[] | undefined) || []; + const ptd = (mergedSettings.productTypeData || {}) as Record>; + const prunedTypeData = Object.fromEntries( + Object.entries(ptd).filter(([k]) => assignedIds.includes(k)) + ); + const settingsPayload = { + ...mergedSettings, + productTypeData: prunedTypeData, + }; + if (editingProduct) { await updateProduct(editingProduct.slug, { name: formData.name, description: formData.description, - settings: formData.settings + settings: settingsPayload }); toast.success(translate('Product updated successfully')); setIsCreateOpen(false); @@ -92,7 +178,7 @@ const ProductsManager = () => { name: formData.name, slug: formData.slug || undefined, description: formData.description, - settings: formData.settings + settings: settingsPayload }); toast.success(translate('Product created successfully')); setIsCreateOpen(false); @@ -124,18 +210,37 @@ const ProductsManager = () => { }; const settingsProductRef = useRef(settingsProduct); + const settingsAssignedTypeIdsRef = useRef(settingsAssignedTypeIds); useEffect(() => { settingsProductRef.current = settingsProduct; }, [settingsProduct]); + useEffect(() => { + settingsAssignedTypeIdsRef.current = settingsAssignedTypeIds; + }, [settingsAssignedTypeIds]); + + useEffect(() => { + if (settingsProduct) { + setSettingsAssignedTypeIds(settingsProduct.settings?.assignedTypeIds || []); + } + }, [settingsProduct]); const handleLoadSettings = useCallback(async () => { - return settingsProductRef.current?.settings || {}; + const s = settingsProductRef.current?.settings || {}; + const { assignedTypeIds: _a, ...rest } = s; + return rest; }, []); const handleSaveSettings = useCallback(async (data: Record) => { if (!settingsProduct) return; - await updateProduct(settingsProduct.slug, { settings: data }); - setSettingsProduct({ ...settingsProduct, settings: data }); + const prev = settingsProduct.settings || {}; + const assignedTypeIds = settingsAssignedTypeIdsRef.current; + const nextSettings = { + ...prev, + ...data, + assignedTypeIds, + }; + await updateProduct(settingsProduct.slug, { settings: nextSettings }); + setSettingsProduct({ ...settingsProduct, settings: nextSettings }); loadProducts(); }, [settingsProduct]); @@ -240,7 +345,7 @@ const ProductsManager = () => { setEditingProduct(null); } }}> - + {editingProduct ? Edit Product : Create Product} @@ -305,6 +410,61 @@ const ProductsManager = () => { Members of these groups will inherently be granted access to this product.

+ +
+ +
+ {assignableTypes.length === 0 && ( +
+ No assignable types found. +
+ )} + {assignableTypes.map((type) => { + const assigned = (formData.settings?.assignedTypeIds as string[] | undefined) || []; + const checked = assigned.includes(type.id); + return ( +
+ + handleFormAssignedTypeToggle(type.id, v === true) + } + /> + +
+ ); + })} +
+

+ Structure and alias types enabled for this product. You can also change them under Product Settings. +

+
+ +
+ +

+ Structured fields from the types selected above (saved with this form). +

+ {(formData.settings?.assignedTypeIds?.length ?? 0) === 0 ? ( +

+ Select one or more types above to edit type-based fields here. +

+ ) : ( + >} + onChange={handleProductTypeDataChange} + /> + )} +
+ {value && !readonly && !disabled && ( + + )} + + setOpen(false)} + currentValue={value as string | undefined} + onSelect={(page) => { + onChange(page?.id ?? undefined); + setOpen(false); + }} + /> + + ); +}; + +export const PostPickerWidget = (props: WidgetProps) => { + const { id, value, disabled, readonly, onChange, onBlur, onFocus } = props; + const [open, setOpen] = useState(false); + const [label, setLabel] = useState(null); + + useEffect(() => { + let cancelled = false; + const v = value as string | undefined; + if (!v) { + setLabel(null); + return; + } + (async () => { + try { + const data = (await fetchPostDetailsAPI(v)) as + | { title?: string; post?: { title?: string } } + | null + | undefined; + const title = data?.title ?? data?.post?.title; + if (!cancelled && title) setLabel(String(title)); + } catch { + if (!cancelled) setLabel(null); + } + })(); + return () => { + cancelled = true; + }; + }, [value]); + + const display = value + ? label + ? `${label} (${String(value).slice(0, 8)}…)` + : String(value) + : ''; + + return ( +
+
+ onBlur(id, value)} + onFocus={() => onFocus(id, value)} + /> + + {value && !readonly && !disabled && ( + + )} +
+ + + + + Select Post + + +
+ { + onChange(postId); + setOpen(false); + }} + /> +
+ + +
+ ); +}; + +export const FilePickerWidget = (props: WidgetProps) => { + const { id, value, disabled, readonly, onChange, onBlur, onFocus } = props; + const [open, setOpen] = useState(false); + const parsed = parseVfsStored(value as string | undefined); + const [browseMount, setBrowseMount] = useState(parsed.mount); + const [browsePath, setBrowsePath] = useState(parsed.path); + const [selectedFilePath, setSelectedFilePath] = useState(null); + + useEffect(() => { + if (open) { + const p = parseVfsStored(value as string | undefined); + setBrowseMount(p.mount); + setBrowsePath(p.path); + setSelectedFilePath(null); + } + }, [open, value]); + + const commitSelection = () => { + let finalPath = browsePath; + if (selectedFilePath && selectedFilePath !== browsePath) { + finalPath = selectedFilePath; + } + const encoded = `${browseMount}:${finalPath}`; + onChange(encoded); + setOpen(false); + setSelectedFilePath(null); + }; + + const display = (value as string) || ''; + + return ( +
+
+ onBlur(id, value)} + onFocus={() => onFocus(id, value)} + /> + + {value && !readonly && !disabled && ( + + )} +
+ + + + + Browse Files + +

+ {browseMount}:{browsePath} +

+ +
+ + Loading… +
+ } + > + { + setBrowseMount(m); + setSelectedFilePath(null); + }} + onPathChange={(p: string) => { + setBrowsePath(p); + setSelectedFilePath(null); + }} + onSelect={(p: string | null) => setSelectedFilePath(p)} + viewMode="list" + mode="simple" + showToolbar={true} + glob="*.*" + sortBy="name" + canChangeMount={true} + allowFileViewer={false} + allowLightbox={false} + allowDownload={false} + jail={false} + minHeight="380px" + showStatusBar={true} + /> + +
+
+ + +
+ + + + ); +}; diff --git a/packages/ui/src/modules/types/builder/TypeBuilderContent.tsx b/packages/ui/src/modules/types/builder/TypeBuilderContent.tsx index 30c071a6..7df7dfb9 100644 --- a/packages/ui/src/modules/types/builder/TypeBuilderContent.tsx +++ b/packages/ui/src/modules/types/builder/TypeBuilderContent.tsx @@ -16,8 +16,9 @@ import { DraggablePaletteItem, CanvasElement, WidgetPicker } from './components' import { TypeCategoryTree } from '../TypeCategoryTree'; import { EnumEditor, FlagsEditor } from './Editors'; import { resolvePrimitiveType } from './utils'; +import { APP_PICKER_PALETTE_ENTRIES, ARRAY_ITEMS_APP_PICKER_ENTRIES, ARRAY_ITEMS_APP_PICKER_WIDGETS } from './appPickerWidgetOptions'; import { TypeDefinition } from '../client-types'; -import { FolderTree } from 'lucide-react'; +import { FolderTree, Link2 } from 'lucide-react'; export const TypeBuilderContent: React.FC<{ mode: BuilderMode; @@ -56,7 +57,139 @@ export const TypeBuilderContent: React.FC<{ id: 'canvas', }); - // We don't pre-map to Palette items here anymore, as TypeCategoryTree handles TypeDefinitions directly. + const stringPrimitive = React.useMemo( + () => availableTypes.find((t) => t.kind === 'primitive' && t.name === 'string'), + [availableTypes] + ); + + const itemsTypeSelectValue = React.useMemo(() => { + if (!selectedElement?.itemsTypeId) return '_none'; + const wid = selectedElement.uiSchema?.items?.['ui:widget']; + if ( + stringPrimitive && + selectedElement.itemsTypeId === stringPrimitive.id && + typeof wid === 'string' && + ARRAY_ITEMS_APP_PICKER_WIDGETS.has(wid) + ) { + return `widget:${wid}`; + } + const t = availableTypes.find((x) => x.id === selectedElement.itemsTypeId); + if (t?.kind === 'structure') return `struct:${selectedElement.itemsTypeId}`; + return `prim:${selectedElement.itemsTypeId}`; + }, [selectedElement?.itemsTypeId, selectedElement?.uiSchema, stringPrimitive, availableTypes]); + + const applyItemsTypeChange = React.useCallback( + (val: string) => { + if (!selectedElement) return; + const stripItemsKey = (ui: Record | undefined) => { + if (!ui?.items) return ui; + const { items: _i, ...rest } = ui; + return Object.keys(rest).length ? rest : undefined; + }; + if (val === '_none') { + updateSelectedElement({ itemsTypeId: undefined, uiSchema: stripItemsKey(selectedElement.uiSchema as Record) as BuilderElement['uiSchema'] }); + return; + } + if (val.startsWith('widget:') && stringPrimitive) { + const w = val.slice('widget:'.length); + updateSelectedElement({ + itemsTypeId: stringPrimitive.id, + uiSchema: { + ...(selectedElement.uiSchema || {}), + items: { 'ui:widget': w, 'ui:label': false }, + }, + }); + return; + } + const id = val.startsWith('prim:') ? val.slice('prim:'.length) : val.startsWith('struct:') ? val.slice('struct:'.length) : val; + updateSelectedElement({ + itemsTypeId: id, + uiSchema: stripItemsKey(selectedElement.uiSchema as Record) as BuilderElement['uiSchema'], + }); + }, + [selectedElement, stringPrimitive, updateSelectedElement] + ); + + const primitivePaletteExtras = React.useMemo(() => { + if ((mode !== 'structure' && mode !== 'alias') || !stringPrimitive) return undefined; + return [ + { + id: 'palette-primitive-categoryPicker', + node: ( + + ), + }, + { + id: 'palette-primitive-userPicker', + node: ( + + ), + }, + { + id: 'palette-primitive-groupPicker', + node: ( + + ), + }, + ]; + }, [mode, stringPrimitive]); + + const paletteExtraFolders = React.useMemo(() => { + if (mode !== 'structure' || !stringPrimitive) return undefined; + return [ + { + folderId: 'group-app-pickers', + label: 'App pickers', + icon: , + items: APP_PICKER_PALETTE_ENTRIES.map((entry) => ({ + id: `palette-app-${entry.widget}`, + node: ( + + ), + })), + }, + ]; + }, [mode, stringPrimitive]); return (
@@ -70,13 +203,15 @@ export const TypeBuilderContent: React.FC<{ { const isPrimitive = t.kind === 'primitive'; const item: BuilderElement = isPrimitive ? { id: `primitive-${t.id}`, type: t.name, name: t.name.charAt(0).toUpperCase() + t.name.slice(1), - title: `New ${t.name.charAt(0).toUpperCase() + t.name.slice(1)}`, + title: `${t.name.charAt(0).toUpperCase() + t.name.slice(1)}`, description: t.description || undefined, refId: t.id } : { @@ -95,6 +230,7 @@ export const TypeBuilderContent: React.FC<{ t.kind === 'primitive')} excludeFieldTypes={true} + primitivePaletteExtras={primitivePaletteExtras} renderItem={(t) => { const item: BuilderElement = { id: `primitive-${t.id}`, @@ -131,11 +267,14 @@ export const TypeBuilderContent: React.FC<{
-
+
{isOver && ( -
+
)} -
+
{mode === 'enum' && ( )} @@ -334,10 +473,8 @@ export const TypeBuilderContent: React.FC<{

- Choose the type for each item in this array. Pick a Structure to render complex sub-forms. + Choose the type for each array element. Structures render nested forms; app pickers store IDs/paths as strings.

diff --git a/packages/ui/src/modules/types/builder/appPickerWidgetOptions.ts b/packages/ui/src/modules/types/builder/appPickerWidgetOptions.ts new file mode 100644 index 00000000..53de689a --- /dev/null +++ b/packages/ui/src/modules/types/builder/appPickerWidgetOptions.ts @@ -0,0 +1,48 @@ +/** + * Static groups for ui:widget entries backed by appPickerWidgets.tsx. + * Add more entries here when new RJSF picker widgets are implemented. + */ + +/** What is persisted in form data for each ui:widget (for authors / codegen). */ +export const APP_PICKER_STORAGE_HINT: Record = { + pagePicker: 'Page UUID', + postPicker: 'Post UUID', + filePicker: 'VFS location as mount:path or mount:dir/file.ext', + categoryPicker: 'Category UUID', + userPicker: 'User id (UUID)', + groupPicker: 'ACL group name (string)', +}; + +export const APP_PICKER_WIDGET_GROUPS = [ + { + label: 'App pickers', + options: [ + { value: 'pagePicker', label: 'Page (ID)', types: ['string'] as const }, + { value: 'postPicker', label: 'Post (ID)', types: ['string'] as const }, + { value: 'filePicker', label: 'VFS file / path', types: ['string'] as const }, + ], + }, +] as const; + +/** Drag palette + default JSON keys when dropping onto a structure */ +export const APP_PICKER_PALETTE_ENTRIES = [ + { widget: 'pagePicker' as const, defaultFieldName: 'pageId', paletteTitle: 'Page (ID)' }, + { widget: 'postPicker' as const, defaultFieldName: 'postId', paletteTitle: 'Post (ID)' }, + { widget: 'filePicker' as const, defaultFieldName: 'filePath', paletteTitle: 'VFS file / path' }, +] as const; + +/** + * Array field "Items Type" — string items plus a per-item ui:widget (same widgets as single-field pickers). + */ +export const ARRAY_ITEMS_APP_PICKER_ENTRIES = [ + { widget: 'categoryPicker' as const, label: 'Category' }, + { widget: 'userPicker' as const, label: 'User' }, + { widget: 'groupPicker' as const, label: 'Group' }, + { widget: 'pagePicker' as const, label: 'Page (ID)' }, + { widget: 'postPicker' as const, label: 'Post (ID)' }, + { widget: 'filePicker' as const, label: 'VFS file / path' }, +] as const; + +export const ARRAY_ITEMS_APP_PICKER_WIDGETS: ReadonlySet = new Set( + ARRAY_ITEMS_APP_PICKER_ENTRIES.map((e) => e.widget) +); diff --git a/packages/ui/src/modules/types/builder/components.tsx b/packages/ui/src/modules/types/builder/components.tsx index d28b3002..953edb38 100644 --- a/packages/ui/src/modules/types/builder/components.tsx +++ b/packages/ui/src/modules/types/builder/components.tsx @@ -28,7 +28,7 @@ export const DraggablePaletteItem = ({ item }: { item: BuilderElement }) => { > - {item.name} + {item.title || item.name}
); }; diff --git a/packages/ui/src/modules/types/builder/typeBuilderCollision.ts b/packages/ui/src/modules/types/builder/typeBuilderCollision.ts new file mode 100644 index 00000000..1203708c --- /dev/null +++ b/packages/ui/src/modules/types/builder/typeBuilderCollision.ts @@ -0,0 +1,49 @@ +import { + closestCenter, + pointerWithin, + rectIntersection, + type CollisionDetection, +} from '@dnd-kit/core'; + +/** Draggable palette item ids (see TypeBuilderContent + TypeCategoryTree) */ +export function isPaletteDragId(id: string | number): boolean { + const s = String(id); + return ( + s.startsWith('primitive-') || + s.startsWith('type-') || + s.startsWith('palette-app-') || + s.startsWith('palette-primitive-') + ); +} + +/** + * Palette → canvas: prefer the canvas droppable whenever the pointer intersects it, + * so sortable field cards do not steal hits from `closestCenter`. + * Field reorder: keep default closest-center behavior. + */ +export const typeBuilderCollisionDetection: CollisionDetection = (args) => { + const activeId = args.active?.id; + if (activeId == null) { + return closestCenter(args); + } + + if (!isPaletteDragId(activeId)) { + return closestCenter(args); + } + + const pointerHits = pointerWithin(args); + const canvasPointer = pointerHits.find((c) => c.id === 'canvas'); + if (canvasPointer) { + return [canvasPointer]; + } + + // Slightly more forgiving when the pointer is near the edge of the scroll area + const rectHits = rectIntersection(args); + const canvasRect = rectHits.find((c) => c.id === 'canvas'); + if (canvasRect) { + return [canvasRect]; + } + + // Do not fall back to closestCenter for palette drags — it targets sortable fields. + return []; +}; diff --git a/packages/ui/src/modules/types/builder/utils.ts b/packages/ui/src/modules/types/builder/utils.ts index 88b85704..0788aa3a 100644 --- a/packages/ui/src/modules/types/builder/utils.ts +++ b/packages/ui/src/modules/types/builder/utils.ts @@ -1,5 +1,6 @@ import { Type as TypeIcon, Hash, ToggleLeft, Box, List, FileJson } from 'lucide-react'; import { TypeDefinition } from '../client-types'; +import { APP_PICKER_WIDGET_GROUPS } from './appPickerWidgetOptions'; export function getIconForType(type: string | undefined) { if (!type) return FileJson; @@ -42,8 +43,12 @@ export const WIDGET_OPTIONS = [ { value: 'TextWidget', label: 'Custom Text (Styled)', types: ['string'] }, { value: 'CheckboxWidget', label: 'Toggle Switch', types: ['bool', 'boolean'] }, { value: 'ImageWidget', label: 'Image Picker', types: ['string'] }, + { value: 'categoryPicker', label: 'Category', types: ['string'] }, + { value: 'userPicker', label: 'User', types: ['string'] }, + { value: 'groupPicker', label: 'Group', types: ['string'] }, ] - } + }, + ...APP_PICKER_WIDGET_GROUPS, ]; export const resolvePrimitiveType = (typeName: string, types: TypeDefinition[]): string => { diff --git a/packages/ui/src/modules/types/categoryPickerWidget.tsx b/packages/ui/src/modules/types/categoryPickerWidget.tsx new file mode 100644 index 00000000..6fe4ac6a --- /dev/null +++ b/packages/ui/src/modules/types/categoryPickerWidget.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import type { WidgetProps } from '@rjsf/utils'; +import { getUiOptions } from '@rjsf/utils'; +import { CategoryPickerField } from '@/components/widgets/CategoryPickerField'; + +type CategoryUiOptions = { + filterType?: string; +}; + +/** + * RJSF widget wrapping CategoryPickerField. Stores selected category id (string). + * Optional `ui:options.filterType` matches CategoryPickerField (e.g. "types", "pages"). + */ +export const CategoryPickerWidget = (props: WidgetProps) => { + const { id, value, disabled, readonly, onChange, onBlur, onFocus, schema, uiSchema } = props; + const uiOptions = getUiOptions(uiSchema) as CategoryUiOptions; + const filterType = uiOptions.filterType ?? (schema as { 'x-category-filter-type'?: string })?.['x-category-filter-type']; + + const v = value == null ? '' : String(value); + + if (readonly || disabled) { + return ( +
onBlur(id, value)} + onFocus={() => onFocus(id, value)} + > + {v || '—'} +
+ ); + } + + return ( +
onBlur(id, value)} onFocus={() => onFocus(id, value)}> + onChange(categoryId || undefined)} filterType={filterType} /> +
+ ); +}; diff --git a/packages/ui/src/modules/types/groupPickerWidget.tsx b/packages/ui/src/modules/types/groupPickerWidget.tsx new file mode 100644 index 00000000..2fefc642 --- /dev/null +++ b/packages/ui/src/modules/types/groupPickerWidget.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import type { WidgetProps } from '@rjsf/utils'; +import { GroupPicker } from '@/components/admin/GroupPicker'; + +/** + * RJSF widget wrapping GroupPicker (single). Stores selected group name (string), matching GroupPicker onSelect. + */ +export const GroupPickerWidget = (props: WidgetProps) => { + const { id, value, disabled, readonly, onChange, onBlur, onFocus } = props; + const v = value == null ? '' : String(value); + + if (readonly) { + return ( +
onBlur(id, value)} + onFocus={() => onFocus(id, value)} + > + {v || '—'} +
+ ); + } + + return ( +
onBlur(id, value)} + onFocus={() => onFocus(id, value)} + > + onChange(groupName || undefined)} + /> +
+ ); +}; diff --git a/packages/ui/src/modules/types/rjsfButtonTemplates.tsx b/packages/ui/src/modules/types/rjsfButtonTemplates.tsx new file mode 100644 index 00000000..b99def92 --- /dev/null +++ b/packages/ui/src/modules/types/rjsfButtonTemplates.tsx @@ -0,0 +1,130 @@ +import React from 'react'; +import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'; +import { Button } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; +import { ChevronDown, ChevronUp, Copy, Plus, Trash2, X } from 'lucide-react'; + +const iconBtn = + 'h-7 w-7 shrink-0 p-0 text-muted-foreground hover:text-foreground hover:bg-muted'; + +/** + * RJSF core ships Bootstrap + glyphicon icon buttons; we don't load those styles, so controls were effectively invisible. + * These replace the array toolbar actions with shadcn + Lucide. + */ +function RjsfToolbarIconButton( + props: IconButtonProps & { + children: React.ReactNode; + destructive?: boolean; + } +) { + const { className, disabled, onClick, title, id, children, destructive, registry: _r, uiSchema: _u, icon: _i, iconType: _it } = props; + const label = typeof title === 'string' ? title : 'Action'; + return ( + + ); +} + +export function RjsfRemoveButton< + T = unknown, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = Record, +>(props: IconButtonProps) { + const { className, ...rest } = props; + return ( + + + + ); +} + +export function RjsfMoveUpButton< + T = unknown, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = Record, +>(props: IconButtonProps) { + const { className, ...rest } = props; + return ( + + + + ); +} + +export function RjsfMoveDownButton< + T = unknown, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = Record, +>(props: IconButtonProps) { + const { className, ...rest } = props; + return ( + + + + ); +} + +export function RjsfCopyButton< + T = unknown, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = Record, +>(props: IconButtonProps) { + const { className, ...rest } = props; + return ( + + + + ); +} + +/** Used for additionalProperties and other add affordances that still use the default AddButton slot. */ +export function RjsfAddIconButton< + T = unknown, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = Record, +>(props: IconButtonProps) { + const { className, ...rest } = props; + return ( + + + + ); +} + +export function RjsfClearButton< + T = unknown, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = Record, +>(props: IconButtonProps) { + const { className, ...rest } = props; + return ( + + + + ); +} + +/** Partial overrides merged with @rjsf/core defaults (see Form registry merge). */ +export const rjsfButtonTemplateOverrides = { + RemoveButton: RjsfRemoveButton, + MoveUpButton: RjsfMoveUpButton, + MoveDownButton: RjsfMoveDownButton, + CopyButton: RjsfCopyButton, + AddButton: RjsfAddIconButton, + ClearButton: RjsfClearButton, +}; diff --git a/packages/ui/src/modules/types/rjsfWidgetRegistry.ts b/packages/ui/src/modules/types/rjsfWidgetRegistry.ts new file mode 100644 index 00000000..87eff730 --- /dev/null +++ b/packages/ui/src/modules/types/rjsfWidgetRegistry.ts @@ -0,0 +1,20 @@ +import type { RegistryWidgetsType } from '@rjsf/utils'; +import { customWidgets } from '@/modules/types/RJSFTemplates'; +import { CategoryPickerWidget } from '@/modules/types/categoryPickerWidget'; +import { UserPickerWidget } from '@/modules/types/userPickerWidget'; +import { GroupPickerWidget } from '@/modules/types/groupPickerWidget'; +import { FilePickerWidget, PagePickerWidget, PostPickerWidget } from '@/modules/types/appPickerWidgets'; + +/** + * Full RJSF widget registry for app forms. Re-merges picker widgets explicitly so fields like `ui:widget: categoryPicker` + * always resolve even if a consumer imported `customWidgets` before `RJSFTemplates` finished initializing (circular import edge cases). + */ +export const rjsfWidgetRegistry: RegistryWidgetsType = { + ...customWidgets, + categoryPicker: CategoryPickerWidget, + userPicker: UserPickerWidget, + groupPicker: GroupPickerWidget, + pagePicker: PagePickerWidget, + postPicker: PostPickerWidget, + filePicker: FilePickerWidget, +}; diff --git a/packages/ui/src/modules/types/schema-utils.ts b/packages/ui/src/modules/types/schema-utils.ts index abca804a..e427dd0c 100644 --- a/packages/ui/src/modules/types/schema-utils.ts +++ b/packages/ui/src/modules/types/schema-utils.ts @@ -167,19 +167,31 @@ export const generateUiSchemaForType = (typeId: string, types: TypeDefinition[], const itemsType = types.find(t => t.id === itemsTypeId); if (itemsType?.kind === 'structure') { const itemsUiSchema = generateUiSchemaForType(itemsTypeId, types, new Set(visited)); + const itemExtras = + fieldUiSchema.items && typeof fieldUiSchema.items === 'object' + ? fieldUiSchema.items + : {}; uiSchema[field.field_name] = { ...fieldUiSchema, items: { ...itemsUiSchema, - 'ui:label': false + 'ui:label': false, + ...itemExtras }, 'ui:options': { orderable: false }, 'ui:classNames': 'col-span-full' }; } else { + const itemExtras = + fieldUiSchema.items && typeof fieldUiSchema.items === 'object' + ? fieldUiSchema.items + : {}; uiSchema[field.field_name] = { ...fieldUiSchema, - items: { 'ui:label': false }, + items: { + 'ui:label': false, + ...itemExtras + }, 'ui:options': { orderable: false }, 'ui:classNames': 'col-span-full' }; diff --git a/packages/ui/src/modules/types/userPickerWidget.tsx b/packages/ui/src/modules/types/userPickerWidget.tsx new file mode 100644 index 00000000..3bd47a3e --- /dev/null +++ b/packages/ui/src/modules/types/userPickerWidget.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import type { WidgetProps } from '@rjsf/utils'; +import { UserPicker } from '@/components/admin/UserPicker'; + +/** + * RJSF widget wrapping UserPicker. Stores selected user id (string). + */ +export const UserPickerWidget = (props: WidgetProps) => { + const { id, value, disabled, readonly, onChange, onBlur, onFocus } = props; + const v = value == null ? '' : String(value); + + if (readonly) { + return ( +
onBlur(id, value)} + onFocus={() => onFocus(id, value)} + > + {v || '—'} +
+ ); + } + + return ( +
onBlur(id, value)} + onFocus={() => onFocus(id, value)} + > + onChange(userId || undefined)} + /> +
+ ); +};