@fgv/ts-res-browser 1.0.0

package/src/hooks/useNavigationWarning.ts

@@ -0,0 +1,67 @@
+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
+    }
+  };
+};

package/src/hooks/useResourceManager.ts

@@ -0,0 +1,244 @@
+import { useState, useCallback } from 'react';
+import { Result, succeed, fail } from '@fgv/ts-utils';
+import {
+  ProcessedResources,
+  processImportedDirectory,
+  processImportedFiles,
+  createSimpleContext
+} from '../utils/tsResIntegration';
+import { ImportedDirectory, ImportedFile } from '../utils/fileImport';
+import { Config } from '@fgv/ts-res';
+
+export interface ResourceManagerState {
+  isProcessing: boolean;
+  processedResources: ProcessedResources | null;
+  error: string | null;
+  hasProcessedData: boolean;
+  activeConfiguration: Config.Model.ISystemConfiguration | null;
+}
+
+export interface UseResourceManagerReturn {
+  state: ResourceManagerState;
+  actions: {
+    processDirectory: (directory: ImportedDirectory) => Promise<void>;
+    processFiles: (files: ImportedFile[]) => Promise<void>;
+    clearError: () => void;
+    reset: () => void;
+    resolveResource: (resourceId: string, context?: Record<string, string>) => Promise<Result<any>>;
+    applyConfiguration: (config: Config.Model.ISystemConfiguration) => void;
+  };
+}
+
+const initialState: ResourceManagerState = {
+  isProcessing: false,
+  processedResources: null,
+  error: null,
+  hasProcessedData: false,
+  activeConfiguration: null
+};
+
+export const useResourceManager = (): UseResourceManagerReturn => {
+  const [state, setState] = useState<ResourceManagerState>(initialState);
+
+  const processDirectory = useCallback(
+    async (directory: ImportedDirectory) => {
+      console.log('=== STARTING DIRECTORY PROCESSING ===');
+      console.log('Directory:', directory.name, 'Files:', directory.files?.length || 0);
+
+      setState((prev) => ({ ...prev, isProcessing: true, error: null }));
+
+      try {
+        console.log('1. About to call processImportedDirectory...');
+
+        // Use setTimeout to make this async and allow UI updates
+        await new Promise<void>((resolve, reject) => {
+          setTimeout(() => {
+            try {
+              console.log('2. Inside setTimeout, calling processImportedDirectory...');
+              const result = processImportedDirectory(directory, state.activeConfiguration || undefined);
+              console.log(
+                '3. processImportedDirectory returned:',
+                result.isSuccess() ? 'SUCCESS' : 'FAILURE'
+              );
+
+              if (result.isSuccess()) {
+                console.log('4. Processing succeeded, setting state...');
+                console.log('   Resource count:', result.value.summary.resourceIds.length);
+                console.log('   Resource IDs:', result.value.summary.resourceIds);
+
+                setState((prev) => ({
+                  ...prev,
+                  isProcessing: false,
+                  processedResources: result.value,
+                  hasProcessedData: true
+                }));
+                console.log('5. State updated successfully');
+                resolve();
+              } else {
+                console.error('4. Processing failed with error:', result.message);
+                setState((prev) => ({
+                  ...prev,
+                  isProcessing: false,
+                  error: result.message
+                }));
+                reject(new Error(result.message));
+              }
+            } catch (innerError) {
+              console.error('4. Exception in setTimeout:', innerError);
+              setState((prev) => ({
+                ...prev,
+                isProcessing: false,
+                error: `Processing exception: ${
+                  innerError instanceof Error ? innerError.message : String(innerError)
+                }`
+              }));
+              reject(innerError);
+            }
+          }, 100); // Small delay to allow UI update
+        });
+
+        console.log('6. processDirectory completed successfully');
+      } catch (error) {
+        console.error('=== DIRECTORY PROCESSING ERROR ===');
+        console.error('Error:', error);
+        setState((prev) => ({
+          ...prev,
+          isProcessing: false,
+          error: `Unexpected error: ${error instanceof Error ? error.message : String(error)}`
+        }));
+      }
+    },
+    [state.activeConfiguration]
+  );
+
+  const processFiles = useCallback(
+    async (files: ImportedFile[]) => {
+      console.log('=== STARTING FILES PROCESSING ===');
+      console.log('Files count:', files.length);
+      console.log(
+        'Files:',
+        files.map((f) => f.name)
+      );
+
+      setState((prev) => ({ ...prev, isProcessing: true, error: null }));
+
+      try {
+        console.log('1. About to call processImportedFiles...');
+
+        // Use setTimeout to make this async and allow UI updates
+        await new Promise<void>((resolve, reject) => {
+          setTimeout(() => {
+            try {
+              console.log('2. Inside setTimeout, calling processImportedFiles...');
+              const result = processImportedFiles(files, state.activeConfiguration || undefined);
+              console.log('3. processImportedFiles returned:', result.isSuccess() ? 'SUCCESS' : 'FAILURE');
+
+              if (result.isSuccess()) {
+                console.log('4. Processing succeeded, setting state...');
+                console.log('   Resource count:', result.value.summary.resourceIds.length);
+                console.log('   Resource IDs:', result.value.summary.resourceIds);
+
+                setState((prev) => ({
+                  ...prev,
+                  isProcessing: false,
+                  processedResources: result.value,
+                  hasProcessedData: true
+                }));
+                console.log('5. State updated successfully');
+                resolve();
+              } else {
+                console.error('4. Processing failed with error:', result.message);
+                setState((prev) => ({
+                  ...prev,
+                  isProcessing: false,
+                  error: result.message
+                }));
+                reject(new Error(result.message));
+              }
+            } catch (innerError) {
+              console.error('4. Exception in setTimeout:', innerError);
+              setState((prev) => ({
+                ...prev,
+                isProcessing: false,
+                error: `Processing exception: ${
+                  innerError instanceof Error ? innerError.message : String(innerError)
+                }`
+              }));
+              reject(innerError);
+            }
+          }, 100); // Small delay to allow UI update
+        });
+
+        console.log('6. processFiles completed successfully');
+      } catch (error) {
+        console.error('=== FILES PROCESSING ERROR ===');
+        console.error('Error:', error);
+        setState((prev) => ({
+          ...prev,
+          isProcessing: false,
+          error: `Unexpected error: ${error instanceof Error ? error.message : String(error)}`
+        }));
+      }
+    },
+    [state.activeConfiguration]
+  );
+
+  const clearError = useCallback(() => {
+    setState((prev) => ({ ...prev, error: null }));
+  }, []);
+
+  const reset = useCallback(() => {
+    console.log('Resetting resource manager state');
+    setState(initialState);
+  }, []);
+
+  const resolveResource = useCallback(
+    async (resourceId: string, context?: Record<string, string>): Promise<Result<any>> => {
+      if (!state.processedResources?.resolver) {
+        return fail('No resolver available');
+      }
+
+      try {
+        const contextProvider = context
+          ? createSimpleContext(context, state.processedResources.system)
+          : null;
+
+        if (contextProvider?.isFailure()) {
+          return fail(`Failed to create context: ${contextProvider.error}`);
+        }
+
+        const resolveContext = contextProvider?.value || undefined;
+        return await state.processedResources.resolver.resolve(resourceId, resolveContext);
+      } catch (error) {
+        return fail(`Failed to resolve resource: ${error instanceof Error ? error.message : String(error)}`);
+      }
+    },
+    [state.processedResources]
+  );
+
+  const applyConfiguration = useCallback((config: Config.Model.ISystemConfiguration) => {
+    console.log('Applying configuration:', config.name || 'Unnamed configuration');
+    setState((prev) => ({
+      ...prev,
+      activeConfiguration: config,
+      // Clear processed resources when configuration changes
+      processedResources: null,
+      hasProcessedData: false,
+      error: null
+    }));
+  }, []);
+
+  return {
+    state,
+    actions: {
+      processDirectory,
+      processFiles,
+      clearError,
+      reset,
+      resolveResource,
+      applyConfiguration
+    }
+  };
+};
+
+export default useResourceManager;

