sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/components/SegmentedButton.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SegmentedButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SegmentedButton = require("./SegmentedButton.style");
+/* eslint-disable react/require-default-props */
+
+/* SegmentedButton */
+const SegmentedButton = props => {
+  const {
+    name,
+    options,
+    width,
+    height,
+    controlradius,
+    segmentradius,
+    fontSize,
+    selectedsegmentcolor,
+    selectedtextcolor,
+    unselectedtextcolor,
+    defaultIndex,
+    onClick
+  } = props;
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(defaultIndex);
+  const controlRef = (0, _react.useRef)();
+  const componentReady = (0, _react.useRef)();
+  const optionsRef = options === null || options === void 0 ? void 0 : options.map((item, i) => ({
+    ...item,
+    id: i,
+    ref: (0, _react.useRef)()
+  }));
+
+  // Determine when the component is "ready"
+  (0, _react.useEffect)(() => {
+    componentReady.current = true;
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (defaultIndex >= 0 && defaultIndex < (options === null || options === void 0 ? void 0 : options.length)) {
+      setActiveIndex(defaultIndex);
+    }
+  }, [defaultIndex]);
+  (0, _react.useEffect)(() => {
+    const activeSegmentRef = optionsRef[activeIndex].ref;
+    const {
+      offsetWidth,
+      offsetLeft
+    } = activeSegmentRef.current;
+    const {
+      style
+    } = controlRef.current;
+    style.setProperty('--highlight-width', `${offsetWidth}px`);
+    style.setProperty('--highlight-x-pos', `${offsetLeft}px`);
+  }, [activeIndex, controlRef, optionsRef]);
+  const onInputChangeHandler = (value, index) => {
+    setActiveIndex(index);
+    onClick({
+      index,
+      value
+    });
+  };
+  let segmentwidth = 120;
+  if (options && options.length > 0 && width && width > 0) {
+    segmentwidth = width / options.length;
+  }
+  return /*#__PURE__*/_react.default.createElement(_SegmentedButton.ButtonsControlsContainer, {
+    fontSize: fontSize,
+    ref: controlRef
+  }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.Controls, {
+    id: "Controls",
+    selectedsegmentcolor: selectedsegmentcolor,
+    segmentradius: segmentradius,
+    controlradius: controlradius,
+    segmentwidth: segmentwidth,
+    className: `controls ${componentReady.current ? 'ready' : 'idle'}`
+  }, optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.map((item, i) => /*#__PURE__*/_react.default.createElement(_SegmentedButton.Segment, {
+    id: "Segment",
+    key: item.id,
+    selectedsegmentcolor: selectedsegmentcolor,
+    controlradius: controlradius,
+    segmentwidth: segmentwidth,
+    className: `${activeIndex === i ? 'active' : 'inactive'}`,
+    ref: item.ref
+  }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.ControlsInput, {
+    type: "radio",
+    value: item.value,
+    id: item.id,
+    name: name,
+    onChange: () => onInputChangeHandler(item.value, item.id),
+    checked: i === activeIndex
+  }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentLabel, {
+    id: "SegmentLabel",
+    selectedtextcolor: selectedtextcolor,
+    unselectedtextcolor: unselectedtextcolor,
+    segmentheight: height / 5,
+    className: `${activeIndex === i ? 'active' : 'inactive'} `,
+    htmlFor: item.value
+  }, item.value)))));
+};
+exports.SegmentedButton = SegmentedButton;
+SegmentedButton.defaultProps = {
+  name: '',
+  options: [{
+    value: '4 w'
+  }, {
+    value: '8 w'
+  }, {
+    value: '13 w'
+  }],
+  width: 120,
+  height: 40,
+  controlradius: 8,
+  segmentradius: 8,
+  fontSize: 14,
+  selectedsegmentcolor: '#3a9df9',
+  selectedtextcolor: '#212121',
+  unselectedtextcolor: 'black',
+  defaultIndex: 0,
+  onClick: () => {}
+};
+var _default = exports.default = SegmentedButton;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentedButtonGroup = exports.SegmentLabel = exports.Segment = exports.ControlsInput = exports.Controls = exports.ButtonsControlsContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const SegmentedButtonGroup = exports.SegmentedButtonGroup = _styledComponents.default.div`
+  display: flex;
+  gap: 28px;
+  @media (max-width: 1536px) {
+    gap: 20px;
+  }
+  @media (max-width: 1366px) {
+    gap: 17px;
+  }
+`;
+const ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledComponents.default.div`
+  display: flex; 
+  font: ${props => {
+  var _props$fontSize;
+  return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat('', 'px Poppins, sans-serif');
+}}; 
+  margin: 0;
+  --highlight-width: auto;
+  --highlight-x-pos: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  float: left;
+
+  &:not(:first-of-type) {
+    padding-left: 40px;
+    @media (max-width: 1536px) {
+      padding-left: 35px;
+    }
+    @media (max-width: 1366px) {
+      padding-left: 24px;
+    }
+  }
+`;
+const Controls = exports.Controls = _styledComponents.default.div`
+  display: inline-flex;
+  justify-content: space-between;  
+  background: #f2f2f2;
+  border-radius:  ${props => props.controlradius.toString().concat('', 'px')}; //12px
+  // max-width: 500px; //use this to limit max lenght of the control 
+  padding: 6px;
+  overflow: hidden;
+  position: relative;
+  &.controls::before {
+    content: "";
+    color: #212121;
+    background: #FFFFFF;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    border-radius:  ${props => props.segmentradius.toString().concat('', 'px')}; //12px
+    width: var(--highlight-width);
+    transform: translateX(var(--highlight-x-pos));
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    left: 0; 
+    z-index: 0;
+  }
+  &.controls.ready::before {
+    transition: transform 0.3s ease, width 0.3s ease;
+  }
+`;
+const ControlsInput = exports.ControlsInput = _styledComponents.default.input`
+  opacity: 0;
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  cursor: pointer;
+  height: 100%;
+`;
+const Segment = exports.Segment = _styledComponents.default.div`
+  /* width: 100%; uncomment for each segment to have matching width */  
+  width: 50%;
+  min-width: ${props => props.segmentwidth.toString().concat('', 'px')};  //120px;
+  position: relative;
+  text-align: center;
+  z-index: 1;  
+`;
+const SegmentLabel = exports.SegmentLabel = _styledComponents.default.label`
+  cursor: pointer;
+  display: block;
+  padding: 0 6px;
+  transition: color 0.5s ease;
+  &.active {
+    color: ${props => props.selectedtextcolor};
+  }
+  &.inactive {
+    color: ${props => props.unselectedtextcolor};
+  }
+`;

