@nethru/ui 1.0.81 → 2.0.0

package/base/styles/mui/button.js

@@ -0,0 +1,276 @@
+import { blue, grey, orange, red } from "../../colors";
+import typography from "../typography";
+import borderRadius from "../borderRadius";
+export const primary = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'contained' && {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: '#242424'
+      },
+      ':active': {
+        color: grey[300],
+        backgroundColor: '#141414'
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'outlined' && {
+      color: grey[900],
+      backgroundColor: '#fff',
+      borderColor: grey[700],
+      ':hover, &.Mui-focusVisible': {
+        color: grey[900],
+        backgroundColor: grey[10]
+      },
+      ':active': {
+        color: grey[900],
+        backgroundColor: grey[20]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'primary' && ownerState.variant === 'text' && {
+      color: grey[900],
+      backgroundColor: '#fff',
+      ':hover, &.Mui-focusVisible': {
+        color: grey[900],
+        backgroundColor: grey[100]
+      },
+      ':active': {
+        color: grey[900],
+        backgroundColor: grey[200]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const info = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'contained' && {
+      color: theme.palette.info.contrastText,
+      backgroundColor: theme.palette.info.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.info.contrastText,
+        backgroundColor: blue[600]
+      },
+      ':active': {
+        color: theme.palette.info.contrastText,
+        backgroundColor: blue[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'outlined' && {
+      color: blue[500],
+      backgroundColor: '#fff',
+      borderColor: blue[500],
+      ':hover, &.Mui-focusVisible': {
+        color: blue[500],
+        backgroundColor: blue[50]
+      },
+      ':active': {
+        color: blue[500],
+        backgroundColor: blue[100]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'info' && ownerState.variant === 'text' && {
+      color: blue[500],
+      backgroundColor: '#fff',
+      ':hover, &.Mui-focusVisible': {
+        color: blue[500],
+        backgroundColor: blue[50]
+      },
+      ':active': {
+        color: blue[500],
+        backgroundColor: blue[100]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const warning = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'warning' && ownerState.variant === 'contained' && {
+      color: theme.palette.warning.contrastText,
+      backgroundColor: theme.palette.warning.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.warning.contrastText,
+        backgroundColor: orange[600]
+      },
+      ':active': {
+        color: theme.palette.warning.contrastText,
+        backgroundColor: orange[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  }
+};
+export const error = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'contained' && {
+      color: theme.palette.error.contrastText,
+      backgroundColor: theme.palette.error.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.error.contrastText,
+        backgroundColor: red[600]
+      },
+      ':active': {
+        color: theme.palette.error.contrastText,
+        backgroundColor: red[800]
+      },
+      ':disabled': {
+        color: grey[500],
+        backgroundColor: grey[300]
+      }
+    };
+  },
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'outlined' && {
+      color: red[700],
+      backgroundColor: '#fff',
+      borderColor: red[600],
+      ':hover, &.Mui-focusVisible': {
+        color: red[700],
+        backgroundColor: red[50] //'#fef2f4',
+      },
+
+      ':active': {
+        color: red[700],
+        backgroundColor: red[100] //'#fcdee5',
+      },
+
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff',
+        borderColor: grey[400]
+      }
+    };
+  },
+  text: (ownerState, theme) => {
+    return ownerState.color === 'error' && ownerState.variant === 'text' && {
+      color: red[700],
+      backgroundColor: '#fff',
+      ':hover, &.Mui-focusVisible': {
+        color: red[700],
+        backgroundColor: red[50] //'#fef2f4',
+      },
+
+      ':active': {
+        color: red[700],
+        backgroundColor: red[100] //'#fcdee5',
+      },
+
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: '#fff'
+      }
+    };
+  }
+};
+export const crud = {
+  contained: (ownerState, theme) => {
+    return ownerState.color === 'crud' && ownerState.variant === 'contained' && {
+      color: theme.palette.crud.contrastText,
+      backgroundColor: theme.palette.crud.main,
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.crud.contrastText,
+        backgroundColor: blue[100]
+      },
+      ':active': {
+        color: theme.palette.crud.contrastText,
+        backgroundColor: blue[200]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: grey[150]
+      }
+    };
+  }
+};
+export const styles = {
+  defaultProps: {
+    variant: 'contained'
+  },
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      ...primary.contained(ownerState, theme),
+      ...primary.outlined(ownerState, theme),
+      ...primary.text(ownerState, theme),
+      ...info.contained(ownerState, theme),
+      ...info.outlined(ownerState, theme),
+      ...info.text(ownerState, theme),
+      ...warning.contained(ownerState, theme),
+      ...error.contained(ownerState, theme),
+      ...error.outlined(ownerState, theme),
+      ...error.text(ownerState, theme),
+      ...crud.contained(ownerState, theme),
+      fontFamily: typography.fontFamily,
+      borderRadius: borderRadius[2],
+      boxShadow: 'none!important'
+    }),
+    sizeMedium: ({
+      ownerState,
+      theme
+    }) => ({
+      minWidth: 60,
+      height: ownerState.color === 'crud' ? 26 : 36,
+      padding: ownerState.color === 'crud' ? '0px 2px' : '8px 12px',
+      fontSize: typography.bodyMdSemibold.fontSize,
+      fontWeight: typography.bodyMdSemibold.fontWeight
+    }),
+    sizeSmall: {
+      minWidth: '50px',
+      height: '26px',
+      padding: '8px 8px',
+      fontSize: typography.bodySmSemibold.fontSize,
+      fontWeight: typography.bodySmSemibold.fontWeight
+    },
+    startIcon: ({
+      ownerState,
+      theme
+    }) => ({
+      marginRight: theme.spacing(ownerState.color === 'crud' ? 0.5 : 1)
+    }),
+    endIcon: ({
+      ownerState,
+      theme
+    }) => ({
+      marginLeft: theme.spacing(ownerState.color === 'crud' ? 0.5 : 1)
+    })
+  }
+};

package/base/styles/mui/buttonBase.js

@@ -0,0 +1,10 @@
+export const styles = {
+  defaultProps: {
+    disableRipple: true
+  },
+  styleOverrides: {
+    root: {
+      whiteSpace: 'nowrap'
+    }
+  }
+};

package/base/styles/mui/checkbox.js

@@ -0,0 +1,37 @@
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[10]
+      },
+      '&:active': {
+        backgroundColor: grey[20]
+      },
+      '& svg': {
+        fill: fillColor(ownerState, theme),
+        width: 20,
+        height: 20
+      }
+    }),
+    sizeLarge: {
+      width: 28,
+      height: 28
+    },
+    sizeMedium: {
+      width: 26,
+      height: 26
+    },
+    sizeSmall: {
+      width: 24,
+      height: 24
+    }
+  }
+};
+function fillColor(ownerState, theme) {
+  if (ownerState.disabled) return ownerState.checked ? grey[700] : grey[400];
+  // return ownerState.checked ? theme.palette.info.main : grey[700];
+}

