@zesty-io/material 0.2.4 → 0.3.0

package/cjs/theme/palette.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const palette = {
+    primary: {
+        main: "#FF5D03",
+        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",
+    },
+    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',
+    },
+    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)",
+    }
+};
+exports.default = palette;

package/cjs/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/cjs/theme/typography.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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",
+    },
+};
+exports.default = typography;

package/cjs/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/cjs/utils/virtualization.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListboxComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = require("react");
+const useMediaQuery_1 = require("@mui/material/useMediaQuery");
+const ListSubheader_1 = require("@mui/material/ListSubheader");
+const styles_1 = require("@mui/material/styles");
+const react_window_1 = require("react-window");
+const Typography_1 = require("@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 ((0, jsx_runtime_1.jsx)(ListSubheader_1.default, { component: "div", style: inlineStyle, children: dataSet.group }, dataSet.key));
+    }
+    return ((0, jsx_runtime_1.jsx)(Typography_1.default, { 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 (0, jsx_runtime_1.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
+exports.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 = (0, styles_1.useTheme)();
+    const smUp = (0, useMediaQuery_1.default)(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 ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(OuterElementContext.Provider, { value: other, children: (0, jsx_runtime_1.jsx)(react_window_1.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/es/LegacyTheme/index.js

@@ -1,3 +1,5 @@
+// No checking legacy theme to not have conflicting module augmentation
+// @ts-nocheck
 import palette from './palette';
 import typography from './typography';
 import { createTheme } from '@mui/material/styles';

package/es/TextField.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { TextFieldProps } from '@mui/material';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<TextFieldProps>;

package/es/TextField.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAdornment, TextField, IconButton } from '@mui/material';
+import { Close, Search } from '@mui/icons-material';
+export default {
+    title: 'TextField',
+    component: TextField,
+    argType: {},
+};
+const Template = (args) => {
+    return (_jsx(TextField, { ...args, InputProps: {
+            startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(IconButton, { size: "small", children: _jsx(Search, { fontSize: "small" }) }) })),
+            endAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(IconButton, { size: "small", children: _jsx(Close, { fontSize: "small" }) }) })),
+        } }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+};

package/es/icons/FolderGlobal.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgIconProps } from "@mui/material";
+export declare const FolderGlobal: (props: SvgIconProps) => JSX.Element;

package/es/icons/FolderGlobal.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export const FolderGlobal = (props) => (_jsxs(SvgIcon, { ...props, children: [_jsx("path", { d: "M10.59 4.59C10.21 4.21 9.7 4 9.17 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6H12L10.59 4.59Z", fill: "#101828", "fill-opacity": "0.4" }), _jsx("g", { "clip-path": "url(#clip0_8594_1046)", children: _jsx("path", { d: "M15.996 8.83325C13.696 8.83325 11.8335 10.6999 11.8335 12.9999C11.8335 15.2999 13.696 17.1666 15.996 17.1666C18.3002 17.1666 20.1668 15.2999 20.1668 12.9999C20.1668 10.6999 18.3002 8.83325 15.996 8.83325ZM18.8835 11.3333H17.6543C17.521 10.8124 17.3293 10.3124 17.0793 9.84992C17.846 10.1124 18.4835 10.6458 18.8835 11.3333ZM16.0002 9.68325C16.346 10.1833 16.6168 10.7374 16.796 11.3333H15.2043C15.3835 10.7374 15.6543 10.1833 16.0002 9.68325ZM12.7752 13.8333C12.7085 13.5666 12.6668 13.2874 12.6668 12.9999C12.6668 12.7124 12.7085 12.4333 12.7752 12.1666H14.1835C14.1502 12.4416 14.1252 12.7166 14.1252 12.9999C14.1252 13.2833 14.1502 13.5583 14.1835 13.8333H12.7752ZM13.1168 14.6666H14.346C14.4793 15.1874 14.671 15.6874 14.921 16.1499C14.1543 15.8874 13.5168 15.3583 13.1168 14.6666ZM14.346 11.3333H13.1168C13.5168 10.6416 14.1543 10.1124 14.921 9.84992C14.671 10.3124 14.4793 10.8124 14.346 11.3333ZM16.0002 16.3166C15.6543 15.8166 15.3835 15.2624 15.2043 14.6666H16.796C16.6168 15.2624 16.346 15.8166 16.0002 16.3166ZM16.9752 13.8333H15.0252C14.9877 13.5583 14.9585 13.2833 14.9585 12.9999C14.9585 12.7166 14.9877 12.4374 15.0252 12.1666H16.9752C17.0127 12.4374 17.0418 12.7166 17.0418 12.9999C17.0418 13.2833 17.0127 13.5583 16.9752 13.8333ZM17.0793 16.1499C17.3293 15.6874 17.521 15.1874 17.6543 14.6666H18.8835C18.4835 15.3541 17.846 15.8874 17.0793 16.1499ZM17.8168 13.8333C17.8502 13.5583 17.8752 13.2833 17.8752 12.9999C17.8752 12.7166 17.8502 12.4416 17.8168 12.1666H19.2252C19.2918 12.4333 19.3335 12.7124 19.3335 12.9999C19.3335 13.2874 19.2918 13.5666 19.2252 13.8333H17.8168Z", fill: "white" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_8594_1046", children: _jsx("rect", { width: "10", height: "10", fill: "white", transform: "translate(11 8)" }) }) })] }));

package/es/icons/index.d.ts

@@ -0,0 +1 @@
+export { FolderGlobal } from "./FolderGlobal";

package/es/icons/index.js

@@ -0,0 +1 @@
+export { FolderGlobal } from "./FolderGlobal";

package/es/index.d.ts

@@ -12,3 +12,4 @@ export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
 export { default as ConfirmDialog } from './ConfirmDialog';
 export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
+export * from './icons';

package/es/index.js

@@ -12,3 +12,4 @@ export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
 export { default as ConfirmDialog } from './ConfirmDialog';
 export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
+export * from './icons';

package/es/theme/index.d.ts

@@ -1,3 +1,11 @@
 import { Theme } from '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface Palette {
+        border: string;
+    }
+    interface Theme {
+        typography: TypographyVariantsOptions;
+    }
+}
 declare let theme: Theme;
 export default theme;

package/es/theme/index.js

@@ -1,6 +1,6 @@
 import palette from './palette';
 import typography from './typography';
-import { createTheme } from '@mui/material/styles';
+import { alpha, createTheme, } from '@mui/material/styles';
 let theme = createTheme({
     palette,
     typography,
@@ -18,7 +18,7 @@ theme = createTheme(theme, {
             styleOverrides: {
                 root: {
                     borderBottom: 2,
-                    borderColor: theme.palette.grey[100],
+                    borderColor: theme?.palette?.grey?.[100],
                     borderStyle: "solid",
                 },
             },
@@ -41,10 +41,103 @@ theme = createTheme(theme, {
             },
         },
         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

@@ -9,6 +9,7 @@ declare module '@mui/material/styles' {
         blue?: Partial<Color>;
         green?: Partial<Color>;
         purple?: Partial<Color>;
+        border?: string;
     }
 }
 declare const palette: PaletteOptions;

package/es/theme/palette.js

@@ -1,6 +1,6 @@
 const palette = {
     primary: {
-        main: "#FF5D03",
+        main: "#FF5D0A",
         dark: "#EC4A0A",
         light: "#FD853A",
     },
@@ -27,6 +27,7 @@ const palette = {
     text: {
         primary: "#101828",
         secondary: "#475467",
+        disabled: "#101828",
     },
     grey: {
         50: "#F9FAFB",
@@ -124,6 +125,7 @@ const palette = {
         800: '#6A1B9A',
         900: '#4A148C',
     },
+    border: "#F2F4F7",
     action: {
         active: "rgba(16, 24, 40, 0.40)",
         hover: "rgba(16, 24, 40, 0.04)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -12,9 +12,9 @@
     "url": "https://github.com/zesty-io/material/issues"
   },
   "homepage": "https://zesty-io.github.io/material",
-  "main": "es/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 ci && tsc",
     "prerelease": "npm test",
@@ -46,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></>
-};
-