sag_components 2.0.0-beta28 → 2.0.0-beta280

package/dist/stories/SalesAndROI.stories.js

@@ -1,166 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutBorder = exports.WithoutBanner = exports.WithBorder = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SalesAndROI = _interopRequireDefault(require("./components/SalesAndROI"));
-const salesData1 = [{
-  name: 'Total Sales',
-  value: 90000,
-  textBefore: '',
-  textAfter: ''
-}, {
-  name: 'Incremental sales',
-  value: 420000,
-  textBefore: '',
-  textAfter: '(43 Units)'
-}, {
-  name: 'Package Cost',
-  value: 50000,
-  textBefore: '',
-  textAfter: ''
-}, {
-  name: 'ROI',
-  value: 9.2,
-  textBefore: 'x',
-  textAfter: ''
-}];
-var _default = exports.default = {
-  title: 'SAG BI/SalesAndROI',
-  component: _SalesAndROI.default,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figspec',
-      accessToken: 'figd_vlq2HLcwzTQLvrhLrFWY_Be8CqbuyKcltE9oyHnR'
-    }
-  },
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title on top of the component'
-    },
-    dotCut: {
-      name: 'dotCut',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - format total value with dot cut'
-    },
-    currencySign: {
-      name: 'currencySign',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - show/hide currency sign before total value'
-    },
-    currencyType: {
-      name: 'currencyType',
-      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY'],
-      control: {
-        type: 'select'
-      }
-    },
-    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 / %)'
-    },
-    textColor: {
-      name: 'textColor',
-      description: 'Sets the text color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    salesData: {
-      name: 'salesData',
-      description: 'array [] of objects: {displayName: string, value: number, color: string} to fill the pie chart, Please NOTE: the name have to be uniq '
-    },
-    showBanner: {
-      default: false,
-      name: 'showBanner',
-      control: {
-        type: 'boolean'
-      }
-    },
-    noDataText: {
-      name: 'noDataText',
-      control: {
-        type: 'text'
-      },
-      description: 'text to display when no data found'
-    },
-    onBannerClick: {
-      name: 'onBannerClick',
-      action: 'onClick',
-      description: 'Click onBannerClick event'
-    },
-    showBorderShadow: {
-      default: false,
-      name: 'showBorderShadow',
-      control: {
-        type: 'boolean'
-      }
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_SalesAndROI.default, args);
-const WithBorder = exports.WithBorder = Template.bind({});
-WithBorder.args = {
-  title: 'Sales & ROI',
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  salesData: salesData1,
-  showBanner: true,
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  width: '50%',
-  height: '50%',
-  showBorderShadow: true
-};
-const WithoutBorder = exports.WithoutBorder = Template.bind({});
-WithoutBorder.args = {
-  title: 'Sales & ROI',
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  salesData: salesData1,
-  showBanner: true,
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  width: '40%',
-  height: '50%',
-  showBorderShadow: false
-};
-const WithoutBanner = exports.WithoutBanner = Template.bind({});
-WithoutBanner.args = {
-  title: 'Sales & ROI',
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  salesData: salesData1,
-  showBanner: false,
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  width: '50%',
-  height: '50%',
-  showBorderShadow: true
-};

package/dist/stories/SalesSplit.stories.js

