visualifyjs 2.5.3 → 3.0.0

package/src/editor/context/EditorContext.js

@@ -0,0 +1,248 @@
+/**
+ * @fileoverview Editor Context - State management for the visual editor
+ * @module editor/context/EditorContext
+ */
+
+import React, { createContext, useContext, useReducer, useCallback } from 'react';
+
+// Action types
+const ACTIONS = {
+	SET_CONFIG: 'SET_CONFIG',
+	UPDATE_CHART: 'UPDATE_CHART',
+	ADD_CHART: 'ADD_CHART',
+	REMOVE_CHART: 'REMOVE_CHART',
+	REORDER_CHARTS: 'REORDER_CHARTS',
+	SET_SELECTED_CHART: 'SET_SELECTED_CHART',
+	UPDATE_LAYOUT: 'UPDATE_LAYOUT',
+	SET_HISTORY: 'SET_HISTORY',
+	UNDO: 'UNDO',
+	REDO: 'REDO',
+	SET_LOADING: 'SET_LOADING',
+	SET_ERROR: 'SET_ERROR',
+};
+
+// Initial state
+const initialState = {
+	config: {
+		version: '3.0.0',
+		charts: [],
+		layout: {
+			type: 'grid',
+			rows: 1,
+			cols: 1,
+			gap: '10px',
+		},
+		theme: 'modern',
+	},
+	selectedChartId: null,
+	history: {
+		past: [],
+		present: null,
+		future: [],
+	},
+	loading: false,
+	error: null,
+};
+
+// Reducer
+function editorReducer(state, action) {
+	switch (action.type) {
+		case ACTIONS.SET_CONFIG:
+			return {
+				...state,
+				config: action.payload,
+				history: {
+					past: [...state.history.past, state.config],
+					present: action.payload,
+					future: [],
+				},
+			};
+
+		case ACTIONS.UPDATE_CHART:
+			return {
+				...state,
+				config: {
+					...state.config,
+					charts: state.config.charts.map((chart) =>
+						chart.id === action.payload.id
+							? { ...chart, ...action.payload.updates }
+							: chart,
+					),
+				},
+			};
+
+		case ACTIONS.ADD_CHART:
+			return {
+				...state,
+				config: {
+					...state.config,
+					charts: [...state.config.charts, action.payload],
+				},
+				selectedChartId: action.payload.id,
+			};
+
+		case ACTIONS.REMOVE_CHART:
+			return {
+				...state,
+				config: {
+					...state.config,
+					charts: state.config.charts.filter(
+						(c) => c.id !== action.payload,
+					),
+				},
+				selectedChartId:
+					state.selectedChartId === action.payload
+						? null
+						: state.selectedChartId,
+			};
+
+		case ACTIONS.REORDER_CHARTS:
+			return {
+				...state,
+				config: {
+					...state.config,
+					charts: action.payload,
+				},
+			};
+
+		case ACTIONS.SET_SELECTED_CHART:
+			return {
+				...state,
+				selectedChartId: action.payload,
+			};
+
+		case ACTIONS.UPDATE_LAYOUT:
+			return {
+				...state,
+				config: {
+					...state.config,
+					layout: { ...state.config.layout, ...action.payload },
+				},
+			};
+
+		case ACTIONS.UNDO:
+			if (state.history.past.length === 0) return state;
+			const previous = state.history.past[state.history.past.length - 1];
+			const newPast = state.history.past.slice(0, -1);
+			return {
+				...state,
+				config: previous,
+				history: {
+					past: newPast,
+					present: previous,
+					future: [state.config, ...state.history.future],
+				},
+			};
+
+		case ACTIONS.REDO:
+			if (state.history.future.length === 0) return state;
+			const next = state.history.future[0];
+			const newFuture = state.history.future.slice(1);
+			return {
+				...state,
+				config: next,
+				history: {
+					past: [...state.history.past, state.config],
+					present: next,
+					future: newFuture,
+				},
+			};
+
+		case ACTIONS.SET_LOADING:
+			return { ...state, loading: action.payload };
+
+		case ACTIONS.SET_ERROR:
+			return { ...state, error: action.payload };
+
+		default:
+			return state;
+	}
+}
+
+// Context
+const EditorContext = createContext(null);
+
+// Provider component
+export function EditorProvider({ children, initialState: customInitialState }) {
+	const [state, dispatch] = useReducer(
+		editorReducer,
+		customInitialState || initialState,
+	);
+
+	// Actions
+	const setConfig = useCallback((config) => {
+		dispatch({ type: ACTIONS.SET_CONFIG, payload: config });
+	}, []);
+
+	const updateChart = useCallback((id, updates) => {
+		dispatch({ type: ACTIONS.UPDATE_CHART, payload: { id, updates } });
+	}, []);
+
+	const addChart = useCallback((chart) => {
+		dispatch({ type: ACTIONS.ADD_CHART, payload: chart });
+	}, []);
+
+	const removeChart = useCallback((id) => {
+		dispatch({ type: ACTIONS.REMOVE_CHART, payload: id });
+	}, []);
+
+	const reorderCharts = useCallback((charts) => {
+		dispatch({ type: ACTIONS.REORDER_CHARTS, payload: charts });
+	}, []);
+
+	const setSelectedChart = useCallback((id) => {
+		dispatch({ type: ACTIONS.SET_SELECTED_CHART, payload: id });
+	}, []);
+
+	const updateLayout = useCallback((layout) => {
+		dispatch({ type: ACTIONS.UPDATE_LAYOUT, payload: layout });
+	}, []);
+
+	const undo = useCallback(() => {
+		dispatch({ type: ACTIONS.UNDO });
+	}, []);
+
+	const redo = useCallback(() => {
+		dispatch({ type: ACTIONS.REDO });
+	}, []);
+
+	const canUndo = state.history.past.length > 0;
+	const canRedo = state.history.future.length > 0;
+
+	const value = {
+		state,
+		dispatch,
+		// Actions
+		setConfig,
+		updateChart,
+		addChart,
+		removeChart,
+		reorderCharts,
+		setSelectedChart,
+		updateLayout,
+		undo,
+		redo,
+		// Computed
+		canUndo,
+		canRedo,
+		selectedChart: state.config.charts.find(
+			(c) => c.id === state.selectedChartId,
+		),
+	};
+
+	return (
+		<EditorContext.Provider value={value}>{children}</EditorContext.Provider>
+	);
+}
+
+// Hook
+export function useEditor() {
+	const context = useContext(EditorContext);
+	if (!context) {
+		throw new Error('useEditor must be used within an EditorProvider');
+	}
+	return context;
+}
+
+export { ACTIONS };
+export default EditorContext;

