@zesty-io/material 0.0.4 → 0.1.2

package/src/FieldTypeDropdown/FieldTypeDropwdon.stories.tsx

@@ -0,0 +1,52 @@
+import { ChangeEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeDropdown, { FieldTypeDropdownProps } from './';
+import { MenuItem } from '@mui/material';
+
+export default {
+  title: 'FieldTypeDropdown',
+  component: FieldTypeDropdown,
+  argType: {},
+} as Meta;
+
+const options = [
+  {
+    value: 'option1',
+    label: 'Option 1',
+  },
+  {
+    value: 'option2',
+    label: 'Option 2',
+  },
+  {
+    value: 'option3',
+    label: 'Option 3',
+  },
+];
+
+const Template: Story<FieldTypeDropdownProps> = (args) => {
+  const [value, setValue] = useState('');
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }
+
+  return (
+    <FieldTypeDropdown
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder Text...',
+  label: 'Dropdown label',
+  helperText: 'Dropdown helper text',
+};
+
+
+

package/src/FieldTypeDropdown/index.tsx

@@ -0,0 +1,41 @@
+import { MenuItem } from '@mui/material';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { FormControl, FormLabel } from '@mui/material';
+
+interface Option {
+  label: string;
+  value: any;
+}
+
+export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+  options: Option[];
+}
+
+const FieldTypeDropdown = ({label, options, required, ...props }: FieldTypeDropdownProps) => {
+
+  return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <MuiTextField
+        size="small"
+        variant='outlined'
+        select
+        SelectProps={{
+          displayEmpty: true,
+        }}
+        {...props}
+      >
+        <MenuItem key={''} value={''}>
+          - None -
+        </MenuItem>
+        {options.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+      ))}
+      </MuiTextField>
+    </FormControl>
+  );
+};
+
+export default FieldTypeDropdown;

package/src/FieldTypeNumber/FieldTypeNumber.stories.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeNumber, { FieldTypeNumberProps } from './';
+
+export default {
+  title: 'FieldTypeNumber',
+  component: FieldTypeNumber,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeNumberProps> = (args) => {
+  const [value, setValue] = useState('0');
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }
+
+  return (
+    <FieldTypeNumber
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder Text...',
+  label: 'Number label',
+  helperText: 'Number helper text',
+};
+
+
+

package/src/FieldTypeNumber/index.tsx

@@ -0,0 +1,22 @@
+import { FormControl, FormLabel } from '@mui/material';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+
+export interface FieldTypeNumberProps extends Omit<OutlinedTextFieldProps, 'variant'> {}
+
+const FieldTypeText = ({label, required, ...props }: FieldTypeNumberProps) => {
+
+  return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <MuiTextField
+        size="small"
+        variant='outlined'
+        type='number'
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+    </FormControl>
+  );
+};
+
+export default FieldTypeText;

