@zesty-io/material 0.1.0 → 0.1.3

package/src/FieldTypeOneToOne/FieldTypeOneToOne.stories.tsx

@@ -0,0 +1,46 @@
+import { ReactNode, SyntheticEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeOneToOne, { FieldTypeOneToOneProps } from './';
+
+export default {
+  title: 'FieldTypeOneToOne',
+  component: FieldTypeOneToOne,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeOneToOneProps> = (args) => {
+  const [value, setValue] = useState<{component: string | ReactNode, value: string, inputLabel: string}>({component: '- None -', value: '0', inputLabel: '- None -'});
+
+  const [options, setOptions] = useState<{component: string | ReactNode, value: string, inputLabel: string}[]>([]);
+
+  const handleOnOpen = async () => {
+    const largeArr = new Array(1000).fill(null);
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+    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>, option: {component: string | ReactNode, value: string, inputLabel: string}) => {
+    setValue(option);
+  }
+
+  return (
+    <FieldTypeOneToOne
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+      onOpen={handleOnOpen}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'OneToOne label',
+  helperText: 'OneToOne helperText',
+  placeholder: 'OneToOne placeholder'
+};
+
+
+

package/src/FieldTypeOneToOne/index.tsx

@@ -0,0 +1,96 @@
+import { ReactNode, useState } from 'react';
+import { AutocompleteProps, Popper, styled, TextField, FormLabel, FormControl, InputAdornment } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+
+export interface FieldTypeOneToOneProps extends Omit<AutocompleteProps<any, false, false, false>, 'onOpen' | 'renderInput'> {
+  label?: string;
+  helperText?: string;
+  placeholder?: string;
+  error?: boolean;
+  required?: boolean;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  /**
+   * 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;
+  }[]
+}
+
+const FieldTypeOneToOne = ({label, helperText, placeholder, error, onOpen, options, required, startAdornment, endAdornment, ...props }: FieldTypeOneToOneProps) => {
+  const [loaded, setLoaded] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleOpen = () => {
+    if (!loaded && onOpen) {
+      onOpen().then(() => {
+        setLoading(false);
+      });
+      setLoading(true);
+      setLoaded(true);
+    }
+  };
+
+  return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <Autocomplete
+        onOpen={handleOpen}
+        loading={loading}
+        fullWidth
+        disableListWrap
+        disableClearable
+        disablePortal
+        size='small'
+        PopperComponent={StyledPopper}
+        ListboxComponent={ListboxComponent}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            helperText={helperText}
+            error={error}
+            placeholder={placeholder}
+            InputProps={{
+              ...params.InputProps,
+              startAdornment: <InputAdornment position='end'>{startAdornment}</InputAdornment>,
+              endAdornment: <>{params.InputProps.endAdornment}<InputAdornment sx={{ position: 'relative', right: '40px'}} position='end'>{endAdornment}</InputAdornment></>
+            }}
+          />
+        )}
+        options={loading ? [] : options}
+        getOptionLabel={(option) => option.inputLabel}
+        renderOption={(props, option) => [props, option.component]}
+        {...props}
+      />
+    </FormControl>
+  );
+};
+
+export default FieldTypeOneToOne;
+
+const StyledPopper = styled(Popper)({
+  [`& .${autocompleteClasses.listbox}`]: {
+    boxSizing: 'border-box',
+    '& ul': {
+      padding: 0,
+      margin: 0,
+    },
+  },
+});

package/src/FieldTypeSort/FieldTypeSort.stories.tsx

@@ -29,6 +29,7 @@ Default.args = {
   placeholder: 'Placeholder Text...',
   label: 'Sort label',
   helperText: 'Sort helper text',
+  error: false,
 };
 
 

package/src/FieldTypeSort/index.tsx

@@ -1,5 +1,5 @@
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { Button, InputAdornment } from '@mui/material';
+import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 
@@ -7,18 +7,15 @@ export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'varian
   value: string;
 }
 
-const FieldTypeSort = ({value, InputProps, InputLabelProps, sx, ...props }: FieldTypeSortProps) => {
+const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTypeSortProps) => {
   return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
       <MuiTextField
         size="small"
         variant='outlined'
         type='number'
         value={value}
-        sx={{
-          width: 165,
-           // Spread props at the end to allow sx prop overrides
-          ...sx
-        }}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
@@ -28,9 +25,8 @@ const FieldTypeSort = ({value, InputProps, InputLabelProps, sx, ...props }: Fiel
                 onClick={(e) => {
                   // References input via event in order to modify its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  console.log('testing input', input)
-                  input.value = String(+input.value + 1)
-                }}><AddIcon fontSize='small' />
+                  input.value = String(+input.value - 1)
+                }}><RemoveIcon fontSize='small' />
               </Button>
             </InputAdornment>
           ),
@@ -42,23 +38,18 @@ const FieldTypeSort = ({value, InputProps, InputLabelProps, sx, ...props }: Fiel
                 onClick={(e) => {
                   // References input via event in order to modify its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  console.log('testing input', input)
-                  input.value = String(+input.value - 1)
-                }}><RemoveIcon fontSize='small' />
+                  input.value = String(+input.value + 1)
+                }}><AddIcon fontSize='small' />
               </Button>
             </InputAdornment>
           ),
           // Spread props at the end to allow Input prop overrides
           ...InputProps,
         }}
-        InputLabelProps={{
-          shrink: true,
-          // Spread props at the end to allow InputLabel prop overrides
-          ...InputLabelProps,
-        }}
         // Spread props at the end to allow prop overrides
         {...props}
       />
+    </FormControl>
   );
 };
 

package/src/FieldTypeText/FieldTypeText.stories.tsx

@@ -16,11 +16,13 @@ const Template: Story<FieldTypeTextProps> = (args) => {
   }
 
   return (
-    <FieldTypeText
-      {...args}
-      value={value}
-      onChange={handleOnChange}
-    />
+    <>
+      <FieldTypeText
+        {...args}
+        value={value}
+        onChange={handleOnChange}
+      />
+    </>
   );
 };
 
@@ -28,6 +30,7 @@ export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Placeholder Text...',
   label: 'Text label',
+  helperText: 'Text helper text',
 };
 
 export const TextArea = Template.bind({});
@@ -36,6 +39,7 @@ TextArea.args = {
   rows: 4,
   placeholder: 'Placeholder Text...',
   label: 'Text Label',
+  helperText: 'Text helper text',
 };
 
 

package/src/FieldTypeText/index.tsx

@@ -1,5 +1,5 @@
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { InputAdornment } from '@mui/material';
+import { FormControl, FormLabel, Box } from '@mui/material';
 
 export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
    /**
@@ -10,32 +10,25 @@ export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'varian
   value: string;
 }
 
-const FieldTypeText = ({maxLength = 150, value, helperText, InputProps, InputLabelProps, ...props }: FieldTypeTextProps) => {
+const FieldTypeText = ({label, maxLength = 150, value, helperText, required, ...props }: FieldTypeTextProps) => {
 
   return (
+    <FormControl fullWidth required={required}>
+      {/* Sets flex order to make appended required asterisk properly positioned */}
+      <FormLabel sx={{display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': {order: 2}}}>
+        <Box sx={{ order: 1}}>{label}</Box> 
+        <Box sx={{ order: 3, flex: 1, textAlign: 'right'}}>{value?.length}/{maxLength}</Box>
+      </FormLabel>
       <MuiTextField
         size="small"
         variant='outlined'
         value={value}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <>{value.length}/{maxLength}</>
-            </InputAdornment>
-          ),
-          // Spread props at the end to allow Input prop overrides
-          ...InputProps,
-        }}
-        InputLabelProps={{
-          shrink: true,
-          // Spread props at the end to allow InputLabel prop overrides
-          ...InputLabelProps,
-        }}
-        error={value.length > maxLength}
-        helperText={value.length > maxLength ? 'Your input is over the specified limit' : helperText}
+        error={value?.length > maxLength}
+        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : helperText}
         // Spread props at the end to allow prop overrides
         {...props}
       />
+    </FormControl>
   );
 };
 

