@lostgradient/cinder 0.3.0 → 0.4.0

package/src/components/schema-form/schema-form-validation.ts

@@ -1,7 +1,6 @@
-import type { StandardSchemaV1 } from '@standard-schema/spec';
 import type { ErrorObject, ValidateFunction } from 'ajv';
 
-import { isRecord, isStandardSchema, pathKey, type JsonSchemaObject } from './schema-form-model.ts';
+import { isRecord, pathKey, type JsonSchemaObject } from './schema-form-model.ts';
 
 export type SchemaFormValidationIssue = {
   path: string[];
@@ -15,48 +14,90 @@ export type SchemaFormValidationResult =
 const validatorCache = new WeakMap<JsonSchemaObject, Promise<ValidateFunction>>();
 
 export async function validateSchemaValue(
-  schema: JsonSchemaObject | StandardSchemaV1,
+  schema: JsonSchemaObject,
   value: unknown,
 ): Promise<SchemaFormValidationResult> {
-  if (isStandardSchema(schema)) return validateStandardSchemaValue(schema, value);
+  if (!isRecord(schema)) {
+    return validationFailure(value, 'SchemaForm only accepts JSON Schema objects.');
+  }
+
+  if (isLegacyStandardSchema(schema)) {
+    return validationFailure(value, 'SchemaForm only accepts JSON Schema objects.');
+  }
+
   return validateJsonSchemaValue(schema, value);
 }
 
-async function validateStandardSchemaValue(
-  schema: StandardSchemaV1,
+async function validateJsonSchemaValue(
+  schema: JsonSchemaObject,
   value: unknown,
 ): Promise<SchemaFormValidationResult> {
-  const result = await schema['~standard'].validate(value);
-  if (!result.issues) return { valid: true, value: result.value, issues: [] };
+  let validate: ValidateFunction;
+  try {
+    validate = await validatorForSchema(schema);
+  } catch (error) {
+    return validationFailure(value, readableSchemaError(error));
+  }
+
+  let valid: unknown;
+  try {
+    const result = validate(value) as unknown;
+    valid = isPromiseLike(result) ? (await result, true) : result;
+  } catch (error) {
+    if (isAjvValidationError(error)) {
+      return {
+        valid: false,
+        value,
+        issues: ajvIssues(error.errors),
+      };
+    }
+
+    return validationFailure(value, readableSchemaError(error));
+  }
+
+  if (valid) return { valid: true, value, issues: [] };
   return {
     valid: false,
     value,
-    issues: result.issues.map((issue) => ({
-      path: standardIssuePath(issue.path),
-      message: issue.message,
-    })),
+    issues: ajvIssues(validate.errors ?? []),
   };
 }
 
-async function validateJsonSchemaValue(
-  schema: JsonSchemaObject,
-  value: unknown,
-): Promise<SchemaFormValidationResult> {
-  const validate = await validatorForSchema(schema);
-  const valid = validate(value);
-  if (valid) return { valid: true, value, issues: [] };
+function validationFailure(value: unknown, message: string): SchemaFormValidationResult {
   return {
     valid: false,
     value,
-    issues: ajvIssues(validate.errors ?? []),
+    issues: [{ path: [], message }],
   };
 }
 
+function isLegacyStandardSchema(schema: JsonSchemaObject): boolean {
+  const standard = schema['~standard'];
+  return isRecord(standard) && standard['version'] === 1;
+}
+
+function readableSchemaError(error: unknown): string {
+  const message = error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+  if (message.startsWith('Invalid JSON Schema')) return message;
+  return message === '' ? 'Invalid JSON Schema.' : `Invalid JSON Schema: ${message}`;
+}
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return isRecord(value) && typeof value['then'] === 'function';
+}
+
+function isAjvValidationError(error: unknown): error is { errors: ErrorObject[] } {
+  return isRecord(error) && Array.isArray(error['errors']);
+}
+
 function validatorForSchema(schema: JsonSchemaObject): Promise<ValidateFunction> {
   const cached = validatorCache.get(schema);
   if (cached) return cached;
 
-  const promise = createValidator(schema);
+  const promise = createValidator(schema).catch((error: unknown) => {
+    validatorCache.delete(schema);
+    throw error;
+  });
   validatorCache.set(schema, promise);
   return promise;
 }
@@ -83,36 +124,32 @@ function jsonSchemaDraft(schema: JsonSchemaObject): '2020-12' | '2019-09' | 'dra
   return '2020-12';
 }
 
-function standardIssuePath(
-  path: ReadonlyArray<PropertyKey | StandardSchemaV1.PathSegment> | undefined,
-): string[] {
-  if (!path) return [];
-  return path.map((segment) => {
-    if (isRecord(segment) && 'key' in segment) return propertyKeyPathSegment(segment.key);
-    return propertyKeyPathSegment(segment);
-  });
+function ajvIssues(errors: readonly ErrorObject[]): SchemaFormValidationIssue[] {
+  return errors.map((error) => ({
+    path: ajvErrorPath(error),
+    message: readableAjvMessage(error),
+  }));
 }
 
-function propertyKeyPathSegment(value: unknown): string {
-  if (typeof value === 'string') return value;
-  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
-    return String(value);
-  }
-  if (typeof value === 'symbol') return value.description ?? value.toString();
-  if (value === null || value === undefined) return '';
+function readableAjvMessage(error: ErrorObject): string {
+  const fieldName = ajvErrorPath(error).at(-1) ?? 'Value';
+  const label = humanizeFieldName(fieldName);
 
-  try {
-    return JSON.stringify(value) ?? '';
-  } catch {
-    return '';
-  }
+  if (error.keyword === 'required') return `${label} is required.`;
+  if (error.keyword === 'minLength') return `${label} is too short.`;
+  if (error.keyword === 'maxLength') return `${label} is too long.`;
+  if (error.keyword === 'minimum') return `${label} must be at least ${error.params?.['limit']}.`;
+  if (error.keyword === 'maximum') return `${label} must be at most ${error.params?.['limit']}.`;
+  if (error.keyword === 'type') return `${label} must be ${error.params?.['type']}.`;
+
+  return error.message ?? 'Invalid value';
 }
 
-function ajvIssues(errors: readonly ErrorObject[]): SchemaFormValidationIssue[] {
-  return errors.map((error) => ({
-    path: ajvErrorPath(error),
-    message: error.message ?? 'Invalid value',
-  }));
+function humanizeFieldName(name: string): string {
+  return name
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/^./, (character) => character.toUpperCase());
 }
 
 function ajvErrorPath(error: ErrorObject): string[] {

package/src/components/schema-form/schema-form.css

@@ -21,28 +21,23 @@
     border-radius: var(--cinder-radius-md);
   }
 
-  .cinder-schema-form__legend,
-  .cinder-schema-form__label,
-  .cinder-schema-form__switch-label {
+  .cinder-schema-form__legend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    padding-inline: var(--cinder-space-1);
     color: var(--cinder-text);
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-medium);
   }
 
-  .cinder-schema-form__legend {
-    padding-inline: var(--cinder-space-1);
-  }
-
   .cinder-schema-form__field {
     display: grid;
     gap: var(--cinder-space-2);
   }
 
-  .cinder-schema-form__required {
-    margin-inline-start: var(--cinder-space-1);
-    color: var(--cinder-danger);
-  }
-
+  /* Group-level (object/array fieldset) description and error. Leaf-field
+     supporting text is owned by the composed cinder controls themselves. */
   .cinder-schema-form__description {
     margin: 0;
     color: var(--cinder-text-muted);
@@ -55,10 +50,8 @@
     font-size: var(--cinder-text-sm);
   }
 
-  .cinder-schema-form__control {
-    inline-size: 100%;
-  }
-
+  /* JSON drafts edit raw text — give the composed Textarea a monospace,
+     vertically-resizable surface via its forwarded class. */
   .cinder-schema-form__json-control {
     min-block-size: 8rem;
     font-family: var(--cinder-font-mono);
@@ -73,61 +66,6 @@
     border-radius: var(--cinder-radius-md);
   }
 
-  .cinder-schema-form__switch {
-    display: inline-grid;
-    grid-template-columns: 2.25rem minmax(0, 1fr);
-    align-items: center;
-    gap: var(--cinder-space-2);
-    justify-self: start;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-
-  .cinder-schema-form__switch-thumb {
-    position: relative;
-    inline-size: 2.25rem;
-    block-size: 1.25rem;
-    border: 1px solid var(--cinder-border-muted);
-    border-radius: 999px;
-    background: var(--cinder-surface-inset);
-    transition:
-      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
-      border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  .cinder-schema-form__switch-thumb::after {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 0.125rem;
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-    border-radius: 999px;
-    background: var(--cinder-surface);
-    box-shadow: var(--cinder-shadow-sm);
-    content: '';
-    transform: translateY(-50%);
-    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  .cinder-schema-form__switch[data-cinder-checked='true'] .cinder-schema-form__switch-thumb {
-    border-color: var(--cinder-accent);
-    background: var(--cinder-accent);
-  }
-
-  .cinder-schema-form__switch[data-cinder-checked='true'] .cinder-schema-form__switch-thumb::after {
-    transform: translate(1rem, -50%);
-  }
-
-  .cinder-schema-form__control[aria-invalid='true'],
-  .cinder-schema-form__switch[data-cinder-invalid='true'] .cinder-schema-form__switch-thumb {
-    border-color: var(--cinder-danger);
-  }
-
-  .cinder-schema-form__switch:focus-visible .cinder-schema-form__switch-thumb,
   .cinder-schema-form__secondary-button:focus-visible,
   .cinder-schema-form__submit:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
@@ -165,16 +103,16 @@
   }
 
   @media (forced-colors: active) {
-    .cinder-schema-form__switch-thumb,
     .cinder-schema-form__secondary-button,
     .cinder-schema-form__submit {
       border-color: CanvasText;
     }
 
-    .cinder-schema-form__switch:focus-visible .cinder-schema-form__switch-thumb,
     .cinder-schema-form__secondary-button:focus-visible,
     .cinder-schema-form__submit:focus-visible {
-      outline-color: Highlight;
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 3px;
+      box-shadow: none;
     }
   }
 }

package/src/components/schema-form/schema-form.examples.json

@@ -8,12 +8,6 @@
       "title": "JSON Schema",
       "description": "Render and submit a payload from a JSON Schema object.",
       "code": "<script lang=\"ts\">\n  import { SchemaForm } from '@lostgradient/cinder/schema-form';\n\n  const schema = {\n    type: 'object',\n    title: 'Schedule',\n    properties: {\n      name: { type: 'string', title: 'Name', minLength: 1 },\n      retries: { type: 'integer', title: 'Retries', minimum: 0 },\n      enabled: { type: 'boolean', title: 'Enabled' },\n      cadence: { type: 'string', title: 'Cadence', enum: ['hourly', 'daily', 'weekly'] },\n    },\n    required: ['name', 'retries', 'enabled', 'cadence'],\n  };\n\n  let submitted = $state('No payload submitted yet.');\n\n  function handleSubmit(value: unknown) {\n    submitted = JSON.stringify(value, null, 2);\n  }\n</script>\n\n<div style=\"display: grid; gap: 1rem;\">\n  <SchemaForm\n    {schema}\n    name=\"payload\"\n    value={{ name: 'Refresh indexes', retries: 2, enabled: true, cadence: 'daily' }}\n    submitLabel=\"Save schedule\"\n    onsubmit={handleSubmit}\n  />\n\n  <pre>{submitted}</pre>\n</div>\n"
-    },
-    {
-      "id": "standard-schema",
-      "title": "Standard Schema",
-      "description": "Render from a Standard Schema object and submit its validated output.",
-      "code": "<script lang=\"ts\">\n  import { SchemaForm } from '@lostgradient/cinder/schema-form';\n\n  type Payload = {\n    title: string;\n    attempts: number;\n    urgent: boolean;\n  };\n\n  const jsonSchema = {\n    type: 'object',\n    title: 'Dispatch job',\n    properties: {\n      title: { type: 'string', title: 'Title', minLength: 1 },\n      attempts: { type: 'integer', title: 'Attempts', minimum: 1 },\n      urgent: { type: 'boolean', title: 'Urgent' },\n    },\n    required: ['title', 'attempts', 'urgent'],\n  };\n\n  function isPayload(value: Partial<Payload>): value is Payload {\n    return (\n      typeof value.title === 'string' &&\n      value.title.length > 0 &&\n      typeof value.attempts === 'number' &&\n      Number.isInteger(value.attempts) &&\n      value.attempts >= 1 &&\n      typeof value.urgent === 'boolean'\n    );\n  }\n\n  const standardSchema = {\n    '~standard': {\n      version: 1,\n      vendor: 'example',\n      jsonSchema: {\n        input: () => jsonSchema,\n        output: () => jsonSchema,\n      },\n      validate(value: unknown) {\n        const candidate = value as Partial<Payload>;\n        const issues = [];\n        if (typeof candidate.title !== 'string' || candidate.title.length === 0) {\n          issues.push({ path: ['title'], message: 'Title is required.' });\n        }\n        if (\n          typeof candidate.attempts !== 'number' ||\n          !Number.isInteger(candidate.attempts) ||\n          candidate.attempts < 1\n        ) {\n          issues.push({ path: ['attempts'], message: 'Attempts must be a positive integer.' });\n        }\n        if (typeof candidate.urgent !== 'boolean') {\n          issues.push({ path: ['urgent'], message: 'Urgent must be true or false.' });\n        }\n        return isPayload(candidate) ? { value: candidate } : { issues };\n      },\n    },\n  } as const;\n\n  let submitted = $state('No payload submitted yet.');\n\n  function handleSubmit(value: unknown) {\n    submitted = JSON.stringify(value, null, 2);\n  }\n</script>\n\n<div style=\"display: grid; gap: 1rem;\">\n  <SchemaForm\n    schema={standardSchema}\n    value={{ title: 'Rebuild search index', attempts: 2, urgent: false }}\n    submitLabel=\"Dispatch\"\n    onsubmit={handleSubmit}\n  />\n\n  <pre>{submitted}</pre>\n</div>\n"
     }
   ]
 }