sag_components 2.0.0-beta → 2.0.0-beta2

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

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MainTable = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Table = require("../CampaignTool/Table");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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: '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 Template = args => <_Table.Table {...args} />;
-const MainTable = exports.MainTable = Template.bind({});
-MainTable.args = {
-  data: theData,
-  rangePagination: 5
-};

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

@@ -1,86 +0,0 @@
-"use strict";
-
-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"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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/components/CheckBox/CheckBox.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CheckBox = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CheckBoxCheckedIcon = require("../../icons/CheckBoxCheckedIcon.jsx");
-var _CheckBoxNotCheckedIcon = require("../../icons/CheckBoxNotCheckedIcon.jsx");
-var _CheckBoxStyle = require("./CheckBox.style.js");
-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; }
-/*CheckBox*/
-const CheckBox = ({
-  label,
-  checked = false,
-  disabled = false,
-  width = "100px",
-  height = "14px",
-  iconSize = "14px",
-  fontSize = "14px",
-  colorChecked = "#1B30AA",
-  colorUnchecked = "#212121",
-  colorDisabled = "#D0D0D0",
-  onClick,
-  ...props
-}) => {
-  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
-  (0, _react.useEffect)(() => {
-    setCheckedState(checked);
-  }, [checked]);
-  return <_CheckBoxStyle.ControlsContainer id="ControlsContainer" fontSize={fontSize} width={width} height={height}>
-      <_CheckBoxStyle.Controls id="Controls">
-        {checkedState ? <_CheckBoxStyle.CheckBoxIconContainer id="CheckBoxIconContainer" disabled={disabled} onClick={() => {
-        if (!disabled) {
-          setCheckedState(false);
-          onClick({
-            label: label,
-            checked: false
-          });
-        }
-      }}>
-            {" "}
-            <_CheckBoxCheckedIcon.CheckBoxCheckedIcon width={iconSize} height={iconSize} color={disabled ? colorDisabled : colorChecked}></_CheckBoxCheckedIcon.CheckBoxCheckedIcon>
-          </_CheckBoxStyle.CheckBoxIconContainer> : <_CheckBoxStyle.CheckBoxIconContainer id="CheckBoxIconContainer" disabled={disabled} onClick={() => {
-        if (!disabled) {
-          onClick({
-            label: label,
-            checked: true
-          });
-          setCheckedState(true);
-        }
-      }}>
-            <_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon width={iconSize} height={iconSize} color={disabled ? colorDisabled : colorUnchecked}></_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon>
-          </_CheckBoxStyle.CheckBoxIconContainer>}
-        <_CheckBoxStyle.Label id="Label">{label}</_CheckBoxStyle.Label>
-      </_CheckBoxStyle.Controls>
-    </_CheckBoxStyle.ControlsContainer>;
-};
-exports.CheckBox = CheckBox;
-var _default = exports.default = CheckBox;

package/dist/components/CheckBox/CheckBox.stories.js

@@ -1,107 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SelectAll = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CheckBox = require("./CheckBox");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG/CheckBox',
-  component: _CheckBox.CheckBox,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      name: 'label',
-      control: {
-        type: 'text'
-      },
-      description: 'label of the object'
-    },
-    checked: {
-      name: 'checked',
-      control: {
-        type: 'boolean'
-      },
-      description: 'checked / not checked boolean'
-    },
-    disabled: {
-      name: 'disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'disabled / enabled boolean'
-    },
-    colorChecked: {
-      name: 'colorChecked',
-      description: 'Sets checked Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    colorUnchecked: {
-      name: 'colorUnchecked',
-      description: 'Sets unchecked Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    colorDisabled: {
-      name: 'colorDisabled',
-      description: 'Sets Disabled Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the component (in px)'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the component'
-    },
-    fontSize: {
-      name: 'fontSize',
-      control: {
-        type: 'text'
-      },
-      description: 'font size (in px)'
-    },
-    iconSize: {
-      name: 'iconSize',
-      control: {
-        type: 'text'
-      },
-      description: 'icon  size (in px)'
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'onClick event - returns an objects of   eventAttributesData,  kpiData '
-    }
-  }
-};
-const Template = args => <_CheckBox.CheckBox {...args} />;
-const SelectAll = exports.SelectAll = Template.bind({});
-SelectAll.args = {
-  label: 'Select All',
-  checked: true,
-  disabled: false,
-  width: '100%',
-  height: '20px',
-  fontSize: '14px',
-  iconSize: '14px',
-  colorChecked: '#1B30AA',
-  colorUnchecked: '#212121',
-  colorDisabled: '#D0D0D0'
-};

