@nethru/ui 2.0.2 → 2.0.4

package/base/AccordionSummary.js

@@ -0,0 +1,52 @@
+import { forwardRef } from "react";
+import { Stack, Typography } from "@mui/material";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import { ExpandMoreIcon, NethruBulletIcon } from "./assets/icons";
+import { grey } from "./colors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AccordionSummary = /*#__PURE__*/forwardRef(({
+  expandable = true,
+  subcontent,
+  children,
+  sx,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(MuiAccordionSummary, {
+    ref: ref,
+    expandIcon: expandable ? /*#__PURE__*/_jsx(ExpandMoreIcon, {
+      sx: expandMoreStyles
+    }) : undefined,
+    sx: {
+      pointerEvents: 'none',
+      ...sx
+    },
+    ...props,
+    children: /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: 1.5,
+      children: [/*#__PURE__*/_jsx(NethruBulletIcon, {
+        sx: bulletStyles
+      }), children, subcontent && /*#__PURE__*/_jsx(Typography, {
+        variant: "bodySmSemibold",
+        color: grey[600],
+        children: subcontent
+      })]
+    })
+  });
+});
+export default AccordionSummary;
+const expandMoreStyles = {
+  pointerEvents: 'auto',
+  fontSize: 24,
+  path: {
+    fill: grey[900]
+  }
+};
+const bulletStyles = {
+  fontSize: 18,
+  path: {
+    fill: grey[800]
+  }
+};

package/base/assets/icons.js

@@ -300,6 +300,17 @@ export const CollapseIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
     fill: "#333333"
   })
 }), 'Collapse');
+export const ExpandMoreIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.40531 8.96412L6.35156 10.0181L12.0053 15.6719L17.6591 10.0181L16.6053 8.96412L12.0053 13.5641L7.40531 8.96412Z",
+    fill: "#7B7B7B"
+  })
+}), 'Expand');
 export const MonitoringIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
   width: "24",
   height: "24",

package/base/frame/sidebar/css/primary.module.css

@@ -50,9 +50,6 @@
 }
 
 
-.icon {
-    margin: 4px 15px 0px 16px;
-}
 .icon > svg {
     width: 24px;
     height: 24px;
@@ -65,5 +62,5 @@
     line-height: 1.4;
     letter-spacing: 0;
     white-space: nowrap;
-    overflow-x: hidden;
+    overflow: hidden;
 }

package/base/index.js

@@ -5,6 +5,7 @@ import globalStyles from './styles/globalStyles';
 import createTheme from './styles/createTheme';
 export { colors };
 export { borderRadius, shadow, globalStyles, createTheme };
+export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AddableFormList } from "./AddableFormList";
 export { default as AlertDialog } from "./dialog/AlertDialog";
 export { default as AppBar } from "./frame/AppBar";
@@ -32,12 +33,8 @@ export { default as Switch } from "./Switch";
 export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
 export { default as HttpError } from "./error/HttpError";
-export { default as Accordion } from "./deprecated/Accordion";
-export { default as AccordionDetails } from "./deprecated/AccordionDetails";
-export { default as AccordionSummary } from "./deprecated/AccordionSummary";
 export { default as AppendableFormList } from "./deprecated/AppendableFormList";
 export { default as AvatarDropdown } from "./deprecated/AvatarDropdown";
-export { default as Button } from "./deprecated/Button";
 export { default as CircularProgress } from "./deprecated/CircularProgress";
 export { default as FormLabel } from "./deprecated/FormLabel";
 export { default as GroupSelect } from "./deprecated/GroupSelect";
@@ -46,9 +43,7 @@ export { default as ListItemDivider } from "./deprecated/ListItemDivider";
 export { default as ListItemGrid } from "./deprecated/ListItemGrid";
 export { default as ListItemText } from "./deprecated/ListItemText";
 export { default as ReferenceChipList } from "./deprecated/ReferenceChipList";
