superleap-code-editor 1.0.0

package/README.md

@@ -0,0 +1,356 @@
+# @superleap/code-editor
+
+A flexible, reusable React code editor component with multiple file handling modes, built with Monaco Editor and Ant Design.
+
+## Features
+
+- 🚀 **Multiple File Sources**: Support for workflow data, form content, and URL-based files
+- 📁 **File Explorer**: Tree-based file navigation with Ant Design components
+- 🎨 **Monaco Editor**: Full-featured code editor with syntax highlighting
+- 🔧 **Resizable Panels**: Splitter-based layout with collapsible panels
+- ⌨️ **Keyboard Shortcuts**: VS Code-like shortcuts (Ctrl+B to toggle panels)
+- 🎯 **TypeScript**: Full TypeScript support with type definitions
+- 📦 **Tree Shakeable**: Optimized bundle size with tree shaking support
+
+## Installation
+
+```bash
+npm install @superleap/code-editor
+# or
+yarn add @superleap/code-editor
+# or
+pnpm add @superleap/code-editor
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install react react-dom antd @monaco-editor/react @tabler/icons-react
+```
+
+## Quick Start
+
+### Basic Usage
+
+```tsx
+import { CodeEditorWrapper } from '@superleap/code-editor';
+import '@superleap/code-editor/styles';
+
+function App() {
+  const config = {
+    formConfig: {
+      codeContent: 'console.log("Hello World!");',
+      fileName: 'example.js',
+      language: 'javascript'
+    }
+  };
+
+  return <CodeEditorWrapper config={config} />;
+}
+```
+
+## File Handling Modes
+
+### 1. Workflow Mode
+
+For code that's stored with function IDs and versions:
+
+```tsx
+import { WorkflowCodeEditor } from '@superleap/code-editor';
+
+function App() {
+  const fetchFunction = async (functionId: string, version: string) => {
+    const response = await fetch(`/api/functions/${functionId}/${version}`);
+    return response.text();
+  };
+
+  const fetchVersionList = async (functionId: string) => {
+    const response = await fetch(`/api/functions/${functionId}/versions`);
+    return response.json();
+  };
+
+  return (
+    <WorkflowCodeEditor
+      functionId="func-123"
+      version="2.1.0"
+      versionList={['1.0.0', '2.0.0', '2.1.0']}
+      fetchFunction={fetchFunction}
+      fetchVersionList={fetchVersionList}
+    />
+  );
+}
+```
+
+### 2. Form Mode
+
+For code stored as strings in form data:
+
+```tsx
+import { FormCodeEditor } from '@superleap/code-editor';
+
+function App() {
+  const [code, setCode] = useState('function example() { return "Hello"; }');
+
+  return (
+    <FormCodeEditor
+      codeContent={code}
+      fileName="script.js"
+      language="javascript"
+      readOnly={false}
+    />
+  );
+}
+```
+
+### 3. URL Mode
+
+For files accessible via URLs:
+
+```tsx
+import { URLCodeEditor } from '@superleap/code-editor';
+
+function App() {
+  const fileUrls = [
+    {
+      url: 'https://example.com/script.js',
+      name: 'script.js',
+      type: 'js'
+    },
+    {
+      url: 'https://example.com/style.css',
+      name: 'style.css',
+      type: 'css'
+    }
+  ];
+
+  return <URLCodeEditor fileUrls={fileUrls} />;
+}
+```
+
+## Advanced Usage
+
+### Custom Configuration
+
+```tsx
+import { CodeEditorWrapper } from '@superleap/code-editor';
+import type { CodeEditorConfig } from '@superleap/code-editor';
+
+function App() {
+  const config: CodeEditorConfig = {
+    workflowConfig: {
+      functionId: 'my-function',
+      version: '1.0.0',
+      versionList: ['1.0.0', '1.1.0'],
+      fetchFunction: async (id, version) => {
+        // Your fetch logic
+        return 'function myFunction() { return "Hello"; }';
+      },
+      fetchVersionList: async (id) => {
+        // Your version fetch logic
+        return ['1.0.0', '1.1.0'];
+      }
+    },
+    settings: {
+      readOnly: false,
+      autoSave: true,
+      theme: 'vs-light',
+      fontSize: 14
+    }
+  };
+
+  return <CodeEditorWrapper config={config} />;
+}
+```
+
+### Using Individual Components
+
+```tsx
+import { 
+  FileExplorer, 
+  CodeEditor, 
+  EditorLayout,
+  useFileManager,
+  createFileProvider 
+} from '@superleap/code-editor';
+
+function CustomEditor() {
+  const fileProvider = useMemo(() => createFileProvider(config), [config]);
+  const { files, activeFile, fileContent, setActiveFile, updateFileContent } = useFileManager(fileProvider);
+
+  return (
+    <EditorLayout
+      leftPanel={
+        <FileExplorer
+          files={files}
+          activeFile={activeFile}
+          onFileSelect={setActiveFile}
+        />
+      }
+      editor={
+        <CodeEditor
+          value={fileContent}
+          onChange={updateFileContent}
+          language="javascript"
+        />
+      }
+      activePanel="explorer"
+      setActivePanel={() => {}}
+    />
+  );
+}
+```
+
+## API Reference
+
+### Components
+
+#### `CodeEditorWrapper`
+
+Main wrapper component that handles all file operations.
+
+**Props:**
+- `config: CodeEditorConfig` - Configuration object
+- `rightPanel?: React.ReactNode` - Optional right panel content
+
+#### `WorkflowCodeEditor`
+
+Pre-configured component for workflow-based files.
+
+**Props:**
+- `functionId: string` - Function identifier
+- `version: string` - Current version
+- `versionList: string[]` - Available versions
+- `fetchFunction: (id: string, version: string) => Promise<string>` - Function to fetch code
+- `fetchVersionList: (id: string) => Promise<string[]>` - Function to fetch versions
+
+#### `FormCodeEditor`
+
+Pre-configured component for form-based files.
+
+**Props:**
+- `codeContent: string` - Code content
+- `fileName?: string` - File name (default: 'code.js')
+- `language?: string` - Language for syntax highlighting (default: 'javascript')
+- `readOnly?: boolean` - Read-only mode (default: false)
+
+#### `URLCodeEditor`
+
+Pre-configured component for URL-based files.
+
+**Props:**
+- `fileUrls: Array<{url: string, name: string, type: string}>` - Array of file URLs
+- `rightPanel?: React.ReactNode` - Optional right panel
+
+### Hooks
+
+#### `useFileManager`
+
+Hook for managing file operations.
+
+**Returns:**
+- `files: FileNode[]` - File tree
+- `activeFile: string | null` - Currently active file ID
+- `fileContent: string` - Content of active file
+- `loading: boolean` - Loading state
+- `error: string | null` - Error state
+- `setActiveFile: (fileId: string) => void` - Set active file
+- `updateFileContent: (content: string) => void` - Update file content
+- `refreshFiles: () => void` - Refresh file list
+- `getFileById: (fileId: string) => FileNode | null` - Get file by ID
+
+### Types
+
+#### `CodeEditorConfig`
+
+```typescript
+interface CodeEditorConfig {
+  workflowConfig?: {
+    functionId: string;
+    version: string;
+    versionList: string[];
+    fetchFunction: (functionId: string, version: string) => Promise<string>;
+    fetchVersionList: (functionId: string) => Promise<string[]>;
+  };
+  formConfig?: {
+    codeContent: string;
+    fileName?: string;
+    language?: string;
+  };
+  urlConfig?: {
+    fileUrls: Array<{
+      url: string;
+      name: string;
+      type: 'js' | 'css' | 'html' | 'json' | 'ts' | 'jsx' | 'tsx';
+    }>;
+  };
+  settings?: {
+    readOnly?: boolean;
+    autoSave?: boolean;
+    theme?: string;
+    fontSize?: number;
+  };
+}
+```
+
+#### `FileNode`
+
+```typescript
+interface FileNode {
+  id: string;
+  name: string;
+  type: 'file' | 'folder';
+  path: string;
+  content?: string;
+  children?: FileNode[];
+  metadata?: {
+    size?: number;
+    lastModified?: Date;
+    language?: string;
+    url?: string;
+  };
+}
+```
+
+## Keyboard Shortcuts
+
+- `Ctrl + B` - Toggle left panel visibility
+- `Ctrl + Shift + B` - Toggle right panel visibility
+
+## Styling
+
+The package includes built-in styles. Import them in your app:
+
+```tsx
+import '@superleap/code-editor/styles';
+```
+
+For custom styling, you can override the CSS classes or use Ant Design's theme customization.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server (demo)
+npm run dev
+
+# Build library
+npm run build
+
+# Build demo
+npm run build:demo
+
+# Lint
+npm run lint
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/components/codeEditorWrapper.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { CodeEditorConfig } from "../types/fileTypes";
+interface CodeEditorWrapperProps {
+    config: CodeEditorConfig;
+    rightPanel?: React.ReactNode;
+}
+export declare const CodeEditorWrapper: React.FC<CodeEditorWrapperProps>;
+export declare const WorkflowCodeEditor: React.FC<{
+    functionId: string;
+    version: string;
+    versionList: string[];
+    fetchFunction: (functionId: string, version: string) => Promise<string>;
+    fetchVersionList: (functionId: string) => Promise<string[]>;
+}>;
+export declare const FormCodeEditor: React.FC<{
+    codeContent: string;
+    fileName?: string;
+    language?: string;
+    readOnly?: boolean;
+}>;
+export declare const URLCodeEditor: React.FC<{
+    fileUrls: Array<{
+        url: string;
+        name: string;
+        type: "js" | "css" | "html" | "json" | "ts" | "jsx" | "tsx";
+    }>;
+    rightPanel?: React.ReactNode;
+}>;
+export {};
+//# sourceMappingURL=codeEditorWrapper.d.ts.map

