sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/Input/Input.js

@@ -1,173 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _fa = require("react-icons/fa");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _IconsHandler = require("../../utils/IconsHandler");
-var _Input = require("./Input.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; }
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable react/require-default-props */
-/* eslint-disable no-nested-ternary */
-// CustomInput.js
-
-const Input = ({
-  label,
-  labelEmptyValue,
-  size,
-  selectedValue,
-  placeHolder,
-  onChange,
-  onBlur,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  leftIcon,
-  rightIcon,
-  password,
-  leftIconOnClick,
-  rightIconOnClick
-}) => {
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [inputValue, setInputValue] = (0, _react.useState)('');
-  const [showPassword, setShowPassword] = (0, _react.useState)(false);
-  const inputRef = (0, _react.useRef)(null);
-  const containerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    setInputValue(selectedValue);
-  }, [selectedValue]);
-  const handleLabelClick = () => {
-    if (disabled) return;
-    setIsFocused(true);
-    if (inputRef?.current) {
-      inputRef?.current?.focus();
-    }
-  };
-  const handleInputChange = e => {
-    setIsFocused(true);
-    setInputValue(e.target.value);
-    if (inputRef?.current) {
-      inputRef?.current?.focus();
-    }
-    onChange({
-      newValue: e.target.value || ''
-    });
-  };
-  const handleFocus = () => {
-    setIsFocused(true);
-    if (inputRef?.current) {
-      inputRef?.current?.focus();
-    }
-  };
-  const handleBlur = () => {
-    onBlur();
-    setIsFocused(false);
-  };
-  const leftIconOnClickHandler = () => {
-    if (disabled) return;
-    leftIconOnClick({
-      leftIconOnClick: leftIcon
-    });
-  };
-  const rightIconOnClickHandler = () => {
-    if (disabled) return;
-    rightIconOnClick({
-      rightIconOnClick: rightIcon
-    });
-  };
-  const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return (0, _IconsHandler.getIcon)(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', leftIconOnClickHandler);
-  };
-  const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return (0, _IconsHandler.getIcon)(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', rightIconOnClickHandler);
-  };
-  const toggleShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-  const getPasswordIcon = () => {
-    if (!password) return '';
-    if (showPassword) {
-      return <_Input.IconWrapper className="passwordEyeSlash" disabled={disabled} onClick={toggleShowPassword}>
-          <_fa.FaEyeSlash onClick={toggleShowPassword} color={error ? 'red' : labelColor} />
-        </_Input.IconWrapper>;
-    }
-    return (0, _IconsHandler.getIcon)('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
-  };
-  return <_Input.MainContainer className="MainContainer" width={width} size={size} disabled={disabled}>
-      <_Input.InputContainer className="InputContainer" labelColor={labelColor} disabled={disabled} error={error} isFocused={isFocused} size={size}>
-
-        {getLeftIcon()}
-
-        <_Input.InputSubContainer className="InputSubContainer" ref={containerRef} labelColor={labelColor} disabled={disabled} error={error} onClick={handleLabelClick} size={size}>
-
-          <_Input.Label className="Label" isFocused={isFocused} labelColor={labelColor} hasValue={inputValue} leftIcon={leftIcon} disabled={disabled} error={error} errorMessage={errorMessage} onClick={handleLabelClick} size={size}>
-            {inputValue ? label : labelEmptyValue || label}
-            {required && <span style={{
-            color: disabled ? '#D0D0D0' : 'red',
-            height: '16px'
-          }}>*</span>}
-          </_Input.Label>
-
-          <_Input.StyledInput className="StyledInput" ref={inputRef} type={password && !showPassword ? 'password' : 'text'} value={inputValue} onChange={handleInputChange} onClick={handleLabelClick} onFocus={handleFocus} onBlur={handleBlur} disabled={disabled} placeholder={isFocused ? placeHolder : ''} error={error} isFocused={isFocused} />
-
-        </_Input.InputSubContainer>
-
-        {password ? getPasswordIcon() : getRightIcon()}
-
-      </_Input.InputContainer>
-
-      {error && errorMessage?.length > 0 && <_Input.ErrorMessage className="ErrorMessage" width={width}>{errorMessage}</_Input.ErrorMessage>}
-
-    </_Input.MainContainer>;
-};
-Input.propTypes = {
-  placeHolder: _propTypes.default.string,
-  label: _propTypes.default.string,
-  labelEmptyValue: _propTypes.default.string,
-  size: _propTypes.default.string,
-  labelColor: _propTypes.default.string,
-  required: _propTypes.default.bool,
-  width: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  error: _propTypes.default.bool,
-  errorMessage: _propTypes.default.string,
-  selectedValue: _propTypes.default.string,
-  onChange: _propTypes.default.func.isRequired,
-  leftIconOnClick: _propTypes.default.func,
-  rightIconOnClick: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  leftIcon: _propTypes.default.string,
-  rightIcon: _propTypes.default.string,
-  password: _propTypes.default.bool
-};
-Input.defaultProps = {
-  placeHolder: 'Type...',
-  label: '',
-  labelEmptyValue: '',
-  size: 'medium',
-  labelColor: '#066768',
-  required: true,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  selectedValue: '',
-  leftIcon: 'none',
-  rightIcon: 'none',
-  leftIconOnClick: () => {},
-  rightIconOnClick: () => {},
-  onBlur: () => {},
-  password: false
-};
-var _default = exports.default = Input;

package/dist/components/Input/Input.stories.js

