@duskmoon-dev/components 0.4.0 → 0.4.1

package/README.md

@@ -41,7 +41,7 @@ import { Button, DmTable, theme } from "@duskmoon-dev/components";
 
 ## Public Surface
 
-- 78 standard components such as `Button`, `Chat`, `OtpInput`, `Swap`, `Fab`,
+- 79 standard components such as `Button`, `Chat`, `OtpInput`, `Swap`, `Fab`,
   `Megamenu`, `ConsolePage`, `Table`, `Modal`, `Select`, and `Typography`.
 - 21 DuskMoon workflow components such as `DmLayout`, `DmSearch`, `DmTable`,
   `DmProTable`, and `DmToolbar`.
@@ -90,10 +90,14 @@ export function Conversation() {
           <Chat.Bubble>The build passed.</Chat.Bubble>
           <Chat.Status>
             <Chat.StatusItem>Completed</Chat.StatusItem>
-            <Chat.StatusItem><Chat.StatusValue>42</Chat.StatusValue> token/s</Chat.StatusItem>
+            <Chat.StatusItem>
+              <Chat.StatusValue>42</Chat.StatusValue> token/s
+            </Chat.StatusItem>
           </Chat.Status>
           <Chat.Actions hover>
-            <button type="button" onClick={copyReply}>Copy reply</button>
+            <button type="button" onClick={copyReply}>
+              Copy reply
+            </button>
           </Chat.Actions>
         </Chat>
       </Chat.ScrollBody>
@@ -124,3 +128,80 @@ bun run typecheck
 # Check parity manifest coverage
 bun run parity:components
 ```
+
+## JSON Schema forms
+
+`@duskmoon-dev/components/json-schema-form` exports `JsonSchemaForm`,
+`compileForm`, `JsonSchemaWidget`, and the `RenderableSchema`, `CompiledForm`,
+`FormValue`, `JsonValue`, `FormErrors`, `FormValidationResult`,
+`JsonSchemaFormProps`, `JsonSchemaWidgetProps`, and widget contract types.
+Ajv and ajv-formats are installed as package runtime dependencies. The package
+stylesheet includes the renderer layout. Import these APIs from the explicit
+subpath; schema compilation is kept separate from the root component bundle.
+
+```tsx
+import { useState } from "react";
+import "@duskmoon-dev/components/styles.css";
+import {
+  JsonSchemaForm,
+  type FormErrors,
+  type FormValue,
+  type RenderableSchema,
+} from "@duskmoon-dev/components/json-schema-form";
+
+const schema: RenderableSchema = {
+  type: "object",
+  required: ["name"],
+  properties: {
+    name: { type: "string", title: "Name", minLength: 1 },
+    age: { type: "integer", title: "Age", minimum: 0 },
+  },
+};
+
+export function ProfileIsland({ send }: { send: (value: FormValue) => void }) {
+  const [value, setValue] = useState<FormValue>({ name: "Ada" });
+  const [errors, setErrors] = useState<FormErrors>({});
+  return (
+    <JsonSchemaForm
+      schema={schema}
+      value={value}
+      onChange={setValue}
+      errors={errors}
+      onErrorsChange={setErrors}
+      onSubmit={send}
+    />
+  );
+}
+```
+
+Mount the React root inside a LiveView element with a stable `id` and
+`phx-update="ignore"`. Parse the backend's schema JSON and call `compileForm`
+when accepting untrusted input; catch compilation errors before rendering.
+Pass the returned object as `compiled` instead of `schema` to compile once.
+Send the validated object from `onSubmit` through the island's LiveView hook;
+backend validation is still required. Use a new React `key` when replacing a
+schema and starting a fresh form.
+
+`value` and `onChange` control values. Omit `value` for internal state, optionally
+seeded by `defaultValue`. Reset restores `defaultValue` or schema defaults,
+notifies `onChange`, clears validation errors, and calls `onReset`. Backend
+`errors` merge with local errors and use escaped JSON Pointer keys such as
+`/address/email` (the empty key denotes a form error). Clear backend errors in
+`onErrorsChange`, which receives an empty object on edits/reset and validation
+errors on submission. `onSubmit` runs only for valid values and receives a
+copied JSON object with numbers and booleans preserved.
+
+The supported schema is a strict JSON Schema draft 2020-12 subset: object roots,
+nested objects, homogeneous arrays, primitive fields/enums/defaults, required
+fields, `additionalProperties: false`, string constraints/formats, numeric
+constraints, and array/object size constraints. References, combinators,
+nullable types, and arbitrary keywords are rejected. Validation does not coerce,
+remove, or default submitted values.
+
+Use `x-widget` for explicit component selection, `x-options` for typed option
+labels/hierarchies, and `x-widget-options` for orientation, length, count,
+allowHalf, min, max, and step where supported. `widgetNames`, `WidgetName`,
+`WidgetOption`, `WidgetConfig`, and `OrientationWidgetConfig` expose this
+contract; `compileForm` checks widget/type/config compatibility. Upload widgets
+submit JSON file metadata (`name`, `size`, `type`, `lastModified`), with file
+transfer owned by the application.

package/dist/components/dm-pro-table/index.js

@@ -2142,11 +2142,17 @@ var OptGroup = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8
 OptGroup.displayName = "Select.OptGroup";
 var SelectRoot = forwardRef6(({
   allowClear,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   className,
   defaultValue,
   disabled,
   filterOption,
+  id,
   loading,
   mode,
   onChange,
@@ -2269,8 +2275,14 @@ var SelectRoot = forwardRef6(({
     children: [
       /* @__PURE__ */ jsxs7("button", {
         type: "button",
+        id,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
+        "aria-describedby": ariaDescribedBy,
+        "aria-errormessage": ariaErrorMessage,
+        "aria-invalid": ariaInvalid,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),

package/dist/components/dm-query/index.js

@@ -1640,11 +1640,17 @@ var OptGroup = forwardRef4(({ children, ...props }, ref) => /* @__PURE__ */ jsx5
 OptGroup.displayName = "Select.OptGroup";
 var SelectRoot = forwardRef4(({
   allowClear,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   className,
   defaultValue,
   disabled,
   filterOption,
+  id,
   loading,
   mode,
   onChange,
@@ -1767,8 +1773,14 @@ var SelectRoot = forwardRef4(({
     children: [
       /* @__PURE__ */ jsxs5("button", {
         type: "button",
+        id,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
+        "aria-describedby": ariaDescribedBy,
+        "aria-errormessage": ariaErrorMessage,
+        "aria-invalid": ariaInvalid,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),

package/dist/components/dm-search/index.js

@@ -1632,11 +1632,17 @@ var OptGroup = forwardRef4(({ children, ...props }, ref) => /* @__PURE__ */ jsx5
 OptGroup.displayName = "Select.OptGroup";
 var SelectRoot = forwardRef4(({
   allowClear,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   className,
   defaultValue,
   disabled,
   filterOption,
+  id,
   loading,
   mode,
   onChange,
@@ -1759,8 +1765,14 @@ var SelectRoot = forwardRef4(({
     children: [
       /* @__PURE__ */ jsxs5("button", {
         type: "button",
+        id,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
+        "aria-describedby": ariaDescribedBy,
+        "aria-errormessage": ariaErrorMessage,
+        "aria-invalid": ariaInvalid,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),

package/dist/components/dm-table/index.js

@@ -2132,11 +2132,17 @@ var OptGroup = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8
 OptGroup.displayName = "Select.OptGroup";
 var SelectRoot = forwardRef6(({
   allowClear,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   className,
   defaultValue,
   disabled,
   filterOption,
+  id,
   loading,
   mode,
   onChange,
@@ -2259,8 +2265,14 @@ var SelectRoot = forwardRef6(({
     children: [
       /* @__PURE__ */ jsxs7("button", {
         type: "button",
+        id,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
+        "aria-describedby": ariaDescribedBy,
+        "aria-errormessage": ariaErrorMessage,
+        "aria-invalid": ariaInvalid,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),

package/dist/components/json-schema-form/JsonSchemaForm.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { CompiledForm, FormErrors, RenderableSchema, FormValue } from "./json-schema-form";
+export type JsonSchemaFormProps = {
+    value?: FormValue;
+    defaultValue?: FormValue;
+    onChange?: (value: FormValue) => void;
+    /** Backend errors keyed by JSON Pointer; clear these in onErrorsChange. */
+    errors?: FormErrors;
+    onErrorsChange?: (errors: FormErrors) => void;
+    onSubmit: (value: FormValue) => void;
+    onReset?: () => void;
+} & ({
+    compiled: CompiledForm;
+    schema?: never;
+} | {
+    schema: RenderableSchema;
+    compiled?: never;
+});
+export declare function JsonSchemaForm({ compiled: suppliedCompiled, schema, value: controlledValue, defaultValue, onChange, errors: suppliedErrors, onErrorsChange, onSubmit, onReset, }: JsonSchemaFormProps): React.JSX.Element;

package/dist/components/json-schema-form/JsonSchemaWidget.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { JsonValue, RenderableSchema } from "./json-schema-form";
+export type JsonSchemaWidgetProps = {
+    schema: RenderableSchema;
+    value: JsonValue | undefined;
+    onChange: (value: JsonValue | undefined) => void;
+    id: string;
+    label: string;
+    path: string;
+    describedBy?: string;
+    invalid: boolean;
+};
+export declare const specializedWidgets: Set<string>;
+export declare function JsonSchemaWidget({ schema, value, onChange, id, label, path, describedBy, invalid, }: JsonSchemaWidgetProps): React.JSX.Element;

package/dist/components/json-schema-form/index.d.ts

@@ -0,0 +1,8 @@
+export { JsonSchemaForm } from "./JsonSchemaForm";
+export type { JsonSchemaFormProps } from "./JsonSchemaForm";
+export { JsonSchemaWidget, specializedWidgets } from "./JsonSchemaWidget";
+export type { JsonSchemaWidgetProps } from "./JsonSchemaWidget";
+export { compileForm } from "./json-schema-form";
+export type { CompiledForm, FormErrors, FormValidationResult, FormValue, JsonValue, RenderableSchema, } from "./json-schema-form";
+export { flattenOptions, inspectWidgets, naturalWidgetValue, optionsFor, widgetConfig, widgetNames, widgetValueError, } from "./json-form-widgets";
+export type { OrientationWidgetConfig, WidgetConfig, WidgetName, WidgetOption, } from "./json-form-widgets";