@_linked/shape-ui 2.0.0 → 2.2.0

package/src/components/DynamicFormField.module.css

@@ -0,0 +1,169 @@
+/* ============================================================================
+   DynamicFormField.module.css
+   
+   Dynamic form field component for various input types.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Form Row === */
+.form {
+  display: flex;
+  min-height: 3.75rem;
+  align-items: center;
+  border-top: 1px solid var(--table-row-border);
+  justify-content: flex-start;
+  padding: var(--space-sm) 0;
+}
+
+.form:first-child {
+  border-top: none;
+}
+
+/* === Label Column === */
+.label {
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  height: 100%;
+  justify-content: center;
+}
+
+.label label {
+  font-weight: 400;
+  color: var(--text-auxiliary);
+  font-size: var(--typography-font-size);
+}
+
+.label p {
+  color: var(--table-cell-text);
+  color: var(--text-auxiliary);
+  font-size: var(--typography-small-size);
+  margin-top: 0.25rem;
+}
+
+.label sup {
+  color: var(--intent-danger-icon);
+  margin-left: var(--space-2xs);
+}
+
+/* === Value Column === */
+.value {
+  display: flex;
+  gap: var(--space-sm-plus);
+  width: 70%;
+  height: 100%;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* === Text Form Field === */
+.textFormField {
+  box-shadow: none;
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  margin: var(--space-sm) 0;
+  padding: var(--space-sm-plus) var(--field-padding-x);
+  background-color: var(--field-bg);
+  color: var(--field-text);
+  font-size: var(--typography-small-size);
+  width: 100%;
+  transition: all var(--transition-fast);
+}
+
+.textFormField:focus {
+  outline: none;
+  border-color: var(--field-border-focus);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--dynamic-form-field-tertiary-500, var(--color-tertiary-500)) 15%, transparent);
+}
+
+.textFormField::placeholder {
+  color: var(--field-text-placeholder);
+}
+
+/* === Select Field (sh:in dropdown) === */
+.selectField {
+  box-shadow: none;
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  margin: var(--space-sm) 0;
+  padding: var(--space-sm-plus) var(--field-padding-x);
+  background-color: var(--field-bg);
+  color: var(--field-text);
+  font-size: var(--typography-small-size);
+  width: 100%;
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+
+.selectField:focus {
+  outline: none;
+  border-color: var(--field-border-focus);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--dynamic-form-field-tertiary-500, var(--color-tertiary-500)) 15%, transparent);
+}
+
+/* === Field Error === */
+.fieldError {
+  display: block;
+  width: 100%;
+  color: var(--intent-danger-text);
+  font-size: var(--typography-small-size);
+  margin-top: -0.25rem;
+  padding-bottom: var(--space-2xs);
+}
+
+/* === Date Form Field === */
+.dateFormField {
+  background-color: var(--field-bg);
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  padding: var(--space-sm-plus) var(--field-padding-x);
+  color: var(--field-text);
+  font-size: var(--typography-small-size);
+  width: 100%;
+}
+
+.dateFormField:focus {
+  outline: none;
+  border-color: var(--field-border-focus);
+}
+
+/* === Info Icon (tooltip trigger) === */
+.infoIcon {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--space-2xs);
+  color: var(--text-auxiliary);
+  cursor: help;
+  vertical-align: middle;
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 1;
+}
+
+.infoIcon:hover,
+.infoIcon:focus-visible {
+  color: var(--dynamic-form-field-tertiary-500, var(--color-tertiary-500));
+  outline: none;
+}
+
+/* === Narrowing Hint (shown when parent field can narrow this field's options) === */
+.narrowingHint {
+  display: block;
+  width: 100%;
+  color: var(--text-auxiliary);
+  font-size: var(--typography-small-size);
+  font-style: italic;
+  margin-bottom: var(--space-2xs);
+}
+
+/* === Tooltip Content (ensure it appears above form fields) === */
+.tooltipContent {
+  z-index: var(--layer-tooltip);
+}
+
+/* All tokens used above (--text-secondary, --text-auxiliary, --input-*,
+   --intent-danger-*) are semantic and auto-switch in dark mode. */
+

package/src/components/DynamicFormField.tsx

