sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/MarketShareDescription/MarketShareDescription.stories.js

@@ -1,196 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WeeklyTriers = exports.PercentHeightWidth = exports.MarketShare = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _MarketShareDescription = require("./MarketShareDescription");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// --------------------------------- market share ----------------------------------------------
-
-const marketShareInfoText1 = `      
-    <strong>Pringles Harvest Blend </strong>
-    <p1>market share </p1>
-    <strong>increased by 98% </strong>
-    <p1>following the event</p1>
-    `;
-const marketShareInfoText2 = `      
-<strong>Pringles </strong>
-<p1>market share </p1>
-<strong>increased by 8% </strong>
-<p1>following the event</p1>
-`;
-const marketShareDataColumn1 = [{
-  label: 'Pre-event',
-  value: 1.2,
-  textBefore: '',
-  textAfter: '%'
-}, {
-  label: 'Event',
-  value: 2,
-  textBefore: '',
-  textAfter: '%'
-}, {
-  label: 'Post-event',
-  value: 2.3,
-  textBefore: '',
-  textAfter: '%'
-}];
-const marketShareDataColumn2 = [{
-  label: 'Pre-event',
-  value: 2.8,
-  textBefore: '',
-  textAfter: '%'
-}, {
-  label: 'Event',
-  value: 3.5,
-  textBefore: '',
-  textAfter: '%'
-}, {
-  label: 'Post-event',
-  value: 3.05,
-  textBefore: '',
-  textAfter: '%'
-}];
-const marketShareData1 = [{
-  name: 'pringlesHarvestBlend',
-  rowTitle: 'Pringles Harvest Blend',
-  fieldsArray: marketShareDataColumn1,
-  rowFooter: marketShareInfoText1,
-  showBanner: false
-}, {
-  name: 'pringles',
-  rowTitle: 'Pringles',
-  fieldsArray: marketShareDataColumn2,
-  rowFooter: marketShareInfoText2,
-  showBanner: false
-}];
-
-// --------------------------------- weekly tiers ----------------------------------------------
-
-// The event drove 320% new Pringles Harvest Brand Crisp triers
-const weeklyTiersInfoText1 = `         
-    <p1>The event drove </p1>
-    <strong>320%  </strong>
-    <p1>new Pringles Harvest Brand Crisp triers</p1>
-    `;
-const weeklyTiersInfoText2 = '';
-const weeklyTiersDataColumn1 = [{
-  label: 'Pre-event',
-  value: 2040,
-  textBefore: '',
-  textAfter: ''
-}, {
-  label: 'Event',
-  value: 8250,
-  textBefore: '',
-  textAfter: ''
-}, {
-  label: 'Post-event',
-  value: 600,
-  textBefore: '',
-  textAfter: ''
-}];
-const weeklyTiersDataColumn2 = [{
-  label: 'Pre-event',
-  value: 100,
-  textBefore: '',
-  textAfter: ''
-}, {
-  label: 'Event',
-  value: 1500,
-  textBefore: '',
-  textAfter: ''
-}, {
-  label: 'Post-event',
-  value: 2400,
-  textBefore: '',
-  textAfter: ''
-}];
-const weeklyTiersData1 = [{
-  name: 'weeklyTriers',
-  rowTitle: 'Weekly Triers',
-  fieldsArray: weeklyTiersDataColumn1,
-  rowFooter: weeklyTiersInfoText1,
-  showBanner: true
-}, {
-  name: 'weeklyRepeaters',
-  rowTitle: 'Weekly Repeaters',
-  fieldsArray: weeklyTiersDataColumn2,
-  rowFooter: weeklyTiersInfoText2,
-  showBanner: true
-}];
-var _default = exports.default = {
-  title: 'SAG BI/MarketShareDescription',
-  component: _MarketShareDescription.MarketShareDescription,
-  tags: ['autodocs'],
-  argTypes: {
-    marketShareData: {
-      label: 'marketShareData',
-      control: {
-        type: 'object'
-      },
-      description: ' object: to fill kpi columns and buttons '
-    },
-    width: {
-      label: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the control (in px / %)'
-    },
-    height: {
-      label: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the control (in px / % )'
-    },
-    iconColor: {
-      label: 'iconColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets icons Color '
-      }
-    },
-    onBannerClick: {
-      name: 'onBannerClick',
-      action: 'onClick',
-      description: 'Click onBannerClick event'
-    },
-    dotCut: {
-      name: 'dotCut',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - format total value with dot cut'
-    }
-  }
-};
-const Template = args => <_MarketShareDescription.MarketShareDescription {...args} />;
-const MarketShare = exports.MarketShare = Template.bind({});
-MarketShare.args = {
-  marketShareData: marketShareData1,
-  width: '700px',
-  height: '630px',
-  iconColor: '#229E38',
-  dotCut: false
-};
-const WeeklyTriers = exports.WeeklyTriers = Template.bind({});
-WeeklyTriers.args = {
-  marketShareData: weeklyTiersData1,
-  width: '700px',
-  height: '630px',
-  iconColor: '#1B30AA',
-  dotCut: true
-};
-const PercentHeightWidth = exports.PercentHeightWidth = Template.bind({});
-PercentHeightWidth.args = {
-  marketShareData: marketShareData1,
-  width: '100%',
-  height: '100%',
-  iconColor: '#229E38',
-  dotCut: false
-};