package/src/FieldTypeUrl/index.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { InputAdornment } from '@mui/material';
+import { FormControl, FormLabel, Box } from '@mui/material';
 
 export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant'> {
    /**
@@ -11,39 +11,32 @@ export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant
   value: string;
 }
 
-const FieldTypeUrl = ({maxLength = 2000, value, helperText, InputProps, InputLabelProps, inputProps, ...props }: FieldTypeUrlProps) => {
+const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
+    <FormControl fullWidth required={required}>
+      {/* Sets flex order to make appended required asterisk properly positioned */}
+      <FormLabel sx={{display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': {order: 2}}}>
+        <Box sx={{ order: 1}}>{label}</Box> 
+        <Box sx={{ order: 3, flex: 1, textAlign: 'right'}}>{value?.length}/{maxLength}</Box>
+      </FormLabel>
       <MuiTextField
         size="small"
         type='url'
         variant='outlined'
         value={value}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <>{value.length}/{maxLength}</>
-            </InputAdornment>
-          ),
-          // Spread props at the end to allow Input prop overrides
-          ...InputProps,
-        }}
-        InputLabelProps={{
-          shrink: true,
-          // Spread props at the end to allow InputLabel prop overrides
-          ...InputLabelProps,
-        }}
         inputProps={{
           ref: inputRef,
           // Spread props at the end to allow inputProps prop overrides
           ...inputProps,
         }}
