sag_components 2.0.0-beta30 → 2.0.0-beta300

package/dist/stories/TotalHorizontalCharts.stories.js

@@ -1,291 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SalesGreenTheme = exports.SalesBlueTheme = exports.HideTotalValue = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TotalHorizontalCharts = _interopRequireDefault(require("./components/TotalHorizontalCharts"));
-const chartsData1 = [{
-  name: 'LAYS',
-  value: 28.15,
-  color: 'rgba(6, 103, 104, 1)'
-}, {
-  name: 'TOSTITOS',
-  value: 16.53,
-  color: 'rgba(6, 103, 104, 1)'
-}, {
-  name: 'DORITOS',
-  value: 14.04,
-  color: 'rgba(6, 103, 104, 1)'
-}
-// {
-//   name: 'FRITO LAY',
-//   value: 8.98,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'CHEETOS',
-//   value: 8.86,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'RUFFLES',
-//   value: 7.44,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'FUNYUNS',
-//   value: 2.77,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'CHESTERS',
-//   value: 2.73,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'BAKEN ETS',
-//   value: 1.90,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'SMARTFOOD',
-//   value: 1.79,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'SANTITAS',
-//   value: 1.47,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'MUNCHOS',
-//   value: 1.25,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'SUNCHIPS',
-//   value: 1.24,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-];
-const chartsData2 = [{
-  name: 'Lysoe',
-  value: 52795.7313,
-  color: 'rgba(94, 101, 238, 0.1)'
-}, {
-  name: 'Ensueno',
-  value: 29792.315,
-  color: 'rgba(94, 101, 238, 0.2)'
-}, {
-  name: 'Starbucks Frappuccino',
-  value: 20,
-  color: 'rgba(94, 101, 238, 0.3)'
-}, {
-  name: 'Pringles',
-  value: 15,
-  color: 'rgba(94, 101, 238, 0.4)'
-}, {
-  name: 'Chunky Bowls',
-  value: 10,
-  color: 'rgba(94, 101, 238, 0.4)'
-}];
-var _default = exports.default = {
-  title: 'SAG BI/TotalHorizontalCharts',
-  component: _TotalHorizontalCharts.default,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figspec',
-      accessToken: 'figd_vlq2HLcwzTQLvrhLrFWY_Be8CqbuyKcltE9oyHnR'
-    }
-  },
-  argTypes: {
-    width: {
-      name: 'Width',
-      description: 'Width of the control (in px / %)',
-      control: {
-        type: 'text'
-      }
-    },
-    height: {
-      name: 'Height',
-      description: 'Height of the control (in px / %)',
-      control: {
-        type: 'text'
-      }
-    },
-    chartsData: {
-      name: 'Charts Data',
-      description: 'Array [] of objects: {displayName: string, value: number, color: string} to fill the pie chart. Please note: the name must be unique'
-    },
-    title: {
-      name: 'Title',
-      description: 'Title on top of the component',
-      control: {
-        type: 'text'
-      }
-    },
-    value: {
-      name: 'Value',
-      description: 'Value (total)',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      }
-    },
-    hideTitle: {
-      name: 'Hide Title',
-      description: 'Hide Title',
-      control: {
-        type: 'boolean'
-      }
-    },
-    hideTotalValue: {
-      name: 'Hide Total Value',
-      description: 'Hide Total Value',
-      control: {
-        type: 'boolean'
-      }
-    },
-    dotCut: {
-      name: 'Dot Cut',
-      description: 'True/false - format total value with dot cut',
-      control: {
-        type: 'boolean'
-      }
-    },
-    currencySign: {
-      name: 'Currency Sign',
-      description: 'True/false - show/hide currency sign before total value',
-      control: {
-        type: 'boolean'
-      }
-    },
-    currencyType: {
-      name: 'Currency Type',
-      description: 'Choose currency sign',
-      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY'],
-      control: {
-        type: 'select'
-      }
-    },
-    showPercentAsideValue: {
-      name: 'Show Percent Aside Value',
-      description: 'Show the percentage aside the value',
-      control: {
-        type: 'boolean'
-      }
-    },
-    rightGap: {
-      name: 'Right Gap',
-      description: 'Right gap',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 10
-      }
-    },
-    textColor: {
-      name: 'Text Color',
-      description: 'Sets the text color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    showScrollerBarsCount: {
-      name: 'Show Scroller Bars Count',
-      description: 'Number of bars to start activate the scroller',
-      control: {
-        type: 'number'
-      }
-    },
-    labelFontSize: {
-      name: 'Label Font Size',
-      description: 'Font size of the labels',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100
-      }
-    },
-    labelLimitedLetters: {
-      name: 'Label Limited Letters',
-      description: 'Limit the number of letters in the label',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100
-      }
-    },
-    noDataText: {
-      name: 'No Data Text',
-      description: 'Text to display when no data found',
-      control: {
-        type: 'text'
-      }
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.default, args);
-const SalesGreenTheme = exports.SalesGreenTheme = Template.bind({});
-SalesGreenTheme.args = {
-  title: 'SALES',
-  value: 56500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  chartsData: chartsData1,
-  showPercentAsideValue: true,
-  labelFontSize: 12,
-  labelLimitedLetters: 12,
-  showScrollerBarsCount: 5,
-  width: '600px',
-  height: '360px',
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  hideTotalValue: false,
-  hideTitle: false
-};
-const SalesBlueTheme = exports.SalesBlueTheme = Template.bind({});
-SalesBlueTheme.args = {
-  title: 'SALES',
-  value: 56500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  chartsData: chartsData2,
-  showPercentAsideValue: false,
-  labelFontSize: 12,
-  labelLimitedLetters: 15,
-  showScrollerBarsCount: 5,
-  width: '500px',
-  height: '240px',
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  hideTotalValue: false,
-  hideTitle: false
-};
-const HideTotalValue = exports.HideTotalValue = Template.bind({});
-HideTotalValue.args = {
-  title: 'SALES',
-  value: 56500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  chartsData: chartsData1,
-  showPercentAsideValue: true,
-  labelFontSize: 12,
-  labelLimitedLetters: 12,
-  showScrollerBarsCount: 5,
-  width: '600px',
-  height: '360px',
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  hideTotalValue: true,
-  hideTitle: true
-};