package/dist/components/CheckBox/CheckBox.style.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Label = exports.ControlsContainer = exports.Controls = exports.CheckBoxIconContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  display: flex;
-  height: ${props => props.height};
-  width: ${props => props.width};
-  font-size: ${props => props.fontSize};
-  font-family: Poppins;
-  margin: 0;
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  display: flex;  
-  align-items: center;
-`;
-const Label = exports.Label = _styledComponents.default.div`
-  display: flex;
-  padding: 0 10px 0 10px;
-  white-space: nowrap;
-  @media (max-width: 1536px) {
-    font-size: 11px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;
-const CheckBoxIconContainer = exports.CheckBoxIconContainer = _styledComponents.default.div`
-  display: flex;
-  margin: 0;
-  cursor: ${props => props.disabled ? 'default' : 'pointer'};
-`;

package/dist/components/CheckBoxButton/CheckBoxButton.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CheckBoxButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CheckBoxButtonCheckedIcon = require("../../icons/CheckBoxButtonCheckedIcon");
-var _CheckBoxButton = require("./CheckBoxButton.style");
-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; }
-/* CheckBoxButton */
-const CheckBoxButton = ({
-  label,
-  displayLabel,
-  checked = false,
-  disabled = false,
-  showIconInCheckBoxButtons = true,
-  width = '100px',
-  height = '14px',
-  iconSize = '12px',
-  fontSize = '14px',
-  iconColor = '#1B30AA',
-  borderColor = '#1B30AA',
-  borderRadius = '12px',
-  textColorChecked = '#212121',
-  textColorUnchecked = '#212121',
-  backgroundColorChecked = '#E9F1FF',
-  backgroundColorUnchecked = '#F2F2F2',
-  onClick,
-  ...props
-}) => {
-  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
-  (0, _react.useEffect)(() => {
-    setCheckedState(checked);
-  }, [checked]);
-  return <_CheckBoxButton.ControlsContainer id="ControlsContainer" fontSize={fontSize} width={width} height={height}>
-      <_CheckBoxButton.Controls id="Controls" disabled={disabled} borderRadius={borderRadius} backgroundColor={checkedState ? backgroundColorChecked : backgroundColorUnchecked} borderColor={disabled ? backgroundColorChecked : checkedState ? borderColor : backgroundColorUnchecked} onClick={() => {
-      if (!disabled) {
-        setCheckedState(!checkedState);
-        onClick({
-          label,
-          checked: !checkedState
-        });
-      }
-    }}>
-        {checkedState ? showIconInCheckBoxButtons && <_CheckBoxButton.CheckBoxButtonIconContainer id="CheckBoxButtonIconContainer">
-            <_CheckBoxButtonCheckedIcon.CheckBoxButtonCheckedIcon width={iconSize} height={iconSize} color={disabled ? '#B1B1B1' : iconColor} />
-          </_CheckBoxButton.CheckBoxButtonIconContainer> : ''}
-        <_CheckBoxButton.Label id="Label" textColor={disabled ? '#B1B1B1' : checkedState ? textColorChecked : textColorUnchecked}>
-          {displayLabel ? displayLabel : label}
-        </_CheckBoxButton.Label>
-      </_CheckBoxButton.Controls>
-    </_CheckBoxButton.ControlsContainer>;
-};
-exports.CheckBoxButton = CheckBoxButton;
-var _default = exports.default = CheckBoxButton;

package/dist/components/CheckBoxButton/CheckBoxButton.stories.js