package/base/styles/mui/chip.js

@@ -0,0 +1,83 @@
+import { blue, green, grey, lime, orange } from "../../colors";
+import typography from "../typography";
+import { lighten } from "@mui/material/styles";
+export const styles = {
+  defaultProps: {
+    size: 'small'
+  },
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      fontFamily: typography.fontFamily,
+      fontSize: typography.bodySmMedium.fontSize,
+      fontWeight: typography.bodySmMedium.fontWeight,
+      letterSpacing: typography.bodySmMedium.letterSpacing,
+      color: textColor(ownerState, theme),
+      backgroundColor: backgroundColor(ownerState, theme),
+      borderColor: borderColor(ownerState, theme),
+      '&:hover, &.Mui-focusVisible': {
+        backgroundColor: hoverColor(ownerState, theme)
+      },
+      '&:active': {
+        backgroundColor: activeColor(ownerState, theme),
+        boxShadow: 'none'
+      }
+    }),
+    sizeMedium: undefined,
+    sizeSmall: {
+      height: 26
+    }
+  }
+};
+function textColor(ownerState, theme) {
+  switch (ownerState.color) {
+    case 'blue':
+      return theme.palette.blue.contrastText;
+    case 'green':
+      return theme.palette.green.contrastText;
+    case 'orange':
+      return theme.palette.orange.contrastText;
+    case 'lime':
+      return theme.palette.lime.contrastText;
+    default:
+      return grey[900];
+  }
+}
+function backgroundColor(ownerState, theme) {
+  if (ownerState.variant === 'outlined') return undefined;
+  switch (ownerState.color) {
+    case 'blue':
+      return blue[50];
+    case 'green':
+      return green[50];
+    case 'orange':
+      return orange[50];
+    case 'lime':
+      return lime[50];
+    default:
+      return grey[7];
+  }
+}
+function borderColor(ownerState, theme) {
+  if (ownerState.variant !== 'outlined') return undefined;
+  switch (ownerState.color) {
+    case 'blue':
+      return blue[500];
+    case 'green':
+      return green[500];
+    case 'orange':
+      return orange[500];
+    case 'lime':
+      return lime[500];
+    default:
+      return grey[300];
+  }
+}
+function hoverColor(ownerState, theme) {
+  return ownerState.clickable && lighten(textColor(ownerState, theme), 0.8);
+}
+function activeColor(ownerState, theme) {
+  return ownerState.clickable && lighten(textColor(ownerState, theme), 0.7);
+}

package/base/styles/mui/cssBaseline.js

@@ -0,0 +1,12 @@
+export const styles = {
+  styleOverrides: {
+    '*': {
+      margin: 0,
+      padding: 0,
+      boxSizing: 'border-box'
+    },
+    body: {
+      height: '100%'
+    }
+  }
+};

package/base/styles/mui/dataGrid.js

