@fgv/ts-res-ui-components 5.0.0-10

package/src/components/common/QualifierContextControl.tsx

@@ -0,0 +1,151 @@
+import React, { useMemo } from 'react';
+import { ProcessedResources } from '../../types';
+
+export interface QualifierContextControlProps {
+  qualifierName: string;
+  value: string | undefined;
+  onChange: (qualifierName: string, value: string | undefined) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  resources?: ProcessedResources | null;
+  className?: string;
+}
+
+export const QualifierContextControl: React.FC<QualifierContextControlProps> = ({
+  qualifierName,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+  resources,
+  className = ''
+}) => {
+  // Extract qualifier type information from system configuration
+  const qualifierInfo = useMemo(() => {
+    if (!resources?.system?.qualifiers) {
+      return { hasEnumeratedValues: false, enumeratedValues: [] };
+    }
+
+    try {
+      // Get qualifier declaration
+      const qualifierResult = resources.system.qualifiers.validating.get(qualifierName);
+
+      if (!qualifierResult.isSuccess()) {
+        return { hasEnumeratedValues: false, enumeratedValues: [] };
+      }
+
+      const qualifier = qualifierResult.value;
+
+      // Access the instantiated qualifier type
+      if (qualifier.type) {
+        const qualifierType = qualifier.type;
+        // Use type assertion to access properties that may exist on specific subtypes
+        const qtAny = qualifierType as unknown as Record<string, unknown>;
+        const config = (qtAny.configuration || {}) as Record<string, unknown>;
+
+        // Look for enumerated values in different possible locations
+        const enumeratedValues =
+          config.enumeratedValues ||
+          config.allowedTerritories ||
+          qtAny.enumeratedValues ||
+          qtAny.allowedTerritories ||
+          [];
+
+        if (enumeratedValues && Array.isArray(enumeratedValues) && enumeratedValues.length > 0) {
+          return {
+            hasEnumeratedValues: true,
+            enumeratedValues: enumeratedValues as string[],
+            systemType: (qtAny.systemType as string) || 'literal',
+            caseSensitive: config.caseSensitive !== false
+          };
+        }
+      }
+
+      return { hasEnumeratedValues: false, enumeratedValues: [] };
+    } catch (error) {
+      console.warn(`Failed to extract qualifier type info for ${qualifierName}:`, error);
+      return { hasEnumeratedValues: false, enumeratedValues: [] };
+    }
+  }, [qualifierName, resources?.system?.qualifiers]);
+
+  const handleChange = (newValue: string) => {
+    onChange(qualifierName, newValue || undefined);
+  };
+
+  const handleClear = () => {
+    onChange(qualifierName, undefined);
+  };
+
+  const effectiveValue = value ?? '';
+  const hasEnumeratedValues = qualifierInfo.hasEnumeratedValues && qualifierInfo.enumeratedValues.length > 0;
+
+  return (
+    <div className={`bg-white rounded border border-gray-200 p-2 ${className}`}>
+      <div className="flex items-center gap-2">
+        <label className="text-sm font-medium text-gray-700 min-w-0 flex-shrink-0">{qualifierName}:</label>
+        <div className="flex-1 flex items-center gap-1">
+          {hasEnumeratedValues ? (
+            // Dropdown for enumerated values
+            <select
+              value={effectiveValue}
+              onChange={(e) => handleChange(e.target.value)}
+              disabled={disabled}
+              className={`flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${
+                disabled ? 'bg-gray-100 text-gray-400' : ''
+              }`}
+            >
+              <option value="">
+                {disabled
+                  ? 'Disabled'
+                  : value === undefined
+                  ? '(undefined)'
+                  : placeholder || 'Select value...'}
+              </option>
+              {qualifierInfo.enumeratedValues.map((enumValue: string) => (
+                <option key={enumValue} value={enumValue}>
+                  {enumValue}
+                </option>
+              ))}
+            </select>
+          ) : (
+            // Text input for non-enumerated values
+            <input
+              type="text"
+              value={effectiveValue}
+              onChange={(e) => handleChange(e.target.value)}
+              disabled={disabled}
+              className={`flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${
+                disabled ? 'bg-gray-100 text-gray-400' : ''
+              }`}
+              placeholder={
+                disabled
+                  ? 'Disabled'
+                  : value === undefined
+                  ? '(undefined)'
+                  : placeholder || `Enter ${qualifierName} value`
+              }
+            />
+          )}
+          {!disabled && value !== undefined && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="px-2 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded transition-colors"
+              title="Set to undefined"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      </div>
+      {/* Show enumerated values indicator */}
+      {hasEnumeratedValues && (
+        <div className="mt-1 text-xs text-blue-600">
+          {qualifierInfo.enumeratedValues.length} predefined values
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default QualifierContextControl;

package/src/components/common/ResourceListView.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { DocumentTextIcon } from '@heroicons/react/24/outline';
+
+interface ResourceListViewProps {
+  resourceIds: string[];
+  selectedResourceId: string | null;
+  onResourceSelect: (resourceId: string) => void;
+  searchTerm?: string;
+  className?: string;
+}
+
+export const ResourceListView: React.FC<ResourceListViewProps> = ({
+  resourceIds,
+  selectedResourceId,
+  onResourceSelect,
+  searchTerm = '',
+  className = ''
+}) => {
+  // Filter and sort resource IDs
+  const filteredResourceIds = React.useMemo(() => {
+    const filtered = searchTerm
+      ? resourceIds.filter((id) => id.toLowerCase().includes(searchTerm.toLowerCase()))
+      : resourceIds;
+
+    return filtered.sort();
+  }, [resourceIds, searchTerm]);
+
+  if (filteredResourceIds.length === 0) {
+    return (
+      <div className={`${className} p-4 text-center text-gray-500`}>
+        <p>{searchTerm ? 'No resources match your search' : 'No resources available'}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${className} overflow-y-auto`}>
+      {filteredResourceIds.map((resourceId) => (
+        <div
+          key={resourceId}
+          className={`flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100 border-b border-gray-100 last:border-b-0 ${
+            selectedResourceId === resourceId ? 'bg-purple-50 border-l-2 border-purple-500' : ''
+          } ${
+            searchTerm && resourceId.toLowerCase().includes(searchTerm.toLowerCase()) ? 'bg-yellow-50' : ''
+          }`}
+          onClick={() => onResourceSelect(resourceId)}
+        >
+          <DocumentTextIcon className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
+          <span
+            className={`text-sm truncate ${
+              selectedResourceId === resourceId ? 'font-medium text-purple-900' : 'text-gray-700'
+            }`}
+            title={resourceId}
+          >
+            {resourceId}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ResourceListView;

package/src/components/common/ResourceTreeView.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  ChevronRightIcon,
+  ChevronDownIcon,
+  DocumentTextIcon,
+  FolderIcon,
+  FolderOpenIcon
+} from '@heroicons/react/24/outline';
+import { Resources, Runtime } from '@fgv/ts-res';
+
+interface ResourceTreeViewProps {
+  resources: Resources.ResourceManagerBuilder | Runtime.CompiledResourceCollection;
+  selectedResourceId: string | null;
+  onResourceSelect: (resourceId: string) => void;
+  searchTerm?: string;
+  className?: string;
+}
+
+interface TreeNode {
+  id: string;
+  name: string;
+  isLeaf: boolean;
+  resource?: Resources.Resource | Runtime.IResource;
+  children?: Map<string, TreeNode>;
+  isExpanded?: boolean;
+  isVisible?: boolean;
+  matchesSearch?: boolean;
+}
+
+export const ResourceTreeView: React.FC<ResourceTreeViewProps> = ({
+  resources,
+  selectedResourceId,
+  onResourceSelect,
+  searchTerm = '',
+  className = ''
+}) => {
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // Build the tree structure from resources
+  const treeData = useMemo(() => {
+    if (!resources) return null;
+
+    // Get the tree from the resources
+    const treeResult = resources.getBuiltResourceTree();
+    if (treeResult.isFailure()) {
+      console.error('Failed to build resource tree:', treeResult.message);
+      return null;
+    }
+
+    return treeResult.value;
+  }, [resources]);
+
+  // Filter tree based on search term
+  const filteredTree = useMemo(() => {
+    if (!treeData || !searchTerm) return treeData;
+
+    // Helper function to check if a node or its descendants match the search
+    const markMatchingNodes = (
+      node: Runtime.ResourceTree.IReadOnlyResourceTreeNode<any>,
+      searchLower: string
+    ): boolean => {
+      const nodeIdLower = node.id.toLowerCase();
+      let matches = nodeIdLower.includes(searchLower);
+
+      if (!node.isLeaf && node.children) {
+        // Check children recursively
+        for (const child of node.children.values()) {
+          if (markMatchingNodes(child, searchLower)) {
+            matches = true;
+          }
+        }
+      }
+
+      return matches;
+    };
+
+    // Mark all matching nodes
+    const searchLower = searchTerm.toLowerCase();
+    for (const child of treeData.children.values()) {
+      markMatchingNodes(child, searchLower);
+    }
+
+    return treeData;
+  }, [treeData, searchTerm]);
+
+  // Toggle node expansion
+  const toggleNode = useCallback((nodeId: string) => {
+    setExpandedNodes((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(nodeId)) {
+        newExpanded.delete(nodeId);
+      } else {
+        newExpanded.add(nodeId);
+      }
+      return newExpanded;
+    });
+  }, []);
+
+  // Expand all nodes that contain search matches
+  const expandMatchingNodes = useCallback(() => {
+    if (!searchTerm || !filteredTree) return;
+
+    const searchLower = searchTerm.toLowerCase();
+    const nodesToExpand = new Set<string>();
+
+    const checkNode = (node: Runtime.ResourceTree.IReadOnlyResourceTreeNode<any>) => {
+      if (node.id.toLowerCase().includes(searchLower)) {
+        // Expand all parent nodes
+        const parts = node.id.split('.');
+        for (let i = 1; i < parts.length; i++) {
+          nodesToExpand.add(parts.slice(0, i).join('.'));
+        }
+      }
+
+      if (!node.isLeaf && node.children) {
+        for (const child of node.children.values()) {
+          checkNode(child);
+        }
+      }
+    };
+
+    for (const child of filteredTree.children.values()) {
+      checkNode(child);
+    }
+
+    setExpandedNodes(nodesToExpand);
+  }, [searchTerm, filteredTree]);
+
+  // Auto-expand when search term changes
+  React.useEffect(() => {
+    if (searchTerm) {
+      expandMatchingNodes();
+    }
+  }, [searchTerm, expandMatchingNodes]);
+
+  // Render a single tree node
+  const renderTreeNode = (
+    node: Runtime.ResourceTree.IReadOnlyResourceTreeNode<Resources.Resource | Runtime.IResource>,
+    level: number = 0
+  ): React.ReactElement | null => {
+    const isExpanded = expandedNodes.has(node.id);
+    const isSelected = selectedResourceId === node.id;
+    const nodeIdLower = node.id.toLowerCase();
+    const searchLower = searchTerm.toLowerCase();
+    const matchesSearch = !searchTerm || nodeIdLower.includes(searchLower);
+
+    // Check if any children match
+    let hasMatchingChildren = false;
+    if (!node.isLeaf && node.children && searchTerm) {
+      const checkChildren = (n: Runtime.ResourceTree.IReadOnlyResourceTreeNode<any>): boolean => {
+        if (n.id.toLowerCase().includes(searchLower)) return true;
+        if (!n.isLeaf && n.children) {
+          for (const child of n.children.values()) {
+            if (checkChildren(child)) return true;
+          }
+        }
+        return false;
+      };
+
+      for (const child of node.children.values()) {
+        if (checkChildren(child)) {
+          hasMatchingChildren = true;
+          break;
+        }
+      }
+    }
+
+    // Hide nodes that don't match search and don't have matching children
+    if (searchTerm && !matchesSearch && !hasMatchingChildren) {
+      return null;
+    }
+
+    return (
+      <div key={node.id}>
+        <div
+          className={`flex items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${
+            isSelected ? 'bg-purple-50 border-l-2 border-purple-500' : ''
+          } ${matchesSearch && searchTerm ? 'bg-yellow-50' : ''}`}
+          style={{ paddingLeft: `${level * 20 + 8}px` }}
+          onClick={() => {
+            if (node.isLeaf) {
+              onResourceSelect(node.id);
+            } else {
+              toggleNode(node.id);
+            }
+          }}
+        >
+          {/* Expand/Collapse icon for branches */}
+          {!node.isLeaf && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleNode(node.id);
+              }}
+              className="mr-1 p-0.5 hover:bg-gray-200 rounded"
+            >
+              {isExpanded ? (
+                <ChevronDownIcon className="w-3 h-3 text-gray-600" />
+              ) : (
+                <ChevronRightIcon className="w-3 h-3 text-gray-600" />
+              )}
+            </button>
+          )}
+
+          {/* Folder or document icon */}
+          {node.isLeaf ? (
+            <DocumentTextIcon className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
+          ) : isExpanded ? (
+            <FolderOpenIcon className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" />
+          ) : (
+            <FolderIcon className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" />
+          )}
+
+          {/* Node name */}
+          <span
+            className={`text-sm truncate ${isSelected ? 'font-medium text-purple-900' : 'text-gray-700'} ${
+              matchesSearch && searchTerm ? 'font-medium' : ''
+            }`}
+            title={node.id}
+          >
+            {node.name}
+          </span>
+
+          {/* Show child count for branches */}
+          {!node.isLeaf && node.children && (
+            <span className="ml-2 text-xs text-gray-500">({node.children.size})</span>
+          )}
+        </div>
+
+        {/* Render children if expanded */}
+        {!node.isLeaf && node.children && isExpanded && (
+          <div>
+            {Array.from(node.children.values())
+              .sort((a, b) => {
+                // Sort folders first, then by name
+                if (a.isLeaf !== b.isLeaf) {
+                  return a.isLeaf ? 1 : -1;
+                }
+                return a.name.localeCompare(b.name);
+              })
+              .map((child) => renderTreeNode(child, level + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (!filteredTree) {
+    return (
+      <div className={`${className} p-4 text-center text-gray-500`}>
+        <p>No resources available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${className} overflow-y-auto`}>
+      {Array.from(filteredTree.children.values())
+        .sort((a, b) => {
+          // Sort folders first, then by name
+          if (a.isLeaf !== b.isLeaf) {
+            return a.isLeaf ? 1 : -1;
+          }
+          return a.name.localeCompare(b.name);
+        })
+        .map((child) => renderTreeNode(child))}
+    </div>
+  );
+};
+
+export default ResourceTreeView;

package/src/components/forms/HierarchyEditor.tsx

@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+
+export interface HierarchyEditorProps {
+  hierarchy: Record<string, string>;
+  onChange: (hierarchy: Record<string, string>) => void;
+  availableValues: string[];
+  className?: string;
+}
+
+export const HierarchyEditor: React.FC<HierarchyEditorProps> = ({
+  hierarchy,
+  onChange,
+  availableValues,
+  className = ''
+}) => {
+  const [newChild, setNewChild] = useState('');
+  const [newParent, setNewParent] = useState('');
+
+  // Ensure hierarchy is a valid object with string values
+  const safeHierarchy = React.useMemo(() => {
+    if (!hierarchy || typeof hierarchy !== 'object') {
+      return {};
+    }
+    // Filter out any non-string values
+    const safe: Record<string, string> = {};
+    for (const [key, value] of Object.entries(hierarchy)) {
+      if (typeof value === 'string') {
+        safe[key] = value;
+      }
+    }
+    return safe;
+  }, [hierarchy]);
+
+  const handleAddRelationship = () => {
+    if (newChild && newParent && newChild !== newParent) {
+      const updatedHierarchy = { ...safeHierarchy, [newChild]: newParent };
+      onChange(updatedHierarchy);
+      setNewChild('');
+      setNewParent('');
+    }
+  };
+
+  const handleRemoveRelationship = (child: string) => {
+    const updatedHierarchy = { ...safeHierarchy };
+    delete updatedHierarchy[child];
+    onChange(updatedHierarchy);
+  };
+
+  const getHierarchyTree = () => {
+    const roots = new Set(availableValues);
+    const children = new Set(Object.keys(safeHierarchy));
+    const parents = new Set(Object.values(safeHierarchy));
+
+    // Remove children from roots (they have parents)
+    children.forEach((child) => roots.delete(child));
+
+    // Add parents that aren't in available values (for display purposes)
+    parents.forEach((parent) => {
+      if (!availableValues.includes(parent)) {
+        roots.add(parent);
+      }
+    });
+
+    const buildTree = (value: string, level = 0): any => {
+      const childrenOfValue = Object.entries(safeHierarchy).filter(([, parent]) => parent === value);
+      return {
+        value,
+        level,
+        children: childrenOfValue.map(([child]) => buildTree(child, level + 1))
+      };
+    };
+
+    return Array.from(roots).map((root) => buildTree(root));
+  };
+
+  const renderTree = (nodes: any[]): React.ReactNode => {
+    return nodes.map((node) => {
+      const parentValue = safeHierarchy[node.value];
+
+      return (
+        <div key={node.value} className="ml-4">
+          <div className="flex items-center space-x-2 py-1">
+            <span className="text-sm text-gray-700" style={{ marginLeft: `${node.level * 20}px` }}>
+              {node.level > 0 && '└─ '}
+              {node.value}
+            </span>
+            {parentValue && <span className="text-xs text-gray-500">→ {parentValue}</span>}
+          </div>
+          {node.children.length > 0 && renderTree(node.children)}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div className={className}>
+      <label className="block text-sm font-medium text-gray-700 mb-2">Value Hierarchy</label>
+      <div className="border border-gray-300 rounded-md p-3 bg-white">
+        {/* Add new relationship form */}
+        <div className="mb-4 p-3 bg-gray-50 rounded border">
+          <div className="text-sm font-medium text-gray-700 mb-2">Add Parent-Child Relationship</div>
+          <div className="grid grid-cols-3 gap-2 items-end">
+            <div>
+              <label className="block text-xs text-gray-600">Child Value</label>
+              {availableValues.length > 0 ? (
+                <select
+                  value={newChild}
+                  onChange={(e) => setNewChild(e.target.value)}
+                  className="w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+                >
+                  <option value="">Select child...</option>
+                  {availableValues.map((value) => (
+                    <option key={value} value={value}>
+                      {value}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  type="text"
+                  value={newChild}
+                  onChange={(e) => setNewChild(e.target.value)}
+                  placeholder="Enter child value"
+                  className="w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+                />
+              )}
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600">Parent Value</label>
+              <input
+                type="text"
+                value={newParent}
+                onChange={(e) => setNewParent(e.target.value)}
+                placeholder="Enter parent value"
+                className="w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+              />
+            </div>
+            <div>
+              <button
+                onClick={handleAddRelationship}
+                disabled={!newChild || !newParent || newChild === newParent}
+                className="w-full px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+          <div className="text-xs text-gray-500 mt-1">
+            {availableValues.length > 0
+              ? "Define which values are children of other values. The parent doesn't need to be in the enumerated values list."
+              : 'Define which values are children of other values. Enter any valid values for this qualifier type.'}
+          </div>
+        </div>
+
+        {/* Current relationships */}
+        {Object.keys(safeHierarchy).length > 0 && (
+          <div className="mb-4">
+            <div className="text-sm font-medium text-gray-700 mb-2">
+              Current Relationships ({Object.keys(safeHierarchy).length})
+            </div>
+            <div className="max-h-24 overflow-y-auto border border-gray-200 rounded bg-white p-2">
+              <div className="space-y-1">
+                {Object.entries(safeHierarchy).map(([child, parent]) => (
+                  <div key={child} className="flex items-center justify-between bg-gray-50 px-2 py-1 rounded">
+                    <span className="text-sm">
+                      <span className="font-medium">{child}</span> →{' '}
+                      <span className="text-gray-600">{parent}</span>
+                    </span>
+                    <button
+                      onClick={() => handleRemoveRelationship(child)}
+                      className="text-red-600 hover:text-red-800 text-xs ml-2 flex-shrink-0"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Hierarchy visualization */}
+        {(availableValues.length > 0 || Object.keys(safeHierarchy).length > 0) && (
+          <div>
+            <div className="text-sm font-medium text-gray-700 mb-2">Hierarchy Tree</div>
+            <div className="bg-gray-50 border rounded max-h-32 overflow-y-auto">
+              <div className="p-2 text-sm font-mono">
+                {getHierarchyTree().length > 0 ? (
+                  renderTree(getHierarchyTree())
+                ) : (
+                  <div className="text-gray-500 text-center py-2">
+                    No hierarchy defined. Add relationships above to see the tree structure.
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HierarchyEditor;