@@ -0,0 +1,357 @@
+import { Tooltip } from '@_linked/primitives/components/Tooltip';
+import type { PropertyShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import { shacl } from '@_linked/core/ontologies/shacl';
+import { xsd } from '@_linked/core/ontologies/xsd';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { useState } from 'react';
+import { Icons } from '@_linked/icons';
+import type { FieldDependencyState } from '../shape/useFormDependencies.js';
+import { getNodeDisplay, humanizeEnumLabel, enumOptions } from '../shape/nodeDisplay.js';
+import { validateField } from '../shape/validation.js';
+import style from './DynamicFormField.module.css';
+import { FormField } from './FormField.js';
+import NodeValuesEditor from './NodeValuesEditor.js';
+
+interface DynamicFormProps {
+  dataType?;
+  formName: string;
+  label: string;
+  placeholder: string;
+  required: boolean;
+  value?;
+  shape;
+  of: Shape;
+  property: PropertyShapeWire;
+  onBeforeNavigate?: () => Promise<string | void> | string | void;
+  /** External error from submit-time validation */
+  error?: string;
+  /** Dependency state from parent fields (visibility + narrowing) */
+  dependencyState?: FieldDependencyState;
+}
+
+// Helper: format a Date or ISO string for <input type="date">
+function toDateInputValue(val: any): string {
+  if (!val) return '';
+  if (val instanceof Date) return val.toISOString().split('T')[0];
+  if (typeof val === 'string') return val.split('T')[0];
+  return '';
+}
+
+// Helper: format a Date or ISO string for <input type="datetime-local">
+function toDateTimeInputValue(val: any): string {
+  if (!val) return '';
+  if (val instanceof Date) return val.toISOString().slice(0, 16);
+  if (typeof val === 'string') return val.slice(0, 16);
+  return '';
+}
+
+/** Compute HTML min/max attrs from SHACL inclusive/exclusive constraints */
+function computeNumericBounds(property: PropertyShapeWire, isInteger: boolean) {
+  const attrs: Record<string, number> = {};
+  if (property.minInclusive != null) {
+    attrs.min = property.minInclusive;
+  } else if (property.minExclusive != null) {
+    // The metamodel types the bound as `string | number` — a SHACL literal can be either —
+    // where the DTO had already coerced it to a number.
+    const bound = Number(property.minExclusive);
+    attrs.min = isInteger ? bound + 1 : bound;
+  }
+  if (property.maxInclusive != null) {
+    attrs.max = property.maxInclusive;
+  } else if (property.maxExclusive != null) {
+    attrs.max = isInteger ? property.maxExclusive - 1 : property.maxExclusive;
+  }
+  return attrs;
+}
+
+function FieldWrapper({
+  label,
+  required,
+  error,
+  description,
+  children,
+}: {
+  label: string;
+  required: boolean;
+  error?: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={style.form}>
+      <div className={style.label}>
+        <label>
+          {label} {required && <sup>*</sup>}
+          {description && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <button
+                  type="button"
+                  className={style.infoIcon}
+                  aria-label={`Info about ${label}`}
+                >
+                  <Icons.Info width={14} height={14} />
+                </button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side="top" sideOffset={4} className={style.tooltipContent}>
+                {description}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Root>
+          )}
+        </label>
+      </div>
+      <div className={style.value}>
+        {children}
+        {error && <span className={style.fieldError}>{error}</span>}
+      </div>
+    </div>
+  );
+}
+
+function DynamicForm({
+  dataType,
+  formName,
+  label,
+  placeholder = 'Type here',
+  required = false,
+  value,
+  shape,
+  of,
+  property,
+  onBeforeNavigate,
+  error: externalError,
+  dependencyState,
+}: DynamicFormProps) {
+  const [localError, setLocalError] = useState('');
+  const displayError = externalError || localError;
+
+  const datatype = property.datatype;
+  const nodeKind = property.nodeKind;
+  const valueShape = property.valueShape;
+
+  const handleBlur = (val: any) => {
+    const err = validateField(property, val);
+    setLocalError(err);
+  };
+
+  // Guard: skip properties without nodeKind (incomplete shape data)
+  if (!nodeKind) return null;
+
+  // ── sh:in enumeration → render as <select> dropdown (both literal and IRI) ──
+  //
+  // `enumOptions` derives the label. `sh:in` carries members, not names — the DTO's `inValues`
+  // looked like it carried names but they were the IRI's local part, computed at projection
+  // time. Same answer, computed in one place.
+  const choices = enumOptions(property);
+  if (choices.length > 0) {
+    const currentValue =
+      value !== undefined && value !== null
+        ? typeof value === 'object' && value.id
+          ? value.id
+          : String(value)
+        : '';
+    return (
+      <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+        <select
+          className={style.selectField}
+          required={required}
+          defaultValue={currentValue}
+          onChange={(e) => {
+            of[property.label] = e.target.value || undefined;
+          }}
+          onBlur={(e) => handleBlur(e.target.value)}
+        >
+          <option value="">— Select —</option>
+          {choices.map((opt) => (
+            <option key={opt.id} value={opt.id}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </FieldWrapper>
+    );
+  }
+
+  // Object / IRI properties — rendered by NodeValuesEditor (CustomMultiSelect)
+  if (
+    nodeKind.id === shacl.IRI.id ||
+    nodeKind.id === shacl.BlankNode.id ||
+    nodeKind.id === shacl.BlankNodeOrIRI.id
+  ) {
+    // Dependency hint: show subtle text when parent field can narrow this field
+    const narrowingHint =
+      dependencyState && !dependencyState.parentHasValue
+        ? dependencyState.parentLabels
+            .map((l) => l.replace(/([A-Z])/g, ' $1').replace(/^./, (c) => c.toUpperCase()).trim())
+            .join(' or ')
+        : null;
+
+    return (
+      <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+        {narrowingHint && (
+          <span className={style.narrowingHint}>
+            Select {narrowingHint} to narrow options
+          </span>
+        )}
+        <NodeValuesEditor
+          sourceShape={shape}
+          of={of}
+          property={property}
+          onBeforeNavigate={onBeforeNavigate}
+          narrowedIds={dependencyState?.narrowedIds}
+          isNarrowing={dependencyState?.loading}
+        />
+      </FieldWrapper>
+    );
+  }
+
+  // Literal properties
+  if (nodeKind.id === shacl.Literal.id) {
+    const dt = datatype?.id;
+
+    // Boolean → native checkbox
+    if (dt === xsd.boolean.id) {
+      return (
+        <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+          <input
+            type="checkbox"
+            className={style.checkboxField}
+            defaultChecked={!!value}
+            onChange={(e) => { of[property.label] = e.target.checked; }}
+          />
+        </FieldWrapper>
+      );
+    }
+
+    // Date
+    if (dt === xsd.date.id) {
+      return (
+        <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+          <input
+            type="date"
+            className={style.textFormField}
+            required={required}
+            defaultValue={toDateInputValue(value)}
+            onChange={(e) => { of[property.label] = e.target.value; }}
+            onBlur={(e) => handleBlur(e.target.value)}
+          />
+        </FieldWrapper>
+      );
+    }
+
+    // DateTime
+    if (dt === xsd.dateTime.id) {
+      return (
+        <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+          <input
+            type="datetime-local"
+            className={style.textFormField}
+            required={required}
+            defaultValue={toDateTimeInputValue(value)}
+            onChange={(e) => { of[property.label] = e.target.value; }}
+            onBlur={(e) => handleBlur(e.target.value)}
+          />
+        </FieldWrapper>
+      );
+    }
+
+    // Integer / long
+    if (
+      dt === xsd.integer.id ||
+      dt === xsd.long?.id
+    ) {
+      const bounds = computeNumericBounds(property, true);
+      return (
+        <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+          <input
+            type="number"
+            step="1"
+            className={style.textFormField}
+            required={required}
+            defaultValue={value !== undefined && value !== null ? Number(value) : ''}
+            {...bounds}
+            onChange={(e) => { of[property.label] = parseInt(e.target.value, 10); }}
+            onBlur={(e) => handleBlur(parseInt(e.target.value, 10))}
+          />
+        </FieldWrapper>
+      );
+    }
+
+    // Decimal / float / double
+    if (
+      dt === xsd.decimal?.id ||
+      dt === xsd.float?.id ||
+      dt === xsd.double?.id
+    ) {
+      const bounds = computeNumericBounds(property, false);
+      return (
+        <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+          <input
+            type="number"
+            step="any"
+            className={style.textFormField}
+            required={required}
+            defaultValue={value !== undefined && value !== null ? Number(value) : ''}
+            {...bounds}
+            onChange={(e) => { of[property.label] = parseFloat(e.target.value); }}
+            onBlur={(e) => handleBlur(parseFloat(e.target.value))}
+          />
+        </FieldWrapper>
+      );
+    }
+
+    // URI / anyURI
+    if (dt === 'http://www.w3.org/2001/XMLSchema#anyURI') {
+      return (
+        <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+          <FormField
+            name={formName}
+            type="url"
+            placeholder={placeholder}
+            className={style.textFormField}
+            required={required}
+            defaultValue={typeof value === 'string' ? value : ''}
+            onChange={(e) => { of[property.label] = e.target.value; }}
+            onBlur={(e) => handleBlur(e.target.value)}
+          />
+        </FieldWrapper>
+      );
+    }
+
+    // String (default) — also catches unknown datatypes
+    const strAttrs: Record<string, any> = {};
+    if (property.minLength != null) strAttrs.minLength = property.minLength;
+    if (property.maxLength != null) strAttrs.maxLength = property.maxLength;
+    if (property.pattern) strAttrs.pattern = property.pattern;
+
+    return (
+      <FieldWrapper label={label} required={required} error={displayError} description={property.description}>
+        <FormField
+          name={formName}
+          type="text"
+          placeholder={placeholder}
+          className={style.textFormField}
+          required={required}
+          defaultValue={
+            value !== undefined && value !== null
+              ? typeof value === 'object'
+                ? getNodeDisplay(value)
+                : String(value)
+              : ''
+          }
+          {...strAttrs}
+          onChange={(e) => { of[property.label] = e.target.value; }}
+          onBlur={(e) => {
+            of[property.label] = e.target.value;
+            handleBlur(e.target.value);
+          }}
+        />
+      </FieldWrapper>
+    );
+  }
+
+  return null;
+}
+
+export { DynamicForm };