package/dist/components/MarketShareDescription/MarketShareDescription.style.js

@@ -1,215 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextBeforeAndAfterValue = exports.RowTitle = exports.OutBanner = exports.OneRowContainer = exports.OneFieldsContainer = exports.MainContainer = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.FormattedValue = exports.FieldsContainer = exports.FieldTitleAndValueSubContainer = exports.FieldTitle = exports.ColumnLineSeporatorContainer = exports.ColumnLineSeporator = exports.AllRowsContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const scrollableStyles = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const MainContainer = exports.MainContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-size: 1rem;
-  border-radius: 12px;
-  padding: 10px;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  overflow: auto;
-  ${scrollableStyles}
-`;
-const RowTitle = exports.RowTitle = _styledComponents.default.h4`
-  display: flex;
-  justify-content: space-between;
-  font-weight: 500;
-  font-size: 18px;
-  margin: 5px 5px 5px 0;
-  @media (max-width: 1536px) {
-    font-size: 15px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const AllRowsContainer = exports.AllRowsContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
-`;
-const OneRowContainer = exports.OneRowContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`;
-const ColumnLineSeporatorContainer = exports.ColumnLineSeporatorContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  background-color: #b1b1b1;
-  align-items: center;
-  height: 1px;
-  width: 100%;
-  &.ColumnLineSeporatorContainer_vertical {  
-    margin: 0 30px;  
-    height: 100%;
-    width: 1px;
-  }
-  &.ColumnLineSeporatorContainer_horizontal {
-    margin: 30px 0;
-    min-height: 1px;
-    height: 1px;
-    width: 100%;
-  }
-`;
-const ColumnLineSeporator = exports.ColumnLineSeporator = _styledComponents.default.div`
-  min-width: 0.5px;
-  width: 0.5px;
-`;
-const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  white-space: nowrap;
-  height: 100%;
-  padding: 30px 0px;
-`;
-const OneFieldsContainer = exports.OneFieldsContainer = _styledComponents.default.div`
-  display: flex;
-  padding: 4px;
-  gap: 10px;
-  width: 100%;
-  justify-content: flex-start;
-  // padding: ${props => props.padding}; //0 0 0 40px;
-`;
-const FieldTitle = exports.FieldTitle = _styledComponents.default.h4`
-  font-size: 18px;
-  font-weight: 400;
-  margin: 0;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const FormattedValue = exports.FormattedValue = _styledComponents.default.div`
-  font-weight: 400;
-  font-size: 40px;
-  display: flex;
-  align-items: baseline;
-  min-height: 40px;
-  gap: 2px;
-  @media (max-width: 1536px) {
-    font-size: 24px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 20px;
-  }
-`;
-const TextBeforeAndAfterValue = exports.TextBeforeAndAfterValue = _styledComponents.default.span`
-  font-weight: 400;
-  font-size: 16px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;
-const FieldTitleAndValueSubContainer = exports.FieldTitleAndValueSubContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%; 
-  overflow:auto;
-`;
-const IconContainer = exports.IconContainer = _styledComponents.default.div`  
-  display: flex;  
-  padding: 5px 10px 0 0;
-  cursor:  pointer;  
-`;
-const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div`
-  color: black;
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: 400;
-  width: 100%;
-  overflow: auto;
-  ${scrollableStyles}
-  strong {
-    font-weight: 500;
-    color: #212121;
-    @media (max-width: 1536px) {
-    font-size: 14px;
-    }
-    @media (max-width: 1366px) {
-    font-size: 12px;
-    }
-  };
-  p1 {
-    font-weight: 400;
-    color: #726F6F;
-    @media (max-width: 1536px) {
-    font-size: 14px;
-    }
-    @media (max-width: 1366px) {
-    font-size: 12px;
-    }
-  };
-`;
-const OutBanner = exports.OutBanner = _styledComponents.default.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${props => props.textColor};
-  cursor: pointer;
-  @media (max-width: 1536px) {
-    font-size: 13px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-  > svg {
-    width: 14px;
-    height: 14px;
-    @media (max-width: 1536px) {
-      width: 13px;
-      height: 13px;
-    }
-    @media (max-width: 1366px) {
-      width: 12px;
-      height: 12px;
-    }
-  }
-`;

package/dist/components/Modal/Modal.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Modal = require("./Modal.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Modal = ({
-  isOpen,
-  onClose,
-  children
-}) => {
-  if (!isOpen) return null;
-  return <_Modal.ModalOverlay>
-      <_Modal.ModalContent>
-        {children}
-        <_Modal.CloseButton onClick={onClose}>Close</_Modal.CloseButton>
-      </_Modal.ModalContent>
-    </_Modal.ModalOverlay>;
-};
-var _default = exports.default = Modal;