package/dist/components/codeEditorWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeEditorWrapper.d.ts","sourceRoot":"","sources":["../../src/components/codeEditorWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAK3D,UAAU,sBAAsB;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwD9D,CAAC;AAKF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACxE,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;CAC7D,CAkBA,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAkBA,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;KAC7D,CAAC,CAAC;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAQA,CAAC"}

package/dist/components/editor/codeEditor.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface CodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    language?: string;
+    filename?: string;
+    readOnly?: boolean;
+    loading?: boolean;
+}
+export declare const CodeEditor: React.FC<CodeEditorProps>;
+export {};
+//# sourceMappingURL=codeEditor.d.ts.map

package/dist/components/editor/codeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/codeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqChD,CAAC"}

package/dist/components/layout/editorLayout.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface EditorLayoutProps {
+    leftPanel: React.ReactNode;
+    editor: React.ReactNode;
+    rightPanel: React.ReactNode | false;
+    activePanel: string;
+    setActivePanel: (panel: string) => void;
+}
+export declare const EditorLayout: React.FC<EditorLayoutProps>;
+export {};
+//# sourceMappingURL=editorLayout.d.ts.map

package/dist/components/layout/editorLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/editorLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,iBAAiB;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuDpD,CAAC"}

package/dist/components/layout/header.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface HeaderProps {
+    activeFile: string;
+    showPreview: boolean;
+    setShowPreview: (show: boolean) => void;
+}
+export declare const Header: React.FC<HeaderProps>;
+export {};
+//# sourceMappingURL=header.d.ts.map