@@ -1,122 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.EmptyData = exports.Default = exports.CustomLowLimit = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SalesSplit = _interopRequireDefault(require("./components/SalesSplit"));
-const data1 = [{
-  value: 28.6441,
-  label: 'Homestyle Ranch',
-  color: '#066768'
-}, {
-  value: 23.4555,
-  label: 'Sweet Potato Sea Salt Crisps',
-  color: '#066768CC'
-}, {
-  value: 16.4022,
-  label: 'Farmhouse Cheddar Crisps',
-  color: '#066768B2'
-}, {
-  value: 12.5,
-  label: 'Sweet Potato Sea',
-  color: '#74AAAA'
-}, {
-  value: 11.1234,
-  label: 'Potato Sea Salt Crisps',
-  color: '#76B4B4'
-}, {
-  value: 5.2211,
-  label: 'Farmhouse Cheddar Sea Salt Crisps',
-  color: '#229E7B'
-}, {
-  value: 3.11122,
-  label: 'Farmhouse Homestyle Ranch',
-  color: '#229E38'
-}];
-var _default = exports.default = {
-  title: 'SAG BI/SalesSplit',
-  component: _SalesSplit.default,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      description: 'The title of the control',
-      control: {
-        type: 'text'
-      }
-    },
-    data: {
-      description: 'Array of data objects containing value, label, and color for each bar',
-      control: {
-        type: 'object',
-        defaultValue: [{
-          value: 28.6441,
-          label: 'Homestyle Ranch',
-          color: '#066768'
-        }, {
-          value: 23.4555,
-          label: 'Sweet Potato Sea Salt Crisps',
-          color: '#066768CC'
-        }, {
-          value: 16.4022,
-          label: 'Farmhouse Cheddar Crisps',
-          color: '#066768B2'
-        }, {
-          value: 12.5,
-          label: 'Sweet Potato Sea',
-          color: '#74AAAA'
-        }, {
-          value: 11.1234,
-          label: 'Potato Sea Salt Crisps',
-          color: '#76B4B4'
-        }, {
-          value: 5.2211,
-          label: 'Farmhouse Cheddar Sea Salt Crisps',
-          color: '#229E7B'
-        }, {
-          value: 3.11122,
-          label: 'Farmhouse Homestyle Ranch',
-          color: '#229E38'
-        }]
-      }
-    },
-    lowLimit: {
-      description: 'The minimum value for the bars to be displayed',
-      control: {
-        type: 'number'
-      },
-      defaultValue: 1
-    },
-    barHeight: {
-      description: 'The height of the bars',
-      control: {
-        type: 'text'
-      }
-    }
-  }
-}; // Template function to reuse for different stories
-const Template = args => /*#__PURE__*/_react.default.createElement(_SalesSplit.default, args);
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  title: 'Sales Split',
-  data: data1,
-  lowLimit: 1,
-  barHeight: '184px'
-};
-const CustomLowLimit = exports.CustomLowLimit = Template.bind({});
-CustomLowLimit.args = {
-  title: 'Sales Split - Low Limit',
-  data: data1,
-  lowLimit: 5,
-  barHeight: '184px'
-};
-const EmptyData = exports.EmptyData = Template.bind({});
-EmptyData.args = {
-  title: 'Empty',
-  data: [],
-  // Empty data scenario
-  lowLimit: 0,
-  barHeight: '60px'
-};

package/dist/stories/SearchInput.stories.js