package/src/index.css

@@ -0,0 +1,38 @@
+@import 'tailwindcss';
+
+/* Custom base styles */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/* Custom component styles */
+.res-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 #f1f5f9;
+}
+
+.res-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.res-scrollbar::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
+.res-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #cbd5e1;
+  border-radius: 4px;
+}
+
+.res-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #94a3b8;
+}

package/src/main.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+// Polyfills for broader browser support
+import 'core-js/stable';
+import 'whatwg-fetch';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/types/app.ts

@@ -0,0 +1,62 @@
+// Application state types
+export interface Message {
+  id: string;
+  type: 'info' | 'warning' | 'error' | 'success';
+  message: string;
+  timestamp: Date;
+}
+
+export type Tool = 'import' | 'source' | 'filter' | 'compiled' | 'resolution' | 'configuration';
+
+export interface FilterState {
+  enabled: boolean;
+  values: Record<string, string>;
+  appliedValues: Record<string, string>;
+  hasPendingChanges: boolean;
+  reduceQualifiers: boolean;
+}
+
+export interface AppState {
+  selectedTool: Tool;
+  messages: Message[];
+  filterState: FilterState;
+}
+
+export interface AppActions {
+  setSelectedTool: (tool: Tool, force?: boolean) => void;
+  addMessage: (type: Message['type'], message: string) => void;
+  clearMessages: () => void;
+  updateFilterEnabled: (enabled: boolean) => void;
+  updateFilterValues: (values: Record<string, string>) => void;
+  applyFilterValues: () => void;
+  resetFilterValues: () => void;
+  updateReduceQualifiers: (reduceQualifiers: boolean) => void;
+}
+
+// Tool-specific types
+export interface SourceBrowserState {
+  selectedResource: string | null;
+  resources: any[]; // Will be typed with ts-res types
+}
+
+export interface CompiledBrowserState {
+  selectedResource: string | null;
+  compiledResources: any[]; // Will be typed with ts-res types
+}
+
+export interface ResolutionViewerState {
+  selectedResource: string | null;
+  qualifiers: Record<string, any>;
+  candidates: any[]; // Will be typed with ts-res types
+  viewMode: 'best' | 'all';
+}
+
+// File import types
+export interface FileImportOptions {
+  types: Array<{
+    description: string;
+    accept: Record<string, string[]>;
+  }>;
+  multiple: boolean;
+  excludeAcceptAllOption: boolean;
+}

