sag_components 1.0.1021 → 1.0.1022

package/dist/stories/components/Table/Table.stories.js

@@ -1,104 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MainTable = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Table = require("./Table");
-const theData = [{
-  key: '1',
-  name: 'oren',
-  age: 35
-}, {
-  key: '2',
-  name: 'dror',
-  age: 16
-}, {
-  key: '3',
-  name: 'andrey',
-  age: 22
-}, {
-  key: '4',
-  name: 'hai',
-  age: 46
-}];
-var _default = exports.default = {
-  title: 'Sag Campaign Tool/Table',
-  component: _Table.Table,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'Table width'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'Table height'
-    },
-    onCheckAllInput: {
-      name: 'Check all input event',
-      action: 'onClick',
-      description: 'Click on check all'
-    },
-    onSortClick: {
-      name: 'Table head sorting event',
-      action: 'onClick',
-      description: 'Click on table head sorting'
-    },
-    onRowClick: {
-      name: 'Click on row event',
-      action: 'onClick',
-      description: 'Click on a certain row in table'
-    },
-    onRowInputClick: {
-      name: 'Checkbox row event',
-      action: 'onClick',
-      description: 'Click on a certain row checkbox '
-    },
-    actionsColumn: {
-      name: 'Show action column',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show/hide action column',
-      defaultValue: true
-    },
-    sizingTable: {
-      name: 'Sizing table columns',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Sizing table columns ability',
-      defaultValue: true
-    },
-    showPagination: {
-      name: 'Show Pagination',
-      control: {
-        type: 'boolean'
-      },
-      description: 'hide/show pagination',
-      defaultValue: true
-    },
-    rangePagination: {
-      name: 'Range Pagination',
-      control: {
-        type: 'number'
-      },
-      description: 'How many button representing pages will shown in the range'
-    }
-  }
-};
-const MainTable = exports.MainTable = {
-  args: {
-    data: theData,
-    rangePagination: 5
-  }
-};

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