package/src/FieldTypeOneToMany/FieldTypeOneToMany.stories.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, SyntheticEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeOneToMany, { FieldTypeOneToManyProps } from '.';
+
+export default {
+  title: 'FieldTypeOneToMany',
+  component: FieldTypeOneToMany,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeOneToManyProps> = (args) => {
+  const [value, setValue] = useState<{component: string | ReactNode, value: string, inputLabel: string}[]>([]);
+
+  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>, values: {component: string | ReactNode, value: string, inputLabel: string}[]) => {
+    setValue(values);
+  }
+
+  return (
+    <FieldTypeOneToMany
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+      onOpen={handleOnOpen}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder Text...',
+  label: 'OneToMany label',
+  helperText: 'OneToMany helperText',
+};
+
+
+

package/src/FieldTypeOneToMany/index.tsx

@@ -0,0 +1,90 @@
+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;
+  /**
+   * 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 FieldTypeOneToMany = ({label, helperText, placeholder, error, onOpen, options, required, ...props }: FieldTypeOneToManyProps) => {
+  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
+        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>
+  );
+};
+
+export default FieldTypeOneToMany;
+
+const StyledPopper = styled(Popper)({
+  [`& .${autocompleteClasses.listbox}`]: {
+    boxSizing: 'border-box',
+    '& ul': {
+      padding: 0,
+      margin: 0,
+    },
+  },
+});

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

@@ -1,6 +1,5 @@
 import { ChangeEvent, useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { TextFieldProps } from '@mui/material';
 import FieldTypeSort, { FieldTypeSortProps } from './';
 
 export default {
@@ -28,7 +27,9 @@ const Template: Story<FieldTypeSortProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Placeholder Text...',
-  label: 'Some label',
+  label: 'Sort label',
+  helperText: 'Sort helper text',
+  error: false,
 };
 
 

package/src/FieldTypeSort/index.tsx

@@ -1,6 +1,5 @@
-import React, { ChangeEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 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';
 
@@ -8,29 +7,26 @@ export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'varian
   value: string;
 }
 
-const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...props }: FieldTypeSortProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
+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">
               <Button
                 size="small"
                 variant="contained"
-                onClick={() => {
-                  if(inputRef.current) inputRef.current.value = String(+inputRef.current.value + 1)
-                }}><AddIcon fontSize='small' />
+                onClick={(e) => {
+                  // References input via event in order to modify its value
+                  const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
+                  input.value = String(+input.value - 1)
+                }}><RemoveIcon fontSize='small' />
               </Button>
             </InputAdornment>
           ),
@@ -39,71 +35,22 @@ const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...p
               <Button
                 size="small"
                 variant="contained"
-                onClick={() => {
-                  if(inputRef.current) inputRef.current.value = String(+inputRef.current.value - 1)
-                }}><RemoveIcon fontSize='small' />
+                onClick={(e) => {
+                  // References input via event in order to modify its value
+                  const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
+                  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,
-        }}
-        inputProps={{
-          ref: inputRef,
-          // Spread props at the end to allow inputProps prop overrides
-          ...inputProps,
-        }}
         // Spread props at the end to allow prop overrides
         {...props}
       />
+    </FormControl>
   );
 };
 
 export default FieldTypeSort;
-
-
-// const FieldTypeSort = ({InputProps, InputLabelProps, ...props }: FieldTypeSortProps) => {
-
-//   return (
-//       <MuiTextField
-//         variant='outlined'
-//         type='number'
-//         InputProps={{
-//           startAdornment: (
-//             <InputAdornment position="start">
-//               <Button
-//                 variant="contained"
-//                 onClick={() => {
-//                   callback(props.value + 1)
-//                 }}>+</Button>
-//             </InputAdornment>
-//           ),
-//           endAdornment: (
-//             <InputAdornment position="end">
-//               <Button
-//                 variant="contained"
-//                 onClick={() => {
-//                   callback(props.value - 1)
-//                 }}>-</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}
-//       />
-//   );
-// };
-
-// export default FieldTypeSort;

package/src/FieldTypeText/FieldTypeText.stories.tsx

@@ -16,19 +16,21 @@ const Template: Story<FieldTypeTextProps> = (args) => {
   }
 
   return (
-    <FieldTypeText
-      {...args}
-      value={value}
-      onChange={handleOnChange}
-    />
+    <>
+      <FieldTypeText
+        {...args}
+        value={value}
+        onChange={handleOnChange}
+      />
+    </>
   );
 };
 
 export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Placeholder Text...',
-  label: 'Some label',
-  fullWidth: true,
+  label: 'Text label',
+  helperText: 'Text helper text',
 };
 
 export const TextArea = Template.bind({});
@@ -36,8 +38,8 @@ TextArea.args = {
   multiline: true,
   rows: 4,
   placeholder: 'Placeholder Text...',
-  label: 'Some Label',
-  fullWidth: true,
+  label: 'Text Label',
+  helperText: 'Text helper text',
 };
 
 

package/src/FieldTypeText/index.tsx

@@ -1,6 +1,5 @@
-import React, { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { Box, InputAdornment } from '@mui/material';
+import { FormControl, FormLabel, Box } from '@mui/material';
 
 export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
    /**
@@ -11,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>
   );
 };