@zesty-io/material 0.1.1 → 0.1.4

package/es/ConfirmDialog/ConfirmDialog.stories.d.ts

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

package/es/ConfirmDialog/ConfirmDialog.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import ConfirmDialog from '.';
+export default {
+    title: 'ConfirmDialog',
+    component: ConfirmDialog,
+    argType: {},
+};
+const Template = (args) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: () => setOpen(true), children: "Click me to open" }), _jsx(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: _jsxs(_Fragment, { children: [_jsx(Button, { color: "error", variant: "contained", children: "Custom 1" }), _jsx(Button, { color: "success", variant: "contained", children: "Custom 2" })] })
+};

package/es/ConfirmDialog/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { DialogProps } from '@mui/material/Dialog';
+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;
+}
+declare const ConfirmDialog: ({ title, content, onClose, children, callback, ...props }: ConfirmDialogProps) => JSX.Element;
+export default ConfirmDialog;

package/es/ConfirmDialog/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Dialog 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';
+const ConfirmDialog = ({ title, content, onClose, children, callback, ...props }) => {
+    return (_jsxs(Dialog, { ...props, children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: content }) }), children ? _jsx(DialogActions, { children: children }) : (_jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: () => callback(false), children: "No" }), _jsx(Button, { variant: "contained", onClick: () => callback(true), autoFocus: true, children: "Yes" })] }))] }));
+};
+export default ConfirmDialog;

package/es/FieldTypeOneToMany/FieldTypeOneToMany.stories.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import FieldTypeOneToMany from '.';
-import { randomOptions } from '../utils/virtualization';
 export default {
     title: 'FieldTypeOneToMany',
     component: FieldTypeOneToMany,
@@ -11,8 +10,10 @@ const Template = (args) => {
     const [value, setValue] = useState([]);
     const [options, setOptions] = useState([]);
     const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
         await new Promise((resolve) => setTimeout(resolve, 3000));
-        setOptions(randomOptions);
+        const data = largeArr.map((_, idx) => ({ component: _jsx("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
     };
     const handleOnChange = (e, values) => {
         setValue(values);
@@ -21,9 +22,7 @@ const Template = (args) => {
 };
 export const Default = Template.bind({});
 Default.args = {
-    textFieldProps: {
-        placeholder: 'Placeholder Text...',
-        label: 'OneToOne label',
-        helperText: 'OneToOne helperText',
-    }
+    placeholder: 'Placeholder Text...',
+    label: 'OneToMany label',
+    helperText: 'OneToMany helperText',
 };

package/es/FieldTypeOneToMany/index.d.ts

@@ -1,14 +1,32 @@
-/// <reference types="react" />
-import { AutocompleteProps, TextFieldProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { AutocompleteProps } from '@mui/material';
 export interface FieldTypeOneToManyProps extends Omit<AutocompleteProps<any, false, false, false>, 'onOpen' | 'renderInput'> {
-    /**
-     * Props passed to TextField component
-     */
-    textFieldProps?: TextFieldProps;
+    label?: string;
+    helperText?: string;
+    placeholder?: string;
+    error?: boolean;
+    required?: boolean;
     /**
      * Callback to be fired upon opening the dropdown
      */
     onOpen: () => Promise<any>;
+    /**
+     * Structure for option
+     */
+    options: {
+        /**
+         * Component to be rendered in the dropdown
+         */
+        component: ReactNode | string;
+        /**
+         * Value of option
+         */
+        value: string;
+        /**
+         * Label that should display in the input when selected
+         */
+        inputLabel: string;
+    }[];
 }
-declare const FieldTypeOneToMany: ({ textFieldProps, onOpen, ...props }: FieldTypeOneToManyProps) => JSX.Element;
+declare const FieldTypeOneToMany: ({ label, helperText, placeholder, error, onOpen, options, required, ...props }: FieldTypeOneToManyProps) => JSX.Element;
 export default FieldTypeOneToMany;

package/es/FieldTypeOneToMany/index.js

@@ -1,22 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Popper, styled, TextField } from '@mui/material';
+import { FormControl, FormLabel, Popper, styled, TextField } from '@mui/material';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
 import { ListboxComponent } from '../utils/virtualization';
-const FieldTypeOneToMany = ({ textFieldProps, onOpen, ...props }) => {
+const FieldTypeOneToMany = ({ label, helperText, placeholder, error, onOpen, options, required, ...props }) => {
     const [loaded, setLoaded] = useState(false);
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState(false);
     const handleOpen = () => {
         if (!loaded && onOpen) {
             onOpen().then(() => {
                 setLoading(false);
             });
+            setLoading(true);
             setLoaded(true);
         }
     };
-    return (_jsx(Autocomplete, { onOpen: handleOpen, loading: loading, fullWidth: true, multiple: true, disableListWrap: true, PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, ...textFieldProps, InputLabelProps: {
-                shrink: true,
-            } })), renderOption: (props, option) => [props, option], ...props }));
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(Autocomplete, { onOpen: handleOpen, loading: loading, fullWidth: true, multiple: true, disableListWrap: true, disableClearable: true, disablePortal: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder })), options: loading ? [] : options, getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props })] }));
 };
 export default FieldTypeOneToMany;
 const StyledPopper = styled(Popper)({

package/es/index.d.ts

@@ -10,4 +10,4 @@ export { default as FieldTypeDropdown } from './FieldTypeDropdown';
 export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
 export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
-export { default as ConfirmModal } from './ConfirmModal';
+export { default as ConfirmDialog } from './ConfirmDialog';

package/es/index.js

@@ -10,4 +10,4 @@ export { default as FieldTypeDropdown } from './FieldTypeDropdown';
 export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
 export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
-export { default as ConfirmModal } from './ConfirmModal';
+export { default as ConfirmDialog } from './ConfirmDialog';

package/es/theme/index.js

@@ -41,7 +41,21 @@ theme = createTheme(theme, {
                 },
                 asterisk: {
                     color: theme.palette.error.main,
-                }
+                },
+            },
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    overflow: 'visible',
+                },
+            },
+        },
+        MuiCardHeader: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#e4e9f1',
+                },
             },
         },
         MuiToggleButton: {

package/es/utils/virtualization.d.ts

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

package/es/utils/virtualization.js

@@ -61,14 +61,3 @@ export const ListboxComponent = React.forwardRef(function ListboxComponent(props
     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 }) }) }));
 });
