@zesty-io/material 0.2.5 → 0.3.0

package/es/theme/index.js

@@ -0,0 +1,143 @@
+import palette from './palette';
+import typography from './typography';
+import { alpha, createTheme, } from '@mui/material/styles';
+let theme = createTheme({
+    palette,
+    typography,
+});
+theme = createTheme(theme, {
+    components: {
+        MuiFormLabel: {
+            styleOverrides: {
+                root: {
+                    ...theme.typography.body2,
+                },
+            },
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    borderBottom: 2,
+                    borderColor: theme?.palette?.grey?.[100],
+                    borderStyle: "solid",
+                },
+            },
+        },
+        MuiCardHeader: {
+            styleOverrides: {
+                root: {
+                    padding: "16px 16px 0px",
+                },
+            },
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    padding: "8px 16px 16px",
+                    ":last-child": {
+                        paddingBottom: "16px",
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            styleOverrides: { root: { textTransform: 'none' } },
+            defaultProps: {
+                disableElevation: true,
+            },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    padding: "0px 8px",
+                    borderRadius: '8px',
+                },
+                input: {
+                    padding: "10px 0px",
+                },
+                sizeSmall: {
+                    'input': {
+                        padding: "8px 0px",
+                    },
+                },
+                notchedOutline: {
+                    // Important to override all pseudo classes
+                    borderColor: `${theme.palette.border} !important`,
+                },
+            }
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                input: {
+                    ...theme.typography.body2,
+                    '::placeholder': {
+                        color: theme?.palette?.text?.disabled
+                    }
+                }
+            }
+        },
+        MuiInputAdornment: {
+            styleOverrides: {
+                root: {
+                    '& > .MuiSvgIcon-root': {
+                        margin: '4px',
+                    }
+                }
+            }
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                sizeSmall: {
+                    padding: '4px',
+                }
+            }
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    ...theme.typography.h5,
+                    fontWeight: 600,
+                }
+            }
+        },
+        MuiDialogContentText: {
+            styleOverrides: {
+                root: {
+                    ...theme.typography.body2,
+                }
+            }
+        },
+        MuiTreeItem: {
+            styleOverrides: {
+                content: {
+                    paddingTop: '6px',
+                    paddingBottom: '6px',
+                    paddingLeft: 0,
+                    paddingRight: '12px',
+                    borderRadius: 4,
+                    width: "unset",
+                    '&.Mui-selected': {
+                        background: alpha(theme?.palette?.primary?.main, 0.04),
+                        ' .MuiTreeItem-label .MuiSvgIcon-root': {
+                            color: theme?.palette?.primary?.main,
+                        },
+                        ' .MuiTypography-root': {
+                            color: theme?.palette?.primary?.dark,
+                        }
+                    }
+                },
+                label: {
+                    paddingLeft: '0',
+                },
+                iconContainer: {
+                    marginRight: '0',
+                    width: '24px',
+                    'svg': {
+                        fontSize: '24px',
+                    }
+                }
+            }
+        }
+    },
+});
+export default theme;

package/es/theme/palette.d.ts

@@ -0,0 +1,16 @@
+import { Color } from '@mui/material';
+import { PaletteOptions } from '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface PaletteOptions {
+        red?: Partial<Color>;
+        deepPurple?: Partial<Color>;
+        deepOrange?: Partial<Color>;
+        pink?: Partial<Color>;
+        blue?: Partial<Color>;
+        green?: Partial<Color>;
+        purple?: Partial<Color>;
+        border?: string;
+    }
+}
+declare const palette: PaletteOptions;
+export default palette;

package/es/theme/palette.js

