@_linked/shape-ui 2.0.0 → 2.3.0

package/src/components/EditInstanceForms.tsx

@@ -0,0 +1,260 @@
+import { motion } from 'framer-motion';
+import { Button } from '@_linked/primitives/components/Button';
+import { Select } from '@_linked/primitives/components/Select';
+import type { PropertyShapeWire, NodeShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import { shacl } from '@_linked/core/ontologies/shacl';
+import { useEffect, useMemo, useState } from 'react';
+import { useDataManagerHost } from '../hostContext.js';
+import { Spinner } from '@_linked/primitives/components/Spinner';
+import { useFormDependencies } from '../shape/useFormDependencies.js';
+import {
+  getTransition,
+  staggerContainer,
+  staggerItem,
+  useReducedMotion,
+} from '@_linked/primitives/motion';
+import {
+  type CodeUsageData,
+  type PropertyUsageData,
+  classifyProperties,
+  getVisibleProperties,
+} from '../shape/propertyVisibility.js';
+import { DynamicForm } from './DynamicFormField.js';
+// Shared by both form organisms — named for what it is, rather than one of its two
+// consumers importing the other's stylesheet.
+import style from './forms.module.css';
+
+interface EditInstanceFormsProps {
+  of: Record<string, any>;
+  onSave?: (data: Record<string, any>) => Promise<void>;
+  onCancel?: () => void;
+  shape: NodeShapeWire;
+  properties: Record<string, PropertyShapeWire>;
+  allShapes?: Record<string, NodeShapeWire>;
+  projectId?: string;
+  propertyUsage?: Record<string, PropertyUsageData> | null;
+  codeUsage?: Record<string, CodeUsageData> | null;
+}
+
+function EditInstanceForms({
+  of,
+  onSave,
+  onCancel,
+  shape,
+  properties,
+  allShapes,
+  projectId,
+  propertyUsage,
+  codeUsage,
+}: EditInstanceFormsProps) {
+  const reducedMotion = useReducedMotion();
+  const propShapes = shape.propertyShapes;
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [extraFields, setExtraFields] = useState<Set<string>>(new Set());
+
+  // Dependent field visibility & narrowing
+  const host = useDataManagerHost();
+  const {
+    depMap,
+    onParentValueChange,
+    initFromData,
+    isParent,
+    getDependencyState,
+  } = useFormDependencies(shape, allShapes || null, projectId || null, host.readInstance);
+
+  // Wrap `of` in a Proxy to detect parent field changes
+  const proxyOf = useMemo(() => {
+    return new Proxy(of, {
+      set(target, prop, value) {
+        const propLabel = prop as string;
+        const oldValue = target[propLabel];
+        target[propLabel] = value;
+
+        if (isParent(propLabel)) {
+          // Only cascade-clear children when the parent value actually changed,
+          // not during initialization write-backs from CustomMultiSelect
+          let changed: boolean;
+          if (oldValue == null || value == null) {
+            changed = oldValue !== value;
+          } else if (Array.isArray(oldValue) && Array.isArray(value)) {
+            changed =
+              oldValue.length !== value.length ||
+              oldValue.some((o, i) => o?.id !== value[i]?.id);
+          } else if (typeof oldValue === 'object' && typeof value === 'object') {
+            changed = oldValue.id !== value.id;
+          } else {
+            changed = oldValue !== value;
+          }
+
+          if (changed) {
+            onParentValueChange(propLabel, value);
+            for (const [childLabel, deps] of depMap) {
+              if (deps.some((d) => d.parentLabel === propLabel)) {
+                target[childLabel] = undefined;
+              }
+            }
+          }
+        }
+
+        return true;
+      },
+    });
+  }, [of, depMap, onParentValueChange, isParent]);
+
+  // Initialize dependency state from existing instance data
+  useEffect(() => {
+    if (of) {
+      initFromData(of);
+    }
+  }, []);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      await onSave?.(of);
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : String(err));
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: reducedMotion ? 0 : 0.3, ease: [0.4, 0, 0.2, 1] }}
+    >
+      <motion.div
+        className={style.container}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          duration: reducedMotion ? 0 : 0.4,
+          ease: [0.4, 0, 0.2, 1],
+          delay: reducedMotion ? 0 : 0.1,
+        }}
+      >
+        <motion.div
+          className={style.rows}
+          variants={staggerContainer}
+          initial="initial"
+          animate="animate"
+        >
+          {(() => {
+            const classified = classifyProperties(propShapes, propertyUsage || null, { codeUsage });
+            const autoVisible = getVisibleProperties(classified, 'form-edit', of);
+            const autoVisibleLabels = new Set(autoVisible.map((c) => c.property.label));
+
+            const visibleProps = propShapes.filter(
+              (p) => autoVisibleLabels.has(p.label) || extraFields.has(p.label)
+            );
+            const availableExtras = classified.filter(
+              (c) => !autoVisibleLabels.has(c.property.label) && !extraFields.has(c.property.label)
+            );
+
+            return (
+              <>
+                {visibleProps.map((propShape) => {
+                  let required = propShape.minCount > 0;
+                  let formName = propShape.label;
+                  let label = propShape.label
+                    .replace(/([A-Z])/g, ' $1')
+                    .replace(/_/g, ' ')
+                    .replace(/^./, (char) => char.toUpperCase());
+
+                  let dataType;
+                  let nodeKind = propShape.nodeKind;
+                  if (nodeKind?.id === shacl.Literal.id) {
+                    dataType = propShape.datatype?.id.split('#')[1];
+                  }
+                  if (nodeKind?.id === shacl.IRI.id) {
+                    dataType = 'nodeShape';
+                  }
+
+                  return (
+                    <motion.div
+                      key={propShape.label}
+                      variants={staggerItem}
+                      transition={getTransition(reducedMotion)}
+                    >
+                      <DynamicForm
+                        dataType={dataType}
+                        formName={formName}
+                        label={label}
+                        placeholder={`Type ${label.toLowerCase()} here`}
+                        required={required}
+                        value={proxyOf[propShape.label]}
+                        of={proxyOf as any}
+                        property={propShape}
+                        shape={null}
+                        dependencyState={getDependencyState(propShape.label)}
+                      />
+                    </motion.div>
+                  );
+                })}
+                {availableExtras.length > 0 && (
+                  <motion.div
+                    variants={staggerItem}
+                    transition={getTransition(reducedMotion)}
+                    className={style.addFieldSection}
+                  >
+                    <Select.Root
+                      value=""
+                      onValueChange={(label) =>
+                        setExtraFields((prev) => new Set(prev).add(label))
+                      }
+                    >
+                      <Select.Trigger aria-label="Add optional field">
+                        <Select.Value placeholder="+ Add optional field..." />
+                      </Select.Trigger>
+                      <Select.Content>
+                        <Select.Group>
+                          {availableExtras.map((c) => (
+                            <Select.Item key={c.property.label} value={c.property.label}>
+                              {c.property.label
+                                .replace(/([A-Z])/g, ' $1')
+                                .replace(/_/g, ' ')
+                                .replace(/^./, (char) => char.toUpperCase())}
+                            </Select.Item>
+                          ))}
+                        </Select.Group>
+                      </Select.Content>
+                    </Select.Root>
+                  </motion.div>
+                )}
+              </>
+            );
+          })()}
+        </motion.div>
+      </motion.div>
+
+      {saveError && (
+        <p className={style.saveError}>{saveError}</p>
+      )}
+
+      <motion.div
+        className={style.actions}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          duration: reducedMotion ? 0 : 0.3,
+          ease: [0.4, 0, 0.2, 1],
+          delay: reducedMotion ? 0 : 0.3,
+        }}
+      >
+        <Button variant="outline" onClick={onCancel} disabled={isSaving}>Cancel</Button>
+        <Button onClick={handleSave} disabled={isSaving}>
+          {isSaving ? (
+            <><Spinner size="small" /> Saving</>
+          ) : (
+            'Save'
+          )}
+        </Button>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export default EditInstanceForms;

