sag_components 1.0.1021 → 1.0.1022

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

@@ -1,434 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-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"));
-// 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 Core/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'
-    }
-  }
-};
-const Small = exports.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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  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 = {
-  args: {
-    placeHolder: '',
-    label: 'Password',
-    labelEmptyValue: 'Enter password',
-    size: 'medium',
-    labelColor: '#066768',
-    required: false,
-    width: '300px',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    leftIcon: '',
-    rightIcon: '',
-    password: true
-  }
-};

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

@@ -1,130 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledInput = exports.MainContainer = exports.Label = exports.InputSubContainer = exports.InputContainer = exports.IconWrapper = exports.ErrorMessage = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const MainContainer = exports.MainContainer = _styledComponents.default.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  justify-content: center;
-  align-items: flex-start;
-  width: ${props => props.width || '300px'};  
-  font-family: "Poppins", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
-  padding: 0;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
-`;
-const Label = exports.Label = _styledComponents.default.label`
-
-  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
-  font-weight: 400;
-  padding-inline-end: 5px;
-  padding-inline-start: 5px;
-  margin-right: 10px; 
-  z-index: 2;
-  color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
-  background-color: white;
-  position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
-  left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
-  font-family: Poppins;  
-  transform: translateY(-50%);
-  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  max-height: 16px;
-  gap: 4px;
-  &:hover {
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  }
-`;
-const InputContainer = exports.InputContainer = _styledComponents.default.div`
-
-    display: flex;       
-    flex-direction: row;
-    flex-wrap: nowrap; 
-    justify-content: flex-start;
-    align-content: center;     
-    white-space: pre-wrap;
-    align-items: center;
-    overflow: hidden;
-    padding: 0 16px;
-    gap: 14px;
-    width: 100%;
-    height: 100%;    
-    box-sizing: border-box;
-    background-color: #fff;
-    border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
-    font-family: "Poppins", sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
-    outline: none;
-    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
-   
-  &:hover {
-    border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
-  }
-
-  &:focus {  
-    border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'}; 
-  }
-  
-`;
-const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div`
-
-    display: flex;       
-    flex-direction: column;
-    flex-wrap: nowrap;     
-    align-content: center; 
-    align-items: flex-start;
-    justify-content: center;
-    white-space: pre-wrap;
-    overflow: hidden;
-    padding: 5px 0;
-    width: 100%;
-    height: 100%;
-    min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
-    box-sizing: border-box;
-    background-color: #fff;    
-    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
-    outline: none;
-    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};     
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-`;
-const StyledInput = exports.StyledInput = _styledComponents.default.input`
-  width: calc(100% - 10px);
-  height: 20px;
-  font-family: Poppins;
-  font-weight: 400;
-  font-size: 14px;
-  outline: none;  
-  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
-  background-color: #fff;  
-  border: none;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-`;
-const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div`
-  font-size: 12px;
-  color: red;
-  margin-top: 5px;
-  max-width: ${props => props.width || '300px'};
-`;
-const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-content: center;  
-  padding: 2px; 
-  &:hover{ 
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  }
-`;

package/dist/stories/components/InputOld/InputOld.js

@@ -1,90 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _fa = require("react-icons/fa");
-var _InputOld = require("./InputOld.style");
-// CustomInput.js
-
-const InputOld = _ref => {
-  let {
-    label,
-    value,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    password,
-    defaultValue,
-    error,
-    errorMessage,
-    type,
-    borderColor,
-    // Added borderColor prop
-    textColor // Added textColor prop
-  } = _ref;
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [showPassword, setShowPassword] = (0, _react.useState)(false);
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-  const toggleShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-  return /*#__PURE__*/_react.default.createElement(_InputOld.Container, {
-    onClick: handleFocus,
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_InputOld.StyledLabel, {
-    onClick: handleFocus,
-    isFocused: isFocused,
-    hasValue: value || defaultValue,
-    disabled: disabled,
-    textColor: textColor
-  }, label, required && /*#__PURE__*/_react.default.createElement(_InputOld.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_InputOld.StyledInput, {
-    type: password && !showPassword ? 'password' : type,
-    value: value,
-    onChange: onChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    borderRadius: borderRadius,
-    width: width,
-    height: height,
-    placeholder: isFocused ? placeholder : '',
-    disabled: disabled,
-    defaultValue: defaultValue,
-    error: error,
-    borderColor: borderColor,
-    textColor: textColor
-  }), error && /*#__PURE__*/_react.default.createElement(_InputOld.ErrorLabel, null, errorMessage), password && /*#__PURE__*/_react.default.createElement(_InputOld.EyeIcon, {
-    onClick: toggleShowPassword,
-    textColor: textColor
-  }, showPassword ? /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, null) : /*#__PURE__*/_react.default.createElement(_fa.FaEye, null)));
-};
-var _default = exports.default = InputOld;
-// Adding defaultProps
-InputOld.defaultProps = {
-  required: true,
-  width: '200%',
-  height: '50px',
-  disabled: false,
-  password: false,
-  defaultValue: '',
-  placeholder: 'Enter here..',
-  error: false,
-  errorMessage: 'Input is invalid',
-  type: 'text',
-  borderColor: '#000000',
-  // Default borderColor prop value
-  textColor: '#000000' // Default textColor prop value
-};