@@ -0,0 +1,138 @@
+const palette = {
+    primary: {
+        main: "#FF5D0A",
+        dark: "#EC4A0A",
+        light: "#FD853A",
+    },
+    success: {
+        main: "#12B76A",
+        dark: "#027A48",
+        light: "#D1FADF",
+    },
+    warning: {
+        main: "#F79009",
+        dark: "B54708",
+        light: "#FEF0C7",
+    },
+    error: {
+        main: "#F04438",
+        dark: "#B42318",
+        light: "#FECDCA",
+    },
+    info: {
+        main: "#0BA5EC",
+        dark: "#026AA2",
+        light: "#7CD4FD",
+    },
+    text: {
+        primary: "#101828",
+        secondary: "#475467",
+        disabled: "#101828",
+    },
+    grey: {
+        50: "#F9FAFB",
+        100: "#F2F4F7",
+        200: "#E4E7EC",
+        300: "#D0D5DD",
+        400: "#98A2B3",
+        500: "#667085",
+        600: "#475467",
+        700: "#344054",
+        800: "#1D2939",
+        900: "#101828",
+    },
+    deepPurple: {
+        50: '#F8F9FC',
+        100: '#EAECF5',
+        200: '#C8CCE5',
+        300: '#9EA5D1',
+        400: "#4E5BA6",
+        500: '#4E5BA6',
+        600: '#3E4784',
+        700: '#363F72',
+        800: '#293056',
+        900: '#101323'
+    },
+    deepOrange: {
+        50: "#FFF6ED",
+        100: "#FFEAD5",
+        200: "#FDDCAB",
+        300: "#FEB273",
+        400: "#FD853A",
+        500: "#FF5C08",
+        600: "#EC4A0A",
+        700: "#C4320A",
+        800: "#9C2A10",
+        900: "#7E2410",
+    },
+    red: {
+        50: '#FEF3F2',
+        100: '#FEE4E2',
+        200: '#FECDCA',
+        300: '#FDA29B',
+        400: '#F97066',
+        500: '#F04438',
+        600: '#D92D20',
+        700: '#B42318',
+        800: '#912018',
+        900: '#7A271A',
+    },
+    pink: {
+        50: '#FDF2FA',
+        100: '#FCE7F6',
+        200: '#FCCEEE',
+        300: '#FAA7E0',
+        400: "#F670C7",
+        500: '#EE46BC',
+        600: '#DD2590',
+        700: '#C11574',
+        800: '#9E165F',
+        900: '#851651',
+    },
+    blue: {
+        50: '#F0F9FF',
+        100: "#E0F2FE",
+        200: '#B9E6FE',
+        300: '#7CD4FD',
+        400: "#36BFFA",
+        500: '#0BA5EC',
+        600: '#0086C9',
+        700: '#026AA2',
+        800: '#065986',
+        900: '#0B4A6F',
+    },
+    green: {
+        50: '#ECFDF3',
+        100: "#D1FADF",
+        200: '#A6F4C5',
+        300: '#6CE9A6',
+        400: "#32D583",
+        500: '#12B76A',
+        600: '#039855',
+        700: '#027A48',
+        800: '#05603A',
+        900: '#054F31',
+    },
+    purple: {
+        50: '#F3E5F5',
+        100: '#E1BEE7',
+        200: '#CE93D8',
+        300: '#BA68C8',
+        400: '#AB47BC',
+        500: '#9C27B0',
+        600: '#8E24AA',
+        700: '#7B1FA2',
+        800: '#6A1B9A',
+        900: '#4A148C',
+    },
+    border: "#F2F4F7",
+    action: {
+        active: "rgba(16, 24, 40, 0.40)",
+        hover: "rgba(16, 24, 40, 0.04)",
+        selected: "rgba(16, 24, 40, 0.08)",
+        disabled: "rgba(16, 24, 40, 0.26)",
+        disabledBackground: "rgba(16, 24, 40, 0.12)",
+        focus: "rgba(16, 24, 40, 0.12)",
+    }
+};
+export default palette;

package/es/theme/typography.d.ts

@@ -0,0 +1,9 @@
+import { TypographyVariantsOptions } from '@mui/material/styles';
+import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
+declare module '@mui/material/styles' {
+    interface TypographyVariantsOptions {
+        body3?: TypographyStyleOptions;
+    }
+}
+declare const typography: TypographyVariantsOptions;
+export default typography;

package/es/theme/typography.js

@@ -0,0 +1,57 @@
+const typography = {
+    fontFamily: "'Mulish'",
+    h1: {
+        fontSize: "36px",
+        lineHeight: "44px",
+    },
+    h2: {
+        fontSize: "32px",
+        lineHeight: "40px",
+    },
+    h3: {
+        fontSize: "28px",
+        lineHeight: "36px",
+    },
+    h4: {
+        fontSize: "24px",
+        lineHeight: "32px",
+    },
+    h5: {
+        fontSize: "20px",
+        lineHeight: "28px",
+    },
+    h6: {
+        fontSize: "16px",
+        lineHeight: "22px",
+    },
+    body1: {
+        fontSize: '16px',
+        lineHeight: '24px',
+    },
+    body2: {
+        fontSize: '14px',
+        lineHeight: '20px',
+    },
+    body3: {
+        fontSize: '12px',
+        lineHeight: '18px',
+        letterSpacing: '0.15px',
+    },
+    subtitle1: {
+        fontSize: '16px',
+        lineHeight: "28px",
+    },
+    subtitle2: {
+        fontSize: '14px',
+        lineHeight: "22px",
+    },
+    caption: {
+        fontSize: '12px',
+        lineHeight: "20px",
+    },
+    overline: {
+        fontSize: "12px",
+        letterSpacing: "1px",
+    },
+};
+export default typography;