package/src/components/FilterBadge.module.css

@@ -0,0 +1,25 @@
+.Root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.inactive {
+  opacity: 0.55;
+}
+
+.toggle,
+.remove {
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+
+.remove {
+  opacity: 0.7;
+}
+
+.remove:hover {
+  opacity: 1;
+}

package/src/components/FilterBadge.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {Badge} from '@_linked/primitives/components/Badge';
+import style from './FilterBadge.module.css';
+
+export interface FilterBadgeProps {
+  label: string;
+  /** A filter can be muted without being removed, so a viewer can compare with and without. */
+  isActive?: boolean;
+  onToggle?: () => void;
+  onRemove?: () => void;
+  className?: string;
+}
+
+/**
+ * One active filter, as a chip that can be muted or removed.
+ *
+ * Two controls in one badge, which is why it is a component rather than a `<Badge>` with
+ * props: the body toggles and the trailing button removes, and each has to stop the other
+ * from firing. Getting that wrong means a viewer aiming for "remove" mutes it instead.
+ *
+ * An inactive filter is dimmed rather than hidden — the point of toggling instead of removing
+ * is to see the filter you have switched off.
+ */
+export function FilterBadge({
+  label,
+  isActive = true,
+  onToggle,
+  onRemove,
+  className,
+}: FilterBadgeProps) {
+  return (
+    <Badge
+      variant={isActive ? 'soft' : 'outline'}
+      color={isActive ? 'primary' : 'neutral'}
+      className={[style.Root, !isActive && style.inactive, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <button
+        type="button"
+        className={style.toggle}
+        onClick={(event) => {
+          event.stopPropagation();
+          onToggle?.();
+        }}
+        aria-pressed={isActive}
+      >
+        {label}
+      </button>
+      {onRemove && (
+        <button
+          type="button"
+          className={style.remove}
+          aria-label={`Remove filter ${label}`}
+          onClick={(event) => {
+            // Without this the toggle fires too, and the filter is muted on its way out.
+            event.stopPropagation();
+            onRemove();
+          }}
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            strokeWidth="2.5" strokeLinecap="round" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </Badge>
+  );
+}

package/src/components/FormField.module.css

@@ -0,0 +1,57 @@
+/* ============================================================================
+   FormField.module.css
+   
+   Basic form field wrapper component.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Root Container === */
+.Root {
+  display: grid;
+  width: 100%;
+  max-width: 24rem;
+  align-items: center;
+  gap: var(--space-xs-plus);
+}
+
+.Root div > input {
+  width: 98%;
+  background-color: var(--field-bg);
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  padding: var(--space-sm-plus) 0.75rem;
+  color: var(--field-text);
+  font-size: var(--typography-small-size);
+  transition: all var(--transition-fast);
+}
+
+.Root div > input:focus {
+  outline: none;
+  border-color: var(--field-border-focus);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--form-field-tertiary-500, var(--color-tertiary-500)) 15%, transparent);
+}
+
+.Root div > input::placeholder {
+  color: var(--field-text-placeholder);
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+[data-theme='dark'] .Root div > input {
+  background-color: var(--field-bg);
+  border-color: var(--field-border);
+  color: var(--field-text);
+}
+
+[data-theme='dark'] .Root div > input:focus {
+  border-color: var(--field-border-focus);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--form-field-tertiary-500, var(--color-tertiary-500)) 20%, transparent);
+}
+
+[data-theme='dark'] .Root div > input::placeholder {
+  color: var(--field-text-placeholder);
+}

package/src/components/FormField.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Label } from '@_linked/primitives/components/Label';
+import style from './FormField.module.css';
+import { TextfieldEditor } from './TextfieldEditor.js'; // import input field that already connected with shape
+
+interface FormFieldProps {
+  of?;
+  property?;
+  label?: string;
+  name?: string;
+  type: string;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  onChange?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  value?: string | number;
+  required?: boolean;
+  defaultValue?;
+}
+
+const FormField = ({
+  of,
+  property,
+  label,
+  name,
+  type,
+  placeholder = '',
+  className,
+  onChange,
+  value,
+  required,
+  onBlur,
+  defaultValue,
+  ...restProps
+}: FormFieldProps) => {
+  return (
+    <div className={style.Root}>
+      {label && <Label htmlFor={name}>{label}</Label>}
+      <TextfieldEditor
+        of={of}
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        className={className}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        defaultValue={defaultValue}
+        required={required}
+        readOnly={false}
+        disabled={false}
+        {...restProps}
+      />
+    </div>
+  );
+};
+
+export { FormField };

package/src/components/ImageValueEditor.module.css

@@ -0,0 +1,3 @@
+.Root {
+  display: block;
+}

package/src/components/ImageValueEditor.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import type { PropertyShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import style from './ImageValueEditor.module.css';
+// import CustomMultiSelect from './CustomMultiSelect.js';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { PropertyShape, NodeShape } from '@_linked/core/shapes/SHACL';
+import { Thing } from '@_linked/schema/shapes/Thing';
+import { getShapeClass } from '@_linked/core/utils/ShapeClass';
+import { ShapeSet } from '@_linked/core/collections/ShapeSet';
+import { ImageUploader } from '@_linked/schema/components/ImageUploader';
+import { ImageObject } from '@_linked/schema/shapes/ImageObject';
+import {
+  generateRandomName,
+  replaceLocalhostWithSiteRoot,
+} from '../utils/helper.js';
+
+// interface ImageValuesEditor {
+//   shape?: Shape;
+//   property?: PropertyShapeWire;
+//   potentialValues?: any[];
+//   createInstanceFor?;
+// }
+
+interface ImageValueEditorProps {
+  of?: Record<string, any>;
+  property?: PropertyShapeWire;
+  shape: NodeShape;
+  thumbnailWidth?: number;
+  potentialValue?;
+}
+const ImageValueEditor = ({
+  of,
+  property,
+  shape,
+  potentialValue,
+  thumbnailWidth,
+}: ImageValueEditorProps) => {
+  //   const potentialValues is shape[property.label];
+  let valueShape = property.valueShape;
+  let shapeClass = getShapeClass(shape.namedNode);
+  let [bool, setBool] = useState(false);
+  let forceUpdate = () => setBool(!bool);
+
+  if (!valueShape) {
+    console.log('No #valueshape defined in ' + property.uri);
+    valueShape = Thing.shape;
+  } else {
+    console.log(property.label + ' uses #valueShape' + valueShape.label);
+  }
+  let values = (getShapeClass(valueShape.namedNode) as any).getLocalInstances();
+
+  const onImageUploaded = async (dataUrl, format) => {
+    try {
+      const filename = generateRandomName(format);
+      // create an ImageObject and save it
+      const imageObj = await ImageObject.fromDataURL(dataUrl, filename);
+
+      if (imageObj) {
+        forceUpdate();
+        of[property.label] = imageObj;
+        imageObj.save();
+      } else {
+        console.error('Failed to create image object', imageObj);
+      }
+    } catch (err) {
+      console.error('Error on uploading image:', err);
+    }
+  };
+
+  return (
+    <div className={style.Root}>
+      <ImageUploader
+        // thumbnailHeight={100}
+        thumbnailWidth={thumbnailWidth}
+        onUploaded={onImageUploaded}
+        potentialValue={potentialValue}
+      />
+    </div>
+  );
+};
+
+export default ImageValueEditor;

package/src/components/InstanceDeletionDialog.module.css

@@ -0,0 +1,59 @@
+.summary {
+  display: grid;
+  gap: 0.875rem;
+  min-width: min(32rem, 75vw);
+}
+
+.intro,
+.empty,
+.error,
+.changed {
+  margin: 0;
+}
+
+.targets {
+  display: grid;
+  gap: 0.75rem;
+  max-height: 48vh;
+  overflow: auto;
+}
+
+.target {
+  display: grid;
+  gap: 0.45rem;
+  padding: 0.75rem;
+  border: 1px solid var(--surface-border, #d8dee8);
+  border-radius: 0.5rem;
+  background: var(--section-bg, #f8fafc);
+}
+
+.target strong,
+.target small {
+  overflow-wrap: anywhere;
+}
+
+.impactList {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0;
+  padding-left: 1.15rem;
+}
+
+.impactList li {
+  overflow-wrap: anywhere;
+}
+
+.warning {
+  color: var(--intent-warning-text, #8a4b08);
+}
+
+.error {
+  color: var(--color-error, #b42318);
+}
+
+.changed {
+  padding: 0.65rem;
+  border-radius: 0.4rem;
+  background: var(--intent-warning-bg, #fff4e5);
+  color: var(--intent-warning-text, #8a4b08);
+}