@zesty-io/material 0.0.3 → 0.1.1

package/src/FieldTypeDate/FieldTypeDate.stories.tsx

@@ -0,0 +1,23 @@
+import {useState} from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeDate, { FieldTypeDateProps } from '.';
+
+export default {
+  title: 'FieldTypeDate',
+  component: FieldTypeDate,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeDateProps> = (args) => {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <FieldTypeDate {...args} value={value} onChange={(value) => setValue(value)}/>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Date label',
+  helperText: 'Date helper text',
+};

package/src/FieldTypeDate/index.tsx

@@ -0,0 +1,34 @@
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker, DatePickerProps} from '@mui/x-date-pickers/DatePicker';
+import { FormControl, FormLabel, TextField } from '@mui/material';
+
+export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
+  helperText?: string;
+  error?: boolean;
+  required?: boolean;
+};
+
+const FieldTypeDate = ({label, helperText, error, required, ...props}: FieldTypeDateProps) => {
+  return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <DatePicker
+          data-testid="zds-date-picker"
+          renderInput={(params) => 
+            <TextField
+              {...params}
+              helperText={helperText}
+              error={error}
+            />
+          }
+          // Spread props at the end to allow prop overrides
+          {...props}
+        />
+      </LocalizationProvider>
+    </FormControl>
+  );
+}
+
+export default FieldTypeDate;

package/src/FieldTypeDateTime/FieldTypeDateTime.stories.tsx

@@ -0,0 +1,23 @@
+import {useState} from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeDateTime, { FieldTypeDateTimeProps } from '.';
+
+export default {
+  title: 'FieldTypeDateTime',
+  component: FieldTypeDateTime,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeDateTimeProps> = (args) => {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <FieldTypeDateTime {...args} value={value} onChange={(value) => setValue(value)}/>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Date label',
+  helperText: 'Date helper text',
+};

package/src/FieldTypeDateTime/index.tsx

@@ -0,0 +1,35 @@
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker, DateTimePickerProps} from '@mui/x-date-pickers/DateTimePicker';
+import { TextField, FormControl, FormLabel } from '@mui/material';
+
+export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
+  helperText?: string;
+  error?: boolean;
+  required?: boolean;
+};
+
+const FieldTypeDateTime = ({label, helperText, error, required, ...props}: FieldTypeDateTimeProps) => {
+  return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <DateTimePicker
+          data-testid="zds-date-picker"
+          renderInput={(params) => 
+            <TextField
+              
+              {...params}
+              helperText={helperText}
+              error={error}
+            />
+          }
+          // Spread props at the end to allow prop overrides
+          {...props}
+        />
+      </LocalizationProvider>
+    </FormControl>
+  );
+}
+
+export default FieldTypeDateTime;

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 { 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',
+  component: FieldTypeOneToMany,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeOneToManyProps> = (args) => {
+  const [value, setValue] = useState<string[]>([]);
+
+  const [options, setOptions] = useState<string[]>([]);
+
+  const handleOnOpen = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+    setOptions(randomOptions);
+  }
+
+  const handleOnChange = (e: SyntheticEvent<Element, Event>, values: string[]) => {
+    setValue(values);
+  }
+
+  return (
+    <FieldTypeOneToMany
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+      onOpen={handleOnOpen}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  textFieldProps: {
+    placeholder: 'Placeholder Text...',
+    label: 'OneToOne label',
+    helperText: 'OneToOne helperText',
+  }
+};
+
+
+

package/src/FieldTypeOneToMany/index.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { AutocompleteProps, 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'> {
+  /**
+   * Props passed to TextField component
+   */
+  textFieldProps?: TextFieldProps;
+  /**
+   * Callback to be fired upon opening the dropdown
+   */
+   onOpen: () => Promise<any>;
+}
+
+const FieldTypeOneToMany = ({textFieldProps, onOpen, ...props }: FieldTypeOneToManyProps) => {
+  const [loaded, setLoaded] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const handleOpen = () => {
+    if (!loaded && onOpen) {
+      onOpen().then(() => {
+        setLoading(false);
+      });
+
+      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}
+    />
+  );
+};
+
+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,97 @@
+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]}
+        // getOptionLabel={(option) => option.label}
+        {...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

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

package/src/FieldTypeSort/index.tsx

@@ -0,0 +1,56 @@
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+  value: string;
+}
+
+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}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <Button
+                size="small"
+                variant="contained"
+                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>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <Button
+                size="small"
+                variant="contained"
+                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,
+        }}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+    </FormControl>
+  );
+};
+
+export default FieldTypeSort;

package/src/FieldTypeText/FieldTypeText.stories.tsx

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