Feat/template import export

package.json

@@ -36,6 +36,7 @@
     "html2pdf.js": "^0.14.0",
     "immer": "^10.1.1",
     "jest-canvas-mock": "^2.5.2",
+    "jszip": "^3.10.1",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.50.0",
     "node-stdlib-browser": "^1.2.0",

src/components/PlaygroundSidebar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { IoCodeSlash } from "react-icons/io5";
 import { VscOutput } from "react-icons/vsc";
-import { FiTerminal, FiShare2, FiSettings } from "react-icons/fi";
+import { FiTerminal, FiShare2, FiSettings, FiDownload, FiUpload } from "react-icons/fi";
 import { FaCirclePlay } from "react-icons/fa6";
 import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
 import useAppStore from "../store/store";
@@ -12,6 +12,8 @@ import tour from "./Tour";
 import "../styles/components/PlaygroundSidebar.css";
 
 const PlaygroundSidebar = () => {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
   const { 
     isEditorsVisible,
     isPreviewVisible,
@@ -22,6 +24,8 @@ const PlaygroundSidebar = () => {
     setProblemPanelVisible,
     setAIChatOpen,
     generateShareableLink,
+    exportTemplate,
+    importTemplate,
     setSettingsOpen,
   } = useAppStore((state) => ({
     isEditorsVisible: state.isEditorsVisible,
@@ -33,6 +37,8 @@ const PlaygroundSidebar = () => {
     setProblemPanelVisible: state.setProblemPanelVisible,
     setAIChatOpen: state.setAIChatOpen,
     generateShareableLink: state.generateShareableLink,
+    exportTemplate: state.exportTemplate,
+    importTemplate: state.importTemplate,
     setSettingsOpen: state.setSettingsOpen,
   }));
 
@@ -51,6 +57,25 @@ const PlaygroundSidebar = () => {
     setSettingsOpen(true);
   };
 
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      try {
+        await importTemplate(file);
+        void message.success('Template imported successfully!');
+      } catch (error) {
+        console.error('Import failed:', error);
+        void message.error('Failed to import template');
+      } finally {
+        e.target.value = '';
+      }
+    }
+  };
+
   const handleStartTour = async () => {
     try {
       await tour.start();
@@ -136,6 +161,16 @@ const PlaygroundSidebar = () => {
   }
 
   const navBottom: NavBottomItem[] = [
+    {
+      title: "Export",
+      icon: FiDownload,
+      onClick: () => void exportTemplate()
+    },
+    {
+      title: "Import",
+      icon: FiUpload,
+      onClick: handleImportClick
+    },
     { 
       title: "Share", 
       icon: FiShare2,
@@ -196,6 +231,13 @@ const PlaygroundSidebar = () => {
           </Tooltip>
         ))}
       </nav>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".cta"
+        onChange={(e) => void handleFileChange(e)}
+        style={{ display: 'none' }}
+      />
     </aside>,
     <SettingsModal key="settings-modal" />
   ];

src/store/store.ts

@@ -9,6 +9,7 @@ import { transform } from "@accordproject/markdown-transform";
 import { SAMPLES, Sample } from "../samples";
 import * as playground from "../samples/playground";
 import { compress, decompress } from "../utils/compression/compression";
+import { createArchive, extractArchive, downloadBlob } from '../utils/archive/archive';
 import { AIConfig, ChatState, KeyProtectionLevel } from '../types/components/AIAssistant.types';
 
 interface AppState {
@@ -39,6 +40,8 @@ interface AppState {
   init: () => Promise<void>;
   loadSample: (name: string) => Promise<void>;
   generateShareableLink: () => string;
+  exportTemplate: () => Promise<void>;
+  importTemplate: (file: File) => Promise<void>;
   loadFromLink: (compressedData: string) => Promise<void>;
   toggleDarkMode: () => void;
   setAIConfigOpen: (visible: boolean) => void;
@@ -329,6 +332,44 @@ const useAppStore = create<AppState>()(
           });
           return `${window.location.origin}/#data=${compressedData}`;
         },
+        exportTemplate: async () => {
+          const { sampleName, modelCto, templateMarkdown, data } = get();
+          try {
+            const blob = await createArchive(sampleName, modelCto, templateMarkdown, data);
+            const filename = `${sampleName.toLowerCase().replace(/\s+/g, '-')}.cta`;
+            downloadBlob(blob, filename);
+          } catch (error) {
+            console.error('Export failed:', error);
+            set(() => ({
+              error: 'Failed to export template: ' + (error instanceof Error ? error.message : 'Unknown error'),
+              isProblemPanelVisible: true,
+            }));
+          }
+        },
+        importTemplate: async (file: File) => {
+          try {
+            const { name, model, template, data } = await extractArchive(file);
+            set(() => ({
+              sampleName: name,
+              templateMarkdown: template,
+              editorValue: template,
+              modelCto: model,
+              editorModelCto: model,
+              data: data,
+              editorAgreementData: data,
+              agreementHtml: '',
+              error: undefined,
+            }));
+            await get().rebuild();
+          } catch (error) {
+            console.error('Import failed:', error);
+            set(() => ({
+              error: 'Failed to import template: ' + (error instanceof Error ? error.message : 'Unknown error'),
+              isProblemPanelVisible: true,
+            }));
+            throw error;
+          }
+        },
         loadFromLink: async (compressedData: string) => {
           try {
             const { templateMarkdown, modelCto, data, agreementHtml } = decompress(compressedData);

src/tests/components/PlaygroundSidebar.test.tsx

@@ -16,6 +16,8 @@ vi.mock("../../store/store", () => ({
         setAIChatOpen: vi.fn(),
         setSettingsOpen: vi.fn(),
         generateShareableLink: vi.fn(() => "https://example.com"),
+        exportTemplate: vi.fn(),
+        importTemplate: vi.fn(),
     }),
 }));
 
@@ -51,6 +53,8 @@ describe("PlaygroundSidebar", () => {
     it("renders all bottom navigation items", () => {
         renderSidebar();
 
+        expect(screen.getByRole("button", { name: /Export/i })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: /Import/i })).toBeInTheDocument();
         expect(screen.getByRole("button", { name: /Share/i })).toBeInTheDocument();
         expect(screen.getByRole("button", { name: /Start Tour/i })).toBeInTheDocument();
         expect(screen.getByRole("button", { name: /Settings/i })).toBeInTheDocument();

src/tests/store/importExport.test.tsx

@@ -0,0 +1,76 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import useAppStore from '../../store/store';
+
+vi.mock('../../utils/archive/archive', () => ({
+  createArchive: vi.fn(),
+  extractArchive: vi.fn(),
+  downloadBlob: vi.fn(),
+}));
+
+import { createArchive, extractArchive, downloadBlob } from '../../utils/archive/archive';
+
+describe('useAppStore - import/export', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('exportTemplate', () => {
+    it('should create archive and trigger download', async () => {
+      const mockBlob = new Blob(['test']);
+      vi.mocked(createArchive).mockResolvedValue(mockBlob);
+
+      useAppStore.setState({
+        sampleName: 'Test',
+        modelCto: 'model',
+        templateMarkdown: 'template',
+        data: '{}',
+      });
+
+      await useAppStore.getState().exportTemplate();
+
+      expect(createArchive).toHaveBeenCalledWith('Test', 'model', 'template', '{}');
+      expect(downloadBlob).toHaveBeenCalledWith(mockBlob, 'test.cta');
+    });
+
+    it('should set error on failure', async () => {
+      vi.mocked(createArchive).mockRejectedValue(new Error('zip failed'));
+
+      await useAppStore.getState().exportTemplate();
+
+      const state = useAppStore.getState();
+      expect(state.error).toContain('Failed to export template');
+      expect(state.isProblemPanelVisible).toBe(true);
+    });
+  });
+
+  describe('importTemplate', () => {
+    it('should extract archive and update store state', async () => {
+      vi.mocked(extractArchive).mockResolvedValue({
+        name: 'Imported',
+        model: 'new model',
+        template: 'new template',
+        data: '{"key":"value"}',
+      });
+
+      const file = new File(['fake'], 'test.cta');
+      await useAppStore.getState().importTemplate(file);
+
+      const state = useAppStore.getState();
+      expect(state.sampleName).toBe('Imported');
+      expect(state.modelCto).toBe('new model');
+      expect(state.templateMarkdown).toBe('new template');
+      expect(state.data).toBe('{"key":"value"}');
+    });
+
+    it('should set error on failure', async () => {
+      vi.mocked(extractArchive).mockRejectedValue(new Error('invalid cta'));
+
+      const file = new File(['bad'], 'bad.cta');
+      await expect(useAppStore.getState().importTemplate(file)).rejects.toThrow('invalid cta');
+
+      const state = useAppStore.getState();
+      expect(state.error).toContain('Failed to import template');
+      expect(state.isProblemPanelVisible).toBe(true);
+    });
+  });
+});

src/tests/utils/archive.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest';
+import { createArchive, extractArchive } from '../../utils/archive/archive';
+
+describe('Archive Utilities', () => {
+  const mockData = {
+    name: 'Test Template',
+    model: 'namespace test@1.0.0\nconcept Data { o String value }',
+    template: '# Hello {{value}}',
+    data: JSON.stringify({ $class: 'test@1.0.0.Data', value: 'World' }),
+  };
+
+  describe('createArchive', () => {
+    it('should create a valid ZIP blob', async () => {
+      const blob = await createArchive(
+        mockData.name,
+        mockData.model,
+        mockData.template,
+        mockData.data
+      );
+      expect(blob).toBeInstanceOf(Blob);
+      expect(blob.size).toBeGreaterThan(0);
+    });
+  });
+
+  describe('extractArchive', () => {
+    it('should extract template data from archive', async () => {
+      const blob = await createArchive(
+        mockData.name,
+        mockData.model,
+        mockData.template,
+        mockData.data
+      );
+      const file = new File([blob], 'test.cta', { type: 'application/zip' });
+      const extracted = await extractArchive(file);
+
+      expect(extracted.model).toBe(mockData.model);
+      expect(extracted.template).toBe(mockData.template);
+      expect(extracted.data).toBe(mockData.data);
+    });
+
+    it('should extract human-readable name from description field', async () => {
+      const blob = await createArchive(
+        mockData.name,
+        mockData.model,
+        mockData.template,
+        mockData.data
+      );
+      const file = new File([blob], 'test.cta');
+      const extracted = await extractArchive(file);
+      expect(extracted.name).toBe('Test Template');
+    });
+  });
+
+  describe('round-trip', () => {
+    it('should preserve data through export/import cycle', async () => {
+      const blob = await createArchive(
+        mockData.name,
+        mockData.model,
+        mockData.template,
+        mockData.data
+      );
+      const file = new File([blob], 'roundtrip.cta');
+      const result = await extractArchive(file);
+
+      expect(result.name).toBe(mockData.name);
+      expect(result.model).toBe(mockData.model);
+      expect(result.template).toBe(mockData.template);
+      expect(result.data).toBe(mockData.data);
+    });
+  });
+  describe('error handling', () => {
+    it('should throw when archive is missing model file', async () => {
+      const JSZip = (await import('jszip')).default;
+      const zip = new JSZip();
+      zip.file('package.json', '{"name":"test"}');
+      zip.file('text/grammar.tem.md', 'template');
+      const blob = await zip.generateAsync({ type: 'blob' });
+      const file = new File([blob], 'bad.cta');
+
+      await expect(extractArchive(file)).rejects.toThrow('Archive missing model .cto file');
+    });
+
+    it('should throw when archive is missing grammar file', async () => {
+      const JSZip = (await import('jszip')).default;
+      const zip = new JSZip();
+      zip.file('package.json', '{"name":"test"}');
+      zip.file('model/model.cto', 'namespace test');
+      const blob = await zip.generateAsync({ type: 'blob' });
+      const file = new File([blob], 'bad.cta');
+
+      await expect(extractArchive(file)).rejects.toThrow('Archive missing text/grammar.tem.md');
+    });
+  });
+});