@@ -1,86 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Thead = exports.Tbody = exports.TableWrapper = exports.TableTag = exports.PaginationButton = exports.Pagination = exports.Dragger = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const TableWrapper = exports.TableWrapper = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  background-color: white;
-`;
-const TableTag = exports.TableTag = _styledComponents.default.table`
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  margin-bottom: 15px;
-    th,
-    td {
-        position: relative;
-        font-weight: 400;
-        border: 1px solid #ddd;
-        padding: 8px;
-    }
-`;
-const Thead = exports.Thead = _styledComponents.default.thead`
-    color: white;
-    background-color: #000000;
-    tr {
-        > th {
-            position: relative;
-            &.actions-th,
-            &:last-of-type {
-                > div {
-                    display: none;
-                }
-            }
-            
-            &.actions-th {
-                width: 22px;
-            }
-        }
-    }
-`;
-const Tbody = exports.Tbody = _styledComponents.default.tbody`
-    tr {
-        &:nth-child(even) {
-            background-color: #f2f2f2;
-        }
-        &:hover {
-            background-color: #ddd;
-        }
-    }
-`;
-const Dragger = exports.Dragger = _styledComponents.default.div`
-    width: 5px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: col-resize;
-`;
-const Pagination = exports.Pagination = _styledComponents.default.ul`
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    gap: 5px;
-`;
-const PaginationButton = exports.PaginationButton = _styledComponents.default.button`
-    display: inline-block;
-    padding: 8px 12px;
-    background-color: #ffffff;
-    border: 1px solid #ccc;
-    text-decoration: none;
-    color: #333;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover, &:focus {
-      background-color: #e0e0e0;
-    }
-    &.active {
-        background-color: #aaa;
-    }
-`;

package/dist/stories/components/TableTooltip.js

@@ -1,71 +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 _reactDom = require("react-dom");
-var _TableTooltip = require("./TableTooltip.style");
-const TableTooltip = _ref => {
-  let {
-    text,
-    children
-  } = _ref;
-  const [isVisible, setIsVisible] = (0, _react.useState)(false);
-  const [position, setPosition] = (0, _react.useState)({
-    top: 0,
-    left: 0
-  });
-  const wrapperRef = (0, _react.useRef)(null);
-  const tooltipRef = (0, _react.useRef)(null);
-  const calculatePosition = () => {
-    const rect = wrapperRef.current.getBoundingClientRect();
-    if (tooltipRef.current) {
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      const top = rect.top - tooltipRect.height - 10;
-      let left = rect.left + rect.width / 2 - tooltipRect.width / 2 + 67;
-      if (left < 0) {
-        left = 10;
-      }
-      if (left + tooltipRect.width > window.innerWidth) {
-        left = window.innerWidth - tooltipRect.width - 10;
-      }
-      setPosition({
-        top,
-        left
-      });
-    }
-  };
-  const handleMouseEnter = () => {
-    setIsVisible(true);
-  };
-  const handleMouseLeave = () => {
-    setIsVisible(false);
-  };
-  (0, _react.useEffect)(() => {
-    if (isVisible) {
-      calculatePosition();
-      window.addEventListener("resize", calculatePosition);
-      window.addEventListener("scroll", calculatePosition);
-      setTimeout(calculatePosition, 0);
-    }
-    return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition);
-    };
-  }, [isVisible]);
-  return /*#__PURE__*/_react.default.createElement(_TableTooltip.TooltipWrapper, {
-    ref: wrapperRef,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, children, isVisible && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_TableTooltip.TooltipText, {
-    ref: tooltipRef,
-    style: {
-      top: "".concat(position.top, "px"),
-      left: "".concat(position.left, "px")
-    }
-  }, text), document.body));
-};
-var _default = exports.default = TableTooltip;

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

@@ -1,12 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipWrapper = exports.TooltipText = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
-const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n"])));
-const TooltipText = exports.TooltipText = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background-color: white;\n  font-family: \"Poppins\";\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  color: black;\n  padding: 5px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n  white-space: normal;\n  word-wrap: break-word;\n  max-width: 200px;\n  z-index: 9999;\n  transform: translateX(-50%);\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.3s ease;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n    border-color: white transparent transparent transparent;\n  }\n"])));

package/dist/stories/components/TextField/TextField.js

@@ -1,209 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextField = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
-var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
-var _styles = require("@mui/material/styles");
-var _TextField2 = require("./TextField.style");
-/**
- *  SAG TextField
- */
-const TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    width = '100%',
-    height = '49px',
-    label,
-    focusColor,
-    shape,
-    size,
-    placeHolder = 'Enter your email address',
-    passwordField = false,
-    defaultValue,
-    resetDefaultValue,
-    required,
-    inputRef,
-    allowedInput = 'all',
-    onChange,
-    multiline = false
-  } = _ref;
-  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
-  const [showPassword, setShowPassword] = _react.default.useState(false);
-  const handleClickShowPassword = () => setShowPassword(show => !show);
-  const onChangeHandler = event => {
-    onChange(event);
-    setCurrentInputValue({
-      event,
-      value: event.target.value
-    });
-  };
-  const theme = (0, _styles.createTheme)({
-    components: {
-      MuiFormLabel: {
-        styleOverrides: {
-          asterisk: {
-            color: '#db3131'
-          }
-        }
-      }
-    }
-  });
-  const handleMouseDownPassword = event => {
-    event.preventDefault();
-  };
-
-  // defines shape: squire or round
-  const getTextFieldStyle = () => {
-    if (shape === 'round') {
-      return {
-        '& .MuiOutlinedInput-root': {
-          width: {
-            width
-          },
-          height: {
-            height
-          },
-          paddingTop: multiline ? '12px' : '0',
-          marginTop: 0,
-          borderColor: 'green',
-          borderRadius: '12px',
-          legend: {
-            marginLeft: '6px'
-          },
-          alignItems: multiline ? 'flex-start' : 'center',
-          '&.Mui-focused fieldset': {
-            borderColor: focusColor
-          }
-        },
-        '& label.Mui-focused': {
-          color: focusColor
-        },
-        '& .MuiAutocomplete-inputRoot': {
-          paddingLeft: '10px !important',
-          borderRadius: '12px'
-        },
-        '& .MuiInputLabel-outlined': {
-          paddingLeft: '10px',
-          // color: focusColor,
-          paddingTop: '4px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: 0,
-          background: 'white',
-          paddingTop: 0
-        },
-        '& .MuiInputLabel-root': {
-          fontFamily: 'Poppins'
-        },
-        '& .MuiInputBase-inputSizeSmall': {
-          fontFamily: 'Poppins'
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  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;
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_TextField2.TextFieldContainer, {
-    id: "TextFieldContainer",
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    key: resetDefaultValue,
-    label: label,
-    multiline: multiline,
-    defaultValue: defaultValue,
-    placeholder: placeHolder,
-    id: "outlined-start-adornment",
-    sx: getTextFieldStyle(),
-    size: size,
-    required: required,
-    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
-    ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: event => {
-      if (!isInputAllowed(event.key)) {
-        event.preventDefault();
-      }
-    },
-    onChange: event => {
-      onChangeHandler(event);
-    },
-    InputProps: {
-      textalign: 'flex-start',
-      alignitems: 'flex-start',
-      aligncontent: 'flex-start',
-      disableunderline: true.toString(),
-      style: {
-        textalign: 'start',
-        '&::placeholder': {
-          color: '#B1B1B1'
-        }
-      }
-    }
-  }), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
-    sx: getTextFieldStyle(),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
-    htmlFor: "outlined-adornment-password"
-  }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
-    id: "outlined-adornment-password",
-    type: showPassword ? 'text' : 'password',
-    size: size,
-    endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-      position: "end"
-    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      "aria-label": "toggle password visibility",
-      onClick: handleClickShowPassword,
-      onMouseDown: handleMouseDownPassword,
-      edge: "end"
-    }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
-    defaultValue: defaultValue,
-    label: label,
-    multiline: multiline,
-    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
-    ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: event => {
-      if (!isInputAllowed(event.key)) {
-        event.preventDefault();
-      }
-    },
-    onChange: event => {
-      onChangeHandler(event);
-    }
-  })))));
-});
-var _default = exports.default = TextField;

package/dist/stories/components/TextField/TextField.stories.js

@@ -1,162 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RegularField = exports.Password = exports.DefaultValue = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TextField = require("./TextField");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG Core/TextField',
-  component: _TextField.TextField,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the input field'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the input field'
-    },
-    label: {
-      name: 'label',
-      control: {
-        type: 'text'
-      },
-      description: 'notify the user how to type a text',
-      defaultValue: 'Type...'
-    },
-    focusColor: {
-      name: 'focusColor',
-      control: {
-        type: 'color'
-      },
-      defaultValue: 'blue'
-    },
-    placeHolder: {
-      name: 'placeHolder',
-      control: {
-        type: 'text'
-      },
-      description: 'place holder of the input field'
-    },
-    shape: {
-      control: {
-        type: 'radio'
-      },
-      options: ['round', 'square'],
-      description: 'shape: round/square'
-    },
-    size: {
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'large'],
-      description: 'size: small/large'
-    },
-    passwordField: {
-      name: 'passwordField',
-      control: {
-        type: 'boolean'
-      },
-      description: 'defines if this field is for input password '
-    },
-    required: {
-      name: 'required',
-      control: {
-        type: 'boolean'
-      },
-      description: 'defines if this field is required'
-    },
-    defaultValue: {
-      name: 'defaultValue',
-      control: {
-        type: 'text'
-      },
-      description: 'sets default value',
-      defaultValue: 'Type...'
-    },
-    resetDefaultValue: {
-      name: 'resetDefaultValue',
-      control: {
-        type: 'boolean'
-      },
-      description: 'change this to reset default value'
-    },
-    allowedInput: {
-      name: 'allowedInput',
-      control: {
-        type: 'radio'
-      },
-      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
-      description: 'allowed input characters: numbers, alphabet ot both'
-    },
-    onChange: {
-      action: 'onChange',
-      description: 'returns an option (object) selected by the user'
-    },
-    onInputChange: {
-      action: 'onInputChange',
-      description: 'returns a value (string) displayed in the textbox'
-    },
-    multiline: {
-      name: 'multiline',
-      control: {
-        type: 'boolean'
-      },
-      description: 'enable multiline'
-    }
-  }
-};
-const RegularField = exports.RegularField = {
-  args: {
-    width: '100%',
-    height: '100%',
-    defaultValue: undefined,
-    label: 'Email',
-    placeHolder: 'Enter your email address',
-    shape: 'round',
-    size: 'small',
-    passwordField: false,
-    required: false,
-    allowedInput: 'all',
-    multiline: true
-  }
-};
-const DefaultValue = exports.DefaultValue = {
-  args: {
-    width: '100%',
-    height: '100%',
-    defaultValue: '',
-    label: 'Email',
-    placeHolder: 'Enter your email address',
-    shape: 'round',
-    size: 'small',
-    passwordField: false,
-    required: false,
-    allowedInput: 'all'
-  }
-};
-const Password = exports.Password = {
-  args: {
-    width: '100%',
-    height: '100%',
-    defaultValue: '9999',
-    label: 'Password',
-    placeHolder: undefined,
-    shape: 'round',
-    size: 'small',
-    passwordField: true,
-    required: false,
-    allowedInput: 'alphaNumeric'
-  }
-};

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

@@ -1,18 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextFieldContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div`
-font-family: "Poppins";
-  display: flex;
-  width: ${props => props.width};  
-  text-align: left;  
-  position: relative; 
-  align-items: flex-start;
-  justify-content: flex-start;
-  font-size: 14px;
-`;