sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/Heatmap/Heatmap.stories.js

@@ -1,118 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = exports.CustomLowLimit = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Heatmap = _interopRequireDefault(require("./Heatmap"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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/Heatmap',
-  component: _Heatmap.default,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'Title',
-      description: 'The title of the control',
-      control: {
-        type: 'text'
-      }
-    },
-    data: {
-      name: '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: {
-      name: 'Low Limit',
-      description: 'The minimum value for the bars to be displayed',
-      control: {
-        type: 'number'
-      },
-      defaultValue: 1
-    },
-    barHeight: {
-      name: 'Bar Height',
-      description: 'The height of the bars',
-      control: {
-        type: 'text'
-      }
-    }
-  }
-}; // Template function to reuse for different stories
-const Template = args => <_Heatmap.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'
-};

package/dist/components/Heatmap/Heatmap.style.js

@@ -1,151 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipContainer = exports.TitleContainer = exports.Title = exports.LegendLabel = exports.LegendItem = exports.LegendContainer = exports.LegendColorBox = exports.HeatmapWrapper = exports.HeatmapContainer = exports.BarsContainer = exports.BarWrapper = exports.BarLabel = exports.BarContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _framerMotion = require("framer-motion");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const HeatmapContainer = exports.HeatmapContainer = _styledComponents.default.div`
-
-  display: flex;  
-  flex-direction: column;  
-  justify-content: flex-start;  
-  position: relative;
-  height: ${props => props.height};
-  width: 100%;  
-  font-family: "Poppins", sans-serif;
-  
-`;
-
-// Wrapper with padding
-const HeatmapWrapper = exports.HeatmapWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding: 20px;  
-  height: ${props => props.height};  
-`;
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start; 
-  margin: 0 0 10px 0; 
-`;
-const Title = exports.Title = _styledComponents.default.h3`
-  user-select: none;
-  text-align: left;
-  margin: 0;
-  font-family: "Poppins", sans-serif;   
-  font-weight: 400;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const BarsContainer = exports.BarsContainer = _styledComponents.default.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height:  ${props => props.height};
-`;
-const BarWrapper = exports.BarWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  /* align-items: center; */
-  justify-content: flex-start;
-  align-items: stretch; /* Ensures full vertical stretch */
-  width: ${props => props.width};
-  height: ${props => props.height};
-`;
-const BarContainer = exports.BarContainer = (0, _styledComponents.default)(_framerMotion.motion.div)`
-  background-color: ${props => props.color};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${props => props.height};
-  width: 0%; /* Starts at 0% for animation */  
-`;
-const BarLabel = exports.BarLabel = _styledComponents.default.span`
-  color: white;
-  font-size: 14px;
-  font-weight: 400; 
-  user-select: none;
-`;
-const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
-  position: absolute;
-
-  top: ${props => props.top};
-  left: ${props => props.left};  
-  transition: left 0.8s ease, top 0.8s ease;
-
-  background-color: white;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  z-index: 10;
-  font-family: "Poppins", sans-serif;
-  user-select: none;
-
-  // Make the percentage bold 
-  span {
-     font-weight: bold;
-  }
-
-  // treeangle on the bottom
-  /* &:before {
-    content: "";
-    position: absolute;
-    bottom: -12px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 12px solid white;
-  } */
-`;
-const LegendContainer = exports.LegendContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 24px; 
-  margin-top: 10px;  
-  width: 100%;  
-  flex-shrink: 0;  
-`;
-const LegendItem = exports.LegendItem = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  margin-right: 15px;
-`;
-const LegendColorBox = exports.LegendColorBox = _styledComponents.default.div`
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  background-color: ${props => props.color};
-  border-radius: 2px;
-`;
-const LegendLabel = exports.LegendLabel = _styledComponents.default.span`  
-  user-select: none;
-  font-family: "Poppins", sans-serif;
-  color: #212121;
-  font-weight: 400; 
-  font-size: 14px; 
-  @media (max-width: 1536px) {
-    font-size: 12px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;

package/dist/components/IconButton/IconButton.js

@@ -1,132 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.IconButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DownloadIcon = require("../../icons/DownloadIcon");
-var _DocumentIcon = require("../../icons/DocumentIcon");
-var _BellIcon = require("../../icons/BellIcon");
-var _ExitIcon = require("../../icons/ExitIcon");
-var _FlyIcon = require("../../icons/FlyIcon");
-var _MaintenanceIcon = require("../../icons/MaintenanceIcon");
-var _EyeIcon = require("../../icons/EyeIcon");
-var _IconButton = require("./IconButton.style");
-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; }
-/* IconButton */
-const IconButton = props => {
-  const {
-    // downloadStatus,
-    // fileName,
-    fileLink,
-    showProcess,
-    contentColor,
-    buttonText,
-    backgroundColor,
-    borderColor,
-    borderRadius,
-    iconName,
-    iconWidth,
-    iconHeight,
-    disabled,
-    onClick,
-    onCancelClick
-  } = props;
-  const [progress, setProgress] = (0, _react.useState)(0);
-  let interval;
-  const incrementProgress = () => {
-    if (showProcess && progress <= 90) {
-      interval = setInterval(() => {
-        setProgress(prevProgress => {
-          const newProgress = prevProgress + 2;
-          if (newProgress >= 90) {
-            clearInterval(interval);
-          }
-          return newProgress;
-        });
-      }, 500);
-    } else {
-      setProgress(0);
-      clearInterval(interval);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    incrementProgress();
-  }, [showProcess]);
-  const getIcon = icon => {
-    switch (icon) {
-      case 'download':
-        return <_DownloadIcon.DownloadIcon height={iconHeight} width={iconWidth} color={contentColor} />;
-      case 'document':
-        return <_DocumentIcon.DocumentIcon height={iconHeight} width={iconWidth} color={contentColor} />;
-      case 'fly':
-        return <_FlyIcon.FlyIcon height={iconHeight} width={iconWidth} color={contentColor} />;
-      case 'bell':
-        return <_BellIcon.BellIcon height={iconHeight} width={iconWidth} color={contentColor} />;
-      case 'maintenance':
-        return <_MaintenanceIcon.MaintenanceIcon height={iconHeight} width={iconWidth} color={contentColor} />;
-      case 'exit':
-        return <_ExitIcon.ExitIcon height={iconHeight} width={iconWidth} color={contentColor} />;
-      case 'eye':
-        return <_EyeIcon.EyeIcon height={iconHeight} width={iconWidth} color={contentColor} />;
-      default:
-        return '';
-    }
-  };
-  const onClickHandler = event => {
-    onClick(event);
-  };
-  const onCancelClickHandler = event => {
-    onCancelClick(event);
-  };
-  return <_IconButton.ButtonWrapper id="ButtonWrapper">
-      <_IconButton.IconButtonContainer download href={fileLink} backgroundColor={disabled ? '#E3E4E5' : backgroundColor} borderColor={disabled ? '#B1B1B1' : borderColor} borderRadius={borderRadius} color={disabled ? '#B1B1B1' : contentColor} inProgress={showProcess} progress={progress} onClick={event => {
-      onClickHandler(event);
-    }}>
-        {getIcon(iconName)}
-        {buttonText !== '' && buttonText !== undefined && <_IconButton.SpanText>{buttonText}</_IconButton.SpanText>}
-      </_IconButton.IconButtonContainer>
-
-      {showProcess && <_IconButton.CancelClick onClick={event => onCancelClickHandler(event)}>Click here to cancel</_IconButton.CancelClick>}
-    </_IconButton.ButtonWrapper>;
-};
-exports.IconButton = IconButton;
-var _default = exports.default = IconButton;
-IconButton.propTypes = {
-  // downloadStatus: PropTypes.string,
-  // fileName: PropTypes.string,
-  fileLink: _propTypes.default.string,
-  showProcess: _propTypes.default.bool,
-  buttonText: _propTypes.default.string,
-  iconName: _propTypes.default.string,
-  contentColor: _propTypes.default.string,
-  backgroundColor: _propTypes.default.string,
-  borderColor: _propTypes.default.string,
-  borderRadius: _propTypes.default.string,
-  iconHeight: _propTypes.default.number,
-  iconWidth: _propTypes.default.number,
-  disabled: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  onCancelClick: _propTypes.default.func
-};
-IconButton.defaultProps = {
-  // downloadStatus: '',
-  // fileName: '',
-  fileLink: '',
-  showProcess: false,
-  buttonText: '',
-  iconName: 'eye',
-  contentColor: '#212121',
-  backgroundColor: '#FFFFFF',
-  borderColor: '#B1B1B1',
-  borderRadius: '12px',
-  iconHeight: 18,
-  iconWidth: 18,
-  disabled: false,
-  onClick: () => {},
-  onCancelClick: () => {}
-};

package/dist/components/IconButton/IconButton.stories.js

@@ -1,126 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Maintenance = exports.Exit = exports.DownloadProcess = exports.Download = exports.Document = exports.Bell = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _IconButton = require("./IconButton");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG/IconButton',
-  component: _IconButton.IconButton,
-  tags: ['autodocs'],
-  argTypes: {
-    iconName: {
-      name: 'Icon Name',
-      options: ['download', 'document', 'fly', 'bell', 'maintenance', 'exit', 'eye'],
-      control: {
-        type: 'select'
-      },
-      description: 'select icon from list to fill into the button'
-    },
-    buttonText: {
-      name: 'buttonText',
-      control: {
-        type: 'text'
-      },
-      description: 'Button text aside icon'
-    },
-    iconWidth: {
-      name: 'Icon Width',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'width of the icon (in px)'
-    },
-    iconHeight: {
-      name: 'Icon Height',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'height of the icon (in px)'
-    },
-    showProcess: {
-      name: 'Show Process',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Add visual progress on the button'
-    },
-    disabled: {
-      name: 'Disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'changes the button to be enabled/disabled'
-    },
-    // downloadStatus: {
-    //   name: 'Download status',
-    //   control: { type: 'radio' },
-    //   options: ['in progress', 'success', 'fail'],
-    //   defaultValue: 'success',
-    //   description: 'The state of the button when progress exist',
-    // },
-
-    onClick: {
-      action: 'onClick',
-      description: 'returns an event click object when user clicks on a button'
-    }
-  }
-};
-const Template = args => <_IconButton.IconButton {...args} />;
-const Exit = exports.Exit = Template.bind({});
-Exit.args = {
-  iconName: 'exit',
-  iconWidth: 30,
-  iconHeight: 30,
-  showProcess: false,
-  disabled: false
-};
-const Download = exports.Download = Template.bind({});
-Download.args = {
-  iconName: 'download',
-  iconWidth: 30,
-  iconHeight: 30,
-  showProcess: false,
-  disabled: false
-};
-const DownloadProcess = exports.DownloadProcess = Template.bind({});
-Download.args = {
-  iconName: 'download',
-  iconWidth: 30,
-  iconHeight: 30,
-  buttonText: 'Download',
-  // downloadStatus: 'in progress',
-  showProcess: true,
-  disabled: false
-};
-const Document = exports.Document = Template.bind({});
-Document.args = {
-  iconName: 'document',
-  iconWidth: 18,
-  iconHeight: 18,
-  showProcess: false,
-  disabled: false
-};
-const Bell = exports.Bell = Template.bind({});
-Bell.args = {
-  iconName: 'bell',
-  iconWidth: 60,
-  iconHeight: 60,
-  showProcess: false,
-  disabled: false
-};
-const Maintenance = exports.Maintenance = Template.bind({});
-Maintenance.args = {
-  iconName: 'maintenance',
-  iconWidth: 40,
-  iconHeight: 40,
-  showProcess: false,
-  disabled: false
-};

package/dist/components/IconButton/IconButton.style.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SpanText = exports.IconButtonContainer = exports.CancelClick = exports.ButtonWrapper = 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 ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div`
-  width: fit-content;
-  text-align: center;
-`;
-const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a`
-  font-size: 14px;
-  font-weight: 400;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 20px;
-  text-decoration: none;
-  color: ${props => props.color};
-  border-radius: ${props => props.borderRadius};
-  border: 1px solid ${props => props.borderColor.toString()};
-  background: ${props => props.backgroundColor.toString()};
-  position: relative;
-  transition: all .3s;
-  ${props => props.inProgress && (0, _styledComponents.css)`
-      pointer-events: none;
-      &:after {
-        content: 'In progress';
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-wrap: nowrap;
-        position: absolute;
-        background: linear-gradient(
-          to right,
-          #5FCC70 ${props.progress}%,
-          #B1B1B1 ${props.progress + 1}%,
-          #B1B1B1 100%
-        );
-        width: 100%;
-        height: 100%;
-        border-radius: ${props => props.borderRadius};
-        border-width: 0;
-        z-index: 9;
-      }
-    `}
-  &:hover, &:focus {
-    cursor: pointer;
-    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
-  }
-`;
-const SpanText = exports.SpanText = _styledComponents.default.span`
-`;
-const CancelClick = exports.CancelClick = _styledComponents.default.span`
-  display: inherit;
-  font-family: "Lato", sans-serif;;
-  font-size: 14px;
-  color: #568202;
-  cursor: pointer;
-  margin-top: 5px;
-`;