package/dist/components/layout/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/layout/header.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,UAAU,WAAW;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AACD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmDxC,CAAC"}

package/dist/components/layout/sidebar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SidebarProps {
+    activePanel: string;
+    setActivePanel: (panel: string) => void;
+}
+export declare const Sidebar: React.FC<SidebarProps>;
+export {};
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/layout/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,UAAU,YAAY;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoD1C,CAAC"}

package/dist/components/panels/dataExplorer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const DataExplorer: React.FC;
+//# sourceMappingURL=dataExplorer.d.ts.map

package/dist/components/panels/dataExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/panels/dataExplorer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAuEhC,CAAC"}

package/dist/components/panels/fileExplorer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { FileNode } from "../../types/fileTypes";
+interface FileExplorerProps {
+    files: FileNode[];
+    activeFile: string | null;
+    onFileSelect: (fileId: string) => void;
+    loading?: boolean;
+    error?: string | null;
+    onRefresh?: () => void;
+}
+export declare const FileExplorer: React.FC<FileExplorerProps>;
+export {};
+//# sourceMappingURL=fileExplorer.d.ts.map

package/dist/components/panels/fileExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/panels/fileExplorer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,UAAU,iBAAiB;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsEpD,CAAC"}

package/dist/components/panels/functionLibrary.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const FunctionLibrary: React.FC;
+//# sourceMappingURL=functionLibrary.d.ts.map