@@ -1,44 +0,0 @@
-"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 _SearchInput = _interopRequireDefault(require("./components/SearchInput"));
-var _default = exports.default = {
-  title: 'SAG/SearchInput',
-  component: _SearchInput.default,
-  argTypes: {
-    placeholder: {
-      name: 'Placeholder Text',
-      control: {
-        type: 'text'
-      },
-      description: 'The Placeholder Ttext',
-      defaultValue: 'Search'
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the input field'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the input field'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_SearchInput.default, args);
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  placeholder: 'Search',
-  width: '100%',
-  height: '40px'
-};

package/dist/stories/SegmentedButton.stories.js

@@ -1,181 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SegmentedFilter = exports.Period = exports.DollarsOrUnits = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SegmentedButton = require("./components/SegmentedButton");
-const arrSegmentedFilters = [{
-  value: 'Total'
-}, {
-  value: 'Ecommerce'
-}, {
-  value: 'In Store'
-}];
-const arrDollarsOrUnits = [{
-  value: 'Dollars'
-}, {
-  value: 'Units'
-}];
-const arrPeriod = [{
-  value: '4 w'
-}, {
-  value: '8 w'
-}, {
-  value: '13 w'
-}];
-var _default = exports.default = {
-  title: 'SAG/SegmentedButton',
-  component: _SegmentedButton.SegmentedButton,
-  tags: ['autodocs'],
-  argTypes: {
-    name: {
-      name: 'name',
-      control: {
-        type: 'text'
-      },
-      description: 'name of the object'
-    },
-    backgroundColor: {
-      name: 'backgroundColor',
-      description: 'Sets Background Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    selectedSegmentColor: {
-      name: 'selectedSegmentColor',
-      description: 'Sets selected Segment Color Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    selectedTextColor: {
-      name: 'selectedTextColor',
-      description: 'Sets selected text Color',
-      control: {
-        type: 'color',
-        presetColors: ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    unselectedTextColor: {
-      name: 'unselectedTextColor',
-      description: 'Sets unselected text Color',
-      control: {
-        type: 'color',
-        presetColors: ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    defaultIndex: {
-      name: 'defaultIndex',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 20
-      },
-      description: 'set default index to init segmented button component (in px)'
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 1200
-      },
-      description: 'width of the component (in px)'
-    },
-    controlRadius: {
-      name: 'controlRadius',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 40
-      },
-      description: 'radius of the control corners (in px) '
-    },
-    segmentRadius: {
-      name: 'segmentRadius',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 40
-      },
-      description: 'radius of the selected segment corners (in px)'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 300
-      },
-      description: 'height of the component'
-    },
-    fontSize: {
-      name: 'fontSize',
-      control: {
-        type: 'number',
-        min: 9,
-        max: 40
-      },
-      description: 'font size (in px)'
-    },
-    options: {
-      description: 'array [] of objects: {value: string } to fill segmented buttons '
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'onClick event - returns an object of selected button {index: number, value: string} '
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, args);
-const SegmentedFilter = exports.SegmentedFilter = Template.bind({});
-SegmentedFilter.args = {
-  name: 'segmentedFilter',
-  options: arrSegmentedFilters,
-  defaultIndex: 0,
-  width: 270,
-  height: 40,
-  controlRadius: 8,
-  segmentRadius: 8,
-  fontSize: 14,
-  backgroundColor: '#ECF0FF',
-  selectedSegmentColor: '#FFFFFF',
-  selectedTextColor: '#212121',
-  unselectedTextColor: '#212121'
-};
-const DollarsOrUnits = exports.DollarsOrUnits = Template.bind({});
-DollarsOrUnits.args = {
-  name: 'segmentedDollarsOrUnits',
-  options: arrDollarsOrUnits,
-  defaultIndex: 1,
-  width: 200,
-  height: 40,
-  controlRadius: 8,
-  segmentRadius: 8,
-  fontSize: 14,
-  backgroundColor: '#ECF0FF',
-  selectedSegmentColor: '#FFFFFF',
-  selectedTextColor: '#212121',
-  unselectedTextColor: '#212121'
-};
-const Period = exports.Period = Template.bind({});
-Period.args = {
-  name: 'period',
-  options: arrPeriod,
-  defaultIndex: 1,
-  width: 180,
-  height: 40,
-  controlRadius: 8,
-  segmentRadius: 8,
-  fontSize: 14,
-  backgroundColor: '#ECF0FF',
-  selectedSegmentColor: '#FFFFFF',
-  selectedTextColor: '#212121',
-  unselectedTextColor: '#212121'
-};

package/dist/stories/Select.stories.js

@@ -1,201 +0,0 @@
-"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 _Select = _interopRequireDefault(require("./components/Select"));
-/* eslint-disable import/no-extraneous-dependencies */
-// Update the path based on your actual file structure
-var _default = exports.default = {
-  title: 'SAG/Select',
-  component: _Select.default,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      name: 'label',
-      type: {
-        name: 'string'
-      },
-      description: 'Label for the select',
-      defaultValue: {
-        summary: 'Select Label'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    value: {
-      name: 'value',
-      type: {
-        name: 'string'
-      },
-      description: 'Value of the select',
-      defaultValue: {
-        summary: ''
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    onChange: {
-      name: 'onChange',
-      type: {
-        name: 'function'
-      },
-      description: 'Callback function for select change',
-      defaultValue: {
-        summary: '() => {}'
-      },
-      control: {
-        type: null
-      }
-    },
-    required: {
-      name: 'required',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if the select is required',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    borderColor: {
-      name: 'borderColor',
-      description: 'Indicates if the select is bordar Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
-      }
-    },
-    labelFontColor: {
-      name: 'labelFontColor',
-      description: 'Indicates for label font color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
-      }
-    },
-    borderColorFoucs: {
-      name: 'borderColorFoucs',
-      description: 'Indicates if the select is bordar Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
-      }
-    },
-    disabled: {
-      name: 'disabled',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if the select is disabled',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    fontSize: {
-      name: 'width',
-      type: {
-        name: 'string'
-      },
-      description: 'font size',
-      defaultValue: {
-        summary: '14px'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    width: {
-      name: 'width',
-      type: {
-        name: 'string'
-      },
-      description: 'Width of the select',
-      defaultValue: {
-        summary: '200px'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    height: {
-      name: 'height',
-      type: {
-        name: 'string'
-      },
-      description: 'Height of the select',
-      defaultValue: {
-        summary: '40px'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    error: {
-      name: 'error',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if there is an error',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    errorMessage: {
-      name: 'errorMessage',
-      type: {
-        name: 'string'
-      },
-      description: 'Error message to display',
-      defaultValue: {
-        summary: ''
-      },
-      control: {
-        type: 'text'
-      }
-    }
-  }
-}; // Create a group of stories for Select component
-const Template = args => /*#__PURE__*/_react.default.createElement(_Select.default, args);
-const options = [{
-  value: '1',
-  label: 'Option 1'
-}, {
-  value: '2',
-  label: 'Option 2'
-}, {
-  value: '3',
-  label: 'Option 3'
-}];
-// Story for the default state
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  isMulti: false,
-  label: 'Select Option',
-  labelFontColor: '#066768',
-  required: true,
-  options,
-  width: '200px',
-  radius: '12px',
-  borderColor: '#B1B1B1',
-  borderColorFoucs: '#82B3B4',
-  height: '40px',
-  disabled: false,
-  fontSize: '12px',
-  error: false,
-  errorMessage: ''
-};