@zesty-io/material 0.2.5 → 0.3.1

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;

package/src/FieldTypeText/FieldTypeText.stories.tsx

@@ -1,45 +0,0 @@
-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',
-};
-
-

package/src/FieldTypeText/index.tsx

@@ -1,35 +0,0 @@
-import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { FormControl, FormLabel, Box } from '@mui/material';
-
-export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
-   /**
-   * Max length of the field
-   * @default 150
-   */
-  maxLength?: number;
-  value: string;
-}
-
-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}
-        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>
-  );
-};
-
-export default FieldTypeText;

package/src/FieldTypeUrl/FieldTypeUrl.stories.tsx

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

package/src/FieldTypeUrl/index.tsx

@@ -1,44 +0,0 @@
-import { useState } from 'react';
-import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { FormControl, FormLabel, Box } from '@mui/material';
-
-export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant'> {
-   /**
-   * Max length of the field
-   * @default 2000
-   */
-  maxLength?: number;
-  value: string;
-}
-
-const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => {
-  // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
-  const [inputRef, setInputRef] = useState<HTMLInputElement>();
-
-  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={{
-          ref: (inputRef: HTMLInputElement) => setInputRef(inputRef),
-          // Spread props at the end to allow inputProps prop overrides
-          ...inputProps,
-        }}
-        error={(value && !inputRef?.validity.valid) || value?.length > maxLength}
-        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText}
-        // Spread props at the end to allow prop overrides
-        {...props}
-      />
-    </FormControl>
-  );
-};
-
-export default FieldTypeUrl;

package/src/LegacyTheme/index.ts

@@ -1,88 +0,0 @@
-import palette from './palette';
-import typography from './typography';
-import { createTheme, Theme } from '@mui/material/styles';
-
-let theme: Theme = createTheme({
-  palette,
-  typography,
-});
-
-theme = createTheme(theme, {
-  components: {
-    MuiAccordionSummary: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#e4e9f1',
-        },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          minWidth: 'auto',
-        },
-      },
-    },
-    MuiTooltip: {
-      styleOverrides: {
-        tooltip: {
-          color: theme.palette.primary.contrastText,
-          backgroundColor: theme.palette.primary.main,
-          fontSize: '14px',
-          lineHeight: '20px',
-        },
-        arrow: {
-          color: theme.palette.primary.main,
-        },
-      },
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          backgroundColor: theme.palette.primary.contrastText,
-        },
-      },
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        root: {
-          color: theme.palette.primary.dark,
-        },
-        asterisk: {
-          color: theme.palette.error.main,
-        },
-      },
-    },
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          overflow: 'visible',
-        },
-      },
-    },
-    MuiCardHeader: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#e4e9f1',
-        },
-      },
-    },
-    MuiToggleButton: {
-      styleOverrides: {
-        root: ({ ownerState, theme }: any) => ({
-          backgroundColor: `${
-            theme.palette[ownerState.color].contrastText
-          } !important`,
-          ...(ownerState.selected && {
-            color: `${theme.palette[ownerState.color].contrastText} !important`,
-            backgroundColor: `${
-              theme.palette[ownerState.color].main
-            } !important`,
-          }),
-        }),
-      },
-    },
-  },
-});
-
-export default theme;

package/src/LegacyTheme/palette.ts

@@ -1,25 +0,0 @@
-import { PaletteOptions } from '@mui/material/styles';
-const palette: PaletteOptions = {
-  primary: {
-    main: '#404759',
-    contrastText: '#ffffff',
-  },
-  secondary: {
-    main: '#497edf',
-    contrastText: '#ffffff',
-  },
-  success: {
-    main: '#75bf25',
-    contrastText: '#ffffff',
-  },
-  warning: {
-    main: '#f17829',
-    contrastText: '#ffffff',
-  },
-  error: {
-    main: '#e53c05',
-    contrastText: '#ffffff',
-  },
-};
-
-export default palette;

