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

package/src/components/forms/QualifierTypeEditForm.tsx

@@ -0,0 +1,347 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+import { QualifierTypes } from '@fgv/ts-res';
+import { HierarchyEditor } from './HierarchyEditor';
+
+export interface QualifierTypeEditFormProps {
+  qualifierType?: QualifierTypes.Config.ISystemQualifierTypeConfig;
+  onSave: (qualifierType: QualifierTypes.Config.ISystemQualifierTypeConfig) => void;
+  onCancel: () => void;
+  existingNames?: string[];
+}
+
+interface FormData {
+  name: string;
+  systemType: 'language' | 'territory' | 'literal';
+  allowContextList: boolean;
+  // Literal type specific
+  caseSensitive: boolean;
+  enumeratedValues: string[];
+  // Territory type specific
+  acceptLowercase: boolean;
+  allowedTerritories: string[];
+  // Hierarchy support (for literal and territory types)
+  hierarchy: Record<string, string>;
+}
+
+export const QualifierTypeEditForm: React.FC<QualifierTypeEditFormProps> = ({
+  qualifierType,
+  onSave,
+  onCancel,
+  existingNames = []
+}) => {
+  const [formData, setFormData] = useState<FormData>(() => {
+    if (qualifierType) {
+      const config = qualifierType.configuration || {};
+      // Ensure hierarchy is a plain object with string values
+      let hierarchy: Record<string, string> = {};
+      const rawHierarchy = (config as any)?.hierarchy;
+      if (rawHierarchy && typeof rawHierarchy === 'object' && !Array.isArray(rawHierarchy)) {
+        for (const [key, value] of Object.entries(rawHierarchy)) {
+          if (typeof value === 'string') {
+            hierarchy[key] = value;
+          }
+        }
+      }
+
+      return {
+        name: qualifierType.name,
+        systemType: qualifierType.systemType as 'language' | 'territory' | 'literal',
+        allowContextList: (config as any)?.allowContextList ?? false,
+        caseSensitive: (config as any)?.caseSensitive ?? true,
+        enumeratedValues: (config as any)?.enumeratedValues || [],
+        acceptLowercase: (config as any)?.acceptLowercase ?? false,
+        allowedTerritories: (config as any)?.allowedTerritories || [],
+        hierarchy: hierarchy
+      };
+    }
+    return {
+      name: '',
+      systemType: 'literal',
+      allowContextList: false,
+      caseSensitive: true,
+      enumeratedValues: [],
+      acceptLowercase: false,
+      allowedTerritories: [],
+      hierarchy: {}
+    };
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [enumeratedValuesText, setEnumeratedValuesText] = useState(formData.enumeratedValues.join(', '));
+  const [allowedTerritoriesText, setAllowedTerritoriesText] = useState(
+    formData.allowedTerritories.join(', ')
+  );
+
+  // Validation
+  const validateForm = useCallback((): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    } else if (existingNames.includes(formData.name) && formData.name !== qualifierType?.name) {
+      newErrors.name = 'Name must be unique';
+    }
+
+    if (formData.systemType === 'literal' && formData.enumeratedValues.length === 0) {
+      newErrors.enumeratedValues = 'Literal types should have enumerated values';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [formData, existingNames, qualifierType?.name]);
+
+  // Update enumerated values when text changes
+  useEffect(() => {
+    const values = enumeratedValuesText
+      .split(',')
+      .map((v) => v.trim())
+      .filter((v) => v.length > 0);
+    setFormData((prev) => ({ ...prev, enumeratedValues: values }));
+  }, [enumeratedValuesText]);
+
+  // Update allowed territories when text changes
+  useEffect(() => {
+    const territories = allowedTerritoriesText
+      .split(',')
+      .map((v) => v.trim().toUpperCase())
+      .filter((v) => v.length > 0);
+    setFormData((prev) => ({ ...prev, allowedTerritories: territories }));
+  }, [allowedTerritoriesText]);
+
+  const handleSave = useCallback(() => {
+    if (!validateForm()) return;
+
+    let configuration: any = {
+      allowContextList: formData.allowContextList
+    };
+
+    switch (formData.systemType) {
+      case 'literal':
+        configuration = {
+          ...configuration,
+          caseSensitive: formData.caseSensitive,
+          enumeratedValues: formData.enumeratedValues.length > 0 ? formData.enumeratedValues : undefined
+        };
+        // Add hierarchy if it has entries
+        if (Object.keys(formData.hierarchy).length > 0) {
+          configuration.hierarchy = formData.hierarchy;
+        }
+        break;
+      case 'territory':
+        configuration = {
+          ...configuration,
+          acceptLowercase: formData.acceptLowercase,
+          allowedTerritories: formData.allowedTerritories.length > 0 ? formData.allowedTerritories : undefined
+        };
+        // Add hierarchy if it has entries
+        if (Object.keys(formData.hierarchy).length > 0) {
+          configuration.hierarchy = formData.hierarchy;
+        }
+        break;
+      case 'language':
+        // Language types only have allowContextList
+        break;
+    }
+
+    const result: QualifierTypes.Config.ISystemQualifierTypeConfig = {
+      name: formData.name,
+      systemType: formData.systemType,
+      configuration: Object.keys(configuration).length > 1 ? configuration : undefined
+    } as any;
+
+    onSave(result);
+  }, [formData, validateForm, onSave]);
+
+  const updateField = useCallback(
+    (field: keyof FormData, value: any) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+      if (errors[field]) {
+        setErrors((prev) => ({ ...prev, [field]: '' }));
+      }
+    },
+    [errors]
+  );
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full h-full max-h-[calc(100vh-2rem)] flex flex-col">
+        {/* Fixed Header */}
+        <div className="flex items-center justify-between p-6 border-b flex-shrink-0">
+          <h3 className="text-lg font-medium text-gray-900">
+            {qualifierType ? 'Edit Qualifier Type' : 'Add Qualifier Type'}
+          </h3>
+          <button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
+            <XMarkIcon className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Scrollable Content */}
+        <div className="p-6 space-y-6 overflow-y-auto flex-1 min-h-0">
+          {/* Basic Properties */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+              <input
+                type="text"
+                value={formData.name}
+                onChange={(e) => updateField('name', e.target.value)}
+                className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${
+                  errors.name ? 'border-red-300' : 'border-gray-300'
+                }`}
+                placeholder="Enter qualifier type name"
+              />
+              {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">System Type *</label>
+              <select
+                value={formData.systemType}
+                onChange={(e) =>
+                  updateField('systemType', e.target.value as 'language' | 'territory' | 'literal')
+                }
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+              >
+                <option value="literal">Literal</option>
+                <option value="language">Language</option>
+                <option value="territory">Territory</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Allow Context List */}
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              id="allowContextList"
+              checked={formData.allowContextList}
+              onChange={(e) => updateField('allowContextList', e.target.checked)}
+              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+            />
+            <label htmlFor="allowContextList" className="ml-2 text-sm text-gray-700">
+              Allow Context List
+            </label>
+            <div className="ml-2 group relative">
+              <InformationCircleIcon className="w-4 h-4 text-gray-400" />
+              <div className="absolute left-0 bottom-6 hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap">
+                Allow multiple values separated by commas
+              </div>
+            </div>
+          </div>
+
+          {/* Literal Type Specific */}
+          {formData.systemType === 'literal' && (
+            <div className="space-y-4 p-4 bg-blue-50 rounded-lg">
+              <h4 className="font-medium text-gray-900">Literal Type Configuration</h4>
+
+              <div className="flex items-center">
+                <input
+                  type="checkbox"
+                  id="caseSensitive"
+                  checked={formData.caseSensitive}
+                  onChange={(e) => updateField('caseSensitive', e.target.checked)}
+                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                />
+                <label htmlFor="caseSensitive" className="ml-2 text-sm text-gray-700">
+                  Case Sensitive
+                </label>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Enumerated Values</label>
+                <textarea
+                  value={enumeratedValuesText}
+                  onChange={(e) => setEnumeratedValuesText(e.target.value)}
+                  className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${
+                    errors.enumeratedValues ? 'border-red-300' : 'border-gray-300'
+                  }`}
+                  rows={3}
+                  placeholder="Enter values separated by commas (e.g., dev, test, prod)"
+                />
+                {errors.enumeratedValues && (
+                  <p className="mt-1 text-sm text-red-600">{errors.enumeratedValues}</p>
+                )}
+                <p className="mt-1 text-xs text-gray-500">Separate multiple values with commas</p>
+              </div>
+            </div>
+          )}
+
+          {/* Territory Type Specific */}
+          {formData.systemType === 'territory' && (
+            <div className="space-y-4 p-4 bg-green-50 rounded-lg">
+              <h4 className="font-medium text-gray-900">Territory Type Configuration</h4>
+
+              <div className="flex items-center">
+                <input
+                  type="checkbox"
+                  id="acceptLowercase"
+                  checked={formData.acceptLowercase}
+                  onChange={(e) => updateField('acceptLowercase', e.target.checked)}
+                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                />
+                <label htmlFor="acceptLowercase" className="ml-2 text-sm text-gray-700">
+                  Accept Lowercase Territory Codes
+                </label>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Allowed Territories</label>
+                <textarea
+                  value={allowedTerritoriesText}
+                  onChange={(e) => setAllowedTerritoriesText(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  rows={3}
+                  placeholder="Enter territory codes separated by commas (e.g., US, CA, GB)"
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Separate multiple territory codes with commas. Will be automatically converted to uppercase.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Hierarchy Editor for Literal and Territory Types */}
+          {(formData.systemType === 'literal' || formData.systemType === 'territory') && (
+            <div className="space-y-4">
+              <HierarchyEditor
+                hierarchy={formData.hierarchy}
+                onChange={(hierarchy) => updateField('hierarchy', hierarchy)}
+                availableValues={
+                  formData.systemType === 'literal' ? formData.enumeratedValues : formData.allowedTerritories
+                }
+              />
+            </div>
+          )}
+
+          {/* Language Type Specific */}
+          {formData.systemType === 'language' && (
+            <div className="p-4 bg-yellow-50 rounded-lg">
+              <h4 className="font-medium text-gray-900">Language Type Configuration</h4>
+              <p className="text-sm text-gray-600 mt-2">
+                Language qualifier types use BCP47 language tags and only support the "Allow Context List"
+                option above.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Fixed Footer */}
+        <div className="flex justify-end space-x-3 px-6 py-4 border-t bg-gray-50 flex-shrink-0">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            {qualifierType ? 'Save Changes' : 'Add Qualifier Type'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/forms/ResourceTypeEditForm.tsx

@@ -0,0 +1,331 @@
+import React, { useState, useCallback } from 'react';
+import { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+import { ResourceTypes } from '@fgv/ts-res';
+
+export interface ResourceTypeEditFormProps {
+  resourceType?: ResourceTypes.Config.IResourceTypeConfig;
+  onSave: (resourceType: ResourceTypes.Config.IResourceTypeConfig) => void;
+  onCancel: () => void;
+  existingNames?: string[];
+}
+
+interface FormData {
+  name: string;
+  typeName: string;
+}
+
+const COMMON_TYPE_NAMES = [
+  'string',
+  'object',
+  'array',
+  'number',
+  'boolean',
+  'localizedString',
+  'config',
+  'settings',
+  'permissions',
+  'template',
+  'content',
+  'metadata'
+];
+
+export const ResourceTypeEditForm: React.FC<ResourceTypeEditFormProps> = ({
+  resourceType,
+  onSave,
+  onCancel,
+  existingNames = []
+}) => {
+  const [formData, setFormData] = useState<FormData>(() => {
+    if (resourceType) {
+      return {
+        name: resourceType.name,
+        typeName: resourceType.typeName
+      };
+    }
+    return {
+      name: '',
+      typeName: 'string'
+    };
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [useCustomTypeName, setUseCustomTypeName] = useState(() => {
+    if (resourceType) {
+      return !COMMON_TYPE_NAMES.includes(resourceType.typeName);
+    }
+    return false;
+  });
+
+  // Validation
+  const validateForm = useCallback((): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    } else if (existingNames.includes(formData.name) && formData.name !== resourceType?.name) {
+      newErrors.name = 'Name must be unique';
+    } else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.name)) {
+      newErrors.name = 'Name must start with a letter and contain only letters, numbers, and underscores';
+    }
+
+    if (!formData.typeName.trim()) {
+      newErrors.typeName = 'Type name is required';
+    } else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.typeName)) {
+      newErrors.typeName =
+        'Type name must start with a letter and contain only letters, numbers, and underscores';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [formData, existingNames, resourceType?.name]);
+
+  const handleSave = useCallback(() => {
+    if (!validateForm()) return;
+
+    const result: ResourceTypes.Config.IResourceTypeConfig = {
+      name: formData.name,
+      typeName: formData.typeName
+    };
+
+    onSave(result);
+  }, [formData, validateForm, onSave]);
+
+  const updateField = useCallback(
+    (field: keyof FormData, value: any) => {
+      setFormData((prev) => {
+        const updated = { ...prev, [field]: value };
+
+        // Auto-generate typeName from name for new resource types if using common types
+        if (field === 'name' && !resourceType && !useCustomTypeName) {
+          const cleanName = value.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');
+          const commonType = COMMON_TYPE_NAMES.find(
+            (type) => cleanName.includes(type) || type.includes(cleanName)
+          );
+          if (commonType) {
+            updated.typeName = commonType;
+          } else {
+            updated.typeName = cleanName || 'string';
+          }
+        }
+
+        return updated;
+      });
+
+      if (errors[field]) {
+        setErrors((prev) => ({ ...prev, [field]: '' }));
+      }
+    },
+    [errors, resourceType, useCustomTypeName]
+  );
+
+  const handleTypeNameModeChange = useCallback(
+    (useCustom: boolean) => {
+      setUseCustomTypeName(useCustom);
+      if (!useCustom && !resourceType) {
+        // Reset to a common type
+        updateField('typeName', 'string');
+      }
+    },
+    [resourceType, updateField]
+  );
+
+  const getTypeNameDescription = (typeName: string): string => {
+    switch (typeName) {
+      case 'string':
+        return 'Simple text content (default)';
+      case 'object':
+        return 'Complex structured data (JSON objects)';
+      case 'array':
+        return 'List of values or objects';
+      case 'number':
+        return 'Numeric values';
+      case 'boolean':
+        return 'True/false values';
+      case 'localizedString':
+        return 'Text content with localization support';
+      case 'config':
+        return 'Configuration settings and parameters';
+      case 'settings':
+        return 'User or application settings';
+      case 'permissions':
+        return 'Access control and permission data';
+      case 'template':
+        return 'Template content for rendering';
+      case 'content':
+        return 'Rich content (HTML, Markdown, etc.)';
+      case 'metadata':
+        return 'Descriptive information about resources';
+      default:
+        return 'Custom resource type';
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full h-full max-h-[calc(100vh-2rem)] flex flex-col">
+        {/* Fixed Header */}
+        <div className="flex items-center justify-between p-6 border-b flex-shrink-0">
+          <h3 className="text-lg font-medium text-gray-900">
+            {resourceType ? 'Edit Resource Type' : 'Add Resource Type'}
+          </h3>
+          <button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
+            <XMarkIcon className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Scrollable Content */}
+        <div className="p-6 space-y-6 overflow-y-auto flex-1 min-h-0">
+          {/* Basic Properties */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+            <input
+              type="text"
+              value={formData.name}
+              onChange={(e) => updateField('name', e.target.value)}
+              className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${
+                errors.name ? 'border-red-300' : 'border-gray-300'
+              }`}
+              placeholder="Enter resource type name (e.g., 'userSettings', 'errorMessages')"
+            />
+            {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
+            <p className="mt-1 text-xs text-gray-500">
+              A descriptive name for this type of resource. This will be used to categorize and identify
+              resources.
+            </p>
+          </div>
+
+          {/* Type Name Configuration */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-3">Type Name Configuration *</label>
+
+            <div className="space-y-3">
+              <div className="flex items-center">
+                <input
+                  type="radio"
+                  id="useCommonType"
+                  name="typeNameMode"
+                  checked={!useCustomTypeName}
+                  onChange={() => handleTypeNameModeChange(false)}
+                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
+                />
+                <label htmlFor="useCommonType" className="ml-2 text-sm text-gray-700">
+                  Use common type name
+                </label>
+              </div>
+
+              {!useCustomTypeName && (
+                <div className="ml-6">
+                  <select
+                    value={formData.typeName}
+                    onChange={(e) => updateField('typeName', e.target.value)}
+                    className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${
+                      errors.typeName ? 'border-red-300' : 'border-gray-300'
+                    }`}
+                  >
+                    {COMMON_TYPE_NAMES.map((type) => (
+                      <option key={type} value={type}>
+                        {type}
+                      </option>
+                    ))}
+                  </select>
+                  <p className="mt-1 text-xs text-gray-600">{getTypeNameDescription(formData.typeName)}</p>
+                </div>
+              )}
+
+              <div className="flex items-center">
+                <input
+                  type="radio"
+                  id="useCustomType"
+                  name="typeNameMode"
+                  checked={useCustomTypeName}
+                  onChange={() => handleTypeNameModeChange(true)}
+                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
+                />
+                <label htmlFor="useCustomType" className="ml-2 text-sm text-gray-700">
+                  Define custom type name
+                </label>
+              </div>
+
+              {useCustomTypeName && (
+                <div className="ml-6">
+                  <input
+                    type="text"
+                    value={formData.typeName}
+                    onChange={(e) => updateField('typeName', e.target.value)}
+                    className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${
+                      errors.typeName ? 'border-red-300' : 'border-gray-300'
+                    }`}
+                    placeholder="Enter custom type name"
+                  />
+                  <p className="mt-1 text-xs text-gray-500">
+                    Define a custom type name for specialized resource handling
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {errors.typeName && <p className="mt-1 text-sm text-red-600">{errors.typeName}</p>}
+          </div>
+
+          {/* Information Panel */}
+          <div className="p-4 bg-blue-50 rounded-lg">
+            <div className="flex items-start">
+              <InformationCircleIcon className="w-5 h-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0" />
+              <div className="text-sm text-blue-800">
+                <h4 className="font-medium mb-2">About Resource Types</h4>
+                <div className="space-y-2">
+                  <p>
+                    Resource types define how resources are categorized and processed in your application.
+                  </p>
+                  <ul className="list-disc list-inside space-y-1 ml-2">
+                    <li>
+                      <strong>Name:</strong> A human-readable identifier for grouping resources
+                    </li>
+                    <li>
+                      <strong>Type Name:</strong> Determines how the resource data is interpreted and
+                      validated
+                    </li>
+                    <li>Common types (string, object, array) provide built-in processing</li>
+                    <li>Custom types allow specialized handling for domain-specific data</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Preview */}
+          <div className="p-4 bg-gray-50 rounded-lg">
+            <h4 className="font-medium text-gray-900 mb-2">Preview</h4>
+            <div className="text-sm text-gray-600">
+              <p>
+                <span className="font-medium">Resource Type:</span> {formData.name || '(name not set)'}
+              </p>
+              <p>
+                <span className="font-medium">Type Name:</span> {formData.typeName}
+              </p>
+              <p>
+                <span className="font-medium">Description:</span> {getTypeNameDescription(formData.typeName)}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Fixed Footer */}
+        <div className="flex justify-end space-x-3 px-6 py-4 border-t bg-gray-50 flex-shrink-0">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            {resourceType ? 'Save Changes' : 'Add Resource Type'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/forms/index.ts

@@ -0,0 +1,11 @@
+export { QualifierTypeEditForm } from './QualifierTypeEditForm';
+export type { QualifierTypeEditFormProps } from './QualifierTypeEditForm';
+
+export { QualifierEditForm } from './QualifierEditForm';
+export type { QualifierEditFormProps } from './QualifierEditForm';
+
+export { ResourceTypeEditForm } from './ResourceTypeEditForm';
+export type { ResourceTypeEditFormProps } from './ResourceTypeEditForm';
+
+export { HierarchyEditor } from './HierarchyEditor';
+export type { HierarchyEditorProps } from './HierarchyEditor';