package/dist/components/panels/functionLibrary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"functionLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/panels/functionLibrary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA8EnC,CAAC"}

package/dist/components/panels/previewPanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PreviewPanelProps {
+    code: string;
+}
+export declare const PreviewPanel: React.FC<PreviewPanelProps>;
+export {};
+//# sourceMappingURL=previewPanel.d.ts.map

package/dist/components/panels/previewPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previewPanel.d.ts","sourceRoot":"","sources":["../../../src/components/panels/previewPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqFpD,CAAC"}

package/dist/components/panels/testRunner.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const TestRunner: React.FC;
+//# sourceMappingURL=testRunner.d.ts.map

package/dist/components/panels/testRunner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testRunner.d.ts","sourceRoot":"","sources":["../../../src/components/panels/testRunner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAgG9B,CAAC"}

package/dist/components/panels/versionHistory.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const VersionHistory: React.FC;
+//# sourceMappingURL=versionHistory.d.ts.map

package/dist/components/panels/versionHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"versionHistory.d.ts","sourceRoot":"","sources":["../../../src/components/panels/versionHistory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EA2ElC,CAAC"}

package/dist/examples/codeEditorExamples.d.ts

@@ -0,0 +1,6 @@
+export declare const ExampleWorkflowEditor: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExampleFormEditor: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExampleURLEditor: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExampleCustomEditor: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExampleAdvancedWorkflow: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=codeEditorExamples.d.ts.map

package/dist/examples/codeEditorExamples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeEditorExamples.d.ts","sourceRoot":"","sources":["../../src/examples/codeEditorExamples.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,qBAAqB,+CA0BjC,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwB7B,CAAC;AAGF,eAAO,MAAM,gBAAgB,+CA8B5B,CAAC;AAGF,eAAO,MAAM,mBAAmB,+CAgB/B,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAoDnC,CAAC"}

package/dist/hooks/useFileManager.d.ts

@@ -0,0 +1,14 @@
+import type { FileNode, FileProvider } from "../types/fileTypes";
+export interface UseFileManagerReturn {
+    files: FileNode[];
+    activeFile: string | null;
+    fileContent: string;
+    loading: boolean;
+    error: string | null;
+    setActiveFile: (fileId: string) => void;
+    updateFileContent: (content: string) => void;
+    refreshFiles: () => void;
+    getFileById: (fileId: string) => FileNode | null;
+}
+export declare function useFileManager(fileProvider: FileProvider): UseFileManagerReturn;
+//# sourceMappingURL=useFileManager.d.ts.map

package/dist/hooks/useFileManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileManager.d.ts","sourceRoot":"","sources":["../../src/hooks/useFileManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEjE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC;CAClD;AAED,wBAAgB,cAAc,CAC5B,YAAY,EAAE,YAAY,GACzB,oBAAoB,CAqHtB"}