package/es/utils/virtualization.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ListboxComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLDivElement>>;

package/es/utils/virtualization.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import ListSubheader from '@mui/material/ListSubheader';
+import { useTheme } from '@mui/material/styles';
+import { VariableSizeList } from 'react-window';
+import Typography from '@mui/material/Typography';
+const LISTBOX_PADDING = 8; // px
+function renderRow(props) {
+    const { data, index, style } = props;
+    const dataSet = data[index];
+    const inlineStyle = {
+        ...style,
+        top: style.top + LISTBOX_PADDING,
+    };
+    if (dataSet.hasOwnProperty('group')) {
+        return (_jsx(ListSubheader, { component: "div", style: inlineStyle, children: dataSet.group }, dataSet.key));
+    }
+    return (_jsx(Typography, { component: "li", ...dataSet[0], noWrap: true, style: inlineStyle, children: dataSet[1] }));
+}
+const OuterElementContext = React.createContext({});
+const OuterElementType = React.forwardRef((props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return _jsx("div", { ref: ref, ...props, ...outerProps });
+});
+function useResetCache(data) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current != null) {
+            ref.current.resetAfterIndex(0, true);
+        }
+    }, [data]);
+    return ref;
+}
+// Adapter for react-window
+export const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
+    const { children, ...other } = props;
+    const itemData = [];
+    children.forEach((item) => {
+        itemData.push(item);
+        itemData.push(...(item.children || []));
+    });
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
+        noSsr: true,
+    });
+    const itemCount = itemData.length;
+    const itemSize = smUp ? 36 : 48;
+    const getChildSize = (child) => {
+        if (child.hasOwnProperty('group')) {
+            return 48;
+        }
+        return itemSize;
+    };
+    const getHeight = () => {
+        if (itemCount > 8) {
+            return 8 * itemSize;
+        }
+        return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+    };
+    const gridRef = useResetCache(itemCount);
+    return (_jsx("div", { ref: ref, children: _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: "100%", ref: gridRef, outerElementType: OuterElementType, innerElementType: "ul", itemSize: (index) => getChildSize(itemData[index]), overscanCount: 5, itemCount: itemCount, children: renderRow }) }) }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -12,13 +12,11 @@
     "url": "https://github.com/zesty-io/material/issues"
   },
   "homepage": "https://zesty-io.github.io/material",
-  "main": "cjs/index.js",
-  "module": "es/index.js",
-  "types": "es/index.d.ts",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
   "scripts": {
-    "build": "npm run build:esm && npm run build:cjs",
-    "build:esm": "tsc",
-    "build:cjs": "tsc --module commonjs --outDir cjs",
+    "build": "npm ci && tsc",
     "prerelease": "npm test",
     "release": "npm run build && npm publish --access public",
     "release:alpha": "npm run build && npm publish --access public --tag alpha",
@@ -48,10 +46,14 @@
     "@types/react-window": "^1.8.5",
     "babel-loader": "^8.2.5",
     "gh-pages": "^3.2.3",
-    "react": "^18.1.0",
+    "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.1.0",
+    "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "typescript": "^4.6.3"
-  }
+  },
+  "files": [
+    "cjs",
+    "es"
+  ]
 }

package/.storybook/main.js

@@ -1,25 +0,0 @@
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-  ],
-  "framework": "@storybook/react",
-  typescript: {
-    check: true,
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      shouldRemoveUndefinedFromOptional: true,
-      propFilter: (prop) => {
-        return prop.parent
-          ? /@mui/.test(prop.parent.fileName) ||
-              !/node_modules/.test(prop.parent.fileName)
-          : true;
-      },
-    },
-  },
-}

package/.storybook/preview-head.html

@@ -1 +0,0 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mulish" />

