@flowuent-org/diagramming-core 1.3.9 → 1.4.0

package/packages/diagrams/src/lib/templates/cloud-arch/components/FormatConverter.tsx

@@ -1,810 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import {
-  Box,
-  Button,
-  Typography,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Paper,
-  Tabs,
-  Tab,
-  TextField,
-  FormControlLabel,
-  Switch,
-  Alert,
-  Chip,
-  IconButton,
-  Tooltip,
-  Divider,
-} from '@mui/material';
-import {
-  SwapHoriz as ConvertIcon,
-  ContentCopy as CopyIcon,
-  Download as DownloadIcon,
-  Upload as UploadIcon,
-  Close as CloseIcon,
-  CheckCircle as SuccessIcon,
-  Error as ErrorIcon,
-} from '@mui/icons-material';
-import {
-  defaultSchemaConverter,
-  autoConvert,
-  type SupportedFormat,
-  type ConversionOptions,
-} from '../utils/schemaConverter';
-
-interface FormatConverterProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialData?: any;
-  initialFormat?: SupportedFormat;
-}
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
-  return (
-    <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && <Box sx={{ p: 0 }}>{children}</Box>}
-    </div>
-  );
-}
-
-const FormatConverter: React.FC<FormatConverterProps> = ({
-  isOpen,
-  onClose,
-  initialData,
-  initialFormat = 'json',
-}) => {
-  const [activeTab, setActiveTab] = useState(0);
-  const [inputFormat, setInputFormat] = useState<SupportedFormat>(initialFormat);
-  const [outputFormat, setOutputFormat] = useState<SupportedFormat>(
-    initialFormat === 'json' ? 'yaml' : 'json'
-  );
-  const [inputData, setInputData] = useState('');
-
-  // Auto-load current diagram data when dialog opens
-  React.useEffect(() => {
-    if (isOpen && initialData) {
-      const currentDiagramJSON = JSON.stringify(initialData, null, 2);
-      setInputData(currentDiagramJSON);
-      setInputFormat('json');
-      setOutputFormat('yaml');
-      setOutputData('');
-      setConvertError(null);
-      setConvertSuccess(`Current diagram loaded automatically (${typeof initialData === 'object' && initialData ? Object.keys(initialData).length : 'unknown'} fragments, ready to convert to YAML)`);
-    }
-  }, [isOpen, initialData]);
-  const [outputData, setOutputData] = useState('');
-  const [convertError, setConvertError] = useState<string | null>(null);
-  const [convertSuccess, setConvertSuccess] = useState<string | null>(null);
-  const [options, setOptions] = useState<Partial<ConversionOptions>>({
-    prettyPrint: true,
-    indent: 2,
-    sortKeys: false,
-    includeComments: true,
-  });
-
-  // Convert data
-  const handleConvert = useCallback(() => {
-    if (!inputData.trim()) {
-      setConvertError('Please provide input data to convert');
-      return;
-    }
-
-    try {
-      setConvertError(null);
-      setConvertSuccess(null);
-
-      const result = autoConvert(inputData, outputFormat);
-      
-      if (result.success) {
-        setOutputData(result.data);
-        setConvertSuccess(
-          `Successfully converted from ${inputFormat.toUpperCase()} to ${outputFormat.toUpperCase()} (${result.size} bytes)`
-        );
-      } else {
-        setConvertError(result.error || 'Conversion failed');
-        setOutputData('');
-      }
-    } catch (error) {
-      setConvertError(error instanceof Error ? error.message : 'Conversion failed');
-      setOutputData('');
-    }
-  }, [inputData, inputFormat, outputFormat]);
-
-  // Swap input and output formats
-  const handleSwapFormats = useCallback(() => {
-    setInputFormat(outputFormat);
-    setOutputFormat(inputFormat);
-    setInputData(outputData);
-    setOutputData('');
-    setConvertError(null);
-    setConvertSuccess(null);
-  }, [inputFormat, outputFormat, outputData]);
-
-  // Copy to clipboard
-  const handleCopy = useCallback(async (data: string) => {
-    try {
-      await navigator.clipboard.writeText(data);
-      setConvertSuccess('Copied to clipboard!');
-      setTimeout(() => setConvertSuccess(null), 2000);
-    } catch (error) {
-      setConvertError('Failed to copy to clipboard');
-    }
-  }, []);
-
-  // Download file
-  const handleDownload = useCallback((data: string, format: SupportedFormat) => {
-    if (!data) return;
-
-    const mimeType = defaultSchemaConverter.getMimeType(format);
-    const extension = defaultSchemaConverter.getFileExtension(format);
-    
-    const blob = new Blob([data], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `cloud-architecture-schema.${extension}`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }, []);
-
-  // Load current diagram data
-  const loadCurrentDiagram = useCallback(() => {
-    if (initialData) {
-      const currentDiagramJSON = JSON.stringify(initialData, null, 2);
-      setInputData(currentDiagramJSON);
-      setInputFormat('json');
-      setOutputFormat('yaml');
-      setOutputData('');
-      setConvertError(null);
-      setConvertSuccess('Current diagram loaded');
-    } else {
-      setConvertError('No diagram data available');
-    }
-  }, [initialData]);
-
-  // Load sample data (kept for demo purposes)
-  const loadSample = useCallback((format: SupportedFormat) => {
-    const yamlSample = `# Cloud Architecture Schema
-# Generated on 2024-01-15T10:30:00Z
-# Format: YAML
-
-base: # Core schema structure
-  version: "1.0.0"
-  nodes:
-    - id: "vpc-main"
-      type: "subnetNode"
-      data:
-        service: "vpc"
-        cloudProvider: "aws"
-  edges: []
-
-metadata: # Export metadata and timestamps
-  exportedAt: "2024-01-15T10:30:00Z"
-  nodeCount: 1
-  edgeCount: 0
-  cloudProviders:
-    - "aws"`;
-
-    const samples = {
-      json: `{
-  "base": {
-    "version": "1.0.0",
-    "nodes": [
-      {
-        "id": "vpc-main",
-        "type": "subnetNode",
-        "data": {
-          "service": "vpc",
-          "cloudProvider": "aws"
-        }
-      }
-    ],
-    "edges": []
-  },
-  "metadata": {
-    "exportedAt": "2024-01-15T10:30:00Z",
-    "nodeCount": 1,
-    "edgeCount": 0,
-    "cloudProviders": ["aws"]
-  }
-}`,
-      yaml: yamlSample,
-      yml: yamlSample,
-    };
-
-    setInputData(samples[format]);
-    setInputFormat(format);
-    setOutputFormat(format === 'json' ? 'yaml' : 'json');
-    setOutputData('');
-    setConvertError(null);
-    setConvertSuccess(null);
-  }, []);
-
-  // Handle file upload
-  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const content = e.target?.result as string;
-      setInputData(content);
-      
-      // Try to detect format from file extension
-      if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) {
-        setInputFormat('yaml');
-        setOutputFormat('json');
-      } else {
-        setInputFormat('json');
-        setOutputFormat('yaml');
-      }
-      
-      setOutputData('');
-      setConvertError(null);
-      setConvertSuccess(`Loaded ${file.name}`);
-    };
-    reader.readAsText(file);
-  }, []);
-
-  // Clear all data
-  const handleClear = useCallback(() => {
-    setInputData('');
-    setOutputData('');
-    setConvertError(null);
-    setConvertSuccess(null);
-  }, []);
-
-  return (
-    <Dialog 
-      open={isOpen} 
-      onClose={onClose} 
-      maxWidth="xl" 
-      fullWidth
-      PaperProps={{
-        sx: {
-          bgcolor: '#1a1a1a',
-          color: '#ffffff',
-        }
-      }}
-    >
-      <DialogTitle sx={{ bgcolor: '#2d2d2d', color: '#ffffff' }}>
-        <Box display="flex" alignItems="center" justifyContent="space-between">
-          <Typography variant="h6" color="#ffffff">Schema Format Converter - Current Diagram</Typography>
-          <IconButton onClick={onClose} size="small" sx={{ color: '#ffffff' }}>
-            <CloseIcon />
-          </IconButton>
-        </Box>
-      </DialogTitle>
-
-      <DialogContent sx={{ p: 0, bgcolor: '#1a1a1a' }}>
-        <Box sx={{ borderBottom: 1, borderColor: '#444444' }}>
-          <Tabs 
-            value={activeTab} 
-            onChange={(_, newValue) => setActiveTab(newValue)}
-            sx={{
-              '& .MuiTab-root': {
-                color: '#cccccc',
-                '&.Mui-selected': {
-                  color: '#61dafb',
-                },
-              },
-              '& .MuiTabs-indicator': {
-                backgroundColor: '#61dafb',
-              },
-            }}
-          >
-            <Tab label="Converter" />
-            <Tab label="Options" />
-            <Tab label="Examples" />
-          </Tabs>
-        </Box>
-
-        {/* Main Converter Tab */}
-        <TabPanel value={activeTab} index={0}>
-          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
-            {/* Format Selection and Controls */}
-            <Box display="flex" alignItems="center" gap={2} mb={3}>
-              <Chip 
-                label={inputFormat.toUpperCase()} 
-                sx={{
-                  bgcolor: '#2d2d2d',
-                  color: '#61dafb',
-                  border: '1px solid #61dafb',
-                }}
-                variant="outlined"
-              />
-              <Button
-                variant="outlined"
-                startIcon={<ConvertIcon />}
-                onClick={handleSwapFormats}
-                size="small"
-                sx={{
-                  color: '#ffffff',
-                  borderColor: '#444444',
-                  '&:hover': {
-                    borderColor: '#61dafb',
-                    bgcolor: '#2d2d2d',
-                  },
-                }}
-              >
-                Swap
-              </Button>
-              <Chip 
-                label={outputFormat.toUpperCase()} 
-                sx={{
-                  bgcolor: '#2d2d2d',
-                  color: '#ff6b9d',
-                  border: '1px solid #ff6b9d',
-                }}
-                variant="outlined"
-              />
-              <Box flexGrow={1} />
-              <Button
-                variant="contained"
-                onClick={handleConvert}
-                disabled={!inputData.trim()}
-                startIcon={<ConvertIcon />}
-                sx={{
-                  bgcolor: '#61dafb',
-                  color: '#000000',
-                  '&:hover': {
-                    bgcolor: '#4fa8c5',
-                  },
-                  '&:disabled': {
-                    bgcolor: '#444444',
-                    color: '#888888',
-                  },
-                }}
-              >
-                Convert
-              </Button>
-            </Box>
-
-            {/* Current Diagram Controls */}
-            <Box display="flex" gap={1} mb={2}>
-              <Button
-                onClick={loadCurrentDiagram}
-                variant="contained"
-                startIcon={<UploadIcon />}
-                size="small"
-                sx={{
-                  bgcolor: '#61dafb',
-                  color: '#000000',
-                  '&:hover': { bgcolor: '#4fa8c5' },
-                }}
-              >
-                Load Current Diagram
-              </Button>
-              <Button
-                onClick={() => loadSample('json')}
-                size="small"
-                variant="outlined"
-                sx={{
-                  color: '#ffffff',
-                  borderColor: '#444444',
-                  '&:hover': {
-                    borderColor: '#61dafb',
-                    bgcolor: '#2d2d2d',
-                  },
-                }}
-              >
-                JSON Sample
-              </Button>
-              <Button
-                onClick={() => loadSample('yaml')}
-                size="small"
-                variant="outlined"
-                sx={{
-                  color: '#ffffff',
-                  borderColor: '#444444',
-                  '&:hover': {
-                    borderColor: '#61dafb',
-                    bgcolor: '#2d2d2d',
-                  },
-                }}
-              >
-                YAML Sample
-              </Button>
-              <Button 
-                onClick={handleClear} 
-                size="small" 
-                sx={{
-                  color: '#ff6b9d',
-                  borderColor: '#ff6b9d',
-                  '&:hover': {
-                    bgcolor: '#2d2d2d',
-                    borderColor: '#ff6b9d',
-                  },
-                }}
-                variant="outlined"
-              >
-                Clear
-              </Button>
-            </Box>
-
-            {/* Status Messages */}
-            {convertError && (
-              <Alert 
-                severity="error" 
-                sx={{ 
-                  mb: 2,
-                  bgcolor: '#2d1b1b',
-                  color: '#ff6b9d',
-                  '& .MuiAlert-icon': {
-                    color: '#ff6b9d',
-                  },
-                }} 
-                icon={<ErrorIcon />}
-              >
-                {convertError}
-              </Alert>
-            )}
-            {convertSuccess && (
-              <Alert 
-                severity="success" 
-                sx={{ 
-                  mb: 2,
-                  bgcolor: '#1b2d1b',
-                  color: '#4caf50',
-                  '& .MuiAlert-icon': {
-                    color: '#4caf50',
-                  },
-                }} 
-                icon={<SuccessIcon />}
-              >
-                {convertSuccess}
-              </Alert>
-            )}
-
-            {/* Input/Output Panels */}
-            <Box display="flex" gap={2} height="400px">
-              {/* Input Panel */}
-              <Paper sx={{ 
-                flex: 1, 
-                display: 'flex', 
-                flexDirection: 'column',
-                bgcolor: '#2d2d2d',
-                border: '1px solid #444444',
-              }}>
-                <Box
-                  sx={{
-                    p: 1,
-                    bgcolor: '#3d3d3d',
-                    borderBottom: '1px solid',
-                    borderColor: '#555555',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <Typography variant="subtitle2" color="#ffffff">
-                    Input ({inputFormat.toUpperCase()})
-                  </Typography>
-                  <Tooltip title="Copy Input">
-                    <IconButton
-                      size="small"
-                      onClick={() => handleCopy(inputData)}
-                      disabled={!inputData}
-                      sx={{
-                        color: '#ffffff',
-                        '&:disabled': {
-                          color: '#666666',
-                        },
-                      }}
-                    >
-                      <CopyIcon fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                </Box>
-                <Box
-                  sx={{
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    position: 'relative',
-                  }}
-                >
-                  <textarea
-                    value={inputData}
-                    onChange={(e) => setInputData(e.target.value)}
-                    placeholder={inputData ? `${inputFormat.toUpperCase()} data loaded` : `Click "Load Current Diagram" to start converting your diagram...`}
-                    style={{
-                      flex: 1,
-                      width: '100%',
-                      height: '100%',
-                      resize: 'none',
-                      border: 'none',
-                      outline: 'none',
-                      padding: '16px',
-                      backgroundColor: '#1a1a1a',
-                      color: '#ffffff',
-                      fontFamily: 'monospace',
-                      fontSize: '12px',
-                      lineHeight: '1.4',
-                      overflow: 'auto',
-                      whiteSpace: 'pre-wrap',
-                      wordWrap: 'break-word',
-                    }}
-                  />
-                  {!inputData && (
-                    <Box
-                      sx={{
-                        position: 'absolute',
-                        top: 16,
-                        left: 16,
-                        color: '#888888',
-                        fontFamily: 'monospace',
-                        fontSize: '12px',
-                        pointerEvents: 'none',
-                        zIndex: 1,
-                      }}
-                    >
-                      Click "Load Current Diagram" to start converting your diagram...
-                    </Box>
-                  )}
-                </Box>
-              </Paper>
-
-              {/* Output Panel */}
-              <Paper sx={{ 
-                flex: 1, 
-                display: 'flex', 
-                flexDirection: 'column',
-                bgcolor: '#2d2d2d',
-                border: '1px solid #444444',
-              }}>
-                <Box
-                  sx={{
-                    p: 1,
-                    bgcolor: '#3d3d3d',
-                    borderBottom: '1px solid',
-                    borderColor: '#555555',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <Typography variant="subtitle2" color="#ffffff">
-                    Output ({outputFormat.toUpperCase()})
-                  </Typography>
-                  <Box>
-                    <Tooltip title="Copy Output">
-                      <IconButton
-                        size="small"
-                        onClick={() => handleCopy(outputData)}
-                        disabled={!outputData}
-                        sx={{
-                          color: '#ffffff',
-                          '&:disabled': {
-                            color: '#666666',
-                          },
-                        }}
-                      >
-                        <CopyIcon fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip title="Download">
-                      <IconButton
-                        size="small"
-                        onClick={() => handleDownload(outputData, outputFormat)}
-                        disabled={!outputData}
-                        sx={{
-                          color: '#ffffff',
-                          '&:disabled': {
-                            color: '#666666',
-                          },
-                        }}
-                      >
-                        <DownloadIcon fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
-                  </Box>
-                </Box>
-                <Paper
-                  sx={{
-                    flex: 1,
-                    p: 2,
-                    bgcolor: outputData ? '#1a1a1a' : '#2a2a2a',
-                    color: '#ffffff',
-                    overflow: 'auto',
-                    fontFamily: 'monospace',
-                    fontSize: '12px',
-                    whiteSpace: 'pre-wrap',
-                    border: 'none',
-                  }}
-                  elevation={0}
-                >
-                  {outputData || 'Converted data will appear here...'}
-                </Paper>
-              </Paper>
-            </Box>
-          </Box>
-        </TabPanel>
-
-        {/* Options Tab */}
-        <TabPanel value={activeTab} index={1}>
-          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
-            <Typography variant="h6" gutterBottom color="#ffffff">
-              Conversion Options
-            </Typography>
-            <Box display="flex" flexDirection="column" gap={2}>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={options.prettyPrint || false}
-                    onChange={(e) =>
-                      setOptions(prev => ({ ...prev, prettyPrint: e.target.checked }))
-                    }
-                    sx={{
-                      '& .MuiSwitch-switchBase.Mui-checked': {
-                        color: '#61dafb',
-                      },
-                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                        backgroundColor: '#61dafb',
-                      },
-                    }}
-                  />
-                }
-                label="Pretty Print Output"
-                sx={{ color: '#ffffff' }}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={options.sortKeys || false}
-                    onChange={(e) =>
-                      setOptions(prev => ({ ...prev, sortKeys: e.target.checked }))
-                    }
-                    sx={{
-                      '& .MuiSwitch-switchBase.Mui-checked': {
-                        color: '#61dafb',
-                      },
-                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                        backgroundColor: '#61dafb',
-                      },
-                    }}
-                  />
-                }
-                label="Sort Object Keys"
-                sx={{ color: '#ffffff' }}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={options.includeComments || false}
-                    onChange={(e) =>
-                      setOptions(prev => ({ ...prev, includeComments: e.target.checked }))
-                    }
-                    sx={{
-                      '& .MuiSwitch-switchBase.Mui-checked': {
-                        color: '#61dafb',
-                      },
-                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                        backgroundColor: '#61dafb',
-                      },
-                    }}
-                  />
-                }
-                label="Include Comments"
-                sx={{ color: '#ffffff' }}
-              />
-              <TextField
-                label="Indentation"
-                type="number"
-                value={options.indent || 2}
-                onChange={(e) =>
-                  setOptions(prev => ({ ...prev, indent: parseInt(e.target.value) || 2 }))
-                }
-                inputProps={{ min: 2, max: 8 }}
-                sx={{ 
-                  width: 200,
-                  '& .MuiInputLabel-root': {
-                    color: '#cccccc',
-                  },
-                  '& .MuiOutlinedInput-root': {
-                    color: '#ffffff',
-                    '& fieldset': {
-                      borderColor: '#444444',
-                    },
-                    '&:hover fieldset': {
-                      borderColor: '#61dafb',
-                    },
-                    '&.Mui-focused fieldset': {
-                      borderColor: '#61dafb',
-                    },
-                  },
-                }}
-              />
-            </Box>
-          </Box>
-        </TabPanel>
-
-        {/* Examples Tab */}
-        <TabPanel value={activeTab} index={2}>
-          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
-            <Typography variant="h6" gutterBottom color="#ffffff">
-              Format Examples & Use Cases
-            </Typography>
-            
-            <Typography variant="subtitle1" gutterBottom sx={{ mt: 2, color: '#61dafb' }}>
-              JSON Format
-            </Typography>
-            <Typography variant="body2" color="#cccccc" gutterBottom>
-              • Standard web format, universally supported
-              • Compact and fast to parse
-              • Great for APIs and data exchange
-              • No comments support
-            </Typography>
-
-            <Typography variant="subtitle1" gutterBottom sx={{ mt: 2, color: '#61dafb' }}>
-              YAML Format
-            </Typography>
-            <Typography variant="body2" color="#cccccc" gutterBottom>
-              • Human-readable and editable
-              • Supports comments and documentation
-              • Popular in DevOps and configuration
-              • Great for version control
-            </Typography>
-
-            <Divider sx={{ my: 2, borderColor: '#444444' }} />
-
-            <Typography variant="subtitle1" gutterBottom color="#ffffff">
-              Common Use Cases
-            </Typography>
-            <Box component="ul" sx={{ pl: 2 }}>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>API Integration:</strong> Use JSON for REST APIs and web services
-                </Typography>
-              </li>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>Configuration Files:</strong> Use YAML for readable config files
-                </Typography>
-              </li>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>Documentation:</strong> Use YAML with comments for self-documenting schemas
-                </Typography>
-              </li>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>Version Control:</strong> YAML diffs are more readable in Git
-                </Typography>
-              </li>
-            </Box>
-          </Box>
-        </TabPanel>
-      </DialogContent>
-
-      <DialogActions sx={{ p: 2, bgcolor: '#2d2d2d' }}>
-        <Button 
-          onClick={onClose}
-          sx={{
-            color: '#ffffff',
-            borderColor: '#444444',
-            '&:hover': {
-              bgcolor: '#3d3d3d',
-            },
-          }}
-        >
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default FormatConverter;