sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/setupTests.js

@@ -0,0 +1,15 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+// src/setupTests.js
+
+globalThis.ResizeObserver = class {
+  // eslint-disable-next-line class-methods-use-this
+  observe() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  unobserve() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnect() {}
+};

package/dist/stories/AttachedFile.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AttachedFile = _interopRequireDefault(require("./components/AttachedFile"));
+/* eslint-disable react/jsx-filename-extension */
+var _default = exports.default = {
+  title: 'SAG/AttachedFile',
+  component: _AttachedFile.default,
+  argTypes: {
+    inputText: {
+      name: 'inputText',
+      control: {
+        type: 'text'
+      },
+      description: 'text inside of the button',
+      defaultValue: 'Attach file'
+    },
+    inputColor: {
+      name: 'inputColor',
+      control: {
+        type: 'color'
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_AttachedFile.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  inputText: 'Attach file',
+  inputColor: '#229E38',
+  acceptedFiles: 'image/png, image/gif, image/jpeg'
+};

package/dist/stories/AutocompleteField.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AutocompleteField = _interopRequireDefault(require("./components/AutocompleteField"));
+/* eslint-disable react/jsx-filename-extension */
+var _default = exports.default = {
+  title: "SAG/AutocompleteField",
+  component: _AutocompleteField.default,
+  argTypes: {
+    choices: {
+      control: "array",
+      description: "Array of input options"
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_AutocompleteField.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  choices: ["Apple", "Banana", "Orange", "Grapes", "Watermelon"]
+};

package/dist/stories/BannerEventBox.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BannerEventBox = _interopRequireDefault(require("./components/BannerEventBox"));
+var _default = exports.default = {
+  title: 'SAG BI/BannerEventBox',
+  component: _BannerEventBox.default,
+  argTypes: {
+    width: {
+      control: 'text'
+    },
+    height: {
+      control: 'text'
+    },
+    banner: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    dates: {
+      control: 'text'
+    },
+    data: {
+      control: {
+        type: 'array'
+      },
+      description: 'array [] of objects { name: string, items: string[] }'
+    },
+    viewBannerTooltip: {
+      control: 'text'
+    }
+  }
+}; // eslint-disable-next-line react/jsx-filename-extension
+const Template = args => /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  width: 'auto',
+  height: 'auto',
+  banner: 'Food Lion',
+  description: 'NIC Cycles 24 description here can be up to 3 rows of text and when getting to 3 rows there will be an ellipsis and a tooltip',
+  dates: ['01/01/2024', '14/01/2024'],
+  data: [{
+    name: 'Supplier',
+    items: 7
+  }, {
+    name: 'Brands',
+    items: 8
+  }, {
+    name: 'Product Lines',
+    items: 9
+  }],
+  viewBannerTooltip: 'View Banner'
+};

package/dist/stories/BannerEventBoxList.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BannerEventBoxList = _interopRequireDefault(require("./components/BannerEventBoxList"));
+var _default = exports.default = {
+  title: 'SAG BI/BannerEventBoxList',
+  component: _BannerEventBoxList.default,
+  argTypes: {
+    width: {
+      control: 'text'
+    },
+    height: {
+      control: 'text'
+    },
+    toggleColor: {
+      control: 'color'
+    },
+    showDraft: {
+      name: 'showDraft',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Draft symbol'
+    }
+  }
+}; // eslint-disable-next-line react/jsx-filename-extension
+const Template = args => /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  width: 'auto',
+  height: 'auto',
+  toggleColor: '#229E38',
+  showDraft: true
+};

package/dist/stories/BannerEventBoxTest.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BannerEventBoxTest = _interopRequireDefault(require("./components/BannerEventBoxTest"));
+var _default = exports.default = {
+  title: 'SAG BI/BannerEventBoxTest',
+  component: _BannerEventBoxTest.default,
+  argTypes: {
+    width: {
+      control: 'text'
+    },
+    height: {
+      control: 'text'
+    }
+  }
+}; // eslint-disable-next-line react/jsx-filename-extension
+const Template = args => /*#__PURE__*/_react.default.createElement(_BannerEventBoxTest.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  width: 'auto',
+  height: 'auto'
+};

package/dist/stories/BannersDropdown.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Partial = exports.AllBanners = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BannersDropdown = _interopRequireDefault(require("./components/BannersDropdown"));
+const banners1 = [{
+  name: 'StopAndShop',
+  checked: true
+}, {
+  name: 'FoodLion',
+  checked: false
+}, {
+  name: 'GiantFood',
+  checked: true
+}, {
+  name: 'TheGiantCompany',
+  checked: true
+}, {
+  name: 'Hannaford',
+  checked: false
+}];
+const banners2 = [{
+  name: 'StopAndShop',
+  checked: true
+}, {
+  name: 'FoodLion',
+  checked: true
+}, {
+  name: 'GiantFood',
+  checked: true
+}, {
+  name: 'TheGiantCompany',
+  checked: true
+}, {
+  name: 'Hannaford',
+  checked: true
+}];
+var _default = exports.default = {
+  title: 'SAG BI/BannersDropdown',
+  component: _BannersDropdown.default,
+  tags: ['autodocs'],
+  argTypes: {
+    banners: {
+      description: 'array [] of objects: to fill the data. '
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'returns an event click object when user clicks on a button'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_BannersDropdown.default, args);
+const Partial = exports.Partial = Template.bind({});
+Partial.args = {
+  banners: banners1
+};
+const AllBanners = exports.AllBanners = Template.bind({});
+AllBanners.args = {
+  banners: banners2
+};

package/dist/stories/BarChart.stories.js

@@ -0,0 +1,306 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.currentCampaignStyleWithPercent = exports.currentCampaignStyle = exports.SalesDollars = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BarChart = require("./components/BarChart");
+const arrData = [{
+  title: 'Food Lion',
+  date: '15.01.24-31.01.24',
+  value: 542366
+}, {
+  title: 'Hannaford',
+  date: '15.01.24-31.01.24',
+  value: 699511
+}, {
+  title: 'The Giant Company',
+  date: '15.01.24-31.01.24',
+  value: 403092
+}, {
+  title: 'Giant Food',
+  date: '15.01.24-31.01.24',
+  value: -6184
+}, {
+  title: 'Stop&Shop',
+  date: '15.01.24-31.01.24',
+  value: 415317
+}];
+const arrDataCurrentCampaign = [{
+  title: 'Back to School 2023',
+  date: '',
+  value: 542366.4155445,
+  isCurrent: false
+}, {
+  title: 'Fall Friends & Thanksgiving 2023',
+  date: '',
+  value: 699511.5454,
+  isCurrent: false
+}, {
+  title: 'Mar 23',
+  date: '',
+  value: 403092,
+  isCurrent: false
+}, {
+  title: 'Apr 23',
+  date: '',
+  value: 600184.4545,
+  isCurrent: false
+}, {
+  title: 'May 23',
+  date: '',
+  value: 415317.55,
+  isCurrent: false
+}, {
+  title: 'Jun 23',
+  date: '',
+  value: 542366,
+  isCurrent: false
+}, {
+  title: 'Jul 23',
+  date: '',
+  value: 699511,
+  isCurrent: false
+}, {
+  title: 'Aug 23',
+  date: '',
+  value: 403092,
+  isCurrent: false
+}, {
+  title: 'Sep 23',
+  date: '',
+  value: 600184,
+  isCurrent: false
+}, {
+  title: 'Okt 23',
+  date: '',
+  value: 415317,
+  isCurrent: false
+}, {
+  title: 'Now 23',
+  date: '',
+  value: 403092,
+  isCurrent: false
+}, {
+  title: 'Dec 23',
+  date: '',
+  value: 600184,
+  isCurrent: false
+}, {
+  title: 'Fall Friends & Thanksgiving 2024',
+  date: '',
+  value: 415317,
+  isCurrent: true
+}];
+const arrDataIsPercent = [{
+  title: 'Food Lion',
+  date: '',
+  value: 23.356
+}, {
+  title: 'Hannaford',
+  date: '',
+  value: 19.254
+}, {
+  title: 'The Giant Company',
+  date: '',
+  value: 11.5477
+}, {
+  title: 'Giant Food',
+  date: '',
+  value: 9.54545
+}, {
+  title: 'Stop&Shop',
+  date: '',
+  value: 7.545877,
+  isCurrent: true
+}];
+var _default = exports.default = {
+  title: 'SAG BI/BarChart',
+  component: _BarChart.BarChart,
+  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: 'barSize',
+      control: {
+        type: 'text'
+      },
+      description: 'barSize of the control (in number ex: 60)'
+    },
+    barFontSizeValue: {
+      name: 'Top Bar Font Size',
+      control: {
+        type: 'text'
+      },
+      description: 'Top bar value font size'
+    },
+    barChartColor: {
+      name: 'barChartColor',
+      description: 'Sets the area chart 1 color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    barChartData: {
+      description: 'array [] of objects: {title: string, value:number } to fill the area data. '
+    },
+    showDollarSign: {
+      name: 'showDollarSign',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show Dollar sign on top of bar'
+    },
+    isDollar: {
+      name: 'isDollar',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show values as Dollar'
+    },
+    showLegend: {
+      name: 'showLegend',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show bottom legend'
+    },
+    showReferenceLine: {
+      name: 'showReferenceLine',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show reference line'
+    },
+    referenceLinePoint: {
+      name: 'referenceLinePoint',
+      control: {
+        type: 'number'
+      },
+      description: 'reference line point'
+    },
+    referenceLineColor: {
+      name: 'referenceLineColor',
+      control: {
+        type: 'color'
+      },
+      description: 'reference line color'
+    },
+    referenceLineDashed: {
+      name: 'referenceLineDashed',
+      control: {
+        type: 'number'
+      },
+      description: 'reference line dashed'
+    },
+    showCurrentCampaignStyle: {
+      name: 'showCurrentCampaignStyle',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show Cartesian Grid'
+    },
+    isPercent: {
+      name: 'isPercent',
+      control: {
+        type: 'boolean'
+      },
+      description: 'is Percent - display "%" next to value. when checked, the Dollar sign will be hidden'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_BarChart.BarChart, args);
+const SalesDollars = exports.SalesDollars = Template.bind({});
+SalesDollars.args = {
+  title: 'Sales $',
+  barChartData: arrData,
+  barSize: 60,
+  barFontSizeValue: '12px',
+  width: '800px',
+  height: '500px',
+  barChartColor: '#1F7677',
+  yAxisCounter: 10,
+  isPercentValue: false,
+  showLegend: true,
+  legendData: [{
+    title: 'Incremental Sales',
+    iconType: 'Square',
+    iconColor: '#1F7677'
+  }],
+  showReferenceLine: true,
+  referenceLinePoint: 0,
+  referenceLineColor: '#D0D0D0',
+  referenceLineDashed: '0'
+};
+const currentCampaignStyle = exports.currentCampaignStyle = Template.bind({});
+currentCampaignStyle.args = {
+  title: 'My current campaign performance in comparison to previous',
+  barChartData: arrDataCurrentCampaign,
+  barSize: 60,
+  barFontSizeValue: '12px',
+  width: '1568px',
+  height: '500px',
+  barChartColor: '#90CE9C',
+  yAxisCounter: 10,
+  isPercentValue: false,
+  showLegend: false,
+  legendData: [{
+    title: 'Incremental Sales',
+    iconType: 'Square',
+    iconColor: '#1F7677'
+  }],
+  showReferenceLine: true,
+  referenceLinePoint: 0,
+  referenceLineColor: '#D0D0D0',
+  referenceLineDashed: '0',
+  currentBarColor: '#C7E7CD',
+  showCurrentCampaignStyle: true
+};
+const currentCampaignStyleWithPercent = exports.currentCampaignStyleWithPercent = Template.bind({});
+currentCampaignStyleWithPercent.args = {
+  title: 'Current Campaign Style With Percent',
+  barChartData: arrDataIsPercent,
+  barSize: 60,
+  barFontSizeValue: '12px',
+  width: '800px',
+  height: '500px',
+  barChartColor: '#90CE9C',
+  yAxisCounter: 10,
+  isPercentValue: false,
+  showLegend: false,
+  legendData: [{
+    title: 'Incremental Sales',
+    iconType: 'Square',
+    iconColor: '#1F7677'
+  }],
+  showReferenceLine: true,
+  referenceLinePoint: 0,
+  referenceLineColor: '#D0D0D0',
+  referenceLineDashed: '0',
+  currentBarColor: '#C7E7CD',
+  showCurrentCampaignStyle: true,
+  isPercent: true
+};