@@ -1,150 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Retailer = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CheckBoxButton = require("./CheckBoxButton");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG/CheckBoxButton',
-  component: _CheckBoxButton.CheckBoxButton,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      name: 'label',
-      control: {
-        type: 'text'
-      },
-      description: 'label of the object'
-    },
-    checked: {
-      name: 'checked',
-      control: {
-        type: 'boolean'
-      },
-      description: 'checked / not checked boolean'
-    },
-    disabled: {
-      name: 'disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'disabled / enabled boolean'
-    },
-    showIconInCheckBoxButtons: {
-      name: 'showIconInCheckBoxButtons',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show Icon In  boolean'
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the component (in px)'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the component'
-    },
-    fontSize: {
-      name: 'fontSize',
-      control: {
-        type: 'text'
-      },
-      description: 'font size (in px)'
-    },
-    iconColor: {
-      name: 'iconColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets icon Color'
-      }
-    },
-    borderColor: {
-      name: 'borderColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets border Color'
-      }
-    },
-    borderRadius: {
-      name: 'borderRadius',
-      control: {
-        type: 'text'
-      },
-      description: 'border Radius (in px)'
-    },
-    iconSize: {
-      name: 'iconSize',
-      control: {
-        type: 'text'
-      },
-      description: 'icon  size (in px)'
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'onClick event - returns an object of check box {true/false} '
-    },
-    textColorChecked: {
-      name: 'textColorChecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text Checked Color'
-      }
-    },
-    textColorUnchecked: {
-      name: 'textColorUnchecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text Unchecked Color'
-      }
-    },
-    backgroundColorChecked: {
-      name: 'backgroundColorChecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets background Checked Color'
-      }
-    },
-    backgroundColorUnchecked: {
-      name: 'backgroundColorUnchecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets background Unchecked Color'
-      }
-    }
-  }
-};
-const Template = args => <_CheckBoxButton.CheckBoxButton {...args} />;
-const Retailer = exports.Retailer = Template.bind({});
-Retailer.args = {
-  label: 'Retailer',
-  checked: true,
-  disabled: false,
-  showIconInCheckBoxButtons: true,
-  width: '100%',
-  height: '29px',
-  fontSize: '14px',
-  iconSize: '12px',
-  iconColor: '#1B30AA',
-  borderColor: '#1B30AA',
-  borderRadius: '12px',
-  textColorChecked: '#1B30AA',
-  textColorUnchecked: '#212121',
-  backgroundColorChecked: '#E9F1FF',
-  backgroundColorUnchecked: '#F2F2F2'
-};

package/dist/components/CheckBoxButton/CheckBoxButton.style.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Label = exports.ControlsContainer = exports.Controls = exports.CheckBoxButtonIconContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  display: flex;
-  height: ${props => props.height};
-  width: ${props => props.width};
-  font-size: ${props => props.fontSize};
-  font-family: Poppins;
-  margin: 0;
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  border-radius: ${props => props.borderRadius};
-  background: ${props => props.backgroundColor};
-  border: 1px solid ${props => props.borderColor};
-  cursor: ${props => props.disabled ? 'default' : 'pointer'};
-`;
-const Label = exports.Label = _styledComponents.default.div`
-  display: flex;
-  padding: 0 10px 0 10px;
-  color: ${props => props.textColor};
-  @media (max-width: 1536px) {
-    font-size: 11px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;
-const CheckBoxButtonIconContainer = exports.CheckBoxButtonIconContainer = _styledComponents.default.div`
-  display: flex;
-  margin: 0 0 0 10px;
-`;

package/dist/components/CodeEditor/CodeEditor.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-require("ace-builds/src-noconflict/mode-mysql");
-require("ace-builds/src-noconflict/theme-monokai");
-require("ace-builds/src-noconflict/ext-language_tools");
-require("ace-builds/src-noconflict/snippets/mysql");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// CodeEditor.js
-
-const CodeEditor = ({
-  value,
-  onChange
-}) => <_reactAce.default style={{
-  height: '300px',
-  width: '100%'
-}} mode="mysql" theme="monokai" value={value} onChange={onChange} name="code-editor" editorProps={{
-  $blockScrolling: true
-}} setOptions={{
-  enableBasicAutocompletion: true,
-  enableLiveAutocompletion: true,
-  enableSnippets: true,
-  showLineNumbers: true,
-  tabSize: 1
-}} />;
-var _default = exports.default = CodeEditor;

package/dist/components/CodeEditor/CodeEditor.style.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AceEditorContent = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AceEditorContent = exports.AceEditorContent = (0, _styledComponents.default)(_reactAce.default)`
-    width: 100%;
-    height: 400px;
-`;