@fgv/ts-res-browser 5.0.0-2 → 5.0.0-21

package/src/components/tools/ZipLoader.tsx

@@ -1,302 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  ArchiveBoxIcon,
-  FolderOpenIcon,
-  ExclamationTriangleIcon,
-  CheckCircleIcon,
-  ArrowRightIcon
-} from '@heroicons/react/24/outline';
-import { Message } from '../../types/app';
-import { UseResourceManagerReturn } from '../../hooks/useResourceManager';
-import { BrowserZipFileTreeAccessors } from '../../utils/zip/browserZipFileTreeAccessors';
-import { FileTree } from '@fgv/ts-utils';
-
-interface ZipLoaderProps {
-  onMessage: (type: Message['type'], message: string) => void;
-  resourceManager: UseResourceManagerReturn;
-  zipFile?: string;
-  zipPath?: string;
-  onLoadComplete?: () => void;
-}
-
-interface ZipManifest {
-  timestamp: string;
-  input?: {
-    type: 'file' | 'directory';
-    originalPath: string;
-    archivePath: string;
-  };
-  config?: {
-    type: 'file';
-    originalPath: string;
-    archivePath: string;
-  };
-}
-
-const ZipLoader: React.FC<ZipLoaderProps> = ({
-  onMessage,
-  resourceManager,
-  zipFile,
-  zipPath,
-  onLoadComplete
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [loadingStep, setLoadingStep] = useState<string>('');
-  const [zipFound, setZipFound] = useState<boolean | null>(null);
-  const [manifest, setManifest] = useState<ZipManifest | null>(null);
-  const [autoloadAttempted, setAutoloadAttempted] = useState(false);
-
-  // Auto-load ZIP if we have a specific file reference
-  useEffect(() => {
-    if ((zipFile || zipPath) && !autoloadAttempted) {
-      setAutoloadAttempted(true);
-      handleLoadZip();
-    }
-  }, [zipFile, zipPath, autoloadAttempted]);
-
-  const handleLoadZip = async () => {
-    if (!zipFile && !zipPath) {
-      onMessage('error', 'No ZIP file specified');
-      return;
-    }
-
-    setIsLoading(true);
-    setLoadingStep('Opening file picker...');
-
-    try {
-      // Try to load the ZIP file using File System Access API
-      let fileHandle: FileSystemFileHandle | null = null;
-
-      if ('showOpenFilePicker' in window) {
-        try {
-          const [handle] = await (window as any).showOpenFilePicker({
-            types: [
-              {
-                description: 'ZIP Archives',
-                accept: { 'application/zip': ['.zip'] }
-              }
-            ],
-            startIn: 'downloads',
-            multiple: false
-          });
-          fileHandle = handle;
-          setZipFound(true);
-        } catch (error) {
-          if ((error as DOMException).name !== 'AbortError') {
-            onMessage('warning', 'Could not open file picker. Please select the ZIP file manually.');
-          }
-          setZipFound(false);
-          return;
-        }
-      } else {
-        onMessage('error', 'File System Access API not supported. Please use a modern browser.');
-        setZipFound(false);
-        return;
-      }
-
-      if (!fileHandle) {
-        setZipFound(false);
-        return;
-      }
-
-      setLoadingStep('Reading ZIP archive...');
-      const file = await fileHandle.getFile();
-
-      // Create ZIP FileTree
-      const zipAccessorsResult = await BrowserZipFileTreeAccessors.fromFile(file);
-      if (zipAccessorsResult.isFailure()) {
-        onMessage('error', `Failed to read ZIP: ${zipAccessorsResult.message}`);
-        return;
-      }
-
-      const zipAccessors = zipAccessorsResult.value;
-      const fileTree = FileTree.FileTree.create(zipAccessors);
-      if (fileTree.isFailure()) {
-        onMessage('error', `Failed to create file tree: ${fileTree.message}`);
-        return;
-      }
-
-      setLoadingStep('Reading manifest...');
-
-      // Try to read manifest
-      const manifestResult = fileTree.value.getFile('/manifest.json');
-      if (manifestResult.isSuccess()) {
-        const manifestContents = manifestResult.value.getContents();
-        if (manifestContents.isSuccess()) {
-          const parsedManifest = manifestContents.value as ZipManifest;
-          setManifest(parsedManifest);
-          onMessage('info', `ZIP created: ${new Date(parsedManifest.timestamp).toLocaleString()}`);
-        }
-      }
-
-      // Process resources from the ZIP
-      setLoadingStep('Processing resources...');
-
-      // Look for input directory/files
-      let inputProcessed = false;
-      if (manifest?.input) {
-        const inputPath = `/${manifest.input.archivePath}`;
-        const inputResult = fileTree.value.getItem(inputPath);
-
-        if (inputResult.isSuccess()) {
-          const inputItem = inputResult.value;
-
-          if (inputItem.type === 'directory') {
-            // Process directory
-            await resourceManager.actions.processFileTree(fileTree.value, inputPath);
-            inputProcessed = true;
-          } else if (inputItem.type === 'file') {
-            // Process single file
-            await resourceManager.actions.processFileTree(fileTree.value, inputPath);
-            inputProcessed = true;
-          }
-        }
-      }
-
-      // Fallback: look for common input patterns
-      if (!inputProcessed) {
-        const commonInputPaths = ['/input', '/resources', '/data'];
-        for (const inputPath of commonInputPaths) {
-          const inputResult = fileTree.value.getItem(inputPath);
-          if (inputResult.isSuccess() && inputResult.value.type === 'directory') {
-            await resourceManager.actions.processFileTree(fileTree.value, inputPath);
-            inputProcessed = true;
-            break;
-          }
-        }
-      }
-
-      // Load configuration if present
-      if (manifest?.config) {
-        const configPath = `/${manifest.config.archivePath}`;
-        const configResult = fileTree.value.getFile(configPath);
-
-        if (configResult.isSuccess()) {
-          const configContents = configResult.value.getContents();
-          if (configContents.isSuccess()) {
-            resourceManager.actions.applyConfiguration(configContents.value as any);
-            onMessage('success', 'Configuration loaded from ZIP');
-          }
-        }
-      }
-
-      if (inputProcessed) {
-        onMessage('success', 'Resources loaded successfully from ZIP!');
-        onLoadComplete?.();
-      } else {
-        onMessage('warning', 'ZIP loaded but no resources found. Check ZIP contents.');
-      }
-    } catch (error) {
-      onMessage('error', `Failed to load ZIP: ${error instanceof Error ? error.message : String(error)}`);
-      setZipFound(false);
-    } finally {
-      setIsLoading(false);
-      setLoadingStep('');
-    }
-  };
-
-  const expectedFileName = zipFile || 'ts-res-bundle-*.zip';
-
-  return (
-    <div className="p-6">
-      <div className="flex items-center space-x-3 mb-6">
-        <ArchiveBoxIcon className="h-8 w-8 text-purple-600" />
-        <h2 className="text-2xl font-bold text-gray-900">Load ZIP Archive</h2>
-      </div>
-
-      <div className="max-w-2xl">
-        {/* ZIP File Info */}
-        <div className="bg-blue-50 rounded-lg p-4 mb-6">
-          <div className="flex items-start space-x-3">
-            <ArchiveBoxIcon className="h-5 w-5 text-blue-600 mt-0.5" />
-            <div className="text-sm text-blue-800">
-              <p className="font-medium">ZIP Archive Ready</p>
-              {zipPath && (
-                <p className="mt-1">
-                  <span className="font-medium">Location:</span> {zipPath}
-                </p>
-              )}
-              {zipFile && (
-                <p className="mt-1">
-                  <span className="font-medium">File:</span> {zipFile}
-                </p>
-              )}
-              <p className="mt-2">
-                The CLI has created a ZIP archive containing your resources and configuration. Click below to
-                load it directly into the browser.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Load Button */}
-        <div className="space-y-4">
-          <button
-            onClick={handleLoadZip}
-            disabled={isLoading}
-            className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            {isLoading ? (
-              <>
-                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-                <span>{loadingStep || 'Loading...'}</span>
-              </>
-            ) : (
-              <>
-                <FolderOpenIcon className="w-5 h-5" />
-                <span>Load ZIP Archive</span>
-                <ArrowRightIcon className="w-5 h-5" />
-              </>
-            )}
-          </button>
-
-          {/* Instructions */}
-          <div className="bg-gray-50 rounded-lg p-4">
-            <h3 className="text-sm font-medium text-gray-900 mb-2">Instructions:</h3>
-            <ol className="text-sm text-gray-600 space-y-1 list-decimal list-inside">
-              <li>Click "Load ZIP Archive" above</li>
-              <li>
-                Select the ZIP file: <code className="bg-gray-200 px-1 rounded">{expectedFileName}</code>
-              </li>
-              <li>The browser will automatically process your resources and configuration</li>
-            </ol>
-          </div>
-
-          {/* Manifest Info */}
-          {manifest && (
-            <div className="bg-green-50 rounded-lg p-4">
-              <div className="flex items-start space-x-3">
-                <CheckCircleIcon className="h-5 w-5 text-green-600 mt-0.5" />
-                <div className="text-sm text-green-800">
-                  <p className="font-medium">ZIP Archive Contents</p>
-                  <div className="mt-2 space-y-1">
-                    {manifest.input && <p>📁 Resources: {manifest.input.originalPath}</p>}
-                    {manifest.config && <p>⚙️ Configuration: {manifest.config.originalPath}</p>}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Error State */}
-          {zipFound === false && (
-            <div className="bg-yellow-50 rounded-lg p-4">
-              <div className="flex items-start space-x-3">
-                <ExclamationTriangleIcon className="h-5 w-5 text-yellow-600 mt-0.5" />
-                <div className="text-sm text-yellow-800">
-                  <p className="font-medium">ZIP File Not Found</p>
-                  <p className="mt-1">
-                    Could not locate or open the ZIP file. Please make sure it exists in your Downloads folder
-                    and try again.
-                  </p>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ZipLoader;

package/src/hooks/useAppState.ts

@@ -1,111 +0,0 @@
-import { useState, useCallback } from 'react';
-import { AppState, AppActions, Tool, Message, FilterState } from '../types/app';
-
-export const useAppState = (): { state: AppState; actions: AppActions } => {
-  const [state, setState] = useState<AppState>({
-    selectedTool: 'import',
-    messages: [],
-    filterState: {
-      enabled: false,
-      values: {},
-      appliedValues: {},
-      hasPendingChanges: false,
-      reduceQualifiers: false
-    }
-  });
-
-  const setSelectedTool = useCallback((tool: Tool, force?: boolean) => {
-    setState((prev) => ({ ...prev, selectedTool: tool }));
-  }, []);
-
-  // Alias for setSelectedTool to match the interface
-  const setActiveTool = setSelectedTool;
-
-  const addMessage = useCallback((type: Message['type'], message: string) => {
-    const newMessage: Message = {
-      id: Date.now().toString(),
-      type,
-      message,
-      timestamp: new Date()
-    };
-    setState((prev) => ({
-      ...prev,
-      messages: [...prev.messages, newMessage]
-    }));
-  }, []);
-
-  const clearMessages = useCallback(() => {
-    setState((prev) => ({ ...prev, messages: [] }));
-  }, []);
-
-  const updateFilterEnabled = useCallback((enabled: boolean) => {
-    setState((prev) => ({
-      ...prev,
-      filterState: {
-        ...prev.filterState,
-        enabled,
-        // Reset applied values when disabling
-        appliedValues: enabled ? prev.filterState.appliedValues : {},
-        hasPendingChanges: false
-      }
-    }));
-  }, []);
-
-  const updateFilterValues = useCallback((values: Record<string, string>) => {
-    setState((prev) => ({
-      ...prev,
-      filterState: {
-        ...prev.filterState,
-        values,
-        hasPendingChanges: JSON.stringify(values) !== JSON.stringify(prev.filterState.appliedValues)
-      }
-    }));
-  }, []);
-
-  const applyFilterValues = useCallback(() => {
-    setState((prev) => ({
-      ...prev,
-      filterState: {
-        ...prev.filterState,
-        appliedValues: { ...prev.filterState.values },
-        hasPendingChanges: false
-      }
-    }));
-  }, []);
-
-  const resetFilterValues = useCallback(() => {
-    setState((prev) => ({
-      ...prev,
-      filterState: {
-        ...prev.filterState,
-        values: {},
-        appliedValues: {},
-        hasPendingChanges: false
-      }
-    }));
-  }, []);
-
-  const updateReduceQualifiers = useCallback((reduceQualifiers: boolean) => {
-    setState((prev) => ({
-      ...prev,
-      filterState: {
-        ...prev.filterState,
-        reduceQualifiers
-      }
-    }));
-  }, []);
-
-  const actions: AppActions = {
-    setSelectedTool,
-    setActiveTool,
-    addMessage,
-    clearMessages,
-    updateFilterEnabled,
-    updateFilterValues,
-    applyFilterValues,
-    resetFilterValues,
-    updateReduceQualifiers
-  };
-
-  return { state, actions };
-};

package/src/hooks/useFileImport.ts

@@ -1,86 +0,0 @@
-import { useState, useCallback } from 'react';
-import { Result } from '@fgv/ts-utils';
-import { ImportedDirectory, ImportedFile } from '../utils/fileImport';
-
-export interface FileImportState {
-  isLoading: boolean;
-  importedDirectory: ImportedDirectory | null;
-  importedFiles: ImportedFile[];
-  error: string | null;
-  hasImportedData: boolean;
-}
-
-export interface UseFileImportReturn {
-  state: FileImportState;
-  actions: {
-    handleDirectoryImport: (directory: ImportedDirectory) => void;
-    handleFilesImport: (files: ImportedFile[]) => void;
-    handleError: (error: string) => void;
-    clearError: () => void;
-    reset: () => void;
-  };
-}
-
-const initialState: FileImportState = {
-  isLoading: false,
-  importedDirectory: null,
-  importedFiles: [],
-  error: null,
-  hasImportedData: false
-};
-
-export const useFileImport = (): UseFileImportReturn => {
-  const [state, setState] = useState<FileImportState>(initialState);
-
-  const handleDirectoryImport = useCallback((directory: ImportedDirectory) => {
-    setState((prev) => ({
-      ...prev,
-      importedDirectory: directory,
-      importedFiles: [], // Clear individual files when directory is imported
-      error: null,
-      hasImportedData: true
-    }));
-  }, []);
-
-  const handleFilesImport = useCallback((files: ImportedFile[]) => {
-    setState((prev) => ({
-      ...prev,
-      importedFiles: files,
-      importedDirectory: null, // Clear directory when individual files are imported
-      error: null,
-      hasImportedData: true
-    }));
-  }, []);
-
-  const handleError = useCallback((error: string) => {
-    setState((prev) => ({
-      ...prev,
-      error,
-      isLoading: false
-    }));
-  }, []);
-
-  const clearError = useCallback(() => {
-    setState((prev) => ({
-      ...prev,
-      error: null
-    }));
-  }, []);
-
-  const reset = useCallback(() => {
-    setState(initialState);
-  }, []);
-
-  return {
-    state,
-    actions: {
-      handleDirectoryImport,
-      handleFilesImport,
-      handleError,
-      clearError,
-      reset
-    }
-  };
-};
-
-export default useFileImport;

package/src/hooks/useNavigationWarning.ts

@@ -1,67 +0,0 @@
-import { useState, useCallback } from 'react';
-import { Tool } from '../types/app';
-
-export interface NavigationWarningState {
-  isWarningOpen: boolean;
-  pendingTool: Tool | null;
-  hasUnsavedChanges: boolean;
-}
-
-export interface NavigationWarningActions {
-  setHasUnsavedChanges: (hasChanges: boolean) => void;
-  showWarning: (pendingTool: Tool) => void;
-  hideWarning: () => void;
-  confirmNavigation: () => Tool | null;
-}
-
-export const useNavigationWarning = (): {
-  state: NavigationWarningState;
-  actions: NavigationWarningActions;
-} => {
-  const [state, setState] = useState<NavigationWarningState>({
-    isWarningOpen: false,
-    pendingTool: null,
-    hasUnsavedChanges: false
-  });
-
-  const setHasUnsavedChanges = useCallback((hasChanges: boolean) => {
-    setState((prev) => ({ ...prev, hasUnsavedChanges: hasChanges }));
-  }, []);
-
-  const showWarning = useCallback((pendingTool: Tool) => {
-    setState((prev) => ({
-      ...prev,
-      isWarningOpen: true,
-      pendingTool
-    }));
-  }, []);
-
-  const hideWarning = useCallback(() => {
-    setState((prev) => ({
-      ...prev,
-      isWarningOpen: false,
-      pendingTool: null
-    }));
-  }, []);
-
-  const confirmNavigation = useCallback(() => {
-    const toolToNavigateTo = state.pendingTool;
-    setState((prev) => ({
-      ...prev,
-      isWarningOpen: false,
-      pendingTool: null,
-      hasUnsavedChanges: false
-    }));
-    return toolToNavigateTo;
-  }, [state.pendingTool]);
-
-  return {
-    state,
-    actions: {
-      setHasUnsavedChanges,
-      showWarning,
-      hideWarning,
-      confirmNavigation
-    }
-  };
-};