-export { default as Section } from "./deprecated/Section";
 export { default as ShadowedSection } from "./deprecated/ShadowedSection";
 export { default as StatusChip } from "./deprecated/StatusChip";
 export { default as TabbedSection } from "./deprecated/TabbedSection";
-export { default as Tabs } from "./deprecated/Tabs";
-export { default as TextField } from "./deprecated/TextField";
+export { default as Tabs } from "./deprecated/Tabs";

package/base/styles/createTheme.js

@@ -2,6 +2,9 @@ import { createTheme as createMuiTheme } from "@mui/material";
 import typography from "./typography";
 import palette from "./palette";
 import * as cssBaseline from "./mui/cssBaseline";
+import * as accordion from "./mui/accordion";
+import * as accordionSummary from "./mui/accordionSummary";
+import * as accordionDetails from "./mui/accordionDetails";
 import * as buttonBase from "./mui/buttonBase";
 import * as icon from "./mui/icon";
 import * as button from "./mui/button";
@@ -48,6 +51,9 @@ export default function createTheme() {
   theme = createMuiTheme(theme, {
     components: {
       MuiCssBaseline: cssBaseline.styles,
+      MuiAccordion: accordion.styles,
+      MuiAccordionSummary: accordionSummary.styles,
+      MuiAccordionDetails: accordionDetails.styles,
       MuiButtonBase: buttonBase.styles,
       MuiButton: button.styles,
       MuiToggleButton: toggleButton.styles,

package/base/styles/mui/accordion.js

@@ -0,0 +1,16 @@
+import { blueGrey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      backgroundColor: blueGrey.contentBg,
+      boxShadow: 'none',
+      margin: '32px 0px',
+      '&.Mui-expanded': {
+        margin: '32px 0px'
+      },
+      '&:before': {
+        display: 'none'
+      }
+    }
+  }
+};

package/base/styles/mui/accordionDetails.js

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

package/base/styles/mui/accordionSummary.js

@@ -0,0 +1,21 @@
+import { grey } from "../../colors";
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      minHeight: 42,
+      padding: '0px 0px',
+      borderBottom: `1px ${grey[300]} solid`,
+      '&.Mui-expanded': {
+        minHeight: 42
+      }
+    },
+    content: {
+      ...typography.headline2,
+      margin: '0px 0px',
+      '&.Mui-expanded': {
+        margin: '0px 0px'
+      }
+    }
+  }
+};

package/base/styles/mui/dataGrid.js

