@_linked/shape-ui 2.0.0 → 2.3.0

package/src/components/InstanceView.module.css

@@ -0,0 +1,157 @@
+/*
+ * Lifted from ViewInstance.module.css alongside the InstanceView organism.
+ *
+ * Only the rules that render an instance's VALUES. The page keeps its layout, header,
+ * actions and skeleton rules — those belong to the page, not to the value list.
+ */
+
+.rows {
+  padding: var(--surface-gap) var(--space-2xl) var(--space-lg) var(--space-2xl);
+}
+
+.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;
+}
+
+.form.stacked {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-sm);
+}
+
+.form.stacked .label {
+  width: 100%;
+}
+
+.form.stacked .value {
+  width: 100%;
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  min-width: 120px;
+  height: 100%;
+  justify-content: center;
+  padding-right: var(--space-md);
+  flex-shrink: 0;
+}
+
+.label label {
+  color: var(--instance-view-gray-500, var(--color-gray-500));
+  font-size: var(--typography-font-size);
+}
+
+.value {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm-plus);
+  width: 70%;
+  max-height: 8.75rem;
+  overflow-y: auto;
+}
+
+.value p {
+  color: var(--text-primary);
+  font-size: var(--typography-font-size);
+  margin: 0;
+}
+
+.badgeContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs) 0;
+  overflow-y: auto;
+}
+
+.expandedContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  overflow-y: auto;
+  margin-top: var(--space-sm);
+  padding: var(--space-sm);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-field);
+  background: var(--section-bg);
+}
+
+.imageValue {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.imageLabel {
+  color: var(--instance-view-gray-600, var(--color-gray-600));
+  font-size: var(--typography-small-size);
+  word-break: break-all;
+}
+
+[data-theme='dark'] .imageLabel {
+  color: var(--instance-view-gray-400, var(--color-gray-400));
+}
+
+[data-theme='dark'] .label label {
+  color: var(--instance-view-gray-400, var(--color-gray-400));
+}
+
+.rows {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+.form {
+    padding: var(--space-md) 0;
+  }
+
+.label {
+    width: 35%;
+    min-width: 100px;
+    padding-right: var(--space-sm);
+  }
+
+.value {
+    width: 65%;
+  }
+
+.rows {
+    padding: var(--space-xs) var(--space-sm);
+  }
+
+.form {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2xs);
+    padding: var(--space-sm) 0;
+  }
+
+.label {
+    width: 100%;
+    min-width: unset;
+    padding-right: 0;
+    margin-bottom: 0;
+  }
+
+.label label {
+    font-size: var(--typography-small-size);
+  }
+
+.value {
+    width: 100%;
+    max-height: none;
+  }
+
+.value p {
+    font-size: var(--typography-small-size);
+  }
+

package/src/components/InstanceView.tsx

@@ -0,0 +1,212 @@
+import {useState} from 'react';
+import {motion} from 'framer-motion';
+import {cl} from '@_linked/react/utils/ClassNames';
+import type {
+  PropertyShapeWire,
+  NodeShapeWire,
+} from '@_linked/core/shapes/nodeShapeWire';
+import {NodeBadge} from './NodeBadge.js';
+import ImageThumb from '@_linked/primitives/components/ImageThumb';
+import {getNodeDisplay} from '../shape/nodeDisplay.js';
+import {
+  getTransition,
+  staggerContainer,
+  staggerItem,
+  useReducedMotion,
+} from '@_linked/primitives/motion';
+import style from './InstanceView.module.css';
+
+/**
+ * Read-only rendering of one instance's values.
+ *
+ * Lifted out of `ViewInstance` (436 lines), which rendered all of this inline. That made the
+ * single-instance view the one CRUD surface with no organism at all — nothing to extract,
+ * nothing to test, and nothing that could move into the package. The page keeps what a page
+ * should: routing, breadcrumbs, layout chrome, actions, the deletion dialog.
+ *
+ * Navigation is a callback, not a router call. Clicking a related node means "show me that
+ * one", and where that goes is the host's business.
+ */
+
+export interface InstanceViewProps {
+  shape?: NodeShapeWire;
+  /** Property metadata by label — used to resolve which shape a related node belongs to. */
+  properties: Record<string, PropertyShapeWire>;
+  /** The instance's values, keyed by property label. */
+  subject: Record<string, any> | null;
+  /**
+   * A related node was clicked. Given the node and the property it came from, so the caller
+   * can resolve the target shape from `properties[propertyName].valueShape`.
+   */
+  onNodeClick?: (node: {id: string; label?: string}, propertyName: string) => void;
+}
+
+/** Above this many values, the rest collapse behind a "(n…)" badge. */
+const MAX_VALUES = 7;
+
+export function InstanceView({
+  shape,
+  properties,
+  subject,
+  onNodeClick,
+}: InstanceViewProps) {
+  const [expandedArrays, setExpandedArrays] = useState<Set<string>>(new Set());
+  const reducedMotion = useReducedMotion();
+
+  const expand = (propertyName: string) =>
+    setExpandedArrays((prev) => new Set(prev).add(propertyName));
+
+  const handleNodeClick = (node: any, propertyName: string) => {
+    if (node?.id) onNodeClick?.(node, propertyName);
+  };
+
+  /** An image source, whether the value carries one directly or via a nested ImageObject. */
+  const imageSourceOf = (value: any): string | undefined => {
+    const images = value?.image;
+    const first = Array.isArray(images) ? images[0] : images;
+    if (!first) return undefined;
+    return typeof first === 'object' && first.contentUrl
+      ? String(first.contentUrl)
+      : String(first);
+  };
+
+  const renderArrayItem = (item: any, key: number, propertyName: string) => {
+    if (typeof item === 'object' && item?.contentUrl) {
+      return (
+        <div key={key}>
+          <ImageThumb src={item.contentUrl} size={40} alt={item.label || propertyName} />
+        </div>
+      );
+    }
+    if (typeof item === 'object' && item?.id) {
+      const imgSrc = imageSourceOf(item);
+      if (imgSrc) {
+        return (
+          <div key={key}>
+            <ImageThumb src={imgSrc} size={40} alt={item.label || propertyName} />
+          </div>
+        );
+      }
+      return (
+        <div key={key}>
+          <NodeBadge
+            text={item.label || item.id}
+            onClick={() => handleNodeClick(item, propertyName)}
+            clickable
+          />
+        </div>
+      );
+    }
+    return (
+      <div key={key}>
+        <NodeBadge text={String(item)} />
+      </div>
+    );
+  };
+
+  const renderValue = (value: any, propertyName: string) => {
+    if (value === null || value === undefined) return <p>-</p>;
+    if (typeof value === 'boolean') return <p>{value ? 'Yes' : 'No'}</p>;
+
+    // An ImageObject: the value IS the image.
+    if (typeof value === 'object' && value.contentUrl) {
+      return (
+        <div className={style.imageValue}>
+          <ImageThumb src={value.contentUrl} size={64} alt={propertyName} />
+          <p className={style.imageLabel}>{value.label || value.contentUrl}</p>
+        </div>
+      );
+    }
+
+    // A related node: show its image if it has one, else a clickable badge.
+    if (typeof value === 'object' && value.id) {
+      const imgSrc = imageSourceOf(value);
+      if (imgSrc) {
+        return (
+          <div className={style.imageValue}>
+            <ImageThumb src={imgSrc} size={48} alt={value.label || propertyName} />
+            {value.label && <span className={style.imageLabel}>{value.label}</span>}
+          </div>
+        );
+      }
+      return (
+        <NodeBadge
+          text={getNodeDisplay(value)}
+          onClick={() => handleNodeClick(value, propertyName)}
+          clickable
+        />
+      );
+    }
+
+    if (Array.isArray(value)) {
+      if (value.length === 0) return <p>-</p>;
+      const isExpanded = expandedArrays.has(propertyName);
+      const visible = isExpanded ? value : value.slice(0, MAX_VALUES);
+      const leftOver = value.length - MAX_VALUES;
+      return (
+        <div className={style.badgeContainer}>
+          {visible.map((item, index) => renderArrayItem(item, index, propertyName))}
+          {!isExpanded && leftOver > 0 && (
+            <div>
+              <NodeBadge
+                text={`(${leftOver}...)`}
+                onClick={() => expand(propertyName)}
+                clickable
+              />
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return <p>{String(value)}</p>;
+  };
+
+  if (!subject) return null;
+
+  // Only properties that actually have a value, and never the identifier — it names the
+  // record rather than describing it.
+  const populated = (shape?.propertyShapes ?? []).filter((prop) => {
+    if (prop.label === 'id') return false;
+    const value = subject[prop.label];
+    return value !== undefined && value !== null && value !== '';
+  });
+
+  return (
+    <motion.div
+      className={style.rows}
+      variants={staggerContainer}
+      initial="initial"
+      animate="animate"
+    >
+      {populated.map((prop) => {
+        const value = subject[prop.label];
+        const formattedLabel =
+          prop.label.charAt(0).toUpperCase() + prop.label.slice(1);
+        const isStacked = shouldStack(value);
+        return (
+          <motion.div
+            key={prop.label}
+            className={cl(style.form, isStacked && style.stacked)}
+            variants={staggerItem}
+            transition={getTransition(reducedMotion)}
+          >
+            <div className={style.label}>
+              <label>{formattedLabel}</label>
+            </div>
+            <div className={style.value}>{renderValue(value, prop.label)}</div>
+          </motion.div>
+        );
+      })}
+    </motion.div>
+  );
+}
+
+/** A value wide enough that label-beside-value stops reading well. */
+function shouldStack(value: unknown): boolean {
+  if (Array.isArray(value)) return value.length > 3;
+  if (typeof value === 'string') return value.length > 120;
+  return false;
+}
+
+export default InstanceView;

package/src/components/NodeBadge.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {Badge} from '@_linked/primitives/components/Badge';
+
+export interface NodeBadgeProps {
+  /** What identifies the node — a label where it has one, otherwise its IRI. */
+  text: string;
+  onClick?: () => void;
+  /** Whether the badge acts on a click. A read-only host may not navigate. */
+  clickable?: boolean;
+  title?: string;
+  className?: string;
+}
+
+/**
+ * A chip standing for one node.
+ *
+ * The only badge this package needs, and it is a thin composition over the presentational
+ * primitive. It exists as its own component rather than as a bare `<Badge>` for one reason:
+ * "a related instance" is a shape-domain concept, and a table cell, a form field and a
+ * read-only view must render it identically. A caller reaching for the primitive directly
+ * would have to remember which variant and colour meant "node", and eventually two of them
+ * would disagree.
+ *
+ * `clickable` is separate from `onClick` deliberately. A host that cannot navigate still
+ * passes a handler in some code paths, and a chip that looks interactive and does nothing is
+ * worse than one that looks inert.
+ */
+export function NodeBadge({
+  text,
+  onClick,
+  clickable = false,
+  title,
+  className,
+}: NodeBadgeProps) {
+  const interactive = clickable && !!onClick;
+
+  if (!interactive) {
+    return (
+      <Badge variant="soft" color="neutral" title={title} className={className}>
+        {text}
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge variant="soft" color="neutral" title={title} className={className} asChild>
+      <button
+        type="button"
+        onClick={(event) => {
+          // A node chip frequently sits inside a clickable row. Without this, choosing the
+          // chip also triggers the row.
+          event.stopPropagation();
+          onClick?.();
+        }}
+      >
+        {text}
+      </button>
+    </Badge>
+  );
+}

package/src/components/NodeValuesEditor.module.css

@@ -0,0 +1,4 @@
+.Root {
+  display: block;
+  width: 100%;
+}

package/src/components/NodeValuesEditor.tsx

@@ -0,0 +1,64 @@
+import type { PropertyShapeWire, NodeShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import CustomMultiSelect from './CustomMultiSelect.js';
+import style from './NodeValuesEditor.module.css';
+
+//TODO: create new NodeValuesEditor component, which takes property & of props
+//TODO: NodeValuesEditor will look at the property shape and determine potential Values by itself
+//TODO: it also checks if the property has `inList` and then uses inList.getContents() as potential values
+//TODO: it also updates the value by using of[property.label]
+// it renders the MultiSelect component and provides value & multiselect props
+// it also provides potentialValues to MultiSelect, which will be the instances of property.valueShape.getLocalInstances()
+// it renders <MultiSelect />
+interface NodeValuesEditorProps {
+  property: PropertyShapeWire;
+  of;
+  /**
+   * The shape being edited. Passed down rather than read from the route: the picker needs
+   * it to say which shape the answer belongs to, and the form above already knows.
+   */
+  sourceShape?: NodeShapeWire;
+  onBeforeNavigate?: () => Promise<string | void> | string | void;
+  narrowedIds?: string[] | null;
+  isNarrowing?: boolean;
+}
+const NodeValuesEditor = ({ property, of, sourceShape, onBeforeNavigate, narrowedIds, isNarrowing }: NodeValuesEditorProps) => {
+  let valueShape = property.valueShape;
+  // let shapeClass = getShapeClass(of.targetClass);
+
+  if (!valueShape) {
+    // valueShape = Thing;
+  } else {
+  }
+  // let instanceValues = (
+  //   getShapeClass(valueShape.namedNode) as any
+  // ).getLocalInstances();
+
+  const values = of[property.label];
+  // let potentialValues = property.inList;
+
+
+  return (
+    <div className={style.Root}>
+      <CustomMultiSelect
+        values={values}
+        property={property}
+        sourceShape={sourceShape}
+        onBeforeNavigate={onBeforeNavigate}
+        narrowedIds={narrowedIds}
+        isNarrowing={isNarrowing}
+        onChange={(selected) => {
+          // Write back to form data object (same mutation pattern as DynamicFormField)
+          // Include label so draft restore can display friendly names
+          of[property.label] =
+            selected.length === 0
+              ? undefined
+              : property.maxCount === 1
+                ? { id: selected[0].id, label: selected[0].label }
+                : selected.map((v) => ({ id: v.id, label: v.label }));
+        }}
+      />
+    </div>
+  );
+};
+
+export default NodeValuesEditor;

package/src/components/RadioButtonEditor.module.css

@@ -0,0 +1,22 @@
+.Root {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  gap: 1rem;
+
+  &.columnBased {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+
+  .radioButtonItem {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .radioButton {
+    width: 25px;
+    min-width: 25px;
+  }
+}

package/src/components/RadioButtonEditor.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import type { PropertyShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import { Root, Item, RadioGroup } from '@_linked/primitives/components/RadioGroup';
+import styles from './RadioButtonEditor.module.css';
+import { cl } from '@_linked/react/utils/ClassNames';
+
+export interface RadioButtonProps {
+  onValueChange?: (newValue) => void;
+  of?: Record<string, any>;
+  property?: PropertyShapeWire;
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   *  Converts the value returned by the shape, to the radio input string for the radio input
+   * @param shapePropertyValue
+   * @returns
+   */
+  preConvertValueFn?: (shapePropertyValue: any) => string;
+  /**
+   * Converts the value of the radio input to a value that can be provided to the set method of the shape
+   * @param radioInputValue
+   * @returns
+   */
+  postConvertValueFn?: (radioInputValue: string) => any;
+}
+
+export const RadioButtonEditor: React.FC<RadioButtonProps> = ({
+  onValueChange,
+  of,
+  property,
+  preConvertValueFn,
+  postConvertValueFn,
+  children,
+  className,
+  ...props
+}) => {
+  const [labelHasLongString, setLabelHasLongString] = useState(false);
+
+  const onChangeHandler = (newValue) => {
+    if (!of) return;
+    of[property.label] = newValue;
+
+    if (onValueChange) {
+      onValueChange(of[property.label]);
+      // onValueChange(
+      //   options.map((option) => {
+      //     console.log(option, 'option');
+      //     of[property.label] = newValue;
+      //   }),
+      // );
+    }
+  };
+
+  useEffect(() => {
+    //check if radio button label has a long string
+    if (property.in) {
+      const containsLongString = property.in.some((list) => {
+        throw Error('TODO: property.in for RadioButtonEditor');
+        // const wordCount = list.value.split(' ').length;
+        // return wordCount > 5;
+      });
+      setLabelHasLongString(containsLongString);
+    }
+  }, [property.in]);
+
+  // function cl(radioButtonField: any, arg1: any): string {
+  //   throw new Error('Function not implemented.');
+  // }
+
+  console.log('of.label', of[property.label]);
+
+  return (
+    <>
+      <RadioGroup.Root
+        defaultValue="default"
+        aria-label="View density"
+        className={cl(styles.Root, labelHasLongString && styles.columnBased)}
+      >
+        {property.in ? (
+          property.in.map((item) => (
+            <label className={styles.radioButtonItem}>
+              <RadioGroup.Item
+                value={item.toString()}
+                className={styles.radioButton}
+              />
+              TODO: item from property.in
+              {/* {item.value.charAt(0).toUpperCase() + item.value.slice(1)} */}
+            </label>
+          ))
+        ) : (
+          <p>unimplemented single radio button</p>
+        )}
+      </RadioGroup.Root>
+    </>
+  );
+};