@corva/ui 0.38.0-6 → 0.38.0-7

package/src/components/SearchInput/index.js

@@ -1,87 +0,0 @@
-import { useState, useCallback } from 'react';
-import { debounce } from 'lodash';
-import { Paper, InputBase, makeStyles } from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import CloseIcon from '@material-ui/icons/Close';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 30,
-    paddingLeft: 19,
-    borderRadius: 30,
-    boxShadow: 'none',
-    '&:focus-within': {
-      boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`,
-    },
-  },
-  input: {
-    flex: 1,
-    fontFamily: 'Roboto',
-    fontSize: 14,
-    fontWeight: 200,
-  },
-  searchIcon: {
-    height: 16,
-    width: 16,
-    color: theme.palette.primary.contrastText,
-    marginRight: 9,
-  },
-  closeIcon: {
-    height: 16,
-    width: 16,
-    margin: '0 10px',
-    color: theme.palette.primary.text6,
-    cursor: 'pointer',
-  },
-}));
-
-function SearchInput({ handleSearch, className }) {
-  const styles = useStyles();
-
-  const [inputValue, setInputValue] = useState('');
-
-  const handleChangeDebounced = useCallback(debounce(handleSearch, 500), []);
-
-  const handleInputChange = targetValue => {
-    setInputValue(targetValue);
-
-    handleChangeDebounced(targetValue);
-  };
-
-  return (
-    <Paper className={classNames(styles.root, className)}>
-      <SearchIcon className={styles.searchIcon} />
-      <InputBase
-        className={styles.input}
-        placeholder="Search ..."
-        value={inputValue}
-        inputProps={{ 'aria-label': 'search' }}
-        onChange={e => handleInputChange(e.target.value)}
-      />
-      {inputValue && (
-        <CloseIcon
-          className={styles.closeIcon}
-          onClick={() => {
-            handleSearch('');
-            setInputValue('');
-          }}
-        />
-      )}
-    </Paper>
-  );
-}
-
-SearchInput.propTypes = {
-  handleSearch: PropTypes.func.isRequired,
-  className: PropTypes.string,
-};
-
-SearchInput.defaultProps = {
-  className: '',
-};
-
-export default SearchInput;

package/src/components/Select/Select.stories.js

@@ -1,100 +0,0 @@
-/* eslint-disable react/prop-types */
-import { useState } from 'react';
-import { MenuItem, makeStyles } from '@material-ui/core';
-// In case you update the component src path,
-// please also update the GitHub source link at the bottom
-import SelectComponent from '~/components/Select';
-
-const useStyles = makeStyles({
-  container: {
-    height: 100,
-    padding: 24,
-    marginBottom: 24,
-    backgroundColor: '#1D1D1D',
-  },
-});
-
-export const Select = props => {
-  const styles = useStyles();
-
-  const [value, setValue] = useState(null);
-
-  return (
-    <>
-      <div className={styles.container}>
-        <SelectComponent
-          label="Age"
-          value={value}
-          style={{ width: props.width }}
-          onChange={event => setValue(event.target.value)}
-          formHelperText={props.formHelperText}
-          FormControlProps={{
-            variant: props.variant,
-          }}
-          disabled={props.disabled}
-          error={props.error}
-        >
-          <MenuItem value={10}>Ten</MenuItem>
-          <MenuItem value={20}>Twenty</MenuItem>
-          <MenuItem value={30}>Thirty</MenuItem>
-        </SelectComponent>
-      </div>
-
-      <div className={styles.container}>
-        <div>Small variant for tables:</div>
-
-        <SelectComponent
-          value={value}
-          style={{ width: props.width }}
-          onChange={event => setValue(event.target.value)}
-          disabled={props.disabled}
-        >
-          <MenuItem value={10}>Ten</MenuItem>
-          <MenuItem value={20}>Twenty</MenuItem>
-          <MenuItem value={30}>Thirty</MenuItem>
-        </SelectComponent>
-      </div>
-    </>
-  );
-};
-
-export default {
-  title: 'Components/Select',
-  component: Select,
-  argTypes: {
-    variant: {
-      defaultValue: 'standard',
-      control: {
-        type: 'inline-radio',
-        options: ['standard', 'outlined', 'filled'],
-      },
-    },
-    disabled: {
-      control: {
-        defaultValue: false,
-        type: 'boolean',
-      },
-    },
-    error: {
-      control: {
-        defaultValue: false,
-        type: 'boolean',
-      },
-    },
-    formHelperText: {
-      defaultValue: 'Some important text',
-      control: {
-        type: 'text',
-      },
-    },
-    width: {
-      defaultValue: 120,
-      control: {
-        type: 'number',
-      },
-    },
-  },
-  parameters: {
-    sourceLink: 'https://github.dev/corva-ai/corva-ui/blob/develop/src/components/Select/index.js',
-  },
-};

package/src/components/Select/index.js

@@ -1,224 +0,0 @@
-import { useMemo } from 'react';
-import {
-  Select as MuiSelect,
-  FormControl,
-  InputLabel,
-  FormHelperText,
-  makeStyles,
-} from '@material-ui/core';
-import PropTypes from 'prop-types';
-import uuidV4 from 'uuid/v4';
-import classNames from 'classnames';
-
-const DISABLED_OPACITY = '0.4';
-
-const useStyles = makeStyles(theme => ({
-  formControlRoot: {
-    '&:hover': {
-      '& .MuiFormLabel-root': {
-        color: theme.palette.primary.contrastText,
-      },
-      '& .MuiInput-underline:not(.Mui-disabled), & .MuiFilledInput-underline:not(.Mui-disabled)': {
-        '&::before': {
-          borderBottom: `2px solid ${theme.palette.primary.contrastText}`,
-        },
-      },
-      '& .MuiSvgIcon-root.MuiSelect-icon': {
-        color: theme.palette.primary.contrastText,
-      },
-    },
-    '& .MuiInputBase-root.Mui-focused': {
-      '& .MuiSvgIcon-root.MuiSelect-icon': {
-        color: theme.palette.primary.main,
-      },
-    },
-    '& .MuiInput-underline, & .MuiFilledInput-underline': {
-      '&::before': {
-        borderBottom: `1px solid ${theme.palette.primary.text6}`,
-      },
-      '&.Mui-disabled': {
-        '&::before': {
-          opacity: DISABLED_OPACITY,
-          borderBottom: `1px solid ${theme.palette.primary.text6}`,
-        },
-        '&::after': {
-          opacity: DISABLED_OPACITY,
-        },
-      },
-    },
-    '& .MuiSelect-root': {
-      '&.Mui-disabled': {
-        color: theme.palette.primary.contrastText,
-        opacity: DISABLED_OPACITY,
-      },
-    },
-    '& .MuiFormLabel-root': {
-      color: theme.palette.primary.text6,
-      '&.Mui-focused': {
-        color: theme.palette.primary.main,
-      },
-      '&.Mui-disabled.MuiInputLabel-root': {
-        color: theme.palette.primary.text6,
-        opacity: DISABLED_OPACITY,
-      },
-    },
-    '& .MuiSelect-icon.Mui-disabled': {
-      color: theme.palette.primary.contrastText,
-      opacity: DISABLED_OPACITY,
-    },
-    '& .MuiFormHelperText-root': {
-      color: theme.palette.primary.text6,
-      '&.Mui-disabled': {
-        opacity: DISABLED_OPACITY,
-      },
-    },
-    '& .MuiFilledInput-root': {
-      backgroundColor: theme.palette.background.b6,
-      '&:hover': {
-        backgroundColor: theme.palette.background.b7,
-      },
-      '&.Mui-disabled': {
-        backgroundColor: theme.palette.background.b6,
-        opacity: DISABLED_OPACITY,
-      },
-    },
-    '& .MuiInputLabel-filled': {
-      left: 2,
-    },
-    '& .MuiSelect-filled': {
-      paddingLeft: 14,
-    },
-    '& .MuiSvgIcon-root.MuiSelect-icon': {
-      color: theme.palette.primary.text6,
-    },
-  },
-  menuList: {
-    backgroundColor: theme.palette.background.b9,
-    '& .MuiMenuItem-root': {
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.primary.text9,
-      },
-    },
-  },
-  error: {
-    '&:hover': {
-      '& .MuiInput-underline, & .MuiFilledInput-underline': {
-        '&::after': {
-          borderBottom: `2px solid ${theme.palette.error.main}`,
-        },
-      },
-      '& .MuiInput-underline.Mui-disabled, & .MuiFilledInput-underline.Mui-disabled': {
-        '&::before': {
-          borderBottom: `1px solid ${theme.palette.error.main}`,
-        },
-        '&::after': {
-          display: 'none',
-        },
-      },
-      '& .MuiOutlinedInput-root.Mui-error:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': {
-        borderWidth: 2,
-      },
-    },
-    '& .MuiFormLabel-root.MuiInputLabel-root': {
-      color: theme.palette.error.main,
-      '&.Mui-focused': {
-        color: theme.palette.error.main,
-      },
-      '&.Mui-disabled': {
-        color: theme.palette.error.main,
-      },
-    },
-    '& .MuiFormHelperText-root': {
-      color: theme.palette.error.main,
-    },
-    '& .MuiInput-underline, & .MuiFilledInput-underline': {
-      '&::after': {
-        borderBottom: `1px solid ${theme.palette.error.main}`,
-      },
-      '&.Mui-disabled::after': {
-        display: 'none',
-      },
-      '&.Mui-disabled::before': {
-        borderBottom: `1px solid ${theme.palette.error.main}`,
-      },
-    },
-    '& .MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline': {
-      borderColor: theme.palette.error.main,
-      opacity: DISABLED_OPACITY,
-    },
-  },
-}));
-
-const Select = props => {
-  const { FormControlProps, InputLabelProps, label, formHelperText, ...SelectProps } = props;
-
-  const labelId = useMemo(uuidV4, []);
-
-  const styles = useStyles();
-
-  return (
-    <FormControl
-      {...FormControlProps}
-      classes={{
-        ...FormControlProps.classes,
-        root: classNames(FormControlProps.classes?.root, styles.formControlRoot, {
-          [styles.error]: SelectProps.error,
-        }),
-      }}
-      disabled={FormControlProps.disabled || SelectProps.disabled}
-    >
-      {label && (
-        <InputLabel id={labelId} {...InputLabelProps}>
-          {label}
-        </InputLabel>
-      )}
-      <MuiSelect
-        {...SelectProps}
-        labelId={labelId}
-        // NOTE: label should be explicitly set for outlined select
-        // https://github.com/mui-org/material-ui/issues/14530#issuecomment-620974845
-        label={label}
-        MenuProps={{
-          ...SelectProps?.MenuProps,
-          classes: {
-            ...SelectProps?.MenuProps?.classes,
-            paper: classNames(SelectProps?.MenuProps?.paper, {
-              [styles.outlinedMenuPaper]: FormControlProps.variant === 'outlined',
-            }),
-            list: classNames(SelectProps?.MenuProps?.list, styles.menuList),
-          },
-        }}
-      />
-      {formHelperText && <FormHelperText>{formHelperText}</FormHelperText>}
-    </FormControl>
-  );
-};
-
-Select.propTypes = {
-  FormControlProps: PropTypes.shape({
-    classes: PropTypes.shape({
-      root: PropTypes.string,
-    }),
-    disabled: PropTypes.bool,
-    variant: PropTypes.oneOf(['outlined', 'filled', 'standard']),
-  }),
-  InputLabelProps: PropTypes.shape({
-    classes: PropTypes.shape({
-      root: PropTypes.string,
-      disabled: PropTypes.string,
-    }),
-  }),
-  label: PropTypes.string,
-  formHelperText: PropTypes.string,
-  error: PropTypes.bool,
-};
-
-Select.defaultProps = {
-  FormControlProps: {},
-  InputLabelProps: {},
-  label: null,
-  formHelperText: null,
-  error: false,
-};
-
-export default Select;

package/src/components/SettingEditors/ColorEditor/ColorEditor.stories.js

@@ -1,41 +0,0 @@
-import { useState } from 'react';
-
-// In case you update the component src path,
-// please also update the GitHub source link at the bottom
-import { ColorEditor } from '~/components/SettingEditors';
-import { ColorEditor as ColorEditorComponent } from '~/components/SettingEditors/ColorEditor';
-
-export const Default = props => {
-  const defaultValue = '#FF0000';
-  const [value, setValue] = useState(defaultValue);
-
-  return (
-    <div>
-      <ColorEditor
-        currentValue={value}
-        defaultValue={defaultValue}
-        onChange={setValue}
-        {...props}
-      />
-    </div>
-  );
-};
-
-Default.storyName = 'ColorEditor';
-
-export default {
-  title: 'Components/ColorEditor',
-  component: ColorEditorComponent,
-  argTypes: {
-    // don't show classes prop in table as it's used only internally
-    classes: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  parameters: {
-    sourceLink:
-      'https://github.dev/corva-ai/corva-ui/blob/develop/src/components/SettingEditors/ColorEditor/index.js',
-  },
-};

package/src/components/SettingEditors/ColorEditor/index.js

@@ -1,104 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import { ChromePicker, GithubPicker } from 'react-color';
-
-import { Button, ClickAwayListener, withStyles } from '@material-ui/core';
-import ColorLensIcon from '@material-ui/icons/ColorLens';
-
-import styles from './style.css';
-
-const muiStyles = {
-  button: {
-    marginBottom: 16,
-  },
-};
-
-export const ColorEditor = ({
-  onChange,
-  currentValue,
-  defaultValue,
-  classes,
-  condensed,
-  colors,
-  lensColor,
-}) => {
-  const [isPickerOpened, setIsPickerOpened] = useState(false);
-  const [color, setColor] = useState(currentValue || defaultValue);
-
-  const handlePickerOpen = () => setIsPickerOpened(true);
-
-  const handleSave = () => onChange(color);
-
-  const handlePickerClose = () => {
-    setIsPickerOpened(false);
-    handleSave();
-  };
-
-  const handleChange = color => {
-    setColor(color.hex);
-    handleSave();
-  };
-
-  const handleChangeAndClose = color => {
-    setColor(color.hex);
-    setIsPickerOpened(false);
-    handleSave();
-  };
-
-  return (
-    <div className={styles.colorEditor}>
-      <Button
-        variant="contained"
-        color="primary"
-        onClick={handlePickerOpen}
-        className={classes.button}
-        style={{ backgroundColor: color, color: lensColor }}
-      >
-        <ColorLensIcon />
-      </Button>
-      {isPickerOpened && (
-        <ClickAwayListener
-          mouseEvent="onMouseDown"
-          touchEvent="onTouchStart"
-          onClickAway={handlePickerClose}
-        >
-          <div className={styles.colorEditorPickerContainer}>
-            {condensed ? (
-              <GithubPicker
-                color={color}
-                onChange={handleChangeAndClose}
-                colors={colors}
-                triangle="hide"
-              />
-            ) : (
-              <ChromePicker color={color} onChange={handleChange} />
-            )}
-          </div>
-        </ClickAwayListener>
-      )}
-    </div>
-  );
-};
-
-ColorEditor.propTypes = {
-  currentValue: PropTypes.string.isRequired,
-  defaultValue: PropTypes.string,
-  condensed: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  colors: PropTypes.arrayOf(PropTypes.string),
-  classes: PropTypes.shape({}).isRequired,
-  lensColor: PropTypes.string,
-};
-
-ColorEditor.defaultProps = {
-  condensed: false,
-  colors: ['#FF0000', '#00FF00', '#0000FF'],
-  defaultValue: '#FF0000',
-  lensColor: '#fff',
-};
-
-export default withStyles(muiStyles)(ColorEditor);
-
-export const colorEditorForDefinitions = (colors, defaultValue) => props => (
-  <ColorEditor condensed colors={colors} defaultValue={defaultValue} {...props} />
-);

package/src/components/SettingEditors/ColorEditor/style.css

@@ -1,10 +0,0 @@
-.colorEditor {
-  position: relative;
-}
-
-.colorEditorPickerContainer {
-  z-index: 100;
-  position: absolute;
-  top: 0;
-  left: 0;
-}

package/src/components/SettingEditors/DropdownEditor/index.js

@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types';
-import {
-  Select,
-  Checkbox,
-  MenuItem,
-  InputLabel,
-  FormControl,
-  withStyles,
-  FormHelperText,
-} from '@material-ui/core';
-import classNames from 'classnames';
-
-const StyledCheckbox = withStyles({ root: { paddingLeft: '7px' } })(Checkbox);
-
-function DropdownEditor({
-  currentValue,
-  defaultValue,
-  options,
-  placeholder,
-  onChange,
-  multiple,
-  disabled,
-  classes,
-  renderValue,
-  errorText,
-}) {
-  const value = currentValue || defaultValue;
-  const menuItemClassName = classNames(classes.menuItem, multiple && classes.multipleMenuItem);
-
-  return (
-    <FormControl className={classes.formControl} error={!!errorText}>
-      <InputLabel shrink={value !== undefined}>{placeholder}</InputLabel>
-      <Select
-        value={value}
-        onChange={e => onChange(e.target.value)}
-        multiple={multiple}
-        disabled={disabled}
-        renderValue={renderValue}
-        MenuProps={{
-          className: classes.selectMenu,
-          anchorOrigin: { vertical: 'top' },
-        }}
-        autoWidth
-        displayEmpty
-      >
-        {options &&
-          options.map(option => {
-            return (
-              <MenuItem key={option.value} value={option.value} className={menuItemClassName}>
-                {multiple && (
-                  <StyledCheckbox color="primary" checked={value && value.includes(option.value)} />
-                )}
-                {option.label}
-              </MenuItem>
-            );
-          })}
-      </Select>
-      {!!errorText && <FormHelperText>{errorText}</FormHelperText>}
-    </FormControl>
-  );
-}
-
-DropdownEditor.propTypes = {
-  currentValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
-  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
-  onChange: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.any).isRequired,
-  placeholder: PropTypes.string,
-  multiple: PropTypes.bool,
-  disabled: PropTypes.bool,
-  classes: PropTypes.shape({}).isRequired,
-  renderValue: PropTypes.func,
-  errorText: PropTypes.string,
-};
-
-DropdownEditor.defaultProps = {
-  currentValue: undefined,
-  defaultValue: undefined,
-  multiple: false,
-  placeholder: 'Choose An Option',
-  disabled: false,
-  renderValue: undefined,
-  errorText: '',
-};
-
-const muiStyles = {
-  formControl: { minWidth: '200px', maxWidth: '200px', margin: '10px 20px 10px 0' },
-  selectMenu: { maxHeight: '400px' },
-  menuItem: { minWidth: '200px' },
-  multipleMenuItem: { paddingLeft: '5px', minWidth: '200px' },
-};
-
-const StyledDropdownEditor = withStyles(muiStyles)(DropdownEditor);
-export default StyledDropdownEditor;
-
-/**
- * A High-Order Component that allows setting up an editor component
- * @param {Object[]} options - The array of dropdown options
- * @param {string|React.Element} options[].label - Label of dropdown option
- * @param {*} options[].value - Value of dropdown option.
- * @param {Object} dropdownProps - Passing additional props to dropdown component
- * @param {boolean} dropdownProps.multiple - Indicates using multiselect dropdown
- */
-export const dropdownEditorForDefinitions = (options, dropdownProps = {}) => props => (
-  <StyledDropdownEditor {...props} {...dropdownProps} options={options} />
-);