-        error={(value && !inputRef.current?.validity.valid) || value.length > maxLength}
-        helperText={value.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText}
+        error={(value && !inputRef.current?.validity.valid) || value?.length > maxLength}
+        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText}
         // Spread props at the end to allow prop overrides
         {...props}
       />
+    </FormControl>
   );
 };
 

package/src/index.ts

@@ -7,5 +7,7 @@ export { default as FieldTypeDateTime } from './FieldTypeDateTime';
 export { default as FieldTypeColor } from './FieldTypeColor';
 export { default as FieldTypeNumber } from './FieldTypeNumber';
 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

@@ -41,6 +41,16 @@ theme = createTheme(theme, {
         root: {
           color: theme.palette.primary.dark,
         },
+        asterisk: {
+          color: theme.palette.error.main,
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#e4e9f1',
+        },
       },
     },
     MuiToggleButton: {

package/src/utils/virtualization.tsx

@@ -0,0 +1,107 @@
+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, ListChildComponentProps } from 'react-window';
+import Typography from '@mui/material/Typography';
+
+const LISTBOX_PADDING = 8; // px
+
+function renderRow(props: ListChildComponentProps) {
+  const { data, index, style } = props;
+  const dataSet = data[index];
+  const inlineStyle = {
+    ...style,
+    top: (style.top as number) + LISTBOX_PADDING,
+  };
+
+  if (dataSet.hasOwnProperty('group')) {
+    return (
+      <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
+        {dataSet.group}
+      </ListSubheader>
+    );
+  }
+
+  return (
+    <Typography component="li" {...dataSet[0]} noWrap style={inlineStyle}>
+      {dataSet[1]}
+    </Typography>
+  );
+}
+
+const OuterElementContext = React.createContext({});
+
+const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
+  const outerProps = React.useContext(OuterElementContext);
+  return <div ref={ref} {...props} {...outerProps} />;
+});
+
+function useResetCache(data: any) {
+  const ref = React.useRef<VariableSizeList>(null);
+  React.useEffect(() => {
+    if (ref.current != null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [data]);
+  return ref;
+}
+
+// Adapter for react-window
+export const ListboxComponent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLElement>
+>(function ListboxComponent(props, ref) {
+  const { children, ...other } = props;
+  const itemData: React.ReactChild[] = [];
+  (children as React.ReactChild[]).forEach(
+    (item: React.ReactChild & { children?: React.ReactChild[] }) => {
+      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: React.ReactChild) => {
+    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 (
+    <div ref={ref}>
+      <OuterElementContext.Provider value={other}>
+        <VariableSizeList
+          itemData={itemData}
+          height={getHeight() + 2 * LISTBOX_PADDING}
+          width="100%"
+          ref={gridRef}
+          outerElementType={OuterElementType}
+          innerElementType="ul"
+          itemSize={(index: any) => getChildSize(itemData[index])}
+          overscanCount={5}
+          itemCount={itemCount}
+        >
+          {renderRow}
+        </VariableSizeList>
+      </OuterElementContext.Provider>
+    </div>
+  );
+});