sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/TotalHorizontalCharts.stories.js

@@ -0,0 +1,291 @@
+"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

@@ -0,0 +1,185 @@
+"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

@@ -0,0 +1,60 @@
+"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

@@ -0,0 +1,48 @@
+"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

@@ -0,0 +1,40 @@
+"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

@@ -0,0 +1,55 @@
+"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;
+  }
+`;