sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/Dropdown/Dropdown.stories.js

@@ -1,318 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.UpDownArrowIcon = exports.SmallSquare = exports.SmallRound = exports.SearchIcon = exports.LargeSquareWithIcons = exports.LargeRoundWithoutIcons = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Dropdown = require("./Dropdown");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const options = [{
-  id: 0,
-  label: 'Shufersal'
-}, {
-  id: 1,
-  label: 'EPC'
-}, {
-  id: 2,
-  label: 'Food Lion'
-}, {
-  id: 3,
-  label: 'Hannaford'
-}, {
-  id: 4,
-  label: 'Giant Food'
-}, {
-  id: 5,
-  label: 'The Giant Company'
-}, {
-  id: 6,
-  label: 'Stop&Shop'
-}, {
-  id: 7,
-  label: 'Price Chopper'
-}, {
-  id: 8,
-  label: 'South Eastern Grocers'
-}];
-const filterMultiSelectData1 = [{
-  id: 2,
-  label: 'Food Lion'
-}, {
-  id: 3,
-  label: 'Hannaford'
-}];
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG/Dropdown',
-  component: _Dropdown.Dropdown,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      control: {
-        type: 'text'
-      },
-      description: 'width of the input field',
-      defaultValue: '300px'
-    },
-    size: {
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'large'],
-      description: 'size: small/large'
-    },
-    text: {
-      name: 'text',
-      control: {
-        type: 'text'
-      },
-      description: 'text inside of the input field',
-      defaultValue: 'Search...'
-    },
-    placeHolder: {
-      name: 'placeHolder',
-      control: {
-        type: 'text'
-      },
-      description: 'notify the user how to type a text',
-      defaultValue: 'Type...'
-    },
-    multiSelect: {
-      name: 'multiSelect',
-      // control: { type: "boolean",
-      //            },
-      control: false,
-      description: 'true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)'
-    },
-    limitTagsOnMultiSelect: {
-      name: 'limitTagsOnMultiSelect',
-      control: {
-        type: 'number'
-      },
-      description: 'limit noumber displayed tags on multi select when not focused'
-    },
-    options: {
-      description: 'array [] of objects: {id: string1 , label: string2 } to fill dropdown options '
-    },
-    shape: {
-      control: {
-        type: 'radio'
-      },
-      options: ['round', 'square'],
-      description: 'shape: round/square'
-    },
-    showPopupIcon: {
-      name: 'showPopupIcon',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show/hide popup (up/down arrow) icon'
-    },
-    showSearchIcon: {
-      name: 'showSearchIcon',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show/hide search icon '
-    },
-    onChange: {
-      action: 'onChange',
-      description: 'returns an option (object) selected by the user'
-    },
-    onInputChange: {
-      action: 'onInputChange',
-      description: 'returns a value (string) displayed in the textbox'
-    },
-    labelColor: {
-      name: 'labelColor',
-      description: 'Sets label color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
-      }
-    },
-    required: {
-      name: 'required',
-      control: {
-        type: 'boolean'
-      },
-      description: 'defines if this field is required'
-    },
-    disableClearable: {
-      name: 'disableClearable',
-      control: {
-        type: 'boolean'
-      },
-      description: 'disable Clearable functionality'
-    },
-    defaultValue: {
-      name: 'defaultValue',
-      control: {
-        type: 'object'
-      },
-      description: 'default value to set on input field  '
-    },
-    reset: {
-      name: 'reset',
-      control: {
-        type: 'boolean'
-      },
-      description: 'reset component'
-    },
-    allowedInput: {
-      name: 'allowedInput',
-      control: {
-        type: 'radio'
-      },
-      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
-      description: 'allowed input characters: numbers, alphabet ot both'
-    },
-    disabled: {
-      name: 'disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'disable component'
-    },
-    dropdownListfontSize: {
-      name: 'dropdownListfontSize',
-      control: {
-        type: 'text'
-      },
-      description: 'dropdown List font Size'
-    },
-    placeHolderFontSize: {
-      name: 'placeHolderFontSize',
-      control: {
-        type: 'text'
-      },
-      description: 'Place holder Font Size'
-    }
-
-    // filterOptionsMultiSelect: {
-    //   description:
-    //     "array [] of objects: {id: string1 , label: string2 } to fill dropdown filter - only for multiselect ",
-    // },
-  }
-};
-const Template = args => <_Dropdown.Dropdown {...args} />;
-const SmallSquare = exports.SmallSquare = Template.bind({});
-SmallSquare.args = {
-  width: '300px',
-  size: 'small',
-  text: 'Retailer',
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: 'Type...',
-  shape: 'square',
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options,
-  labelColor: '#1B30AA',
-  allowedInput: 'all',
-  disableClearable: false,
-  disabled: false,
-  dropdownListfontSize: '14px',
-  placeHolderFontSize: '14px'
-};
-const SmallRound = exports.SmallRound = Template.bind({});
-SmallRound.args = {
-  width: '300px',
-  size: 'small',
-  text: 'Retailer',
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: 'Type...',
-  shape: 'round',
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options,
-  labelColor: '#1B30AA',
-  defaultValue: {
-    id: 2,
-    label: 'Food Lion'
-  },
-  allowedInput: 'all',
-  disableClearable: true,
-  disabled: false,
-  dropdownListfontSize: '14px',
-  placeHolderFontSize: '14px'
-};
-const UpDownArrowIcon = exports.UpDownArrowIcon = Template.bind({});
-UpDownArrowIcon.args = {
-  width: '100%',
-  size: 'large',
-  text: 'Retailer',
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: 'Type...',
-  shape: 'round',
-  showPopupIcon: true,
-  showSearchIcon: false,
-  options,
-  labelColor: '#066768',
-  required: true,
-  defaultValue: {
-    id: 2,
-    label: 'Food Lion'
-  },
-  allowedInput: 'alpha',
-  reset: false,
-  disabled: false,
-  dropdownListfontSize: '14px',
-  placeHolderFontSize: '14px'
-};
-const SearchIcon = exports.SearchIcon = Template.bind({});
-SearchIcon.args = {
-  width: '300px',
-  size: 'small',
-  text: 'Retailer',
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: 'Type...',
-  shape: 'round',
-  showPopupIcon: false,
-  showSearchIcon: true,
-  options,
-  labelColor: '#1B30AA',
-  allowedInput: 'all',
-  disabled: false,
-  dropdownListfontSize: '14px',
-  placeHolderFontSize: '14px'
-};
-const LargeRoundWithoutIcons = exports.LargeRoundWithoutIcons = Template.bind({});
-LargeRoundWithoutIcons.args = {
-  width: '400px',
-  size: 'large',
-  text: 'Retailer',
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: 'Type part of name...',
-  shape: 'round',
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options,
-  labelColor: '#066768',
-  allowedInput: 'all',
-  dropdownListfontSize: '14px',
-  placeHolderFontSize: '14px'
-};
-const LargeSquareWithIcons = exports.LargeSquareWithIcons = Template.bind({});
-LargeSquareWithIcons.args = {
-  width: '400px',
-  size: 'large',
-  text: 'Retailer',
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: 'Type part of name...',
-  shape: 'square',
-  showPopupIcon: true,
-  showSearchIcon: true,
-  options,
-  labelColor: '#066768',
-  allowedInput: 'all',
-  dropdownListfontSize: '14px',
-  placeHolderFontSize: '14px'
-};