-function random(length) {
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    let result = '';
-    for (let i = 0; i < length; i += 1) {
-        result += characters.charAt(Math.floor(Math.random() * characters.length));
-    }
-    return result;
-}
-export const randomOptions = Array.from(new Array(10000))
-    .map(() => random(10 + Math.ceil(Math.random() * 20)))
-    .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",

package/src/FieldTypeOneToMany/FieldTypeOneToMany.stories.tsx

@@ -1,7 +1,6 @@
-import { SyntheticEvent, useState } from 'react';
+import { ReactNode, SyntheticEvent, useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import FieldTypeOneToMany, { FieldTypeOneToManyProps } from '.';
-import { randomOptions } from '../utils/virtualization';
 
 export default {
   title: 'FieldTypeOneToMany',
@@ -10,16 +9,19 @@ export default {
 } as Meta;
 
 const Template: Story<FieldTypeOneToManyProps> = (args) => {
-  const [value, setValue] = useState<string[]>([]);
+  const [value, setValue] = useState<{component: string | ReactNode, value: string, inputLabel: string}[]>([]);
+
+  const [options, setOptions] = useState<{component: string | ReactNode, value: string, inputLabel: string}[]>([]);
 
-  const [options, setOptions] = useState<string[]>([]);
 
   const handleOnOpen = async () => {
+    const largeArr = new Array(1000).fill(null);
     await new Promise((resolve) => setTimeout(resolve, 3000))
-    setOptions(randomOptions);
+    const data = largeArr.map((_, idx) => ({component: <div>{`Test ${idx}`}</div>, value: String(Math.random()), inputLabel: `Test ${idx}`}));
+    setOptions(data);
   }
 
-  const handleOnChange = (e: SyntheticEvent<Element, Event>, values: string[]) => {
+  const handleOnChange = (e: SyntheticEvent<Element, Event>, values: {component: string | ReactNode, value: string, inputLabel: string}[]) => {
     setValue(values);
   }
 
@@ -36,11 +38,9 @@ const Template: Story<FieldTypeOneToManyProps> = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  textFieldProps: {
-    placeholder: 'Placeholder Text...',
-    label: 'OneToOne label',
-    helperText: 'OneToOne helperText',
-  }
+  placeholder: 'Placeholder Text...',
+  label: 'OneToMany label',
+  helperText: 'OneToMany helperText',
 };
 
 

package/src/FieldTypeOneToMany/index.tsx

@@ -1,54 +1,79 @@
-import { useState } from 'react';
-import { AutocompleteProps, Popper, styled, TextField, TextFieldProps } from '@mui/material';
+import { ReactNode, useState } from 'react';
+import { AutocompleteProps, FormControl, FormLabel, Popper, styled, TextField, TextFieldProps } from '@mui/material';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
 import { ListboxComponent } from '../utils/virtualization';
 
 export interface FieldTypeOneToManyProps extends Omit<AutocompleteProps<any, false, false, false>, 'onOpen' | 'renderInput'> {
+  label?: string;
+  helperText?: string;
+  placeholder?: string;
+  error?: boolean;
+  required?: boolean;
   /**
-   * Props passed to TextField component
+   * Callback to be fired upon opening the dropdown
    */
-  textFieldProps?: TextFieldProps;
+  onOpen: () => Promise<any>;
   /**
-   * Callback to be fired upon opening the dropdown
+   * Structure for option
    */
-   onOpen: () => Promise<any>;
+   options: {
+    /**
+     * Component to be rendered in the dropdown
+     */
+    component: ReactNode | string;
+    /**
+     * Value of option
+     */
+    value: string;
+    /**
+     * Label that should display in the input when selected
+     */
+    inputLabel: string;
+  }[]
 }
 
-const FieldTypeOneToMany = ({textFieldProps, onOpen, ...props }: FieldTypeOneToManyProps) => {
+const FieldTypeOneToMany = ({label, helperText, placeholder, error, onOpen, options, required, ...props }: FieldTypeOneToManyProps) => {
   const [loaded, setLoaded] = useState(false);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
 
   const handleOpen = () => {
     if (!loaded && onOpen) {
       onOpen().then(() => {
         setLoading(false);
       });
-
+      setLoading(true);
       setLoaded(true);
     }
   };
 
   return (
-    <Autocomplete
-      onOpen={handleOpen}
-      loading={loading}
-      fullWidth
-      multiple
-      disableListWrap
-      PopperComponent={StyledPopper}
-      ListboxComponent={ListboxComponent}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          {...textFieldProps}
-          InputLabelProps={{
-            shrink: true,
-          }}
-        />
-      )}
-      renderOption={(props, option) => [props, option]}
-      {...props}
-    />
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <Autocomplete
+        onOpen={handleOpen}
+        loading={loading}
+        fullWidth
+        multiple
+        disableListWrap
+        disableClearable
+        disablePortal
+        size='small'
+        PopperComponent={StyledPopper}
+        ListboxComponent={ListboxComponent}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            helperText={helperText}
+            error={error}
+            placeholder={placeholder}
+          />
+        )}
+        options={loading ? [] : options}
+        getOptionLabel={(option) => option.inputLabel}
+        renderOption={(props, option) => [props, option.component]}
+        {...props}
+      />
+    </FormControl>
   );
 };
 