package/dist/components/Modal/Modal.style.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SubmitButton = exports.ModalOverlay = exports.ModalContent = exports.CloseButton = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-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; }
-const fadeIn = (0, _styledComponents.keyframes)`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index:999999;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  animation: ${fadeIn} 0.3s ease-in-out;
-`;
-const ModalContent = exports.ModalContent = _styledComponents.default.div`
-  background-color: #fff;
-  overflow: scroll;
-  padding: 20px;
-  border-radius: 8px;
-  width: 80%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  animation: ${fadeIn} 0.5s ease-in-out;
-`;
-const CloseButton = exports.CloseButton = _styledComponents.default.button`
-  margin-top: 10px;
-  padding: 5px 15px;
-  border: none;
-  background-color: #333;
-  color: #fff;
-  cursor: pointer;
-  border-radius: 4px;
-  &:hover {
-    background-color: #555;
-  }
-`;
-const SubmitButton = exports.SubmitButton = _styledComponents.default.input`
-  margin-top: 10px;
-  margin-right: 10px;
-  padding: 5px 15px;
-  border: none;
-  background-color: #333;
-  color: #fff;
-  cursor: pointer;
-  border-radius: 4px;
-  &:hover {
-    background-color: #555;
-  }
-`;

package/dist/components/Modal/ModalTotalBenchmark.js

