feat: ui schema title + desc., better date formats

Author: JulianCataldo

packages/form/src/json-schema-form.ts

@@ -1,4 +1,3 @@
-import { fieldArrayPrimitive } from './triage/array-primitive';
 /* eslint-disable max-lines */
 /* eslint-disable class-methods-use-this */
 /* eslint-disable no-underscore-dangle */
@@ -9,6 +8,7 @@ import {
 	unsafeCSS,
 	type TemplateResult,
 	type CSSResult,
+	nothing,
 } from 'lit';
 
 import { property, state } from 'lit/decorators.js';
@@ -17,12 +17,11 @@ import { createRef, ref } from 'lit/directives/ref.js';
 // import deepmerge from 'deepmerge';
 import set from 'lodash-es/set';
 
-import type { JSONSchema7 } from '@jsfe/types';
-
 // import { alternateField } from './triage/alternate.js';
 import { fieldArray } from './triage/array.js';
 import { fieldObject } from './triage/object.js';
 import { fieldPrimitive } from './triage/primitive.js';
+import { fieldArrayPrimitive } from './triage/array-primitive.js';
 
 import type {
 	DataChangeCallback,
@@ -31,6 +30,7 @@ import type {
 	Path,
 	UiSchema,
 	Widgets,
+	JSONSchema7,
 } from '@jsfe/types';
 
 export class Jsf extends LitElement {
@@ -50,9 +50,11 @@ export class Jsf extends LitElement {
 
 	@property({ type: Object }) public experimental?: FeatureFlags = {};
 
+	@property({ type: Boolean }) public submitButton = true;
+
 	@state() private _uiState: unknown = {};
 
-	protected _dig = (
+	protected _dig(
 		node: JSONSchema7,
 		dataLevel: unknown,
 		path: Path,
@@ -61,7 +63,7 @@ export class Jsf extends LitElement {
 		schemaPath: Path,
 		required = false,
 		level = 0,
-	): TemplateResult<1> => {
+	): TemplateResult<1> {
 		let result: TemplateResult<1> | undefined;
 		const currentNode: JSONSchema7 = node;
 
@@ -291,13 +293,14 @@ export class Jsf extends LitElement {
 		// 	)}`;
 		// }
 
-		if (Object.entries(node).length === 0) {
-			const error = `Empty schema`;
-			return (
-				this.widgets?.callout?.({ id: '', message: error }) ??
-				html`<p>${error}</p>`
-			);
-		}
+		// TODO: check for blank schema
+		// if (Object.entries({ ...node, title: undefined }).length === 0) {
+		// 	const error = `Empty schema`;
+		// 	return (
+		// 		this.widgets?.callout?.({ id: '', message: error }) ??
+		// 		html`<p>${error}</p>`
+		// 	);
+		// }
 
 		if (result) return result;
 
@@ -308,7 +311,7 @@ export class Jsf extends LitElement {
 			this.widgets?.callout?.({ id: '', message: error }) ??
 			html`<p>${error}</p>`
 		);
-	};
+	}
 
 	protected _setToValue(object: unknown, value: unknown, path: Path) {
 		// NOTE: Dirty method:
@@ -436,10 +439,9 @@ export class Jsf extends LitElement {
 					[],
 					false,
 				)}
-				<!--  -->
 
-				<!-- $ {JSON.stringify(this.widgets)} -->
-				${this.#submit()}
+				<!--  -->
+				${this.submitButton ? this.#submit() : nothing}
 			</form>
 		`;
 	}

packages/form/src/triage/array.ts

@@ -60,7 +60,7 @@ export const fieldArray = (
 				dataLevel[index],
 				[...path, index],
 				uiState,
-				uiSchema,
+				uiSchema?.[index],
 				schemaPathAugmented,
 				required,
 				level + 1,
@@ -162,8 +162,9 @@ export const fieldArray = (
 	) {
 		itemLabel = schema.items.title;
 	}
+	const arrayLabel = schema.title ?? uiSchema?.['ui:title'];
 	const options = {
-		label: schema.title,
+		label: arrayLabel,
 
 		items,
 

packages/form/src/triage/object.ts

@@ -56,6 +56,7 @@ export const fieldObject = (
 	} else if (typeof key !== 'number') {
 		label = key;
 	}
+	if (typeof uiSchema?.['ui:title'] === 'string') label = uiSchema['ui:title'];
 
 	const options = {
 		id: path.join('.'),

packages/form/src/triage/primitive.ts

@@ -35,10 +35,16 @@ export const fieldPrimitive = (
 	else if (Number.isNaN(Number(path.at(-1)))) {
 		label = String(path.at(-1));
 	}
+	if (uiOptions?.['ui:title']) {
+		label = uiOptions?.['ui:title'];
+	}
 
 	const helpText =
-		schema.description ?? (uiOptions?.['ui:help'] as string) ?? '';
-	const placeholder = (uiOptions?.['ui:placeholder'] as string) ?? '';
+		uiOptions?.['ui:help'] ??
+		uiOptions?.['ui:description'] ??
+		schema.description ??
+		'';
+	const placeholder = uiOptions?.['ui:placeholder'] ?? '';
 
 	let baseValue: unknown;
 
@@ -120,13 +126,30 @@ export const fieldPrimitive = (
 		schema.format === 'time'
 	) {
 		let type = schema.format;
+		let date = baseValue;
+
+		if (date) {
+			if (schema.format === 'date') {
+				// 		date = new Date(date).toISOString().split('T')[0];
+			}
+			if (schema.format === 'time') {
+				// 		// date = date.toISOString().split('T')[1].split('.')[0];
+				// 		// console.log({ date });
+			}
+			if (schema.format === 'date-time') {
+				if (date instanceof Date === false) {
+					date = new Date(date);
+				}
+				if (date instanceof Date) date = date.toISOString().split('.')[0];
+			}
+		}
 
 		if (schema.format === 'date-time') {
 			type = 'datetime-local';
 		}
 		const options = {
 			...baseOptions,
-			value: baseValue ? new Date(String(baseValue)) : undefined,
+			value: date,
 			type,
 		};
 
@@ -139,6 +162,10 @@ export const fieldPrimitive = (
 			inputType = schema.format;
 		}
 
+		if (uiOptions?.['ui:widget'] === 'password') {
+			inputType = 'password';
+		}
+
 		if (uiOptions?.['ui:options']?.inputType === 'tel') {
 			inputType = 'tel';
 		}
@@ -158,7 +185,9 @@ export const fieldPrimitive = (
 		}
 		if (typeof uiOptions?.['ui:widget'] === 'string') {
 			const customWidgetName = uiOptions?.['ui:widget'];
-			return widgets?.[customWidgetName]?.(options) || missing('custom');
+			if (customWidgetName !== 'password') {
+				return widgets?.[customWidgetName]?.(options) || missing('custom');
+			}
 		}
 
 		return widgets?.text?.(options) || missing('text');

packages/shoelace/src/widgets/date.ts

@@ -11,16 +11,21 @@ export const date: Widgets['date'] = (options) => html`
 		type=${options.type}
 		.label=${options.label ?? ''}
 		.helpText=${options.helpText ?? ''}
-		value=${options.value ? String(options.value) : ''}
+		value=${options.value ? options.value : ''}
 		.name=${options.id}
 		.id=${options.id}
 		.required=${options.required ?? false}
 		@sl-input=${(event: CustomEvent) => {
-			const { valueAsDate: newValue, value } = event.target as SlInput;
+			let { value } = event.target as SlInput;
+
+			if (options.type === 'datetime-local') {
+				value = new Date(value);
+			}
 
 			options.valueChangedCallback?.(
 				// NOTE: Date time does not return `valueAsDate`
-				newValue ?? value ? new Date(value) : undefined,
+				// TODO: valueChangedCallback should coerce to Date later (when possible)
+				value,
 			);
 		}}
 	>

packages/types/src/ui-schema.ts

@@ -2,6 +2,9 @@ export type UiOptions = {
 	'ui:help'?: string;
 	'ui:placeholder'?: string;
 
+	'ui:title'?: string;
+	'ui:description'?: string;
+
 	'ui:widget'?:
 		| 'radio'
 		| 'button'

packages/types/src/widgets.ts

@@ -57,7 +57,7 @@ export interface Widgets {
 		{
 			type: 'date' | 'datetime-local' | 'time';
 		},
-		Date | undefined
+		Date | string | undefined
 	>;
 
 	rating?: Widget<