package/src/editor/hooks/useDebounce.js

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview Debounce Hook
+ * @module editor/hooks/useDebounce
+ *
+ * Hook for delaying value updates to improve performance.
+ */
+
+import { useState, useEffect } from 'react';
+
+/**
+ * Debounce hook
+ * @param {any} value - Value to debounce
+ * @param {number} delay - Delay in milliseconds
+ * @returns {any} Debounced value
+ */
+export function useDebounce(value, delay) {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}
+
+export default useDebounce;

package/src/editor/index.js

@@ -0,0 +1,315 @@
+/**
+ * @fileoverview Visualify Visual Editor - Main Entry Point
+ * @module editor/index
+ *
+ * Visual configuration editor for creating and editing Visualify configurations
+ * without writing JSON. Provides a drag-and-drop interface for building charts.
+ */
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Container, Row, Col, Toast, ToastContainer } from 'react-bootstrap';
+import Editor from './components/Editor';
+import { EditorProvider } from './context/EditorContext';
+import './styles/editor.css';
+
+/**
+ * Default empty configuration
+ * @readonly
+ */
+const DEFAULT_CONFIG = {
+	version: '3.0.0',
+	charts: [],
+	layout: {
+		type: 'grid',
+		rows: 1,
+		cols: 1,
+		gap: '10px',
+	},
+	theme: 'modern',
+};
+
+/**
+ * Load configuration from file or localStorage
+ * @param {string|null} filePath - Path to config file
+ * @returns {Object} Loaded configuration
+ */
+function loadConfiguration(filePath) {
+	// Try to load from localStorage first (auto-save)
+	const savedConfig = localStorage.getItem('visualify_editor_autosave');
+	if (savedConfig) {
+		try {
+			return JSON.parse(savedConfig);
+		} catch (e) {
+			console.warn('Failed to parse auto-saved config:', e);
+		}
+	}
+
+	// Return default config
+	return { ...DEFAULT_CONFIG };
+}
+
+/**
+ * Main Editor Application Component
+ */
+function EditorApp({ initialConfig = null, filePath = null }) {
+	const [config, setConfig] = useState(() =>
+		initialConfig || loadConfiguration(filePath),
+	);
+	const [toasts, setToasts] = useState([]);
+	const [isReady, setIsReady] = useState(false);
+	const autoSaveTimeoutRef = useRef(null);
+
+	// Show toast notification
+	const showToast = useCallback((message, type = 'info') => {
+		const id = Date.now();
+		setToasts((prev) => [...prev, { id, message, type }]);
+		setTimeout(() => {
+			setToasts((prev) => prev.filter((t) => t.id !== id));
+		}, 3000);
+	}, []);
+
+	// Auto-save to localStorage with debounce
+	useEffect(() => {
+		if (autoSaveTimeoutRef.current) {
+			clearTimeout(autoSaveTimeoutRef.current);
+		}
+
+		autoSaveTimeoutRef.current = setTimeout(() => {
+			try {
+				localStorage.setItem(
+					'visualify_editor_autosave',
+					JSON.stringify(config),
+				);
+			} catch (e) {
+				console.warn('Auto-save failed:', e);
+			}
+		}, 1000);
+
+		return () => {
+			if (autoSaveTimeoutRef.current) {
+				clearTimeout(autoSaveTimeoutRef.current);
+			}
+		};
+	}, [config]);
+
+	// Handle configuration updates
+	const updateConfig = useCallback((updates) => {
+		setConfig((prev) => ({
+			...prev,
+			...updates,
+		}));
+	}, []);
+
+	// Handle chart updates
+	const updateChart = useCallback((chartId, updates) => {
+		setConfig((prev) => ({
+			...prev,
+			charts: prev.charts.map((chart) =>
+				chart.id === chartId ? { ...chart, ...updates } : chart,
+			),
+		}));
+	}, []);
+
+	// Add new chart
+	const addChart = useCallback((chartType) => {
+		const newChart = {
+			id: `chart_${Date.now()}`,
+			type: chartType,
+			title: `${chartType} Chart`,
+			data: [],
+			options: {},
+			position: { x: 0, y: 0, w: 1, h: 1 },
+		};
+
+		setConfig((prev) => ({
+			...prev,
+			charts: [...prev.charts, newChart],
+		}));
+
+		showToast(`Added ${chartType} chart`, 'success');
+		return newChart.id;
+	}, [showToast]);
+
+	// Remove chart
+	const removeChart = useCallback((chartId) => {
+		setConfig((prev) => ({
+			...prev,
+			charts: prev.charts.filter((c) => c.id !== chartId),
+		}));
+		showToast('Chart removed', 'info');
+	}, [showToast]);
+
+	// Export configuration
+	const exportConfig = useCallback(() => {
+		try {
+			// Validate configuration
+			if (config.charts.length === 0) {
+				showToast('No charts to export', 'warning');
+				return null;
+			}
+
+			// Clean up config for export
+			const exportData = {
+				...config,
+				charts: config.charts.map((chart) => ({
+					...chart,
+					// Remove internal properties
+					id: undefined,
+				})),
+			};
+
+			const json = JSON.stringify(exportData, null, 2);
+			const blob = new Blob([json], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = 'visualify.json';
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			URL.revokeObjectURL(url);
+
+			showToast('Configuration exported successfully', 'success');
+			return json;
+		} catch (error) {
+			showToast(`Export failed: ${error.message}`, 'danger');
+			return null;
+		}
+	}, [config, showToast]);
+
+	// Import configuration
+	const importConfig = useCallback((jsonString) => {
+		try {
+			const imported = JSON.parse(jsonString);
+
+			// Validate required fields
+			if (!imported.charts || !Array.isArray(imported.charts)) {
+				throw new Error('Invalid configuration: missing charts array');
+			}
+
+			// Add IDs to charts
+			const chartsWithIds = imported.charts.map((chart, index) => ({
+				...chart,
+				id: chart.id || `chart_${Date.now()}_${index}`,
+			}));
+
+			setConfig({
+				...DEFAULT_CONFIG,
+				...imported,
+				charts: chartsWithIds,
+			});
+
+			showToast('Configuration imported successfully', 'success');
+			return true;
+		} catch (error) {
+			showToast(`Import failed: ${error.message}`, 'danger');
+			return false;
+		}
+	}, [showToast]);
+
+	// Clear all charts
+	const clearAll = useCallback(() => {
+		if (window.confirm('Are you sure you want to clear all charts?')) {
+			setConfig((prev) => ({
+				...prev,
+				charts: [],
+			}));
+			showToast('All charts cleared', 'info');
+		}
+	}, [showToast]);
+
+	// Initialize
+	useEffect(() => {
+		setIsReady(true);
+	}, []);
+
+	if (!isReady) {
+		return (
+			<Container className='editor-loading'>
+				<div className='text-center py-5'>
+					<div className='spinner-border text-primary' role='status'>
+						<span className='visually-hidden'>Loading...</span>
+					</div>
+					<p className='mt-3'>Loading Visualify Editor...</p>
+				</div>
+			</Container>
+		);
+	}
+
+	return (
+		<EditorProvider initialState={{ config }}>
+			<div className='visualify-editor'>
+				<Editor />
+
+				{/* Toast Notifications */}
+				<ToastContainer
+					position='bottom-end'
+					className='p-3'>
+					{toasts.map((toast) => (
+						<Toast
+							key={toast.id}
+							bg={toast.type}
+							onClose={() =>
+								setToasts((prev) =>
+									prev.filter((t) => t.id !== toast.id),
+								)
+							}>
+							<Toast.Body className='text-white'>
+								{toast.message}
+							</Toast.Body>
+						</Toast>
+					))}
+				</ToastContainer>
+			</div>
+		</EditorProvider>
+	);
+}
+
+/**
+ * Mount the editor application
+ * @param {HTMLElement|string} element - DOM element or selector
+ * @param {Object} options - Editor options
+ * @param {Object} options.config - Initial configuration
+ * @param {string} options.filePath - Path to config file
+ */
+function mountEditor(element, options = {}) {
+	const el =
+		typeof element === 'string' ? document.querySelector(element) : element;
+
+	if (!el) {
+		throw new Error(`Element not found: ${element}`);
+	}
+
+	const root = createRoot(el);
+	root.render(
+		<EditorApp
+			initialConfig={options.config}
+			filePath={options.filePath}
+		/>,
+	);
+
+	return root;
+}
+
+// Export for module usage
+export { EditorApp, mountEditor, DEFAULT_CONFIG };
+export default mountEditor;
+
+// Auto-mount if DOM is ready and editor container exists
+if (typeof window !== 'undefined') {
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', () => {
+			const container = document.getElementById('visualify-editor');
+			if (container) {
+				mountEditor(container);
+			}
+		});
+	} else {
+		const container = document.getElementById('visualify-editor');
+		if (container) {
+			mountEditor(container);
+		}
+	}
+}