@zesty-io/material 0.2.4 → 0.3.0

package/src/ConfirmDialog/index.tsx

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

package/src/CopyButton/CopyButton.stories.tsx

@@ -1,20 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import CopyButton, { CopyButtonProps } from '.';
-
-export default {
-  title: 'CopyButton',
-  component: CopyButton,
-  argType: {},
-} as Meta;
-
-const Template: Story<CopyButtonProps> = (args) => {
-
-  return (
-    <CopyButton {...args} />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  value: 'Copy Me!'
-};

package/src/CopyButton/index.tsx

@@ -1,55 +0,0 @@
-import { useCallback, useState, useEffect } from 'react';
-import Button, { ButtonProps } from '@mui/material/Button';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import CheckIcon from '@mui/icons-material/Check';
-
-export interface CopyButtonProps extends ButtonProps {
-   /**
-   * Value to be copied to clipboard
-   */
-  value: string ;
-}
-
-const CopyButton = ({value, sx, ...props }: CopyButtonProps) => {
-  const [copied, setCopied] = useState(false);
-
-  const copyValue = useCallback(() => {
-      navigator?.clipboard.writeText(value);
-      setCopied(true);
-  }, [value]);
-
-  useEffect(() => {
-    const iconTimer = setTimeout(() => {
-      setCopied(false);
-    }, 500);
-
-    return () => {
-      clearTimeout(iconTimer);
-    };
-  }, [copied]);
-
-  return (
-      <Button
-        variant='outlined'
-        onClick={copyValue}
-        size="small"
-        title={props.children ? `Copy ${props.children}` : `Copy ${value}`}
-        sx={{
-          textTransform: 'unset',
-          // Spread sx prop at the end to allow sx prop overrides
-          ...sx,
-        }}
-        startIcon={copied ? (
-          <CheckIcon color='success' fontSize='small' />
-        ) : (
-          <ContentCopyIcon fontSize='small' />
-        )}
-        // Spread props at the end to allow prop overrides
-        {...props}
-      >
-        {props.children ? props.children : value}
-      </Button>
-  );
-};
-
-export default CopyButton;

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,
-    },
-  },
-});