package/src/types/fileSystemAccess.d.ts

@@ -0,0 +1,94 @@
+// Type declarations for File System Access API
+// Based on https://wicg.github.io/file-system-access/
+
+declare global {
+  interface FileSystemHandle {
+    readonly kind: 'file' | 'directory';
+    readonly name: string;
+    isSameEntry(other: FileSystemHandle): Promise<boolean>;
+    queryPermission(descriptor?: FileSystemHandlePermissionDescriptor): Promise<PermissionState>;
+    requestPermission(descriptor?: FileSystemHandlePermissionDescriptor): Promise<PermissionState>;
+  }
+
+  interface FileSystemFileHandle extends FileSystemHandle {
+    readonly kind: 'file';
+    getFile(): Promise<File>;
+    createWritable(options?: FileSystemCreateWritableOptions): Promise<FileSystemWritableFileStream>;
+  }
+
+  interface FileSystemDirectoryHandle extends FileSystemHandle {
+    readonly kind: 'directory';
+    getDirectoryHandle(
+      name: string,
+      options?: FileSystemGetDirectoryOptions
+    ): Promise<FileSystemDirectoryHandle>;
+    getFileHandle(name: string, options?: FileSystemGetFileOptions): Promise<FileSystemFileHandle>;
+    removeEntry(name: string, options?: FileSystemRemoveOptions): Promise<void>;
+    resolve(possibleDescendant: FileSystemHandle): Promise<string[] | null>;
+    keys(): AsyncIterableIterator<string>;
+    values(): AsyncIterableIterator<FileSystemHandle>;
+    entries(): AsyncIterableIterator<[string, FileSystemHandle]>;
+    [Symbol.asyncIterator](): AsyncIterableIterator<[string, FileSystemHandle]>;
+  }
+
+  interface FileSystemHandlePermissionDescriptor {
+    mode?: 'read' | 'readwrite';
+  }
+
+  interface FileSystemCreateWritableOptions {
+    keepExistingData?: boolean;
+  }
+
+  interface FileSystemGetDirectoryOptions {
+    create?: boolean;
+  }
+
+  interface FileSystemGetFileOptions {
+    create?: boolean;
+  }
+
+  interface FileSystemRemoveOptions {
+    recursive?: boolean;
+  }
+
+  interface FileSystemWritableFileStream extends WritableStream {
+    write(data: BufferSource | Blob | string): Promise<void>;
+    seek(position: number): Promise<void>;
+    truncate(size: number): Promise<void>;
+  }
+
+  interface ShowDirectoryPickerOptions {
+    id?: string;
+    mode?: 'read' | 'readwrite';
+    startIn?: FileSystemHandle | WellKnownDirectory;
+  }
+
+  interface ShowOpenFilePickerOptions {
+    multiple?: boolean;
+    excludeAcceptAllOption?: boolean;
+    types?: FilePickerAcceptType[];
+    startIn?: FileSystemHandle | WellKnownDirectory;
+  }
+
+  interface ShowSaveFilePickerOptions {
+    excludeAcceptAllOption?: boolean;
+    types?: FilePickerAcceptType[];
+    startIn?: FileSystemHandle | WellKnownDirectory;
+    suggestedName?: string;
+  }
+
+  interface FilePickerAcceptType {
+    description: string;
+    accept: Record<string, string[]>;
+  }
+
+  type WellKnownDirectory = 'desktop' | 'documents' | 'downloads' | 'music' | 'pictures' | 'videos';
+
+  interface Window {
+    showDirectoryPicker(options?: ShowDirectoryPickerOptions): Promise<FileSystemDirectoryHandle>;
+    showOpenFilePicker(options?: ShowOpenFilePickerOptions): Promise<FileSystemFileHandle[]>;
+    showSaveFilePicker(options?: ShowSaveFilePickerOptions): Promise<FileSystemFileHandle>;
+  }
+}
+
+export {};