@@ -0,0 +1,101 @@
+import typography from "../typography";
+import { blue, grey } from "../../colors";
+import borderRadius from "../borderRadius";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      border: 'none'
+    },
+    main: ({
+      ownerState
+    }) => ({
+      border: `1px solid ${ownerState?.error ? 'red' : grey[300]}`,
+      borderRadius: borderRadius[2]
+    }),
+    footerContainer: {
+      border: 'none',
+      '.MuiDataGrid-selectedRowCount': {
+        ...typography.bodySmMedium,
+        color: grey[700]
+      }
+    },
+    columnHeaders: {
+      minHeight: 'unset !important'
+    },
+    columnHeader: {
+      ...typography.bodySmBold,
+      color: grey[600],
+      backgroundColor: grey[50],
+      height: '35px !important',
+      '&:focus, &:focus-within': {
+        outline: 'none'
+      },
+      '.Mui-checked, .MuiCheckbox-indeterminate': {
+        color: blue[500]
+      }
+    },
+    iconButtonContainer: {
+      ...typography.bodySmRegular,
+      marginLeft: 2,
+      '.MuiIconButton-root': {
+        color: grey[600],
+        width: 16,
+        height: 16
+      },
+      '.MuiIconButton-root svg': {
+        width: 14,
+        height: 14
+      }
+    },
+    row: {
+      minHeight: 'unset !important',
+      '.MuiDataGrid-cell .MuiDataGrid-actions': {
+        display: 'none'
+      },
+      '&.Mui-hovered': {
+        backgroundColor: grey[5],
+        '.MuiDataGrid-cell .MuiDataGrid-actions': {
+          display: 'block'
+        }
+      },
+      '&.Mui-selected, &.Mui-selected.Mui-hovered': {
+        backgroundColor: blue[5]
+      }
+    },
+    rowReorderCell: {
+      color: grey[700]
+    },
+    cell: ({
+      ownerState
+    }) => ({
+      minHeight: '40px !important',
+      paddingTop: 10,
+      paddingBottom: 10,
+      '&.MuiTypography-bold': {
+        fontWeight: 'bold'
+      },
+      '&.MuiTypography-greyed': {
+        color: grey[600]
+      },
+      '&:focus, &:focus-within': {
+        outline: ownerState?.editable ? `solid ${blue[500]} 1px` : 'none'
+      },
+      '&.MuiDataGrid-cell--editing': {
+        boxShadow: 'none',
+        '&:focus, &:focus-within': {
+          outline: `solid ${blue[500]} 1px`
+        }
+      }
+    }),
+    cellCheckbox: {
+      '.Mui-checked': {
+        color: blue[500]
+      }
+    },
+    overlayWrapperInner: {
+      ...typography.bodySmRegular
+    }
+  }
+};

package/base/styles/mui/dialog.js

@@ -0,0 +1,13 @@
+import shadow from "../shadow";
+export const styles = {
+  styleOverrides: {
+    root: {
+      '.MuiModal-backdrop': {
+        backgroundColor: 'rgba(48, 50, 54, 0.6)'
+      }
+    },
+    paper: {
+      boxShadow: shadow[5]
+    }
+  }
+};

package/base/styles/mui/dialogActions.js

@@ -0,0 +1,8 @@
+export const styles = {
+  styleOverrides: {
+    root: {
+      justifyContent: 'center',
+      padding: '0px 24px 24px 24px'
+    }
+  }
+};

package/base/styles/mui/dialogContent.js

@@ -0,0 +1,10 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdSemibold,
+      padding: 24
+    }
+  }
+};

package/base/styles/mui/dialogTitle.js

@@ -0,0 +1,11 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyXlSemibold,
+      marginBottom: -8,
+      padding: '24px 24px 0px 24px'
+    }
+  }
+};

package/base/styles/mui/formControl.js

@@ -0,0 +1,8 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily
+    }
+  }
+};

package/base/styles/mui/formControlLabel.js

@@ -0,0 +1,9 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium
+    }
+  }
+};

package/base/styles/mui/formHelperText.js

@@ -0,0 +1,10 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontSize: typography.bodyXsMedium.fontSize,
+      marginTop: 0,
+      marginLeft: 4
+    }
+  }
+};

package/base/styles/mui/grid.js

@@ -0,0 +1,15 @@
+import { grey } from "../../colors";
+import borderRadius from "../borderRadius";
+export const styles = {
+  styleOverrides: {
+    item: {
+      '.MuiGrid-box': {
+        // height: 'calc(100% - 32px)',
+        backgroundColor: grey[50],
+        border: `1px solid ${grey[300]}`,
+        padding: '16px !important',
+        borderRadius: `${borderRadius[2]}px`
+      }
+    }
+  }
+};

package/base/styles/mui/icon.js

@@ -0,0 +1,12 @@
+export const styles = {
+  styleOverrides: {
+    fontSizeLarge: {
+      width: 20,
+      height: 20
+    },
+    fontSizeSmall: {
+      width: 16,
+      height: 16
+    }
+  }
+};