package/dist/index.cjs.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),ge=require("@monaco-editor/react"),d=require("antd"),j=require("@tabler/icons-react");var P={exports:{}},_={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var J;function be(){if(J)return _;J=1;var i=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(n,a,l){var m=null;if(l!==void 0&&(m=""+l),a.key!==void 0&&(m=""+a.key),"key"in a){l={};for(var b in a)b!=="key"&&(l[b]=a[b])}else l=a;return a=l.ref,{$$typeof:i,type:n,key:m,ref:a!==void 0?a:null,props:l}}return _.Fragment=t,_.jsx=r,_.jsxs=r,_}var k={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var G;function ve(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===me?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case f:return"Profiler";case A:return"StrictMode";case ce:return"Suspense";case ue:return"SuspenseList";case de:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case O:return"Portal";case se:return(e.displayName||"Context")+".Provider";case v:return(e._context.displayName||"Context")+".Consumer";case le:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case fe:return s=e.displayName||null,s!==null?s:i(e.type)||"Memo";case B:s=e._payload,e=e._init;try{return i(e(s))}catch{}}return null}function t(e){return""+e}function r(e){try{t(e);var s=!1}catch{s=!0}if(s){s=console;var u=s.error,h=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",h),t(e)}}function n(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===B)return"<...>";try{var s=i(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function a(){var e=I.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function m(e){if(D.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function b(e,s){function u(){Y||(Y=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function y(){var e=i(this.type);return W[e]||(W[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function w(e,s,u,h,R,x,L,z){return u=x.ref,e={$$typeof:T,type:e,key:s,props:x,_owner:R},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function c(e,s,u,h,R,x,L,z){var p=s.children;if(p!==void 0)if(h)if(he(p)){for(h=0;h<p.length;h++)F(p[h]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else F(p);if(D.call(s,"key")){p=i(e);var C=Object.keys(s).filter(function(pe){return pe!=="key"});h=0<C.length?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}",V[p+h]||(C=0<C.length?"{"+C.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,h,p,C,p),V[p+h]=!0)}if(p=null,u!==void 0&&(r(u),p=""+u),m(s)&&(r(s.key),p=""+s.key),"key"in s){u={};for(var M in s)M!=="key"&&(u[M]=s[M])}else u=s;return p&&b(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,p,x,R,a(),u,L,z)}function F(e){typeof e=="object"&&e!==null&&e.$$typeof===T&&e._store&&(e._store.validated=1)}var E=g,T=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),v=Symbol.for("react.consumer"),se=Symbol.for("react.context"),le=Symbol.for("react.forward_ref"),ce=Symbol.for("react.suspense"),ue=Symbol.for("react.suspense_list"),fe=Symbol.for("react.memo"),B=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),I=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,he=Array.isArray,$=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var Y,W={},U=E.react_stack_bottom_frame.bind(E,l)(),q=$(n(l)),V={};k.Fragment=S,k.jsx=function(e,s,u,h,R){var x=1e4>I.recentlyCreatedOwnerStacks++;return c(e,s,u,!1,h,R,x?Error("react-stack-top-frame"):U,x?$(n(e)):q)},k.jsxs=function(e,s,u,h,R){var x=1e4>I.recentlyCreatedOwnerStacks++;return c(e,s,u,!0,h,R,x?Error("react-stack-top-frame"):U,x?$(n(e)):q)}})()),k}var X;function Ee(){return X||(X=1,process.env.NODE_ENV==="production"?P.exports=be():P.exports=ve()),P.exports}var o=Ee();function H(i){const[t,r]=g.useState([]),[n,a]=g.useState(null),[l,m]=g.useState(""),[b,y]=g.useState(!1),[w,c]=g.useState(null),F=g.useCallback(async()=>{try{y(!0),c(null);const f=await i.getFiles();if(r(f),!n&&f.length>0){const v=Z(f);v&&a(v.id)}}catch(f){c(f instanceof Error?f.message:"Failed to load files")}finally{y(!1)}},[i,n]),E=g.useCallback(async f=>{try{y(!0),c(null);const v=await i.getFileContent(f);m(v)}catch(v){c(v instanceof Error?v.message:"Failed to load file content"),m("")}finally{y(!1)}},[i]),T=g.useCallback(async f=>{if(n)try{c(null),await i.updateFileContent(n,f),m(f),r(v=>K(v,n,{content:f}))}catch(v){c(v instanceof Error?v.message:"Failed to update file content")}},[n,i]),O=g.useCallback(f=>{a(f),E(f)},[E]),S=g.useCallback(()=>{F()},[F]),A=g.useCallback(f=>Q(t,f),[t]);return g.useEffect(()=>{F()},[F]),g.useEffect(()=>{n&&E(n)},[n,E]),{files:t,activeFile:n,fileContent:l,loading:b,error:w,setActiveFile:O,updateFileContent:T,refreshFiles:S,getFileById:A}}function Z(i){for(const t of i){if(t.type==="file")return t;if(t.children){const r=Z(t.children);if(r)return r}}return null}function Q(i,t){for(const r of i){if(r.id===t)return r;if(r.children){const n=Q(r.children,t);if(n)return n}}return null}function K(i,t,r){return i.map(n=>n.id===t?{...n,...r}:n.children?{...n,children:K(n.children,t,r)}:n)}class ee{config;files=[];constructor(t){this.config=t}async getFiles(){return this.files.length===0&&await this.loadFiles(),this.files}async getFileContent(t){if(t==="main-function")return await this.config.fetchFunction(this.config.functionId,this.config.version);throw new Error(`File ${t} not found`)}async updateFileContent(t,r){const n=this.findFileById(t);n&&(n.content=r),console.log(`Updated file ${t} with content:`,r)}async getFileMetadata(t){return this.findFileById(t)?.metadata||{}}async loadFiles(){this.files=[{id:"main-function",name:"function.js",type:"file",path:"/function.js",metadata:{language:"javascript",lastModified:new Date}},{id:"versions",name:"versions",type:"folder",path:"/versions",children:this.config.versionList.map(t=>({id:`version-${t}`,name:`v${t}.js`,type:"file",path:`/versions/v${t}.js`,metadata:{language:"javascript"}}))}]}findFileById(t){const r=n=>{for(const a of n){if(a.id===t)return a;if(a.children){const l=r(a.children);if(l)return l}}return null};return r(this.files)}}class te{config;files=[];constructor(t){this.config=t,this.initializeFiles()}async getFiles(){return this.files}async getFileContent(t){if(t==="form-code")return this.config.codeContent;throw new Error(`File ${t} not found`)}async updateFileContent(t,r){if(t==="form-code"){this.config.codeContent=r;const n=this.files.find(a=>a.id===t);n&&(n.content=r)}}async getFileMetadata(t){return this.findFileById(t)?.metadata||{}}initializeFiles(){this.files=[{id:"form-code",name:this.config.fileName||"code.js",type:"file",path:`/${this.config.fileName||"code.js"}`,content:this.config.codeContent,metadata:{language:this.config.language||"javascript",lastModified:new Date}}]}findFileById(t){return this.files.find(r=>r.id===t)||null}}class re{config;files=[];constructor(t){this.config=t,this.initializeFiles()}async getFiles(){return this.files}async getFileContent(t){const r=this.findFileById(t);if(!r||!r.metadata?.url)throw new Error(`File ${t} not found`);try{const n=await fetch(r.metadata.url);if(!n.ok)throw new Error(`Failed to fetch file: ${n.statusText}`);return await n.text()}catch(n){throw new Error(`Error fetching file content: ${n}`)}}async updateFileContent(t,r){console.log(`Would save file ${t} content to backend:`,r);const n=this.findFileById(t);n&&(n.content=r)}async getFileMetadata(t){return this.findFileById(t)?.metadata||{}}initializeFiles(){this.files=this.config.fileUrls.map((t,r)=>({id:`url-file-${r}`,name:t.name,type:"file",path:`/${t.name}`,metadata:{language:t.type,url:t.url,lastModified:new Date}}))}findFileById(t){return this.files.find(r=>r.id===t)||null}}function ne(i){if(i.workflowConfig)return new ee(i.workflowConfig);if(i.formConfig)return new te(i.formConfig);if(i.urlConfig)return new re(i.urlConfig);throw new Error("No valid configuration provided")}const ie=({value:i,onChange:t,language:r="javascript",filename:n,readOnly:a=!1,loading:l=!1})=>{const m=b=>{b!==void 0&&t(b)};return o.jsx("div",{className:"h-full w-full",children:o.jsx(ge,{height:"100%",defaultLanguage:r,defaultValue:i,onChange:m,theme:"vs-light",options:{minimap:{enabled:!1},fontSize:14,wordWrap:"on",automaticLayout:!0,padding:{top:16},scrollBeyondLastLine:!1,readOnly:a}})})},ye=({activePanel:i,setActivePanel:t})=>{const r=[{id:"explorer",icon:j.IconFolderOpen,label:"Files"},{id:"data",icon:j.IconDatabase,label:"Data"},{id:"functions",icon:j.IconCode,label:"Functions"},{id:"versions",icon:j.IconHistory,label:"Versions"},{id:"tests",icon:j.IconFlask,label:"Tests"}];return o.jsxs("div",{className:"w-14 border-r border-slate-200 bg-white flex flex-col gap-4 items-center py-4",children:[r.map(n=>{const a=n.icon;return o.jsx(d.Tooltip,{title:n.label,placement:"right",children:o.jsx(d.Button,{type:i===n.id?"primary":"text",icon:o.jsx(a,{size:16}),onClick:()=>t(n.id)})},n.id)}),o.jsx("div",{className:"mt-auto",children:o.jsx(d.Tooltip,{title:"Settings",placement:"right",children:o.jsx(d.Button,{type:"text",icon:o.jsx(j.IconSettings,{size:20})})})})]})},oe=({leftPanel:i,editor:t,rightPanel:r,activePanel:n,setActivePanel:a})=>o.jsxs("div",{className:"flex flex-1 overflow-hidden",children:[o.jsx(ye,{activePanel:n,setActivePanel:a}),o.jsx("div",{className:"flex-1",children:r?o.jsxs(d.Splitter,{style:{height:"100%"},onResize:l=>console.log(l),children:[o.jsx(d.Splitter.Panel,{defaultSize:"25%",min:"15%",max:"40%",className:"bg-white border-r border-slate-200",collapsible:!0,children:o.jsx("div",{className:"h-full overflow-y-auto",children:i})}),o.jsx(d.Splitter.Panel,{defaultSize:"50%",min:"30%",children:t}),o.jsx(d.Splitter.Panel,{defaultSize:"25%",min:"20%",max:"50%",className:"bg-white border-l border-slate-200",children:o.jsx("div",{className:"h-full overflow-y-auto",children:r})})]}):o.jsxs(d.Splitter,{style:{height:"100%"},children:[o.jsx(d.Splitter.Panel,{defaultSize:"25%",min:"15%",max:"40%",className:"bg-white border-r border-slate-200",children:o.jsx("div",{className:"h-full overflow-y-auto",children:i})}),o.jsx(d.Splitter.Panel,{defaultSize:"75%",min:"60%",children:t})]})})]}),ae=({files:i,activeFile:t,onFileSelect:r,loading:n=!1,error:a=null,onRefresh:l})=>{const m=w=>w.map(c=>({title:c.name,key:c.id,icon:c.type==="file"?o.jsx(j.IconFile,{size:16,className:"text-slate-500 flex"}):o.jsx(j.IconFolderOpen,{size:16,className:"text-slate-500 flex"}),isLeaf:c.type==="file",children:c.children?m(c.children):void 0,metadata:c.metadata})),b=m(i),y=(w,c)=>{c?.node.isLeaf&&c.node.key&&r(c.node.key)};return o.jsxs("div",{className:"h-full",children:[o.jsxs("div",{className:"flex items-center justify-between p-4 border-b border-slate-200",children:[o.jsx("h2",{className:"font-medium text-sm",children:"Files"}),o.jsx("div",{className:"flex items-center gap-2",children:l&&o.jsx(d.Button,{type:"text",icon:o.jsx(j.IconPlus,{size:16}),onClick:l,loading:n,title:"Refresh files"})})]}),o.jsxs("div",{className:"p-2",children:[a&&o.jsx(d.Alert,{message:"Error loading files",description:a,type:"error",className:"mb-2"}),o.jsx(d.Tree,{treeData:b,onSelect:y,selectedKeys:t?[t]:[],showIcon:!0,defaultExpandAll:!0,showLine:!0,className:"file-explorer-tree"})]})]})},N=({config:i,rightPanel:t=!1})=>{const r=g.useMemo(()=>ne(i),[i]);console.log({config:i});const{files:n,activeFile:a,fileContent:l,loading:m,error:b,setActiveFile:y,updateFileContent:w,refreshFiles:c,getFileById:F}=H(r),E=a?F(a):null,T=E?.metadata?.language||"javascript";return o.jsx(oe,{leftPanel:o.jsx(ae,{files:n,activeFile:a,onFileSelect:y,loading:m,error:b,onRefresh:c}),editor:o.jsx(ie,{value:l,onChange:w,language:T,filename:E?.name,readOnly:i.settings?.readOnly,loading:m}),rightPanel:t,activePanel:"explorer",setActivePanel:()=>{}})},xe=({functionId:i,version:t,versionList:r,fetchFunction:n,fetchVersionList:a})=>{const l={workflowConfig:{functionId:i,version:t,versionList:r,fetchFunction:n,fetchVersionList:a}};return o.jsx(N,{config:l})},Fe=({codeContent:i,fileName:t="code.js",language:r="javascript",readOnly:n=!1})=>{const a={formConfig:{codeContent:i,fileName:t,language:r},settings:{readOnly:n}};return o.jsx(N,{config:a})},je=({fileUrls:i,rightPanel:t})=>{const r={urlConfig:{fileUrls:i}};return o.jsx(N,{config:r,rightPanel:t})},we="1.0.0";Object.defineProperty(exports,"Alert",{enumerable:!0,get:()=>d.Alert});Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>d.Button});Object.defineProperty(exports,"Splitter",{enumerable:!0,get:()=>d.Splitter});Object.defineProperty(exports,"Tooltip",{enumerable:!0,get:()=>d.Tooltip});Object.defineProperty(exports,"Tree",{enumerable:!0,get:()=>d.Tree});exports.CodeEditor=ie;exports.CodeEditorWrapper=N;exports.EditorLayout=oe;exports.FileExplorer=ae;exports.FormCodeEditor=Fe;exports.FormFileProvider=te;exports.URLCodeEditor=je;exports.URLFileProvider=re;exports.VERSION=we;exports.WorkflowCodeEditor=xe;exports.WorkflowFileProvider=ee;exports.createFileProvider=ne;exports.useFileManager=H;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { CodeEditorWrapper } from './components/codeEditorWrapper';
+export { CodeEditor } from './components/editor/codeEditor';
+export { EditorLayout } from './components/layout/editorLayout';
+export { FileExplorer } from './components/panels/fileExplorer';
+export { WorkflowFileProvider, FormFileProvider, URLFileProvider, createFileProvider } from './providers/fileProviders';
+export { useFileManager } from './hooks/useFileManager';
+export type { FileNode, FileProvider, CodeEditorConfig } from './types/fileTypes';
+export type { UseFileManagerReturn } from './hooks/useFileManager';
+export { WorkflowCodeEditor, FormCodeEditor, URLCodeEditor } from './components/codeEditorWrapper';
+export { Splitter, Tree, Button, Tooltip, Alert } from 'antd';
+export declare const VERSION = "1.0.0";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAGhE,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,YAAY,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,aAAa,EACd,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAG9D,eAAO,MAAM,OAAO,UAAU,CAAC"}