package/dist/stories/TwoBarCharts.stories.js

@@ -1,185 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SalesDollars = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TwoBarCharts = require("./components/TwoBarCharts");
-const arrData = [{
-  title: 'Food Lion',
-  date: '15.01.24-31.01.24',
-  valueOne: 542366,
-  valueTwo: 542366
-}, {
-  title: 'Hannaford',
-  date: '15.01.24-31.01.24',
-  valueOne: 699511,
-  valueTwo: 699511
-}, {
-  title: 'The Giant Company',
-  date: '15.01.24-31.01.24',
-  valueOne: 403092,
-  valueTwo: 403092
-}, {
-  title: 'Giant Food',
-  date: '15.01.24-31.01.24',
-  valueOne: 396184,
-  valueTwo: 396184
-}, {
-  title: 'Stop&Shop',
-  date: '15.01.24-31.01.24',
-  valueOne: 415317,
-  valueTwo: 415317
-}];
-var _default = exports.default = {
-  title: 'SAG BI/TwoBarCharts',
-  component: _TwoBarCharts.TwoBarCharts,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'Title',
-      control: {
-        type: 'text'
-      },
-      description: 'Title on top of the component'
-    },
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'Width of the control (in px)'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'Height of the control (in px)'
-    },
-    barSize: {
-      name: 'Bar Size',
-      control: {
-        type: 'text'
-      },
-      description: 'Bar size of the control (in number ex: 60)'
-    },
-    barFontSizeValue: {
-      name: 'Top Bar Font Size',
-      control: {
-        type: 'text'
-      },
-      description: 'Top bar value font size'
-    },
-    barChartColorFirst: {
-      name: 'Bar Chart Color First',
-      description: 'Sets the area chart 1 color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    barChartColorSecond: {
-      name: 'Bar Chart Color Second',
-      description: 'Sets the area chart 2 color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    barChartData: {
-      description: 'Array [] of objects: {title: string, value:number } to fill the area data.'
-    },
-    isDollar: {
-      name: 'Is Dollar',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show values as Dollar'
-    },
-    showDollarSign: {
-      name: 'Show Dollar Sign',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show Dollar sign on top of bar'
-    },
-    showLegend: {
-      name: 'Show Legend',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show bottom legend'
-    },
-    yAxisCounter: {
-      name: 'Y Axis Counter',
-      control: {
-        type: 'number'
-      },
-      description: 'Number of intervals on the Y axis'
-    },
-    isPercentValue: {
-      name: 'Is Percent Value',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show values as Percent'
-    },
-    showReferenceLine: {
-      name: 'Show Reference Line',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show reference line on the chart'
-    },
-    referenceLinePoint: {
-      name: 'Reference Line Point',
-      control: {
-        type: 'number'
-      },
-      description: 'Point at which the reference line is drawn'
-    },
-    referenceLineColor: {
-      name: 'Reference Line Color',
-      control: {
-        type: 'color'
-      },
-      description: 'Color of the reference line'
-    },
-    referenceLineDashed: {
-      name: 'Reference Line Dashed',
-      control: {
-        type: 'text'
-      },
-      description: 'Dashed style of the reference line (e.g., "5" for dashed line)'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TwoBarCharts, args);
-const SalesDollars = exports.SalesDollars = Template.bind({});
-SalesDollars.args = {
-  title: 'Sales $',
-  barChartData: arrData,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }],
-  width: '900px',
-  height: '500px',
-  barChartColorFirst: '#1F7677',
-  barChartColorSecond: '#FFC20E',
-  barSize: 60,
-  barFontSizeValue: '12px',
-  yAxisCounter: 10,
-  isPercentValue: false,
-  showLegend: true,
-  isDollar: true,
-  showDollarSign: false,
-  showReferenceLine: false,
-  referenceLinePoint: 0,
-  referenceLineColor: '#212121',
-  referenceLineDashed: '5'
-};