package/dist/stories/components/Select.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Select = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Select = require("./Select.style");
+/* eslint-disable react/prop-types */
+
+const Select = _ref => {
+  let {
+    isMulti,
+    label,
+    options,
+    value,
+    fontSize,
+    placeHolder,
+    onChange,
+    required,
+    borderRadius,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    borderColor,
+    borderColorFoucs,
+    labelFontColor,
+    radius
+  } = _ref;
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [showOptions, setShowOptions] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
+  const inputRef = (0, _react.useRef)(null);
+  const filteredoptions = options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  const handleFocus = () => {
+    setIsFocused(true);
+    setShowOptions(true);
+  };
+  const handleBlur = () => {
+    if (isMulti) return;
+    setIsFocused(false);
+    setTimeout(() => setShowOptions(false), 200); // Delay hiding options to allow clicking on them
+  };
+  const handleOptionClick = option => {
+    onChange({
+      target: {
+        value: option.value
+      }
+    });
+    setIsFocused(true);
+    setShowOptions(false);
+    setInputValue(option.label);
+  };
+  const handleInputChange = e => {
+    onChange({
+      target: {
+        value: e.target.value
+      }
+    });
+    handleOptionClick(e.target.value);
+    setInputValue(e.target.value);
+  };
+  const toggleOption = option => {
+    const selectedIndex = selectedOptions.findIndex(selectedOption => selectedOption.value === option.value);
+    if (selectedIndex === -1) {
+      setSelectedOptions([...selectedOptions, option]);
+    } else {
+      const newSelectedOptions = [...selectedOptions];
+      newSelectedOptions.splice(selectedIndex, 1);
+      setSelectedOptions(newSelectedOptions);
+    }
+  };
+  const isSelected = option => selectedOptions.some(selectedOption => selectedOption.value === option.value);
+  return /*#__PURE__*/_react.default.createElement(_Select.SelectWrapper, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Select.Label, {
+    isFocused: isFocused,
+    labelFontColor: labelFontColor,
+    hasValue: (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 || inputValue,
+    disabled: disabled,
+    error: error
+  }, label, required && /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: 'red'
+    }
+  }, "*")), /*#__PURE__*/_react.default.createElement(_Select.StyledInput, {
+    ref: inputRef,
+    radius: radius,
+    borderColor: borderColor,
+    borderColorFoucs: borderColorFoucs,
+    value: inputValue,
+    onChange: handleInputChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    fontSize: fontSize,
+    type: "search",
+    disabled: disabled,
+    placeholder: isFocused ? placeHolder || 'Type to search...' : '',
+    style: {
+      width,
+      height
+    },
+    borderRadius: borderRadius,
+    error: error
+  }), error && /*#__PURE__*/_react.default.createElement(_Select.ErrorMessage, null, errorMessage), /*#__PURE__*/_react.default.createElement(_Select.OptionsContainer, {
+    onMouseLeave: () => {
+      setIsFocused(false);
+      setShowOptions(false);
+    },
+    borderColorFoucs: borderColorFoucs,
+    showoptions: showOptions,
+    disabled: disabled,
+    filteredoptions: filteredoptions
+  }, filteredoptions.map(option => /*#__PURE__*/_react.default.createElement(_Select.OptionItem, {
+    key: option.value,
+    onClick: () => {
+      toggleOption(option);
+      setIsFocused(true);
+    },
+    selected: isSelected(option)
+  }, ' ', /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    checked: isSelected(option),
+    onChange: () => toggleOption(option),
+    style: {
+      marginRight: '8px'
+    },
+    disabled: disabled
+  }), option.label))));
+};
+exports.Select = Select;
+var _default = exports.default = Select;

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledInput = exports.SelectWrapper = exports.OptionsContainer = exports.OptionItem = exports.Label = exports.ErrorMessage = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+/* eslint-disable no-nested-ternary */
+
+const SelectWrapper = exports.SelectWrapper = _styledComponents.default.div`
+  position: relative;
+  width: ${props => props.width || '200px'};
+  margin: ${props => props.margin || '0 0 0 0'};
+`;
+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;
+  
+  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelFontColor};
+  background-color: white;
+  position: absolute;
+  top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
+  left: 10px;
+  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;
+  &:focus {
+    border-radius: 12px 12px 0 0 ;
+  }
+`;
+const StyledInput = exports.StyledInput = _styledComponents.default.input`
+  width: 200px;
+  padding: 10px 10px 10px 15px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: ${props => props.fontSize};
+  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor};
+  border-radius: ${props => props.radius};
+  font-family: Poppins;
+  outline: none;
+  box-sizing: border-box;
+  color: ${props => props.disabled ? '#888' : '#333'};
+   
+  &:hover {
+    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor || '#bdbdbd'};
+    border-color: ${props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2'};
+  }
+
+  &:focus {
+    border-radius: 12px 12px 0 0 ;
+    border-bottom: none;
+    border-color: ${props => props.disabled ? '#bdbdbd' : props.borderColorFoucs};
+  }
+
+`;
+const OptionsContainer = exports.OptionsContainer = _styledComponents.default.ul`
+  list-style: none;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: 2;
+  width: 200px;
+  font-family: Poppins;
+  border-top: none;
+  border-radius: 0 0 12px 12px;
+  border: 1px solid ${props => props.borderColorFoucs};
+  background-color: #fff;
+  border-color: ${props => props.borderColorFoucs};
+  display: ${props => {
+  var _props$filteredoption;
+  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
+}};
+`;
+const OptionItem = exports.OptionItem = _styledComponents.default.li`  
+  padding: 10px 10px 10px 15px;
+  cursor: pointer;
+  color: rgba(33, 33, 33, 0.80);
+  font-family: Poppins;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+`;
+const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div`
+  font-size: 12px;
+  color: red;
+  margin-top: 5px;
+`;