package/src/FieldTypeOneToOne/index.tsx

@@ -77,7 +77,6 @@ const FieldTypeOneToOne = ({label, helperText, placeholder, error, onOpen, optio
         options={loading ? [] : options}
         getOptionLabel={(option) => option.inputLabel}
         renderOption={(props, option) => [props, option.component]}
-        // getOptionLabel={(option) => option.label}
         {...props}
       />
     </FormControl>

package/src/index.ts

@@ -10,4 +10,4 @@ export { default as FieldTypeDropdown } from './FieldTypeDropdown';
 export { default as FieldTypeOneToOne} from './FieldTypeOneToOne';
 export { default as FieldTypeOneToMany} from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
-export { default as ConfirmModal } from './ConfirmModal';
+export { default as ConfirmDialog } from './ConfirmDialog';

package/src/theme/index.ts

@@ -43,7 +43,21 @@ theme = createTheme(theme, {
         },
         asterisk: {
           color: theme.palette.error.main,
-        }
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          overflow: 'visible',
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#e4e9f1',
+        },
       },
     },
     MuiToggleButton: {

package/src/utils/virtualization.tsx

@@ -105,21 +105,3 @@ export const ListboxComponent = React.forwardRef<
     </div>
   );
 });
-
-function random(length: number) {
-  const characters =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let result = '';
-
-  for (let i = 0; i < length; i += 1) {
-    result += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-
-  return result;
-}
-
-
-export const randomOptions = Array.from(new Array(10000))
-  .map(() => random(10 + Math.ceil(Math.random() * 20)))
-  .sort((a: string, b: string) => a.toUpperCase().localeCompare(b.toUpperCase()));
-