package/.storybook/preview.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from 'emotion-theming';
-import { theme } from '../src/index.ts';
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};
-
-export const decorators = [
-  (Story) => (
-    <ThemeProvider theme={theme}>
-      <Story />
-    </ThemeProvider>
-  ),
-];

package/src/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -1,35 +0,0 @@
-import { useState } from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { Button, Stack } from '@mui/material';
-import ConfirmDialog, { ConfirmDialogProps } from '.';
-
-export default {
-  title: 'ConfirmDialog',
-  component: ConfirmDialog,
-  argType: {},
-} as Meta;
-
-const Template: Story<ConfirmDialogProps> = (args) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button variant="contained" onClick={() => setOpen(true)}>Click me to open</Button>
-      <ConfirmDialog {...args} open={open} callback={(confirmed) => setOpen(false) } />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Confirm modal title',
-  content: 'Confirm modal content',
-};
-
-export const CustomChildren = Template.bind({});
-CustomChildren.args = {
-  title: 'Confirm modal title',
-  content: 'Confirm modal content',
-  children: <><Button color="error" variant="contained">Custom 1</Button><Button color="success" variant="contained">Custom 2</Button></>
-};
-

package/src/ConfirmDialog/index.tsx

@@ -1,50 +0,0 @@
-import { ReactNode } from 'react';
-import Dialog, { DialogProps } from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import { Button } from '@mui/material';
-
-export interface ConfirmDialogProps extends Omit<DialogProps, 'title'> {
-  /**
-   * Title of confirm dialog
-   */
-  title: string | ReactNode ;
-  /**
-   * Content of confirm dialog
-   */
-  content: string | ReactNode ;
-  /**
-   * Callback of confirm dialog
-   */
-   callback: (confirmed: boolean) => void ;
-}
-
-const ConfirmDialog = ({title, content, onClose, children, callback, ...props }: ConfirmDialogProps) => {
-  
-  return (
-    <Dialog
-      {...props}
-    >
-      <DialogTitle>
-        {title}
-      </DialogTitle>
-      <DialogContent>
-        <DialogContentText>
-          {content}
-        </DialogContentText>
-      </DialogContent>
-      {children ? <DialogActions>{children}</DialogActions> : (
-        <DialogActions>
-          <Button variant="contained" onClick={() => callback(false)}>No</Button>
-          <Button variant="contained" onClick={() => callback(true)} autoFocus>
-            Yes
-          </Button>
-        </DialogActions>
-      )}
-    </Dialog>
-  );
-};
-
-export default ConfirmDialog;

package/src/CopyButton/CopyButton.stories.tsx

@@ -1,20 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import CopyButton, { CopyButtonProps } from '.';
-
-export default {
-  title: 'CopyButton',
-  component: CopyButton,
-  argType: {},
-} as Meta;
-
-const Template: Story<CopyButtonProps> = (args) => {
-
-  return (
-    <CopyButton {...args} />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  value: 'Copy Me!'
-};

package/src/CopyButton/index.tsx

@@ -1,55 +0,0 @@
-import { useCallback, useState, useEffect } from 'react';
-import Button, { ButtonProps } from '@mui/material/Button';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import CheckIcon from '@mui/icons-material/Check';
-
-export interface CopyButtonProps extends ButtonProps {
-   /**
-   * Value to be copied to clipboard
-   */
-  value: string ;
-}
-
-const CopyButton = ({value, sx, ...props }: CopyButtonProps) => {
-  const [copied, setCopied] = useState(false);
-
-  const copyValue = useCallback(() => {
-      navigator?.clipboard.writeText(value);
-      setCopied(true);
-  }, [value]);
-
-  useEffect(() => {
-    const iconTimer = setTimeout(() => {
-      setCopied(false);
-    }, 500);
-
-    return () => {
-      clearTimeout(iconTimer);
-    };
-  }, [copied]);
-
-  return (
-      <Button
-        variant='outlined'
-        onClick={copyValue}
-        size="small"
-        title={props.children ? `Copy ${props.children}` : `Copy ${value}`}
-        sx={{
-          textTransform: 'unset',
-          // Spread sx prop at the end to allow sx prop overrides
-          ...sx,
-        }}
-        startIcon={copied ? (
-          <CheckIcon color='success' fontSize='small' />
-        ) : (
-          <ContentCopyIcon fontSize='small' />
-        )}
-        // Spread props at the end to allow prop overrides
-        {...props}
-      >
-        {props.children ? props.children : value}
-      </Button>
-  );
-};
-
-export default CopyButton;