@@ -67,24 +67,31 @@ export const styles = {
     rowReorderCell: {
       color: grey[700]
     },
+    'row--editing': {
+      boxShadow: 'none'
+    },
     cell: ({
       ownerState
     }) => ({
       minHeight: '40px !important',
-      paddingTop: 10,
-      paddingBottom: 10,
       '&.MuiTypography-bold': {
         fontWeight: 'bold'
       },
       '&.MuiTypography-greyed': {
         color: grey[600]
       },
-      '&:focus, &:focus-within': {
+      '&:focus': {
+        outline: ownerState?.editable ? `solid ${blue[500]} 1px` : 'none'
+      },
+      '&:focus-within': {
         outline: ownerState?.editable ? `solid ${blue[500]} 1px` : 'none'
       },
       '&.MuiDataGrid-cell--editing': {
         boxShadow: 'none',
-        '&:focus, &:focus-within': {
+        '&:focus': {
+          outline: `solid ${blue[500]} 1px`
+        },
+        '&:focus-within': {
           outline: `solid ${blue[500]} 1px`
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "main": "base/index.js",
   "files": [
     "/base"

package/base/deprecated/Accordion.js

@@ -1,45 +0,0 @@
-import MuiAccordion from "@mui/material/Accordion";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  border: '1px solid #eaeaea',
-  boxShadow: 'none',
-  '.MuiAccordionDetails-root': {
-    pt: 0,
-    pl: 8,
-    pr: 8
-  },
-  '.MuiFormLabel-root.MuiInputLabel-root': {
-    fontSize: '14px'
-  },
-  '.MuiInputBase-input.MuiInput-input': {
-    color: '#555',
-    fontSize: '15px'
-  },
-  '.MuiTabs-root.MuiTabs-vertical': {
-    mt: 2
-  },
-  '.MuiTabs-root.MuiTabs-vertical .MuiButtonBase-root.MuiTab-root': {
-    fontSize: '14px',
-    minWidth: '32px',
-    maxWidth: '32px'
-  },
-  '.MuiButtonBase-root.MuiToggleButton-root': {
-    pt: '1px',
-    pb: '1px',
-    fontSize: '12px'
-  }
-};
-export default function Accordion({
-  children,
-  sx,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(MuiAccordion, {
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props,
-    children: children
-  });
-}

package/base/deprecated/AccordionDetails.js

@@ -1,19 +0,0 @@
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  mb: 2
-};
-export default function AccordionDetails({
-  children,
-  sx,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(MuiAccordionDetails, {
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props,
-    children: children
-  });
-}

package/base/deprecated/AccordionSummary.js

@@ -1,35 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function AccordionSummary({
-  title,
-  desc,
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
-      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
-      ...props,
-      children: /*#__PURE__*/_jsxs(Stack, {
-        direction: "row",
-        alignItems: "flex-end",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          children: title
-        }), desc && /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          color: "#aaa",
-          children: desc
-        })]
-      })
-    }), !title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
-      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
-      ...props,
-      children: children
-    })]
-  });
-}

package/base/deprecated/Button.js

@@ -1,61 +0,0 @@
-import { useMemo } from "react";
-import MuiButton from "@mui/material/Button";
-import { Box, CircularProgress, IconButton } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Button({
-  label,
-  icon,
-  iconPlacement = 'start',
-  iconSize = '20px',
-  iconProps = {},
-  progressProps = {},
-  loading = false,
-  ...props
-}) {
-  const iconComponent = useMemo(() => {
-    return icon ? /*#__PURE__*/_jsx(Box, {
-      component: icon,
-      sx: {
-        '&.MuiSvgIcon-root': {
-          fontSize: `${iconSize}!important`
-        }
-      },
-      ...iconProps
-    }) : null;
-  }, [icon, iconSize, iconProps]);
-  const startIcon = useMemo(() => {
-    return iconPlacement === 'start' ? iconComponent : null;
-  }, [iconComponent, iconPlacement]);
-  const endIcon = useMemo(() => {
-    return iconPlacement === 'end' ? iconComponent : null;
-  }, [iconComponent, iconPlacement]);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: 'relative',
-      width: 'fit-content'
-    },
-    children: [label ? /*#__PURE__*/_jsx(MuiButton, {
-      startIcon: startIcon,
-      endIcon: endIcon,
-      disabled: loading,
-      ...props,
-      children: label
-    }) : /*#__PURE__*/_jsx(IconButton, {
-      disabled: loading,
-      ...props,
-      children: iconComponent
-    }), loading && /*#__PURE__*/_jsx(CircularProgress, {
-      size: 24,
-      thickness: 6,
-      sx: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        marginTop: '-12px',
-        marginLeft: '-12px'
-      },
-      ...progressProps
-    })]
-  });
-}

package/base/deprecated/TextField.js

@@ -1,25 +0,0 @@
-import MuiTextField from "@mui/material/TextField";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function TextField({
-  width,
-  fontSize,
-  textAlign,
-  inputProps,
-  ...props
-}) {
-  const styles = {
-    fontSize: fontSize ? fontSize : 16,
-    textAlign: textAlign ? textAlign : 'left',
-    width
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(MuiTextField, {
-      inputProps: {
-        ...inputProps,
-        style: styles
-      },
-      ...props
-    })
-  });
-}