@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/apps/workflow/src/theme/index.ts

@@ -1,546 +0,0 @@
-import * as React from 'react';
-import { alpha, createTheme, ThemeOptions } from '@mui/material/styles';
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {}
-}
-
-declare module '@mui/material/Button' {
-  interface ButtonPropsVariantOverrides {
-    addNode: true;
-  }
-
-  interface ButtonPropsColorOverrides {}
-}
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    draggedDiagramCard: true;
-    diagramCard: true;
-  }
-}
-
-declare module '@mui/material/TextField' {
-  interface TextFieldPropsVariantOverrides {
-    cardTitle: true;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface Palette {
-    neutral: Palette['primary'];
-    tertiary: Palette['primary'];
-    globalAction: Palette['primary'];
-    stepAction: Palette['primary'];
-
-    checkboxPrimary: Palette['primary'];
-    checkboxStyle1: Palette['secondary'];
-  }
-
-  interface PaletteOptions {
-    neutral?: PaletteOptions['primary'];
-    tertiary?: PaletteOptions['primary'];
-    globalAction?: PaletteOptions['primary'];
-    stepAction?: PaletteOptions['primary'];
-
-    checkboxPrimary?: PaletteOptions['primary'];
-    checkboxStyle1?: PaletteOptions['secondary'];
-  }
-}
-
-let theme = createTheme({});
-
-const DiagramCardStyles = {
-  backgroundColor: '#fff',
-  padding: '10px',
-  borderRadius: '0.5rem',
-  border: '2px solid #1d1d1d',
-  paddingTop: '-1rem',
-  fontSize: '0.8rem',
-  height: '100%',
-  width: '100%',
-};
-
-declare module '@mui/material/styles' {
-  interface Theme {
-    styledBox: { [key: string]: React.CSSProperties };
-    tableView?: {
-      [key: string]:
-        | React.CSSProperties
-        | { [key: string]: React.CSSProperties };
-    };
-  }
-
-  interface ThemeOptions {
-    styledBox?: { [key: string]: React.CSSProperties };
-    tableView?: {
-      [key: string]: React.CSSProperties | { [key: string]: any };
-    };
-  }
-}
-
-declare module '@flowuent-labs/interfaces' {
-  interface StyledBoxVariantOverrides {
-    inputVariant: true;
-    cardCoverImage: true;
-    cardCoverImagePreview: true;
-    cardAddNewBlock: true;
-  }
-
-  interface DataGridVariantOverrides {
-    grayRow: true;
-  }
-}
-
-const themeOptions: ThemeOptions = {
-  styledBox: {
-    inputVariant: {
-      width: '100%',
-      textAlign: 'center',
-      border: 'none',
-      backgroundColor: 'transparent',
-      outline: 'none',
-    },
-    cardCoverImage: {
-      width: '100%',
-      maxWidth: '7rem',
-      height: 'auto',
-      maxHeight: '5rem',
-      objectFit: 'cover',
-      borderRadius: '0.5rem',
-    },
-    cardCoverImagePreview: {
-      borderRadius: '0.5rem',
-      width: '100%',
-      maxWidth: '7rem',
-      height: '5rem',
-      backgroundColor: 'rgba(245, 204, 0, 0.16)',
-    },
-    cardAddNewBlock: {
-      fontSize: '0.7rem',
-      fontWeight: 600,
-      backgroundColor: '#fff',
-      color: '#1d1d1d',
-      marginBottom: '2px',
-      borderRadius: '0.3rem',
-      minWidth: '6rem',
-      padding: '0.25rem',
-      width: '100%',
-      // '&:hover': {
-      //   backgroundColor: 'rgba(0, 0, 0, 0.2)',
-      // },
-    },
-  },
-  tableView: {
-    grayRow: {
-      // FIXME: need to fix the design
-      '.MuiDataGrid-row': {
-        backgroundColor: '#F5F5F5',
-        color: '#707070B2',
-        '&:hover': {
-          backgroundColor: '#F5F5F5',
-        },
-      },
-      '& .MuiDataGrid-row.Mui-hovered': {
-        backgroundColor: '#F5F5F5',
-      },
-      '.MuiDataGrid-columnHeaders': {
-        backgroundColor: '#F5F5F5',
-      },
-    },
-  },
-
-  typography: {
-    button: {
-      fontWeight: 600,
-    },
-    fontFamily:
-      '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Roboto"',
-    body1: {
-      fontSize: '1vw',
-      fontWeight: 400,
-      lineHeight: 1.5,
-    },
-    body2: {
-      fontSize: '0.875vw',
-      fontWeight: 400,
-      lineHeight: 1.57,
-    },
-    subtitle1: {
-      fontSize: '1vw',
-      fontWeight: 500,
-      lineHeight: 1.75,
-    },
-    subtitle2: {
-      fontSize: '0.875vw',
-      fontWeight: 500,
-      lineHeight: 1.57,
-    },
-    overline: {
-      fontSize: '0.75vw',
-      fontWeight: 600,
-      letterSpacing: '0.5px',
-      lineHeight: 2.5,
-      textTransform: 'uppercase',
-    },
-    caption: {
-      fontSize: '0.75vw',
-      fontWeight: 400,
-      lineHeight: 1.66,
-    },
-    h1: {
-      fontWeight: 700,
-      fontSize: '3.5vw',
-      lineHeight: 1.375,
-    },
-    h2: {
-      fontWeight: 700,
-      fontSize: '3vw',
-      lineHeight: 1.375,
-    },
-    h3: {
-      fontWeight: 700,
-      fontSize: '2.25vw',
-      lineHeight: 1.375,
-    },
-    h4: {
-      fontWeight: 700,
-      fontSize: '2vw',
-      lineHeight: 1.375,
-    },
-    h5: {
-      fontWeight: 600,
-      fontSize: '1.5vw',
-      lineHeight: 1.375,
-    },
-    h6: {
-      fontWeight: 600,
-      fontSize: '1.125vw',
-      lineHeight: 1.375,
-    },
-  },
-
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 1000,
-      lg: 1200,
-      xl: 1920,
-    },
-  },
-  components: {
-    MuiTypography: {
-      variants: [],
-    },
-    MuiPaper: {
-      variants: [
-        {
-          props: { variant: 'draggedDiagramCard' },
-          style: { ...DiagramCardStyles, borderColor: '#fd944e' },
-        },
-        {
-          props: { variant: 'diagramCard' },
-          style: DiagramCardStyles,
-        },
-      ],
-    },
-    MuiButton: {
-      variants: [
-        {
-          props: { variant: 'addNode' },
-          style: {
-            position: 'absolute',
-            width: '8px',
-            height: '8px',
-            minWidth: '8px',
-            minHeight: '8px',
-            padding: '7px 6px 6px 6px',
-            borderRadius: '50%',
-            border: 'none',
-            backgroundColor: '#0050ff',
-            fontSize: '0.8rem',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#fff',
-            '&:hover': {
-              backgroundColor: alpha('#0050ff', 0.8),
-            },
-          },
-        },
-      ],
-    },
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true,
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#F5F5F5',
-          color: '#707070',
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          '&.Mui-selected': {
-            color: '#393434',
-          },
-        },
-        selected: {
-          color: '#393434',
-        },
-      },
-    },
-    MuiTabs: {
-      styleOverrides: {
-        indicator: {
-          backgroundColor: '#2761DA',
-        },
-      },
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#F5F5F5',
-          color: '#707070',
-        },
-      },
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          '&.cardTitle': {
-            fontSize: '0.8rem',
-            fontWeight: 600,
-            '& input': {
-              textAlign: 'start',
-              backgroundColor: 'transparent',
-              padding: '0.05rem 0.1rem',
-              minWidth: '6rem',
-              maxWidth: '100%',
-              marginBottom: '0.4rem',
-            },
-            '& .MuiInput-notchedOutline': {
-              border: 'none',
-            },
-            '&:hover .MuiInput-notchedOutline': {
-              border: 'none',
-            },
-            '&.Mui-focused .MuiInput-notchedOutline': {
-              border: 'none',
-            },
-          },
-        },
-      },
-    },
-    MuiCardContent: {},
-    MuiCardHeader: {},
-
-    MuiCssBaseline: {
-      styleOverrides: {
-        '*': {},
-        html: {},
-        body: {},
-      },
-    },
-    MuiOutlinedInput: {},
-    MuiTableHead: {},
-    MuiSwitch: {
-      styleOverrides: {
-        root: {
-          width: 78,
-          height: 29,
-          padding: 1,
-        },
-        switchBase: {
-          padding: 1,
-          margin: 2,
-          transitionDuration: '300ms',
-          '&.Mui-checked': {
-            width: 78,
-            transform: 'translateX(13px)',
-            color: '#2761DA',
-          },
-          '&.Mui-focusVisible .MuiSwitch-thumb': {
-            color: '#FAFAFA',
-            border: '6px solid #FAFAFA',
-          },
-        },
-        thumb: {
-          boxSizing: 'border-box',
-          width: 42,
-          height: 22,
-          borderRadius: '99px',
-        },
-        track: {
-          borderRadius: '13px',
-        },
-        colorSecondary: {
-          '&.Mui-checked + .MuiSwitch-track': {
-            backgroundColor: '#2761DA',
-            opacity: 1,
-            border: 0,
-          },
-          '&.Mui-disabled + .MuiSwitch-track': {
-            opacity: 0.7,
-          },
-          '&.Mui-disabled .MuiSwitch-thumb': {
-            color: '#B3B3B3',
-          },
-        },
-      },
-    },
-  },
-  palette: {
-    neutral: {
-      100: '#F3F4F6',
-      200: '#E5E7EB',
-      300: '#D1D5DB',
-      400: '#9CA3AF',
-      500: '#6B7280',
-      600: '#4B5563',
-      700: '#374151',
-      800: '#1F2937',
-      900: '#3f4b68',
-    },
-    action: {
-      active: '#6B7280',
-      focus: 'rgba(55, 65, 81, 0.12)',
-      hover: 'rgba(55, 65, 81, 0.04)',
-      selected: 'rgba(55, 65, 81, 0.08)',
-      disabledBackground: 'rgba(55, 65, 81, 0.12)',
-      disabled: 'rgba(55, 65, 81, 0.26)',
-    },
-    background: {
-      // grey color
-      default: '#d3d3d3',
-
-      // Old background
-      // default1: '#8262b4',
-      // coral
-      paper: '#FFFFFF',
-    },
-    divider: '#E6E8F0',
-    primary: {
-      main: '#b1d2d2',
-      light: '#828DF8',
-      dark: '#3832A0',
-      contrastText: '#FFFFFF',
-    },
-    tertiary: {
-      main: '#3832A0',
-      light: '#b8d4d4',
-      dark: '#14B8A6',
-      contrastText: '#FFFFFF',
-    },
-    secondary: {
-      main: '#10B981',
-      light: '#3FC79A',
-      dark: '#0B815A',
-      contrastText: '#FFFFFF',
-    },
-    success: {
-      main: '#14B8A6',
-      light: '#43C6B7',
-      dark: '#0E8074',
-      contrastText: '#FFFFFF',
-    },
-    info: {
-      main: '#2196F3',
-      light: '#64B6F7',
-      dark: '#0B79D0',
-      contrastText: '#FFFFFF',
-    },
-    warning: {
-      main: '#FFB020',
-      light: '#FFBF4C',
-      dark: '#B27B16',
-      contrastText: '#FFFFFF',
-    },
-    error: {
-      main: '#D14343',
-      light: '#DA6868',
-      dark: '#922E2E',
-      contrastText: '#FFFFFF',
-    },
-    // goToModule: {
-    //     main: '#2F1943',
-    //         light: '#DA6868',
-    //         dark: '#922E2E',
-    //         contrastText: '#FFFFFF'
-    // },
-    text: {
-      primary: '#121828',
-      secondary: '#65748B',
-      disabled: 'rgba(55, 65, 81, 0.48)',
-    },
-  },
-  shape: {
-    borderRadius: 8,
-  },
-  shadows: [
-    'none',
-    '0px 1px 1px rgba(100, 116, 139, 0.06), 0px 1px 2px rgba(100, 116, 139, 0.1)',
-    '0px 1px 2px rgba(100, 116, 139, 0.12)',
-    '0px 1px 4px rgba(100, 116, 139, 0.12)',
-    '0px 1px 5px rgba(100, 116, 139, 0.12)',
-    '0px 1px 6px rgba(100, 116, 139, 0.12)',
-    '0px 2px 6px rgba(100, 116, 139, 0.12)',
-    '0px 3px 6px rgba(100, 116, 139, 0.12)',
-    '0px 2px 4px rgba(31, 41, 55, 0.06), 0px 4px 6px rgba(100, 116, 139, 0.12)',
-    '0px 5px 12px rgba(100, 116, 139, 0.12)',
-    '0px 5px 14px rgba(100, 116, 139, 0.12)',
-    '0px 5px 15px rgba(100, 116, 139, 0.12)',
-    '0px 6px 15px rgba(100, 116, 139, 0.12)',
-    '0px 7px 15px rgba(100, 116, 139, 0.12)',
-    '0px 8px 15px rgba(100, 116, 139, 0.12)',
-    '0px 9px 15px rgba(100, 116, 139, 0.12)',
-    '0px 10px 15px rgba(100, 116, 139, 0.12)',
-    '0px 12px 22px -8px rgba(100, 116, 139, 0.25)',
-    '0px 13px 22px -8px rgba(100, 116, 139, 0.25)',
-    '0px 14px 24px -8px rgba(100, 116, 139, 0.25)',
-    '0px 10px 10px rgba(31, 41, 55, 0.04), 0px 20px 25px rgba(31, 41, 55, 0.1)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-  ],
-};
-
-theme = createTheme(theme, themeOptions);
-theme = createTheme(theme, {
-  palette: {
-    globalAction: {
-      main: '#260353',
-      light: '#441680',
-      dark: '#441680',
-      contrastText: '#fff',
-    },
-    stepAction: {
-      main: '#441680',
-      light: '#260353',
-      dark: '#260353',
-      contrastText: '#fff',
-    },
-
-    checkboxPrimary: {
-      main: '#ccc',
-      contrastText: '#FFFFFF',
-    },
-    checkboxStyle1: {
-      checked: '#78C1BE',
-      border: '1px solid #78C1BE',
-      hover: '#ccc',
-      disabled: '#FFFFFF',
-      backgroundColor: '',
-      contrastText: '#fff',
-    },
-  },
-});
-
-export { theme };

package/apps/workflow/tsconfig.app.json

@@ -1,23 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "vite/client"
-    ]
-  },
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}

package/apps/workflow/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "types": ["vite/client", "vitest"]
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}

package/apps/workflow/tsconfig.spec.json

@@ -1,28 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vitest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}

package/apps/workflow/vite.config.ts

@@ -1,51 +0,0 @@
-/// <reference types='vitest' />
-import {defineConfig} from 'vite';
-import react from '@vitejs/plugin-react';
-import {nxViteTsPaths} from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-
-// @ts-ignore
-export default defineConfig({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/workflow',
-
-  server: {
-    port: 4200,
-    host: 'localhost',
-  },
-
-  preview: {
-    port: 4300,
-    host: 'localhost',
-  },
-
-  plugins: [react(), nxViteTsPaths()],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-
-  build: {
-    outDir: '../../dist/apps/workflow',
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-  },
-
-  // @ts-ignore
-  test: {
-    globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../../coverage/apps/workflow',
-      provider: 'v8',
-    },
-  },
-});