@flowuent-org/diagramming-core 1.3.9 → 1.4.0

package/packages/diagrams/src/lib/components/DiagramPanel.tsx

@@ -1,331 +0,0 @@
-import React from 'react';
-import { Box, Button } from '@mui/material';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import UploadIcon from '@mui/icons-material/Upload';
-import SettingsIcon from '@mui/icons-material/Settings';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import { useReactFlow, Panel } from '@xyflow/react';
-
-export interface DiagramPanelProps {
-  // History controls
-  historyIndex: number;
-  historyLength: number;
-  onUndo: () => void;
-  onRedo: () => void;
-  onClear: () => void;
-
-  // Import/Export
-  onImport: (data: any) => void;
-
-  // Settings
-  isSettingsOpen: boolean;
-  onToggleSettings: () => void;
-
-  // Optional custom controls
-  showCustomControls?: boolean;
-  onGridLayout?: () => void;
-  onTreeLayout?: () => void;
-}
-
-// Custom controls component that uses useReactFlow
-const CustomControls: React.FC<{
-  onGridLayout?: () => void;
-  onTreeLayout?: () => void;
-}> = ({ onGridLayout, onTreeLayout }) => {
-  const { zoomIn, zoomOut } = useReactFlow();
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.5,
-        bgcolor: '#2a2a2a',
-        borderRadius: '8px',
-        padding: '4px 8px',
-        border: '1px solid #404040',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-      }}
-    >
-      {/* Zoom Out */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={() => zoomOut()}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <ZoomOutIcon sx={{ fontSize: '18px' }} />
-      </Button>
-
-      {/* Divider */}
-      <Box
-        sx={{
-          width: '1px',
-          height: '24px',
-          bgcolor: '#404040',
-          mx: 0.5,
-        }}
-      />
-
-      {/* Zoom In */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={() => zoomIn()}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <ZoomInIcon sx={{ fontSize: '18px' }} />
-      </Button>
-
-      {/* Divider */}
-      <Box
-        sx={{
-          width: '1px',
-          height: '24px',
-          bgcolor: '#404040',
-          mx: 0.5,
-        }}
-      />
-
-      {/* Grid Layout */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={onGridLayout || (() => console.log('Grid layout clicked'))}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <ViewModuleIcon sx={{ fontSize: '18px' }} />
-      </Button>
-
-      {/* Tree Layout */}
-      <Button
-        variant="text"
-        size="small"
-        onClick={onTreeLayout || (() => console.log('Tree layout clicked'))}
-        sx={{
-          minWidth: '32px',
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          color: '#ffffff',
-          '&:hover': {
-            bgcolor: 'rgba(255,255,255,0.1)',
-            borderRadius: '4px',
-          },
-        }}
-      >
-        <AccountTreeIcon sx={{ fontSize: '18px' }} />
-      </Button>
-    </Box>
-  );
-};
-
-// Divider component for reusability
-const Divider: React.FC = () => (
-  <Box
-    sx={{
-      width: '1px',
-      height: '24px',
-      bgcolor: '#404040',
-      mx: 0.5,
-    }}
-  />
-);
-
-export default function DiagramPanel({
-  historyIndex,
-  historyLength,
-  onUndo,
-  onRedo,
-  onClear,
-  onImport,
-  isSettingsOpen,
-  onToggleSettings,
-  showCustomControls = true,
-  onGridLayout,
-  onTreeLayout,
-}: DiagramPanelProps) {
-  const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          const data = JSON.parse(e.target?.result as string);
-          if (data.nodes && data.edges) {
-            onImport(data);
-          }
-        } catch (error) {
-          console.error('Error importing diagram:', error);
-        }
-      };
-      reader.readAsText(file);
-    }
-  };
-
-  return (
-    <Panel position="top-left">
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-          marginTop: '30px', // Add top margin to push buttons down
-        }}
-      >
-        {/* Main Controls Toolbar */}
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.5,
-            bgcolor: '#2a2a2a',
-            borderRadius: '8px',
-            padding: '4px 8px',
-            border: '1px solid #404040',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-          }}
-        >
-          {/* Clear Button */}
-          <Button
-            variant="text"
-            size="small"
-            onClick={onClear}
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: '#ffffff',
-              fontSize: '12px',
-              '&:hover': {
-                bgcolor: 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            C
-          </Button>
-
-          <Divider />
-
-          {/* Undo Button */}
-          <Button
-            variant="text"
-            size="small"
-            onClick={onUndo}
-            disabled={historyIndex <= 0}
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: historyIndex <= 0 ? '#666666' : '#ffffff',
-              '&:hover': {
-                bgcolor:
-                  historyIndex <= 0 ? 'transparent' : 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            <UndoIcon sx={{ fontSize: '18px' }} />
-          </Button>
-
-          {/* Redo Button */}
-          <Button
-            variant="text"
-            size="small"
-            onClick={onRedo}
-            disabled={historyIndex >= historyLength - 1}
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: historyIndex >= historyLength - 1 ? '#666666' : '#ffffff',
-              '&:hover': {
-                bgcolor:
-                  historyIndex >= historyLength - 1
-                    ? 'transparent'
-                    : 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            <RedoIcon sx={{ fontSize: '18px' }} />
-          </Button>
-
-          <Divider />
-
-          {/* Import Button */}
-          <Button
-            variant="text"
-            component="label"
-            size="small"
-            sx={{
-              minWidth: '32px',
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              color: '#ffffff',
-              '&:hover': {
-                bgcolor: 'rgba(255,255,255,0.1)',
-                borderRadius: '4px',
-              },
-            }}
-          >
-            <UploadIcon sx={{ fontSize: '18px' }} />
-            <input
-              type="file"
-              onChange={handleFileImport}
-              accept=".json"
-              style={{ display: 'none' }}
-            />
-          </Button>
-        </Box>
-
-        {/* Custom Controls Toolbar */}
-        {showCustomControls && (
-          <CustomControls
-            onGridLayout={onGridLayout}
-            onTreeLayout={onTreeLayout}
-          />
-        )}
-      </Box>
-    </Panel>
-  );
-}

package/packages/diagrams/src/lib/components/FunctionModalTooltip.tsx

@@ -1,31 +0,0 @@
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-interface FunctionModalTooltipProps {
-    backgroundColor: string;
-}
-
-const FunctionModalTooltip = memo(({ backgroundColor }: FunctionModalTooltipProps) => {
-    const { t } = useTranslation();
-
-    return (
-        <>
-            <div><b>{t('createFunctionModal.guidelines.title')}</b></div>
-            <ul style={{ margin: 0, paddingLeft: 18 }}>
-                <li>{t('createFunctionModal.guidelines.uniqueName')}</li>
-                <li>{t('createFunctionModal.guidelines.arguments')}</li>
-                <li>{t('createFunctionModal.guidelines.autoGeneration')}</li>
-            </ul>
-            <div style={{ marginTop: 8 }}><b>{t('createFunctionModal.example.title')}</b></div>
-            <div style={{ fontFamily: 'monospace', fontSize: 13, background: backgroundColor, padding: 6, borderRadius: 4 }}>
-                {t('createFunctionModal.example.name')}<br />
-                {t('createFunctionModal.example.args')}<br />
-                {t('createFunctionModal.example.code')}
-            </div>
-        </>
-    );
-});
-
-FunctionModalTooltip.displayName = 'FunctionModalTooltip';
-
-export default FunctionModalTooltip; 

package/packages/diagrams/src/lib/components/GraphQLCustomCodeModal.tsx

@@ -1,210 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Box, Button, Modal, Stack, TextField, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-interface GraphQLCustomCodeModalProps {
-    open: boolean;
-    onClose: () => void;
-    code: string;
-    onCodeChange: (code: string) => void;
-    title?: string;
-    description?: string;
-    onSave?: () => void;
-}
-
-// Memoize the modal styles
-const useModalStyles = () => useMemo(() => ({
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: '80%',
-    maxHeight: 600,
-    overflowY: 'auto',
-    bgcolor: '#232323',
-    color: '#fff',
-    boxShadow: 24,
-    p: 4,
-    borderRadius: 2,
-    '&::-webkit-scrollbar': {
-        width: '10px',
-        background: '#181818',
-    },
-    '&::-webkit-scrollbar-thumb': {
-        background: '#393939',
-        borderRadius: '8px',
-    },
-    scrollbarColor: '#393939 #181818',
-    scrollbarWidth: 'thin',
-}), []);
-
-const GraphQLCustomCodeModal: React.FC<GraphQLCustomCodeModalProps> = React.memo(({
-    open,
-    onClose,
-    code = '',
-    onCodeChange,
-    title,
-    description,
-    onSave,
-}) => {
-    const { t } = useTranslation();
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const modalStyles = useModalStyles();
-
-    const handleImportCode = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files && event.target.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                const text = e.target?.result as string;
-                if (typeof text === 'string') {
-                    onCodeChange(text);
-                }
-            };
-            reader.onerror = () => {
-                alert('Failed to read file.');
-            };
-            reader.readAsText(file);
-        }
-        event.target.value = '';
-    }, [onCodeChange]);
-
-    const handleSave = useCallback(() => {
-        if (typeof onSave === 'function') {
-            onSave();
-        }
-    }, [onSave]);
-
-    useEffect(() => {
-        if (open) {
-            // Reset any state when modal opens
-        }
-    }, [open]);
-
-    return (
-        <Modal open={open} onClose={onClose}>
-            <Box sx={modalStyles}>
-                <Typography variant="h6" gutterBottom sx={{ color: '#fff' }}>
-                    {title || t('graphqlForm.customQuery')}
-                </Typography>
-
-                <Typography variant="body1" sx={{ mt: 2, color: '#aaa' }}>
-                    {description || t('graphqlForm.customQueryDescription')}
-                </Typography>
-
-                {/* GraphQL Query Preview */}
-                <Box sx={{
-                    mt: 2,
-                    p: 2,
-                    bgcolor: '#2a2a2a',
-                    borderRadius: 1,
-                    border: '1px solid #444',
-                    fontFamily: 'monospace',
-                    fontSize: '14px'
-                }}>
-                    <Typography variant="body2" sx={{ color: '#888', mb: 1 }}>
-                        {t('graphqlForm.queryPreview') || 'Query Preview:'}
-                    </Typography>
-                    <Box sx={{ color: '#fff' }}>
-                        <span style={{ color: '#ff79c6' }}>query</span>{' '}
-                        <span style={{ color: '#50fa7b' }}>GetUser</span>
-                        <span style={{ color: '#fff' }}>(</span>
-                        <span style={{ color: '#f1fa8c' }}>$userId: ID!</span>
-                        <span style={{ color: '#fff' }}>) {'{'}</span>
-                    </Box>
-                    <Box sx={{ mt: 1, color: '#fff' }}>
-                        <span style={{ color: '#fff' }}>  user(id: $userId) {'{'}</span>
-                    </Box>
-                    <Box sx={{ mt: 1, color: '#fff' }}>
-                        <span style={{ color: '#fff' }}>    id</span>
-                    </Box>
-                    <Box sx={{ color: '#fff' }}>
-                        <span style={{ color: '#fff' }}>    name</span>
-                    </Box>
-                    <Box sx={{ color: '#fff' }}>
-                        <span style={{ color: '#fff' }}>    email</span>
-                    </Box>
-                    <Box sx={{ color: '#fff' }}>
-                        <span style={{ color: '#fff' }}>  {'}'}</span>
-                    </Box>
-                    <Box sx={{ color: '#fff' }}>
-                        <span style={{ color: '#fff' }}>{'}'}</span>
-                    </Box>
-                </Box>
-
-                <Typography variant="body2" sx={{ mt: 2, color: '#aaa', fontStyle: 'italic' }}>
-                    {t('graphqlForm.writeCustomQuery') || 'Write your custom GraphQL query below:'}
-                </Typography>
-                <Typography variant="caption" sx={{ color: '#666', fontStyle: 'italic', display: 'block', mt: 0.5 }}>
-                    {t('graphqlForm.queryNote') || 'Include the complete query, mutation, or subscription with all necessary fields and variables.'}
-                </Typography>
-
-                <TextField
-                    multiline
-                    rows={12}
-                    fullWidth
-                    value={code}
-                    onChange={(e) => onCodeChange(e.target.value)}
-                    placeholder={t('graphqlForm.queryPlaceholder') || `query GetUser($userId: ID!) {
-  user(id: $userId) {
-    id
-    name
-    email
-  }
-}`}
-                    sx={{
-                        mt: 2,
-                        '& .MuiInputBase-input': {
-                            color: '#fff',
-                            background: '#232323',
-                            fontFamily: 'monospace',
-                            fontSize: '14px',
-                            lineHeight: 1.5
-                        },
-                        '& .MuiOutlinedInput-root': {
-                            '& fieldset': { borderColor: '#8E8E93' },
-                            '&:hover fieldset': { borderColor: '#fff' },
-                        },
-                    }}
-                    InputLabelProps={{ style: { color: '#aaa' } }}
-                    InputProps={{ style: { color: '#fff', background: '#232323' } }}
-                />
-
-                <Stack direction="row" spacing={2} sx={{ mt: 4, justifyContent: 'flex-end' }}>
-                    <input
-                        type="file"
-                        accept=".graphql,.gql,.txt,.json"
-                        style={{ display: 'none' }}
-                        ref={fileInputRef}
-                        onChange={handleImportCode}
-                    />
-                    <Button
-                        variant="outlined"
-                        sx={{ color: '#fff', borderColor: '#6c47ff' }}
-                        onClick={() => fileInputRef.current?.click()}
-                    >
-                        {t('graphqlForm.importQuery') || 'Import Query'}
-                    </Button>
-                    <Button
-                        variant="outlined"
-                        sx={{ color: '#fff', borderColor: '#6c47ff' }}
-                        onClick={handleSave}
-                    >
-                        {t('graphqlForm.saveQuery') || 'Save Query'}
-                    </Button>
-                    <Button
-                        variant="contained"
-                        sx={{ background: '#6c47ff', color: '#fff' }}
-                        onClick={onClose}
-                    >
-                        {t('graphqlForm.close') || 'Close'}
-                    </Button>
-                </Stack>
-            </Box>
-        </Modal>
-    );
-});
-
-GraphQLCustomCodeModal.displayName = 'GraphQLCustomCodeModal';
-
-export default GraphQLCustomCodeModal;