@zesty-io/material 0.2.5 → 0.3.0

package/src/FieldTypeColor/FieldTypeColor.stories.tsx

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

package/src/FieldTypeColor/index.tsx

@@ -1,43 +0,0 @@
-import { useRef } from 'react';
-import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { Button, FormControl, FormHelperText, FormLabel, InputAdornment } from '@mui/material';
-import BrushIcon from '@mui/icons-material/Brush';
-
-export interface FieldTypeColorProps extends Omit<OutlinedTextFieldProps, 'variant'> {}
-
-const FieldTypeColor = ({InputProps, label, required, ...props }: FieldTypeColorProps) => {
-
-  return (
-    <FormControl fullWidth required={required}>
-      <FormLabel>{label}</FormLabel>
-      <MuiTextField
-        size="small"
-        variant='outlined'
-        type='color'
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <Button
-                size="small"
-                variant="contained"
-                onClick={(e) => {
-                  // References color input via event in order to open color picker
-                  const input = e.currentTarget?.parentElement?.parentElement?.firstElementChild as HTMLInputElement;
-                  input?.click()
-                }}
-              >
-                <BrushIcon 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 FieldTypeColor;

package/src/FieldTypeDate/FieldTypeDate.stories.tsx

@@ -1,23 +0,0 @@
-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

@@ -1,35 +0,0 @@
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers';
-import { FormControl, FormLabel, TextField } from '@mui/material';
-
-export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<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}>
-        <DesktopDatePicker
-          data-testid="zds-date-picker"
-          renderInput={(params) => 
-            <TextField
-              {...params}
-              helperText={helperText}
-              error={error}
-              size="small"
-            />
-          }
-          // Spread props at the end to allow prop overrides
-          {...props}
-        />
-      </LocalizationProvider>
-    </FormControl>
-  );
-}
-
-export default FieldTypeDate;

package/src/FieldTypeDateTime/FieldTypeDateTime.stories.tsx

@@ -1,23 +0,0 @@
-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

@@ -1,36 +0,0 @@
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DesktopDateTimePicker, DesktopDateTimePickerProps } from '@mui/x-date-pickers';
-import { TextField, FormControl, FormLabel } from '@mui/material';
-
-export interface FieldTypeDateTimeProps extends Omit<DesktopDateTimePickerProps<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}>
-        <DesktopDateTimePicker
-          data-testid="zds-date-time-picker"
-          renderInput={(params) => 
-            <TextField
-              
-              {...params}
-              helperText={helperText}
-              error={error}
-              size="small"
-            />
-          }
-          // Spread props at the end to allow prop overrides
-          {...props}
-        />
-      </LocalizationProvider>
-    </FormControl>
-  );
-}
-
-export default FieldTypeDateTime;

package/src/FieldTypeNumber/FieldTypeNumber.stories.tsx

@@ -1,35 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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,36 +0,0 @@
-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

@@ -1,70 +0,0 @@
-import { ChangeEvent } from 'react';
-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, onChange, ...props }: FieldTypeSortProps) => {
-  return (
-    <FormControl fullWidth required={required}>
-      <FormLabel>{label}</FormLabel>
-      <MuiTextField
-        size="small"
-        variant='outlined'
-        type='number'
-        value={value}
-        onChange={onChange}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <Button
-                size="small"
-                variant="contained"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  // References input via click event in order to obtain its value
-                  const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  const newValue = String(+input.value - 1)
-                  // Updates internal input value in case component is not controlled
-                  input.value = newValue
-                  // Mocks an event change
-                  const event = {target: {value: newValue}}
-                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
-                }}><RemoveIcon fontSize='small' />
-              </Button>
-            </InputAdornment>
-          ),
-          endAdornment: (
-            <InputAdornment position="end">
-              <Button
-                size="small"
-                variant="contained"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  // References input via click event in order to obtain its value
-                  const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  const newValue = String(+input.value + 1)
-                  // Updates internal input value in case component is not controlled
-                  input.value = newValue
-                  // Mocks an event change
-                  const event = {target: {value: newValue}}
-                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
-                }}><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;