@@ -1,422 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SmallWithInitValue = exports.SmallTwoIcons = exports.SmallRightIcon = exports.SmallLeftIcon = exports.Small = exports.Required = exports.Password = exports.MediumWithInitValue = exports.MediumRightIcon = exports.MediumLeftIcon = exports.MediumLeftAndRightIcon = exports.Medium = exports.ErrorMessage = exports.Disabled = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Input = _interopRequireDefault(require("./Input"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable import/no-extraneous-dependencies */
-// Input.stories.js
-
-// Update the path based on your actual file structure
-
-const iconsList = ['none', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Maintenance', 'Options', 'Search'];
-var _default = exports.default = {
-  title: 'SAG/Input',
-  component: _Input.default,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      name: 'label',
-      type: {
-        name: 'string'
-      },
-      description: 'Label for the select',
-      defaultValue: {
-        summary: 'Dropdown Label'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    size: {
-      name: 'size',
-      options: ['small', 'medium'],
-      control: {
-        type: 'select'
-      },
-      description: 'size of the input field, small or medium are supported'
-    },
-    selectedValue: {
-      name: 'selectedValue',
-      type: {
-        name: 'string'
-      },
-      description: 'init or reset input value with this selected value',
-      defaultValue: {
-        summary: 'Dropdown Label'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    onChange: {
-      action: 'onChange',
-      description: 'Callback function for input change'
-    },
-    required: {
-      name: 'required',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if the select is required',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    labelColor: {
-      name: 'labelColor',
-      description: 'Indicates for label font color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
-      }
-    },
-    disabled: {
-      name: 'disabled',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if the select is disabled',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    width: {
-      name: 'width',
-      type: {
-        name: 'string'
-      },
-      description: 'Width of the select',
-      defaultValue: {
-        summary: '200px'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    error: {
-      name: 'error',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if there is an error',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    errorMessage: {
-      name: 'errorMessage',
-      type: {
-        name: 'string'
-      },
-      description: 'Error message to display',
-      defaultValue: {
-        summary: ''
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    placeHolder: {
-      name: 'placeHolder',
-      type: {
-        name: 'string'
-      },
-      description: 'Error message to display',
-      defaultValue: {
-        summary: ''
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    password: {
-      name: 'password',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if the input is a password field',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    leftIcon: {
-      name: 'leftIcon',
-      options: iconsList,
-      control: {
-        type: 'select'
-      },
-      description: 'Choose an icon to apear on the button left side'
-    },
-    rightIcon: {
-      name: 'rightIcon',
-      options: iconsList,
-      control: {
-        type: 'select'
-      },
-      description: 'Choose an icon to apear on the button right side'
-    },
-    leftIconOnClick: {
-      action: 'leftIconOnClick',
-      description: 'Callback function for left Icon OnClick'
-    },
-    rightIconOnClick: {
-      action: 'rightIconOnClick',
-      description: 'Callback function for right Icon OnClick'
-    },
-    onBlur: {
-      action: 'onBlur',
-      description: 'Callback function for onBlur'
-    }
-  }
-}; // Create a group of stories for Input component
-const Template = args => <_Input.default {...args} />;
-const Small = exports.Small = Template.bind({});
-Small.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'small',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: ''
-};
-const SmallLeftIcon = exports.SmallLeftIcon = Template.bind({});
-SmallLeftIcon.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'small',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: 'Filter',
-  rightIcon: ''
-};
-const SmallRightIcon = exports.SmallRightIcon = Template.bind({});
-SmallRightIcon.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'small',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: 'Exit'
-};
-const SmallTwoIcons = exports.SmallTwoIcons = Template.bind({});
-SmallTwoIcons.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'small',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: 'Filter',
-  rightIcon: 'Exit'
-  // leftIconOnClick: () => console.log('Left Icon Clicked'),
-};
-
-// Story for the SmallWithInitValue state
-const SmallWithInitValue = exports.SmallWithInitValue = Template.bind({});
-SmallWithInitValue.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  selectedValue: 'Small selling event',
-  size: 'small',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: ''
-};
-
-// Story for the Medium state
-const Medium = exports.Medium = Template.bind({});
-Medium.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: ''
-};
-
-// Story for the MediumWithInitValue state
-const MediumWithInitValue = exports.MediumWithInitValue = Template.bind({});
-MediumWithInitValue.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  selectedValue: 'Large selling event',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: ''
-};
-
-// Story for the Required state
-const Required = exports.Required = Template.bind({});
-Required.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'medium',
-  labelColor: '#066768',
-  required: true,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: ''
-};
-
-// Story for the Disabled state
-const Disabled = exports.Disabled = Template.bind({});
-Disabled.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: true,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: ''
-};
-
-// Story for the Left icon state
-const MediumLeftIcon = exports.MediumLeftIcon = Template.bind({});
-MediumLeftIcon.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: 'Search',
-  rightIcon: ''
-};
-
-// Story for the Right icon state
-const MediumRightIcon = exports.MediumRightIcon = Template.bind({});
-MediumRightIcon.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: 'none',
-  rightIcon: 'Exit'
-};
-
-// Story for the Right icon state
-const MediumLeftAndRightIcon = exports.MediumLeftAndRightIcon = Template.bind({});
-MediumLeftAndRightIcon.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: 'Search',
-  rightIcon: 'Exit'
-};
-
-// Story for the Error state
-const ErrorMessage = exports.ErrorMessage = Template.bind({});
-ErrorMessage.args = {
-  placeHolder: 'Type...',
-  label: 'Event Name',
-  labelEmptyValue: 'All Event Names',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: true,
-  errorMessage: 'Error example: Story for the state with error message ...',
-  leftIcon: 'none',
-  rightIcon: 'none'
-};
-
-// Story for the Password state
-const Password = exports.Password = Template.bind({});
-Password.args = {
-  placeHolder: '',
-  label: 'Password',
-  labelEmptyValue: 'Enter password',
-  size: 'medium',
-  labelColor: '#066768',
-  required: false,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  leftIcon: '',
-  rightIcon: '',
-  password: true
-};