@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,546 @@
+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

@@ -0,0 +1,23 @@
+{
+  "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

@@ -0,0 +1,21 @@
+{
+  "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

@@ -0,0 +1,28 @@
+{
+  "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

@@ -0,0 +1,51 @@
+/// <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',
+    },
+  },
+});