@@ -1,129 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactHookForm = require("react-hook-form");
-var _propTypes = _interopRequireWildcard(require("prop-types"));
-var _Modal = _interopRequireDefault(require("./Modal"));
-var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
-var _TextField = _interopRequireDefault(require("./TextField"));
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _Modal2 = require("./Modal.style");
-var _TotalDoughnutChart = _interopRequireDefault(require("./TotalDoughnutChart"));
-var _ComponentFactory = _interopRequireDefault(require("../utils/ComponentFactory"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
-const ModalTotalBenchmark = ({
-  componentName,
-  title,
-  isModalOpen,
-  setModalOpen,
-  setResult
-}) => {
-  const [params, setParams] = (0, _react.useState)([]);
-  const [code, setCode] = (0, _react.useState)('Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE');
-  function getTypeName(type) {
-    if (type === _propTypes.default.string) {
-      return 'string';
-    }
-    if (type === _propTypes.default.number) {
-      return 'number';
-    }
-    if (type === _propTypes.default.bool) {
-      return 'bool';
-    }
-    if (type === _propTypes.default.array) {
-      return 'array';
-    }
-    if (type === _propTypes.default.object || type === _propTypes.default.arrayOf) {
-      return 'object';
-    }
-    if (type === _propTypes.default.func) {
-      return 'function';
-    }
-    if (type === _propTypes.default.symbol) {
-      return 'symbol';
-    }
-    if (type === _propTypes.default.any) {
-      return 'any';
-    }
-    return 'other';
-  }
-  function withPropTypeChecks(Component) {
-    const tempParams = [];
-    if (Component.propTypes) {
-      Object.keys(Component.propTypes).forEach(key => {
-        tempParams.push({
-          id: key,
-          label: key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase()),
-          type: getTypeName(Component.propTypes[key])
-        });
-      });
-    }
-    return tempParams;
-  }
-  (0, _react.useEffect)(() => {
-    const newParams = withPropTypeChecks((0, _ComponentFactory.default)(componentName));
-    setParams(newParams);
-  }, []);
-  const {
-    handleSubmit,
-    control,
-    formState: {
-      errors
-    }
-  } = (0, _reactHookForm.useForm)();
-  const onSubmit = data => setResult(data);
-  return <form onSubmit={handleSubmit(onSubmit)}>
-      <_Modal.default isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
-        <h2>{title}</h2>
-        <div style={{
-        gap: '10px',
-        display: 'grid'
-      }}>
-          <_CodeEditor.default value={code} onChange={setCode} />
-          <div style={{
-          gap: '10px',
-          display: 'grid',
-          gridTemplateColumns: 'auto auto auto'
-        }}>
-            {params.map(item => {
-            if (item.type === 'string' || item.type === 'number') {
-              return <_reactHookForm.Controller key={item.id} control={control} name={item.id} render={({
-                field
-              }) => <_TextField.default {...field} allowedInput="all" height="100%" label={item.label} multiline placeHolder="Type..." shape="round" size="small" width="300px" />} />;
-            }
-            if (item.type === 'bool') {
-              return <_reactHookForm.Controller key={item.id} control={control} name={item.id} render={({
-                field
-              }) => <_Dropdown.default {...field} allowedInput="all" labelColor="#1B30AA" limitTagsOnMultiSelect={0} onInputChange={e => {
-                field.onChange(e?.inputValue ?? '');
-              }} options={['true', 'false']} placeHolder="Type..." shape="round" size="small" text={item.label} width="300px" />} />;
-            }
-            if (item.type === 'other') {
-              return <>
-                    <_reactHookForm.Controller key={item.id} control={control} name={`${item.id}Key`} render={({
-                  field
-                }) => <_TextField.default {...field} label={`${item.label}Key`} text={`${item.label}Key`} allowedInput="all" labelColor="#1B30AA" width="300px" height="100%" multiline placeHolder="The Key" shape="round" size="small" />} />
-                    <_reactHookForm.Controller key={item.id} control={control} name={`${item.id}Args`} render={({
-                  field
-                }) => <_TextField.default {...field} label={`${item.label}Args`} text={`${item.label}Args`} allowedInput="all" labelColor="#1B30AA" width="300px" height="100%" multiline placeHolder="The args" shape="round" size="small" />} />
-                  </>;
-            }
-            return <_reactHookForm.Controller key={item.id} control={control} name={item.id} render={({
-              field
-            }) => <_Dropdown.default {...field} allowedInput="all" labelColor="#1B30AA" limitTagsOnMultiSelect={0} onInputChange={e => {
-              field.onChange(e?.inputValue ?? '');
-            }} options={item.options} placeHolder="Type..." shape="round" size="small" text={item.label} width="300px" />} />;
-          })}
-          </div>
-        </div>
-        <_Modal2.SubmitButton type="submit" />
-      </_Modal.default>
-    </form>;
-};
-var _default = exports.default = ModalTotalBenchmark;