package/src/VitualizedAutocomplete/VirtualizedAutocomplete.stories.tsx

@@ -1,45 +0,0 @@
-import { ReactNode, SyntheticEvent, useState } from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import VirtualizedAutocomplete, { VirtualizedAutocompleteProps } from './';
-
-export default {
-  title: 'VirtualizedAutocomplete',
-  component: VirtualizedAutocomplete,
-  argType: {},
-} as Meta;
-
-const Template: Story<VirtualizedAutocompleteProps> = (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 (
-    <VirtualizedAutocomplete
-      {...args}
-      value={value}
-      onChange={handleOnChange}
-      options={options}
-      onOpen={handleOnOpen}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  helperText: 'OneToOne helperText',
-  placeholder: 'OneToOne placeholder'
-};
-
-
-

package/src/VitualizedAutocomplete/index.tsx

@@ -1,69 +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 VirtualizedAutocompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'renderInput'> {
-  helperText?: string;
-  placeholder?: string;
-  error?: boolean;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  /**
-   * 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 VirtualizedAutocomplete = ({helperText, placeholder, error, startAdornment, endAdornment, ...props }: VirtualizedAutocompleteProps) => {
-  return (
-      <Autocomplete
-        fullWidth
-        disableListWrap
-        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></>
-            }}
-          />
-        )}
-        getOptionLabel={(option) => option.inputLabel}
-        renderOption={(props, option) => [props, option.component]}
-        {...props}
-      />
-  );
-};
-
-export default VirtualizedAutocomplete;
-
-const StyledPopper = styled(Popper)({
-  [`& .${autocompleteClasses.listbox}`]: {
-    boxSizing: 'border-box',
-    '& ul': {
-      padding: 0,
-      margin: 0,
-    },
-  },
-});

package/src/theme/Theme.stories.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import ReactJson from 'react-json-view'
-import { Story, Meta } from '@storybook/react/types-6-0';
-import theme from '.';
-
-export default {
-  title: 'Theme',
-} as Meta;
-
-const Template: Story = (args) => {
-  return (
-    <ReactJson src={theme} />
-  );
-};
-
-export const Default = Template.bind({});

package/src/theme/index.ts

@@ -1,53 +0,0 @@
-import palette from './palette';
-import typography from './typography';
-import { createTheme, Theme } from '@mui/material/styles';
-
-let theme: Theme = createTheme({
-  palette,
-  typography,
-});
-
-theme = createTheme(theme, {
-  components: {
-    MuiFormLabel: {
-      styleOverrides: {
-        root: {
-          ...theme.typography.body2,
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          borderBottom: 2,
-          borderColor: theme.palette.grey[100],
-          borderStyle: "solid",
-        },
-      },
-    },
-    MuiCardHeader: {
-      styleOverrides: {
-        root: {
-          padding: "16px 16px 0px",
-        },
-      },
-    },
-    MuiCardContent: {
-      styleOverrides: {
-        root: {
-          padding: "8px 16px 16px",
-          ":last-child": {
-            paddingBottom: "16px",
-          },
-        },
-      },
-    },
-    MuiButton: {
-      defaultProps: {
-        disableElevation: true,
-      },
-    },
-  },
-});
-
-export default theme;

package/src/theme/palette.ts

@@ -1,153 +0,0 @@
-import { Color } from '@mui/material';
-import { PaletteOptions } from '@mui/material/styles';
-
-// Module augmentation
-declare module '@mui/material/styles' {
-  export interface PaletteOptions {
-    red?: Partial<Color>;
-    deepPurple?: Partial<Color>;
-    deepOrange?: Partial<Color>;
-    pink?: Partial<Color>;
-    blue?: Partial<Color>;
-    green?: Partial<Color>;
-    purple?: Partial<Color>;
-  }
-}
-
-const palette: PaletteOptions = {
-  primary: {
-    main: "#FF5D03",
-    dark: "#EC4A0A",
-    light: "#FD853A",
-  },
-  success: {
-    main: "#12B76A",
-    dark: "#027A48",
-    light: "#D1FADF",
-  },
-  warning: {
-    main: "#F79009",
-    dark: "B54708",
-    light: "#FEF0C7",
-  },
-  error: {
-    main: "#F04438",
-    dark: "#B42318",
-    light: "#FECDCA",
-  },
-  info: {
-    main: "#0BA5EC",
-    dark: "#026AA2",
-    light: "#7CD4FD",
-  },
-  text: {
-    primary: "#101828",
-    secondary: "#475467",
-  },
-  grey: {
-    50: "#F9FAFB",
-    100: "#F2F4F7",
-    200: "#E4E7EC",
-    300: "#D0D5DD",
-    400: "#98A2B3",
-    500: "#667085",
-    600: "#475467",
-    700: "#344054",
-    800: "#1D2939",
-    900: "#101828",
-  },
-  deepPurple: {
-    50: '#F8F9FC',
-    100: '#EAECF5',
-    200: '#C8CCE5',
-    300: '#9EA5D1',
-    400: "#4E5BA6",
-    500: '#4E5BA6',
-    600: '#3E4784',
-    700: '#363F72',
-    800: '#293056',
-    900: '#101323'
-  },
-  deepOrange: {
-    50: "#FFF6ED",
-    100: "#FFEAD5",
-    200: "#FDDCAB",
-    300: "#FEB273",
-    400: "#FD853A",
-    500: "#FF5C08",
-    600: "#EC4A0A",
-    700: "#C4320A",
-    800: "#9C2A10",
-    900: "#7E2410",
-  },
-  red: {
-    50: '#FEF3F2',
-    100: '#FEE4E2',
-    200: '#FECDCA',
-    300: '#FDA29B',
-    400: '#F97066',
-    500: '#F04438',
-    600: '#D92D20',
-    700: '#B42318',
-    800: '#912018',
-    900: '#7A271A',
-  },
-  pink: {
-    50: '#FDF2FA',
-    100: '#FCE7F6',
-    200: '#FCCEEE',
-    300: '#FAA7E0',
-    400: "#F670C7",
-    500: '#EE46BC',
-    600: '#DD2590',
-    700: '#C11574',
-    800: '#9E165F',
-    900: '#851651',
-  },
-  blue: {
-    50: '#F0F9FF',
-    100: "#E0F2FE",
-    200: '#B9E6FE',
-    300: '#7CD4FD',
-    400: "#36BFFA",
-    500: '#0BA5EC',
-    600: '#0086C9',
-    700: '#026AA2',
-    800: '#065986',
-    900: '#0B4A6F',
-  },
-  green: {
-    50: '#ECFDF3',
-    100: "#D1FADF",
-    200: '#A6F4C5',
-    300: '#6CE9A6',
-    400: "#32D583",
-    500: '#12B76A',
-    600: '#039855',
-    700: '#027A48',
-    800: '#05603A',
-    900: '#054F31',
-  },
-  purple: {
-    50: '#F3E5F5',
-    100: '#E1BEE7',
-    200: '#CE93D8',
-    300: '#BA68C8',
-    400: '#AB47BC',
-    500: '#9C27B0',
-    600: '#8E24AA',
-    700: '#7B1FA2',
-    800: '#6A1B9A',
-    900: '#4A148C',
-  },
-  action: {
-    active: "rgba(16, 24, 40, 0.40)",
-    hover: "rgba(16, 24, 40, 0.04)",
-    selected: "rgba(16, 24, 40, 0.08)",
-    disabled: "rgba(16, 24, 40, 0.26)",
-    disabledBackground: "rgba(16, 24, 40, 0.12)",
-    focus: "rgba(16, 24, 40, 0.12)",
-  }
-};
-
-export default palette;