superleap-code-editor/TYPES.md

A flexible, reusable code editor component with multiple file handling modes

# TypeScript Types Reference

This document shows how to import and use all TypeScript types available in the `superleap-code-editor` package.

## Importing Types

### Option 1: Import from main package
```typescript
import type { 
  CodeEditorConfig, 
  FileNode, 
  FileProvider,
  UseFileManagerReturn 
} from 'superleap-code-editor';
```

### Option 2: Import comprehensive types file
```typescript
import type { 
  CodeEditorProps,
  FileExplorerProps,
  WorkflowConfig,
  FormConfig,
  URLConfig,
  SupportedLanguage,
  FileExtension,
  CodeEditorError
} from 'superleap-code-editor/types';
```

## Available Types

### Core Types
- `FileNode` - Represents a file or folder
- `FileProvider` - Interface for file data providers  
- `CodeEditorConfig` - Configuration for the code editor
- `UseFileManagerReturn` - Return type from useFileManager hook

### Component Props
- `CodeEditorProps` - Props for CodeEditor component
- `FileExplorerProps` - Props for FileExplorer component
- `EditorLayoutProps` - Props for EditorLayout component
- `CodeEditorWrapperProps` - Props for CodeEditorWrapper component

### Configuration Types
- `WorkflowConfig` - Configuration for workflow-based files
- `FormConfig` - Configuration for form-based files
- `URLConfig` - Configuration for URL-based files
- `EnhancedCodeEditorConfig` - Enhanced configuration with settings

### Hook Types
- `UseFileManagerOptions` - Options for useFileManager hook
- `FileManagerState` - State from useFileManager hook
- `FileManagerActions` - Actions from useFileManager hook

### Utility Types
- `SupportedLanguage` - Supported programming languages
- `FileExtension` - Supported file extensions
- `FileType` - File or folder type
- `CodeEditorTheme` - Theme configuration

### Error Classes
- `CodeEditorError` - Base error class
- `FileProviderError` - File provider errors
- `FileNotFoundError` - File not found errors

### Constants
- `SUPPORTED_LANGUAGES` - Array of supported languages
- `DEFAULT_THEME` - Default theme configuration
- `DEFAULT_SETTINGS` - Default editor settings

## Usage Examples

### Basic Component Usage
```typescript
import { CodeEditorWrapper } from 'superleap-code-editor';
import type { CodeEditorConfig } from 'superleap-code-editor';

const config: CodeEditorConfig = {
  formConfig: {
    codeContent: 'console.log("Hello World!");',
    fileName: 'example.js',
    language: 'javascript'
  }
};

function App() {
  return <CodeEditorWrapper config={config} />;
}
```

### Advanced Type Usage
```typescript
import type { 
  CodeEditorProps, 
  SupportedLanguage,
  WorkflowConfig 
} from 'superleap-code-editor/types';

const codeEditorProps: CodeEditorProps = {
  value: 'const x = 1;',
  onChange: (value) => console.log(value),
  language: 'typescript' as SupportedLanguage,
  readOnly: false
};

const workflowConfig: WorkflowConfig = {
  functionId: 'func-123',
  version: '1.0.0',
  versionList: ['1.0.0', '1.1.0'],
  fetchFunction: async (id, version) => {
    // Your fetch logic
    return 'function example() { return "Hello"; }';
  },
  fetchVersionList: async (id) => {
    // Your version fetch logic
    return ['1.0.0', '1.1.0'];
  }
};
```

### Hook Usage with Types
```typescript
import { useFileManager } from 'superleap-code-editor';
import type { UseFileManagerReturn } from 'superleap-code-editor';

function MyComponent() {
  const fileManager: UseFileManagerReturn = useFileManager(fileProvider);
  
  return (
    <div>
      {fileManager.loading && <div>Loading...</div>}
      {fileManager.error && <div>Error: {fileManager.error}</div>}
      {/* ... */}
    </div>
  );
}
```

This comprehensive type system ensures full TypeScript support and IntelliSense for all package features!