@_linked/shape-ui 2.0.0 → 2.3.0

package/src/components/BatchEditDrawer.tsx

@@ -0,0 +1,295 @@
+import { Button } from '@_linked/primitives/components/Button';
+import { Checkbox } from '@_linked/primitives/components/Checkbox';
+import { Drawer } from '@_linked/primitives/components/Drawer';
+import type { PropertyShapeWire, NodeShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import { shacl } from '@_linked/core/ontologies/shacl';
+import React from 'react';
+import { getPropertyUiType } from '../shape/propertyTypes.js';
+import { humanizeEnumLabel, enumOptions } from '../shape/nodeDisplay.js';
+import { Icons } from '@_linked/icons';
+import { Spinner } from '@_linked/primitives/components/Spinner';
+import style from './BatchEditDrawer.module.css';
+
+interface BatchEditDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  shape: NodeShapeWire;
+  properties: Record<string, PropertyShapeWire>;
+  selectedCount: number;
+  onApply: (changes: Record<string, any>) => Promise<void>;
+  isLoading?: boolean;
+}
+
+interface FieldState {
+  enabled: boolean;
+  value: any;
+}
+
+function BatchEditDrawer({
+  isOpen,
+  onClose,
+  shape,
+  properties,
+  selectedCount,
+  onApply,
+  isLoading = false,
+}: BatchEditDrawerProps) {
+  const [fields, setFields] = React.useState<Record<string, FieldState>>({});
+  const [step, setStep] = React.useState<'edit' | 'review'>('edit');
+
+  // Reset state when drawer opens/closes
+  React.useEffect(() => {
+    if (isOpen) {
+      setFields({});
+      setStep('edit');
+    }
+  }, [isOpen]);
+
+  // Get editable properties (skip id, rdf:type, and IRI/reference fields for V1)
+  const editableProperties = React.useMemo(() => {
+    return Object.entries(properties).filter(([label, prop]) => {
+      if (label === 'id') return false;
+      if (prop.id === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type') return false;
+      const nodeKind = prop.nodeKind?.id;
+      // Skip IRI/reference fields — too complex for batch V1
+      if (
+        nodeKind === shacl.IRI.id ||
+        nodeKind === shacl.BlankNode.id ||
+        nodeKind === shacl.BlankNodeOrIRI.id
+      ) {
+        return false;
+      }
+      return true;
+    });
+  }, [properties]);
+
+  const toggleField = (label: string) => {
+    setFields((prev) => ({
+      ...prev,
+      [label]: {
+        enabled: !prev[label]?.enabled,
+        value: prev[label]?.value ?? '',
+      },
+    }));
+  };
+
+  const updateFieldValue = (label: string, value: any) => {
+    setFields((prev) => ({
+      ...prev,
+      [label]: { enabled: true, value },
+    }));
+  };
+
+  const enabledFields = Object.entries(fields).filter(([, f]) => f.enabled);
+  const hasChanges = enabledFields.length > 0;
+
+  const handleApply = () => {
+    const changes: Record<string, any> = {};
+    for (const [label, fieldState] of enabledFields) {
+      changes[label] = fieldState.value;
+    }
+    onApply(changes);
+  };
+
+  const humanizeLabel = (label: string) =>
+    label
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/_/g, ' ')
+      .replace(/^./, (c) => c.toUpperCase());
+
+  const formatValue = (value: any, prop: PropertyShapeWire) => {
+    if (value === '' || value === null || value === undefined) return '(empty)';
+    const uiType = getPropertyUiType(prop);
+    if (uiType === 'boolean') return value === 'true' || value === true ? 'Yes' : 'No';
+    if (uiType === 'enum-literal' || uiType === 'enum-iri') {
+      const match = enumOptions(prop).find((v) => v.id === value);
+      if (match) return match.label;
+    }
+    return String(value);
+  };
+
+  const renderFieldInput = (label: string, prop: PropertyShapeWire) => {
+    const uiType = getPropertyUiType(prop);
+    const fieldState = fields[label];
+    const value = fieldState?.value ?? '';
+    const disabled = !fieldState?.enabled;
+
+    switch (uiType) {
+      case 'boolean':
+        return (
+          <select
+            className={style.input}
+            disabled={disabled}
+            value={value}
+            onChange={(e) => updateFieldValue(label, e.target.value)}
+          >
+            <option value="">— Select —</option>
+            <option value="true">Yes</option>
+            <option value="false">No</option>
+          </select>
+        );
+
+      case 'enum-literal':
+      case 'enum-iri':
+        return (
+          <select
+            className={style.input}
+            disabled={disabled}
+            value={value}
+            onChange={(e) => updateFieldValue(label, e.target.value)}
+          >
+            <option value="">— Select —</option>
+            {enumOptions(prop).map((opt) => (
+              <option key={opt.id} value={opt.id}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        );
+
+      case 'number':
+        return (
+          <input
+            type="number"
+            className={style.input}
+            disabled={disabled}
+            value={value}
+            placeholder="Enter number..."
+            onChange={(e) => updateFieldValue(label, e.target.value ? Number(e.target.value) : '')}
+          />
+        );
+
+      case 'date':
+        return (
+          <input
+            type="date"
+            className={style.input}
+            disabled={disabled}
+            value={value}
+            onChange={(e) => updateFieldValue(label, e.target.value)}
+          />
+        );
+
+      case 'datetime':
+        return (
+          <input
+            type="datetime-local"
+            className={style.input}
+            disabled={disabled}
+            value={value}
+            onChange={(e) => updateFieldValue(label, e.target.value)}
+          />
+        );
+
+      case 'text':
+      case 'url':
+      default:
+        return (
+          <input
+            type={uiType === 'url' ? 'url' : 'text'}
+            className={style.input}
+            disabled={disabled}
+            value={value}
+            placeholder={`Enter ${uiType === 'url' ? 'URL' : 'text'}...`}
+            onChange={(e) => updateFieldValue(label, e.target.value)}
+          />
+        );
+    }
+  };
+
+  return (
+    <Drawer.Root open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }} direction="right" handleOnly>
+      <Drawer.Content hideHandle className={style.drawer}>
+        <div className={style.drawerContent}>
+          <Drawer.Header className={style.header}>
+            <Drawer.Title>Edit {selectedCount} {shape?.label || 'item'}{selectedCount > 1 ? 's' : ''}</Drawer.Title>
+            <Drawer.Description>
+              {step === 'edit'
+                ? 'Toggle on the fields you want to change. Only enabled fields will be updated.'
+                : 'Review your changes before applying.'}
+            </Drawer.Description>
+          </Drawer.Header>
+
+          <div className={style.body}>
+            {step === 'edit' ? (
+              <div className={style.fieldList}>
+                {editableProperties.map(([label, prop]) => {
+                  const isEnabled = fields[label]?.enabled ?? false;
+                  return (
+                    <div key={label} className={style.fieldRow}>
+                      <div className={style.fieldToggle}>
+                        <Checkbox
+                          checked={isEnabled}
+                          onCheckedChange={() => toggleField(label)}
+                        />
+                        <label
+                          className={style.fieldLabel}
+                          onClick={() => toggleField(label)}
+                        >
+                          {humanizeLabel(label)}
+                        </label>
+                      </div>
+                      <div className={isEnabled ? style.fieldInput : style.fieldInputDisabled}>
+                        {renderFieldInput(label, prop)}
+                      </div>
+                    </div>
+                  );
+                })}
+                {editableProperties.length === 0 && (
+                  <p className={style.noFields}>No editable fields available for batch editing.</p>
+                )}
+              </div>
+            ) : (
+              <div className={style.reviewList}>
+                <p className={style.reviewIntro}>
+                  The following changes will be applied to {selectedCount} item{selectedCount > 1 ? 's' : ''}:
+                </p>
+                {enabledFields.map(([label]) => {
+                  const prop = properties[label];
+                  const value = fields[label].value;
+                  return (
+                    <div key={label} className={style.reviewItem}>
+                      <span className={style.reviewField}>{humanizeLabel(label)}</span>
+                      <Icons.ChevronRight width={12} height={12} />
+                      <span className={style.reviewValue}>
+                        {formatValue(value, prop)}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          <div className={style.footer}>
+            {step === 'edit' ? (
+              <>
+                <Button variant="outline" onClick={onClose} disabled={isLoading}>
+                  Cancel
+                </Button>
+                <Button onClick={() => setStep('review')} disabled={!hasChanges || isLoading}>
+                  Review Changes ({enabledFields.length})
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button variant="outline" onClick={() => setStep('edit')} disabled={isLoading}>
+                  Back
+                </Button>
+                <Button onClick={handleApply} disabled={isLoading}>
+                  {isLoading ? (
+                    <><Spinner size="small" /> Updating {selectedCount} items...</>
+                  ) : (
+                    `Apply to ${selectedCount} items`
+                  )}
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}
+
+export default BatchEditDrawer;

package/src/components/CheckboxEditor.module.css

@@ -0,0 +1,6 @@
+.Root {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  /* padding: 10px;*/
+}

package/src/components/CheckboxEditor.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import type { PropertyShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import { Checkbox } from '@_linked/primitives/components/Checkbox';
+import style from './CheckboxEditor.module.css';
+
+export interface CheckboxEditorProps {
+  onCheckedChange?: (e) => void;
+  of?: Record<string, any>;
+  property?: PropertyShapeWire;
+
+  /**
+   *  Converts the value returned by the shape, to the input string for the checkbox
+   * @param shapePropertyValue
+   * @returns
+   */
+  preConvertValueFn?: (shapePropertyValue: any) => string;
+  /**
+   * Converts the value of the checkbox to a value that can be provided to the set method of the shape
+   * @param inputValue
+   * @returns
+   */
+  postConvertValueFn?: (inputValue: string) => any;
+}
+
+export const CheckboxEditor = ({
+  onCheckedChange,
+  of,
+  property,
+  preConvertValueFn,
+  postConvertValueFn,
+  ...restProps
+}: CheckboxEditorProps) => {
+  const currentValues = of[property.label];
+
+  const onChangeHandler = (item, checked) => {
+    if (!of) return;
+
+    if (property.in) {
+      if (checked) {
+        currentValues.add(item);
+      } else {
+        currentValues.delete(item);
+      }
+    } else {
+      of[property.label] = checked;
+    }
+
+    if (onCheckedChange) {
+      onCheckedChange(currentValues);
+    }
+  };
+
+  return (
+    <>
+      {property.in ? (
+        property.in.map((item, i) => {
+          return (
+            <label className={style.Root}>
+              <Checkbox
+                value={of[property.label]}
+                onCheckedChange={onChangeHandler.bind(this, item)}
+                defaultChecked={currentValues.has(item)}
+                {...restProps}
+              />
+              TODO: {item.toString()}
+            </label>
+          );
+        })
+      ) : (
+        <div>checkbox usage unimplemented</div>
+        // <Checkbox
+        //   value={of[property.label]}
+        //   onCheckedChange={onChangeHandler}
+        //   defaultChecked={
+        //     of
+        //       ? preConvertValueFn
+        //         ? preConvertValueFn(of[property.label])
+        //         : of[property.label]
+        //       : ''
+        //   }
+        //   {...restProps}
+        // />
+      )}
+    </>
+  );
+};

package/src/components/CustomMultiSelect.module.css

@@ -0,0 +1,291 @@
+/* ============================================================================
+   CustomMultiSelect.module.css
+
+   Multi-select dropdown with search and create new functionality.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Root Container === */
+.Root {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+/* === Table icon === */
+.tableIcon {
+  cursor: pointer;
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  transition: color var(--transition-fast);
+}
+
+.tableIcon:hover {
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+/* === Selected Options Container === */
+.selectedOptionsAndChevronIconContainer {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  width: 100%;
+  padding: var(--surface-gap) 0;
+  overflow-x: hidden;
+}
+
+.selectedOptionsContainer {
+  position: relative;
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  width: 100%;
+  padding: 0;
+  background-color: var(--field-bg);
+}
+
+.selectedOptionsContainer.expanded {
+  overflow-y: scroll;
+  flex-wrap: wrap;
+}
+
+/* === Chips Container === */
+.noBorderContainer {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 196px;
+  padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
+  gap: var(--space-sm);
+  width: 93%;
+  overflow-y: hidden;
+  border-color: transparent;
+}
+
+.noBorderContainer.expanded {
+  overflow-y: scroll;
+}
+
+/* === Chevron Icon === */
+.chevronDownIcon {
+  opacity: 0.4;
+  transition: transform var(--transition-fast), opacity var(--transition-fast);
+  position: absolute;
+  right: 0.25rem;
+  top: 51%;
+  transform: translate(-40px, -50%);
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+}
+
+.chevronDownIcon.open {
+  opacity: 0.7;
+  transform: rotate(180deg) translate(40px, 0.75rem);
+}
+
+/* === Option chips (selected values) === */
+.optionButton {
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+/* === Selector placeholder === */
+.selectorButton {
+  color: var(--field-text-placeholder);
+  font-size: var(--typography-small-size);
+}
+
+/* ============================================================================
+   Dropdown (Popover.Content)
+   ============================================================================ */
+
+
+.options {
+  width: 100%;
+  padding: 0;
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-field);
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* === Search wrapper === */
+.searchWrapper {
+  position: relative;
+  border-bottom: 1px solid var(--surface-border);
+}
+
+/* === Command input === */
+input[cmdk-input] {
+  width: 100%;
+  background-color: var(--field-bg);
+  color: var(--field-text);
+  border: none;
+  padding: var(--space-sm-plus) var(--space-xl) var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+}
+
+input[cmdk-input]::placeholder {
+  color: var(--field-text-placeholder);
+}
+
+/* === Reset search icon === */
+.resetSearchInputIcon {
+  position: absolute;
+  right: var(--space-md);
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.5;
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.resetSearchInputIcon:hover {
+  opacity: 1;
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+/* === Command root / list === */
+.commandRoot {
+  position: relative;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+/* === Options group === */
+.commandGroup {
+  padding: var(--space-xs) 0;
+}
+
+/* === Individual option item === */
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+  cursor: pointer;
+  gap: var(--space-sm);
+}
+
+.optionLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.optionCheck {
+  flex-shrink: 0;
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+.optionSelected {
+  opacity: 0.6;
+}
+
+/* === Empty result === */
+.emptyResult {
+  text-align: left;
+  padding: var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+}
+
+/* === Load More sentinel (infinite scroll) === */
+.loadMoreSentinel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-sm) 0;
+  min-height: 32px;
+}
+
+/* === "Create New" section === */
+.createNewContainer {
+  border-top: 1px solid var(--surface-border);
+  padding: 0;
+}
+
+.modalButton {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+  border: none;
+  background: transparent;
+  padding: var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--transition-fast);
+}
+
+.modalButton:hover {
+  background: color-mix(in srgb, var(--custom-multi-select-tertiary-500, var(--color-tertiary-500)) 8%, transparent);
+}
+
+/* === View Less text (expand/collapse) === */
+.viewLessText {
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+  font-size: var(--typography-small-size);
+  padding: 0 var(--space-sm);
+  position: absolute;
+  bottom: 3px;
+  left: 15px;
+  border-radius: var(--radius-full);
+  background: var(--surface-bg);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.viewLessText:hover {
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+/* === Dialog === */
+.dialogRoot {
+  background-color: var(--modal-bg, var(--surface-bg));
+  border: 1px solid var(--modal-border, var(--surface-border));
+  border-radius: var(--radius-modal);
+  min-width: min(90vw, 680px);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialogHeader {
+  padding: var(--space-xl) var(--space-xl) var(--space-md);
+  border-bottom: 1px solid var(--surface-border);
+  flex-shrink: 0;
+}
+
+.dialogContent {
+  overflow-y: auto;
+  flex: 1;
+  padding: 0 var(--space-md) var(--space-md);
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+/* All surfaces use semantic tokens that auto-switch in dark mode */
+
+[data-theme='dark'] .modalButton {
+  color: var(--custom-multi-select-tertiary-400, var(--color-tertiary-400));
+}
+
+[data-theme='dark'] .viewLessText {
+  color: var(--custom-multi-select-gray-400, var(--color-gray-400));
+}
+
+[data-theme='dark'] .options {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+}