package/dist/stories/components/AttachedFile.js

@@ -1,60 +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 = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _AttachedFile = require("./AttachedFile.style");
-var _CloseIcon = _interopRequireDefault(require("./icons/CloseIcon"));
-var _AttachedIcon = _interopRequireDefault(require("./icons/AttachedIcon"));
-var _FileIcon = _interopRequireDefault(require("./icons/FileIcon"));
-const AttachedFile = props => {
-  const {
-    inputText,
-    inputColor,
-    acceptedFiles,
-    onSelectFile,
-    onRemoveFile
-  } = props;
-  const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
-  const handleFileChange = event => {
-    const files = Array.from(event.target.files);
-    setSelectedFiles(prevFiles => [...prevFiles, ...files]);
-    onSelectFile([...selectedFiles, ...files]);
-  };
-  const handleRemoveFile = fileToRemove => {
-    setSelectedFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove));
-    const fileInput = document.getElementById('fileInput');
-    fileInput.value = ''; // Reset input value
-    onRemoveFile(fileToRemove);
-  };
-  return /*#__PURE__*/_react.default.createElement(_AttachedFile.AttachedFileContainer, null, selectedFiles.map(file => /*#__PURE__*/_react.default.createElement(_AttachedFile.UploadedFile, {
-    key: `${file.name}_${file.lastModified}`
-  }, /*#__PURE__*/_react.default.createElement(_FileIcon.default, null), /*#__PURE__*/_react.default.createElement("span", null, file.name), /*#__PURE__*/_react.default.createElement(_AttachedFile.RemoveButton, {
-    onClick: () => handleRemoveFile(file)
-  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null)))), /*#__PURE__*/_react.default.createElement(_AttachedFile.InputLabel, {
-    htmlFor: "fileInput",
-    inputColor: inputColor
-  }, /*#__PURE__*/_react.default.createElement("span", null, inputText), /*#__PURE__*/_react.default.createElement(_AttachedIcon.default, {
-    fill: inputColor
-  })), /*#__PURE__*/_react.default.createElement("input", {
-    type: "file",
-    id: "fileInput",
-    accept: acceptedFiles,
-    onChange: e => handleFileChange(e),
-    style: {
-      display: 'none'
-    }
-  }));
-};
-var _default = exports.default = AttachedFile;
-AttachedFile.defaultProps = {
-  inputText: 'Attach file',
-  acceptedFiles: 'image/png, image/gif, image/jpeg',
-  inputColor: '#229E38',
-  onSelectFile: () => {},
-  onRemoveFile: () => {}
-};

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