package/dist/components/Dropdown/Dropdown.style.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropdownContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div`
-  width: ${props => props.width};  
-  text-align: left;  
-  position: relative; 
-  align-items: center;
-  justify-content: center;
-  font-family: Poppins;
-  font-size: 14px;
-`;

package/dist/components/DropdownMulti/DropdownMulti.js

@@ -1,277 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DropdownMulti = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _styles = require("@mui/material/styles");
-var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
-var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
-var _ArrowDropDownIcon = require("../../icons/ArrowDropDownIcon");
-var _DropdownMulti = require("./DropdownMulti.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const icon = <_CheckBoxOutlineBlank.default fontSize="small" />;
-const checkedIcon = <_CheckBox.default fontSize="small" />;
-
-/**
- *  SAG DropdownMulti
- */
-const DropdownMulti = props => {
-  const {
-    name,
-    width = '100%',
-    size,
-    text,
-    shape,
-    placeHolder,
-    limitTagsOnMultiSelect,
-    showPopupIcon,
-    options,
-    onChange,
-    onInputChange,
-    labelColor = '#1B30AA',
-    required,
-    inputRef,
-    allowedInput = 'all',
-    reset = false,
-    disableClearable = false,
-    disabled = false,
-    dropdownListfontSize = '14px',
-    placeHolderFontSize = '14px',
-    dropdownMultiMaxWidth
-  } = props;
-  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
-  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
-  (0, _react.useEffect)(() => {
-    setSelectedOptionsState([]);
-  }, [reset]);
-  (0, _react.useEffect)(() => {
-    const delayDebounceFn = setTimeout(() => {
-      onInputChange(currentInputValue);
-    }, 1000);
-    return () => clearTimeout(delayDebounceFn);
-  }, [currentInputValue]);
-  const theme = (0, _styles.createTheme)({
-    components: {
-      MuiFormLabel: {
-        styleOverrides: {
-          asterisk: {
-            color: '#db3131'
-          }
-        }
-      }
-    }
-  });
-
-  // ---------------------------- Multi Text Style -----------------------------------------
-  const getTextFieldStyleMulti = () => {
-    if (shape === 'round') {
-      // round
-      return {
-        '& .MuiOutlinedInput-root': {
-          borderRadius: '12px',
-          legend: {
-            marginLeft: '10px'
-          }
-          // '& .MuiAutocomplete-endAdornment': {
-          //   marginRight: '10px',
-          // },
-        },
-        '& .MuiAutocomplete-inputRoot': {
-          paddingLeft: '10px !important',
-          borderRadius: '12px',
-          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
-          '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
-            // Default left padding is 6px
-            paddingLeft: '10px'
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#E7E7E7'
-          },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor
-          },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor
-          }
-        },
-        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
-          // Default transform is "translate(14px, 20px) scale(1)""
-          // This lines up the label with the initial cursor position in the input
-          // after changing its padding-left.
-          transform: 'translate(14px, 18px) scale(1);',
-          fontSize: '14px',
-          color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
-        },
-        '& .MuiInputLabel-outlined': {
-          paddingLeft: '10px',
-          color: disabled ? '#E7E7E7' : labelColor,
-          fontSize: '18px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: '6px',
-          background: 'white'
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  const onInputChangeHandler = (event, newInputValue) => {
-    setCurrentInputValue({
-      syntheticBaseEvent: event,
-      inputValue: newInputValue
-    });
-  };
-  const onChangeHandler = (event, newValue) => {
-    // const newSelectedOptionsSet = new Set(newValue?.map((item) => item) ?? []);
-    // const newSelectedOptions = Array.from(newSelectedOptionsSet).map((item) => {
-    //   return item;
-    // });
-
-    const newSelectedOptions = newValue?.filter((value, index, self) => index === self.findIndex(item => item.id === value.id && item.label === value.label));
-    setSelectedOptionsState(newSelectedOptions);
-    onChange({
-      syntheticBaseEvent: event,
-      newValue: newSelectedOptions
-    });
-  };
-  const isInputAllowed = inputChar => {
-    const NUMERIC_REGEX = /^[0-9-]+$/;
-    const ALPHA_REGEX = /^[a-zA-Z]+$/;
-    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
-    switch (allowedInput) {
-      case 'all':
-        return true;
-      case 'alpha':
-        if (ALPHA_REGEX.test(inputChar)) return true;
-        return false;
-      case 'numeric':
-        if (NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      case 'alphaNumeric':
-        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      default:
-        return true;
-    }
-  };
-
-  // --------------------------------------- DropdownMulti--------------------------------
-  const getAutocompleteMulti = () => selectedOptionsState && <_styles.ThemeProvider theme={theme}>
-    <_Autocomplete.default class={name} onChange={(event, newValue) => {
-      onChangeHandler(event, newValue);
-    }} onInputChange={(event, newInputValue) => {
-      onInputChangeHandler(event, newInputValue);
-    }} multiple style={{
-      maxWidth: dropdownMultiMaxWidth ? `${dropdownMultiMaxWidth}` : undefined
-    }} limitTags={limitTagsOnMultiSelect} id="checkboxes-tags" options={options} value={selectedOptionsState} disabled={disabled} disableCloseOnSelect disableClearable={disableClearable} getOptionLabel={option => option.label} popupIcon={showPopupIcon ? <_ArrowDropDownIcon.ArrowDropDownIcon width="0.5em" height="0.5em" /> : null} renderOption={(props, option, {
-      selected
-    }) => <li {...props}>
-          <_Checkbox.default icon={icon} checkedIcon={checkedIcon} checked={isOptionChecked(option)} />
-          {option.label}
-        </li>} renderInput={params =>
-    // showSearchIcon &&
-
-    <_TextField.default {...params} variant="outlined" label={text} size={size} sx={getTextFieldStyleMulti()} placeholder={placeHolder} InputProps={{
-      ...params.InputProps,
-      style: {
-        fontSize: placeHolderFontSize,
-        fontFamily: 'Poppins'
-      }
-
-      //   endAdornment: (
-      //     <>
-      //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
-      //         <span key={index} style={{ margin: '0 5px' }}>
-      //           {option.label}
-      //         </span>
-      //       ))}
-      //       {params.InputProps.endAdornment}
-
-      //     </>
-      //   ),
-    }} onKeyDown={event => {
-      if (!isInputAllowed(event.key)) {
-        event.preventDefault();
-      }
-    }} inputRef={inputRef || null} required={required} />} ListboxProps={{
-      style: {
-        fontSize: dropdownListfontSize,
-        // default: 14px
-        fontFamily: 'Poppins'
-      }
-    }} />
-  </_styles.ThemeProvider>;
-  const isOptionChecked = option => {
-    if (selectedOptionsState && Object.values(selectedOptionsState)?.map(itemFilter => itemFilter.label).includes(option.label)) {
-      return true;
-    }
-    return false;
-  };
-
-  // --------------------------------- MAIN -------------------------------------
-  return <_DropdownMulti.DropdownContainer className="DropdownContainer" width={width}>
-      {getAutocompleteMulti()}
-    </_DropdownMulti.DropdownContainer>;
-};
-exports.DropdownMulti = DropdownMulti;
-var _default = exports.default = DropdownMulti;
-DropdownMulti.propTypes = {
-  name: _propTypes.default.string,
-  width: _propTypes.default.string,
-  size: _propTypes.default.string,
-  text: _propTypes.default.string,
-  shape: _propTypes.default.string,
-  placeHolder: _propTypes.default.string,
-  limitTagsOnMultiSelect: _propTypes.default.string,
-  showPopupIcon: _propTypes.default.string,
-  options: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string,
-    label: _propTypes.default.number
-  })),
-  onChange: _propTypes.default.func,
-  onInputChange: _propTypes.default.func,
-  labelColor: _propTypes.default.string,
-  required: _propTypes.default.bool,
-  inputRef: _propTypes.default.string,
-  allowedInput: _propTypes.default.string,
-  reset: _propTypes.default.bool,
-  disableClearable: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  dropdownListfontSize: _propTypes.default.string,
-  placeHolderFontSize: _propTypes.default.string,
-  dropdownMultiMaxWidth: _propTypes.default.string
-};
-DropdownMulti.defaultProps = {
-  name: 'MultiSelectLarge',
-  width: '500px',
-  size: 'large',
-  text: 'Retailer',
-  limitTagsOnMultiSelect: 2,
-  placeHolder: 'Type...',
-  shape: 'round',
-  showPopupIcon: true,
-  options: [],
-  onChange: () => {},
-  onInputChange: () => {},
-  labelColor: '#1B30AA',
-  required: true,
-  inputRef: undefined,
-  allowedInput: 'all',
-  disableClearable: false,
-  disabled: false,
-  reset: false,
-  dropdownListfontSize: '14px',
-  placeHolderFontSize: '14px',
-  dropdownMultiMaxWidth: undefined
-};