@@ -1,48 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UploadedFile = exports.RemoveButton = exports.InputLabel = exports.AttachedFileContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const AttachedFileContainer = exports.AttachedFileContainer = _styledComponents.default.div`
-    font-family: 'Poppins';
-    font-size: 14px;
-    font-weight: 400;
-`;
-const InputLabel = exports.InputLabel = _styledComponents.default.label`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    cursor: pointer;
-    > span {
-        color: ${props => props.inputColor};
-    }
-`;
-const UploadedFile = exports.UploadedFile = _styledComponents.default.div`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    color: #A4A4A4;
-    max-width: 220px;
-    padding: 2px 8px;
-    margin-bottom: 10px;
-    > span {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    > svg {
-        min-width: 12px;
-    }
-`;
-const RemoveButton = exports.RemoveButton = _styledComponents.default.button`
-    border: none;
-    background: none;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    cursor: pointer;
-`;

package/dist/stories/components/AutocompleteField.js

@@ -1,40 +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 _AutocompleteField = require("./AutocompleteField.style");
-const AutocompleteField = props => {
-  const {
-    choices,
-    onSelect
-  } = props;
-  const [inputValue, setInputValue] = (0, _react.useState)('');
-  const [isFocused, setFocused] = (0, _react.useState)(false);
-  const handleInputChange = e => {
-    setInputValue(e.target.value);
-  };
-  const handleOptionClick = option => {
-    onSelect(option);
-    setInputValue('');
-  };
-  return /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteContainer, null, /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteInput, {
-    type: "text",
-    value: inputValue,
-    onChange: handleInputChange,
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-    placeholder: " "
-  }), /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteLabel, null, "Choose an option"), (isFocused || inputValue) && /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteOptions, null, choices.filter(option => option.toLowerCase().includes(inputValue.toLowerCase())).map((option, index) => /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteOption, {
-    key: index,
-    onClick: () => handleOptionClick(option)
-  }, option))));
-};
-var _default = exports.default = AutocompleteField;
-AutocompleteField.defaultProps = {
-  choices: ['Apple', 'Banana', 'Orange'],
-  onSelect: () => {}
-};

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

@@ -1,55 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AutocompleteOptions = exports.AutocompleteOption = exports.AutocompleteLabel = exports.AutocompleteInput = exports.AutocompleteContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const AutocompleteContainer = exports.AutocompleteContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  position: relative;
-  margin: 20px;
-`;
-const AutocompleteInput = exports.AutocompleteInput = _styledComponents.default.input`
-  width: 100%;
-  padding: 10px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-
-  &:focus + label {
-    top: -10px;
-    font-size: 12px;
-    color: #007bff;
-  }
-`;
-const AutocompleteLabel = exports.AutocompleteLabel = _styledComponents.default.label`
-  position: absolute;
-  top: 12px;
-  left: 10px;
-  transition: .2s ease;
-  pointer-events: none;
-  font-size: 16px;
-  color: #555;
-  background-color: white;
-`;
-const AutocompleteOptions = exports.AutocompleteOptions = _styledComponents.default.div`
-  position: absolute;
-  width: 100%;
-  max-height: 150px;
-  overflow-y: auto;
-  border: 1px solid #ccc;
-  border-top: none;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  background-color: #fff;
-  z-index: 1;
-`;
-const AutocompleteOption = exports.AutocompleteOption = _styledComponents.default.div`
-  padding: 10px;
-  cursor: pointer;
-  &:hover {
-    background-color: #f0f0f0;
-  }
-`;