sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/ReportTable/ReportTable.js

@@ -1,412 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ReportTable = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CheckBoxCheckedIcon = require("../../icons/CheckBoxCheckedIcon");
-var _CheckBoxNotCheckedIcon = require("../../icons/CheckBoxNotCheckedIcon");
-var _SortIcon = require("../../icons/SortIcon");
-var _LinkButton = _interopRequireDefault(require("../LinkButton/LinkButton"));
-var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-var _ReportTable = require("./ReportTable.style");
-var _InfoIcon = require("../../icons/InfoIcon");
-var _ChevronLeftIcon = require("../../icons/ChevronLeftIcon");
-var _ChevronRightIcon = require("../../icons/ChevronRightIcon");
-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 ReportTable = props => {
-  const {
-    tableData,
-    maxColumnsNumber,
-    useColorLinearGradient,
-    useSelectButtons,
-    disableSelectButtons,
-    disableInfo,
-    selectTextColor,
-    onSelectRowClick,
-    onAllRowsCheckBoxClick,
-    onCheckRowClick,
-    buttonText,
-    enableHover,
-    enablePagination,
-    selectHoverColor,
-    buttonIconName,
-    useCheckBoxes,
-    width,
-    height,
-    className,
-    limit,
-    currentPage,
-    totalPages,
-    totalTableResults,
-    onPageChange,
-    isLoading,
-    onSortChangeCallback,
-    onSortReset
-  } = props;
-  const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
-  const [AllRowsChecked, setAllRowsChecked] = (0, _react.useState)(false);
-  const getPaginatedRows = () => {
-    return FormattedTableData.rowsValues;
-  };
-  const handlePageChange = newPage => {
-    onPageChange(newPage);
-  };
-  const getRecordRangeDisplay = () => {
-    const startRecord = (currentPage - 1) * limit + 1;
-    const endRecord = currentPage * limit;
-    const totalRecords = totalTableResults;
-    return `Showing ${startRecord}-${endRecord} of ${totalRecords}`;
-  };
-  (0, _react.useEffect)(() => {
-    if (!tableData || !tableData.columnsHeadings || !tableData.rowsValues) {
-      return;
-    }
-    const newTableData = {
-      columnsHeadings: [],
-      rowsValues: []
-    };
-    if (useCheckBoxes && !newTableData.columnsHeadings?.some(item => item.label === "checkbox" && item.key === "checkbox")) {
-      newTableData.columnsHeadings.push({
-        label: "checkbox",
-        key: "checkbox"
-      });
-    }
-    tableData?.columnsHeadings?.forEach(item => {
-      newTableData.columnsHeadings.push(item);
-    });
-    if (useSelectButtons && !newTableData.columnsHeadings?.some(item => item.label === "button" && item.key === "button")) {
-      newTableData.columnsHeadings.push({
-        label: "button",
-        key: "button"
-      });
-    }
-    const newRowValues = tableData.rowsValues?.map(item => useCheckBoxes ? {
-      checkbox: "checkbox",
-      ...item
-    } : item);
-    const newRowValuesStep2 = newRowValues?.map(item => useSelectButtons ? {
-      ...item,
-      button: "button"
-    } : item);
-    const newRowValuesStep3 = newRowValuesStep2?.map(item => useCheckBoxes ? {
-      ...item,
-      checkboxState: false
-    } : item);
-    const newRowValuesStep4 = newRowValuesStep3?.map((item, index) => ({
-      ...item
-    }));
-    newTableData.rowsValues = newRowValuesStep4;
-    setFormattedTableData(newTableData);
-  }, [tableData, useSelectButtons, useCheckBoxes]);
-  const columnsNumber = tableData.columnsHeadings.length;
-  const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
-  const handleSelectButtonRowClick = row => {
-    const {
-      checkbox: propToRemove,
-      ...rest
-    } = row;
-    const {
-      button: propToRemove2,
-      ...rest2
-    } = rest;
-    const {
-      checkboxState: propToRemove3,
-      ...rest3
-    } = rest2;
-    onSelectRowClick(rest3);
-  };
-  const handleHeaderCheckBoxClick = () => {
-    setAllRowsChecked(!AllRowsChecked);
-    const updatedTableHeaderRowsData = FormattedTableData?.rowsValues?.map(item => ({
-      ...item,
-      checkboxState: !AllRowsChecked
-    }));
-    setFormattedTableData({
-      ...FormattedTableData,
-      rowsValues: updatedTableHeaderRowsData
-    });
-    onAllRowsCheckBoxClick({
-      AllRowsChecked: !AllRowsChecked
-    });
-  };
-  const handleRowCheckBoxClick = row => {
-    if (!row) return;
-    const updatedRow = {
-      ...row,
-      checkboxState: !row?.checkboxState
-    };
-    const updatedTableRowsData = FormattedTableData?.rowsValues?.map(item => item.index === row.index ? updatedRow : item);
-    setFormattedTableData({
-      ...FormattedTableData,
-      rowsValues: updatedTableRowsData
-    });
-    const {
-      checkbox: propToRemove,
-      ...rest
-    } = updatedRow;
-    const {
-      button: propToRemove2,
-      ...rest2
-    } = rest;
-    onCheckRowClick(rest2);
-  };
-  const displaySelectButton = rowData => <_LinkButton.default disabled={disableSelectButtons} onClick={e => handleSelectButtonRowClick(rowData)} rightIcon={buttonIconName} size="medium" text={buttonText || "Select"} textColor={selectTextColor} />;
-  const displayCheckBox = (rowData, isHeader) => <_ReportTable.SelectCheckboxContainer className="SelectCheckboxContainer">
-      <_ReportTable.SelectCheckboxSubContainer className="SelectCheckboxSubContainer" selectTextColor={selectTextColor} onClick={() => isHeader ? handleHeaderCheckBoxClick() : handleRowCheckBoxClick(rowData)}>
-        {!isHeader && rowData?.checkboxState || isHeader && AllRowsChecked ? <_CheckBoxCheckedIcon.CheckBoxCheckedIcon className="CheckBoxCheckedIcon" width="14px" height="14px" color={selectTextColor} /> : <_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon className="CheckBoxNotCheckedIcon" width="14px" height="14px" color="#212121" />}
-      </_ReportTable.SelectCheckboxSubContainer>
-    </_ReportTable.SelectCheckboxContainer>;
-  const getMaxColnumber = () => {
-    let colNumber = maxColumnsNumber;
-    if (useSelectButtons) {
-      colNumber = +1;
-    }
-    if (useCheckBoxes) {
-      colNumber = +1;
-    }
-    return colNumber;
-  };
-  const getTooltipText = value => <_ReportTable.TooltipWrapper>{value}</_ReportTable.TooltipWrapper>;
-  const truncateString = (str, maxLength) => {
-    let val = str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
-    return val;
-  };
-  const getTopFactor = ows => {
-    let topFactor;
-    switch (ows) {
-      case 1:
-        topFactor = 0.8;
-        break;
-      case 2:
-        topFactor = 1.3;
-        break;
-      case 3:
-        topFactor = 1.7;
-        break;
-      case 4:
-        topFactor = 2;
-        break;
-      case 5:
-        topFactor = 2.2;
-        break;
-      default:
-        topFactor = 0;
-    }
-    return topFactor;
-  };
-  const [activeSortState, setActiveSortState] = (0, _react.useState)({});
-  (0, _react.useEffect)(() => {
-    if (activeSortState) {
-      Object.entries(activeSortState).forEach(([key, value]) => {
-        if (value === "asc" || value === "desc") {
-          onSortChangeCallback(key, value);
-        } else {
-          onSortReset();
-        }
-      });
-    }
-  }, [activeSortState]);
-  const handleButtonClick = columnKey => {
-    setActiveSortState(prevState => {
-      const currentSortState = prevState[columnKey] || "none";
-      const nextSortState = currentSortState === "none" ? "asc" : currentSortState === "asc" ? "desc" : "none";
-      const newState = {
-        [columnKey]: nextSortState
-      };
-      return newState;
-    });
-  };
-  return <_ReportTable.ReportTableWrapper>
-      <_ReportTable.TableWrapper width={width} height={height} className={className} maxColumnsNumber={getMaxColnumber()} columnsNumber={columnsNumber}>
-        <_ReportTable.Table tableWidthSize={tableWidthSize}>
-          <thead>
-            <_ReportTable.Tr>
-              {tableData.columnsHeadings.map((headline, index) => <_ReportTable.Th key={index}>
-                  <div>
-                    <span>{headline.label}</span>
-                    {headline.sortable && <button style={{
-                  border: "none",
-                  background: "none",
-                  boxShadow: "none",
-                  padding: "0"
-                }} onClick={() => handleButtonClick(headline.key)}>
-                        <_SortIcon.SortIcon width={"16px"} height={"16px"} fillUpperArrow={activeSortState[headline.key] === "asc" ? "#229E38" : "#D0D0D0"} fillLowerArrow={activeSortState[headline.key] === "desc" ? "#229E38" : "#D0D0D0"} />
-                      </button>}
-                  </div>
-                </_ReportTable.Th>)}
-            </_ReportTable.Tr>
-          </thead>
-          <tbody>
-            {getPaginatedRows().map((rowData, index) => <_ReportTable.Tr className="row" key={index} enableHover={enableHover} selectHoverColor={selectHoverColor} useColorLinearGradient={useColorLinearGradient}>
-                {Object.values(rowData).map((value, dataIndex) => value === "checkbox" ? <_ReportTable.Td className="checkbox" key={index}>
-                      {displayCheckBox(rowData, false)}
-                    </_ReportTable.Td> : value === "button" ? <_ReportTable.Td className="button" key={index}>
-                      {displaySelectButton(rowData)}
-                    </_ReportTable.Td> : <_ReportTable.Td className="cell" key={dataIndex}>
-                      {value && value.length > 30 ? <_Tooltip.default content={getTooltipText(value)} direction="top" topFactor={value !== null ? -getTopFactor(Math.ceil(value.length / 50)) : -getTopFactor(1)}>
-                          {truncateString(value, 30)}
-                        </_Tooltip.default> : value ? truncateString(value, 30) : "N/A"}{" "}
-                    </_ReportTable.Td>)}
-              </_ReportTable.Tr>)}
-          </tbody>
-        </_ReportTable.Table>
-      </_ReportTable.TableWrapper>
-
-      <_ReportTable.PaginationWrapper>
-        {enablePagination && <_ReportTable.RecordDisplay>{getRecordRangeDisplay()}</_ReportTable.RecordDisplay>}
-
-        {enablePagination && <_ReportTable.PaginationContainer>
-            {totalPages > 0 && <>
-                <span className={`arrow ${currentPage === 1 ? "disabled" : ""}`} onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}>
-                  <_ChevronLeftIcon.ChevronLeftIcon disabled={currentPage === 1} />
-                </span>
-                {(() => {
-            const pages = [];
-            const range = 2;
-            pages.push(<span key={1} className={`page-number ${currentPage === 1 ? "active" : ""}`} onClick={() => handlePageChange(1)}>
-                      1
-                    </span>);
-            if (totalPages === 1) {
-              return pages;
-            }
-            if (totalPages <= 10) {
-              for (let i = 2; i <= totalPages; i++) {
-                pages.push(<span key={i} className={`page-number ${currentPage === i ? "active" : ""}`} onClick={() => handlePageChange(i)}>
-                          {i}
-                        </span>);
-              }
-              return pages;
-            }
-            let start = Math.max(2, currentPage - range);
-            let end = Math.min(totalPages - 1, currentPage + range);
-            if (currentPage <= 3) {
-              start = 2;
-              end = 5;
-            }
-            if (currentPage >= totalPages - 2) {
-              start = totalPages - 4;
-              end = totalPages - 1;
-            }
-            if (start > 2) {
-              pages.push(<span key="ellipsis-start">...</span>);
-            }
-            for (let i = start; i <= end; i++) {
-              pages.push(<span key={i} className={`page-number ${currentPage === i ? "active" : ""}`} onClick={() => handlePageChange(i)}>
-                        {i}
-                      </span>);
-            }
-            if (end < totalPages - 1) {
-              pages.push(<span key="ellipsis-end">...</span>);
-            }
-            pages.push(<span key={totalPages} className={`page-number ${currentPage === totalPages ? "active" : ""}`} onClick={() => handlePageChange(totalPages)}>
-                      {totalPages}
-                    </span>);
-            return pages;
-          })()}
-                <span className={`arrow ${currentPage === totalPages ? "disabled" : ""}`} onClick={() => currentPage < totalPages && handlePageChange(currentPage + 1)}>
-                  <_ChevronRightIcon.ChevronRightIcon disabled={currentPage === totalPages} />
-                </span>
-              </>}
-          </_ReportTable.PaginationContainer>}
-      </_ReportTable.PaginationWrapper>
-
-      {isLoading && enablePagination && <_ReportTable.LoaderWrapper id="LoaderWrapper">
-          <_ReportTable.Loader loaderColor="#1B30AA" />
-        </_ReportTable.LoaderWrapper>}
-      {!disableInfo ? <_ReportTable.InfoBlock>
-          <_InfoIcon.InfoIcon color="#1B30AA" />
-          <_ReportTable.InfoText>Download table to get the full data</_ReportTable.InfoText>
-        </_ReportTable.InfoBlock> : ""}
-    </_ReportTable.ReportTableWrapper>;
-};
-exports.ReportTable = ReportTable;
-var _default = exports.default = ReportTable;
-ReportTable.propTypes = {
-  buttonText: _propTypes.default.string,
-  buttonIconName: _propTypes.default.string,
-  tableData: _propTypes.default.shape({
-    columnsHeadings: _propTypes.default.arrayOf(_propTypes.default.shape({
-      label: _propTypes.default.string,
-      key: _propTypes.default.string
-    })),
-    rowsValues: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.string))
-  }),
-  maxColumnsNumber: _propTypes.default.number,
-  useColorLinearGradient: _propTypes.default.bool,
-  useSelectButtons: _propTypes.default.bool,
-  disableSelectButtons: _propTypes.default.bool,
-  disableInfo: _propTypes.default.bool,
-  selectTextColor: _propTypes.default.string,
-  onSelectRowClick: _propTypes.default.func,
-  onCheckRowClick: _propTypes.default.func,
-  onAllRowsCheckBoxClick: _propTypes.default.func,
-  useCheckBoxes: _propTypes.default.bool,
-  selectHoverColor: _propTypes.default.string,
-  enableHover: _propTypes.default.bool,
-  enablePagination: _propTypes.default.bool
-};
-ReportTable.defaultProps = {
-  buttonText: "Select",
-  buttonIconName: "select",
-  tableData: {
-    columnsHeadings: [{
-      label: "Event Name",
-      key: "eventName"
-    }, {
-      label: "Retailer",
-      key: "retailer"
-    }, {
-      label: "Total Cost",
-      key: "totalCost"
-    }, {
-      label: "Inc. Baseline Sales",
-      key: "incBaselineSales"
-    }],
-    rowsValues: [{
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "Food Lion",
-      incBaselineSales: "50K"
-    }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
-    }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
-    }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
-    }]
-  },
-  maxColumnsNumber: 4,
-  useColorLinearGradient: true,
-  enableHover: false,
-  enablePagination: true,
-  selectHoverColor: "#EDF6FF",
-  useSelectButtons: false,
-  disableSelectButtons: false,
-  disableInfo: false,
-  selectTextColor: "#229E38",
-  onSelectRowClick: () => {},
-  onCheckRowClick: () => {},
-  onAllRowsCheckBoxClick: () => {},
-  useCheckBoxes: false,
-  limit: 10,
-  currentPage: 1,
-  totalPages: 25,
-  totalTableResults: 250,
-  isLoading: false,
-  onSortChangeCallback: () => {},
-  onSortReset: () => {}
-};

package/dist/components/ReportTable/ReportTable.stories.js

@@ -1,255 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SelectButtonsStyle = exports.SelectButtonsDisabledStyle = exports.RegularTableStyle = exports.PreviewStyle = exports.CheckBoxStyle = exports.CheckBoxAndSelectButtonStyle = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ReportTable = require("./ReportTable");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const tableData1 = {
-  columnsHeadings: [{
-    label: "Event Name",
-    key: "eventName",
-    sortable: true
-  }, {
-    label: "Retailer",
-    key: "retailer",
-    sortable: true
-  }, {
-    label: "Total Cost",
-    key: "totalCost",
-    sortable: true
-  }, {
-    label: "Inc. Baseline Sales",
-    key: "incBaselineSales",
-    sortable: true
-  }],
-  rowsValues: [{
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: null,
-    totalCost: "$200K",
-    incBaselineSales: "20K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$500K",
-    incBaselineSales: "50K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$700K",
-    incBaselineSales: "70K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$600K",
-    incBaselineSales: "60K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$200K",
-    incBaselineSales: "20K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$500K",
-    incBaselineSales: "50K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$700K",
-    incBaselineSales: "70K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$600K",
-    incBaselineSales: "60K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$200K",
-    incBaselineSales: "20K"
-  }, {
-    retailer: "Large Selling Event P2 2023",
-    eventDescription: "Food",
-    totalCost: "$500K",
-    incBaselineSales: "50K"
-  }]
-};
-var _default = exports.default = {
-  title: "SAG BI/ReportTable",
-  component: _ReportTable.ReportTable,
-  tags: ["autodocs"],
-  argTypes: {
-    title: {
-      name: "Title",
-      control: {
-        type: "text"
-      },
-      description: "value of the main title",
-      defaultValue: ""
-    }
-  },
-  limit: {
-    name: "limit",
-    control: {
-      type: "number"
-    },
-    defaultValue: false
-  },
-  page: {
-    name: "page",
-    control: {
-      type: "number"
-    },
-    defaultValue: false
-  },
-  totalPages: {
-    name: "totalPages",
-    control: {
-      type: "number"
-    },
-    defaultValue: false
-  },
-  totalTableResults: {
-    name: "totalTableResults",
-    control: {
-      type: "number"
-    },
-    defaultValue: false
-  },
-  isLoading: {
-    name: "isLoading",
-    control: {
-      type: "boolean"
-    },
-    defaultValue: false
-  },
-  enableHover: {
-    name: "enableHover",
-    control: {
-      type: "boolean"
-    },
-    defaultValue: false
-  },
-  enablePagination: {
-    name: "enablePagination",
-    control: {
-      type: "boolean"
-    },
-    defaultValue: true
-  },
-  selectHoverColor: {
-    name: "selectHoverColor",
-    description: "Sets the hover color",
-    control: {
-      type: "color",
-      presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-    }
-  },
-  selectTextColor: {
-    name: "selectTextColor",
-    description: "Sets the select buttons color",
-    control: {
-      type: "color",
-      presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-    }
-  },
-  disableSelectButtons: {
-    name: "disableSelectButtons",
-    control: {
-      type: "boolean"
-    },
-    description: "changes all select buttons to be enabled/disabled",
-    defaultValue: ""
-  }
-};
-const Template = args => <_ReportTable.ReportTable {...args} />;
-const PreviewStyle = exports.PreviewStyle = Template.bind({});
-PreviewStyle.args = {
-  title: "Existing Repeaters (post event)",
-  maxColumnsNumber: 3,
-  useColorLinearGradient: true,
-  useSelectButtons: false,
-  disableInfo: false,
-  selectTextColor: "#229E38",
-  selectHoverColor: "#EDF6FF",
-  tableData: tableData1,
-  useCheckBoxes: false,
-  enableHover: false,
-  enablePagination: true
-};
-const RegularTableStyle = exports.RegularTableStyle = Template.bind({});
-RegularTableStyle.args = {
-  title: "Existing Repeaters (post event)",
-  maxColumnsNumber: 4,
-  useColorLinearGradient: false,
-  useSelectButtons: false,
-  disableInfo: true,
-  selectHoverColor: "#EDF6FF",
-  selectTextColor: "#229E38",
-  tableData: tableData1,
-  useCheckBoxes: false,
-  enableHover: false,
-  enablePagination: true
-};
-const SelectButtonsStyle = exports.SelectButtonsStyle = Template.bind({});
-SelectButtonsStyle.args = {
-  title: "Existing Repeaters (post event)",
-  maxColumnsNumber: 4,
-  useColorLinearGradient: false,
-  useSelectButtons: true,
-  disableInfo: true,
-  selectHoverColor: "#EDF6FF",
-  selectTextColor: "#229E38",
-  tableData: tableData1,
-  useCheckBoxes: false,
-  buttonIconName: "select",
-  disableSelectButtons: true,
-  enableHover: false,
-  enablePagination: true
-};
-const CheckBoxStyle = exports.CheckBoxStyle = Template.bind({});
-CheckBoxStyle.args = {
-  title: "Existing Repeaters (post event)",
-  maxColumnsNumber: 4,
-  useColorLinearGradient: false,
-  useSelectButtons: false,
-  disableInfo: true,
-  selectHoverColor: "#EDF6FF",
-  selectTextColor: "#229E38",
-  tableData: tableData1,
-  useCheckBoxes: false,
-  enableHover: false,
-  enablePagination: true
-};
-const CheckBoxAndSelectButtonStyle = exports.CheckBoxAndSelectButtonStyle = Template.bind({});
-CheckBoxAndSelectButtonStyle.args = {
-  title: "Existing Repeaters (post event)",
-  maxColumnsNumber: 4,
-  useColorLinearGradient: false,
-  useSelectButtons: true,
-  disableInfo: true,
-  selectHoverColor: "#EDF6FF",
-  selectTextColor: "#229E38",
-  tableData: tableData1,
-  useCheckBoxes: false,
-  enableHover: false,
-  enablePagination: true
-};
-const SelectButtonsDisabledStyle = exports.SelectButtonsDisabledStyle = Template.bind({});
-CheckBoxAndSelectButtonStyle.args = {
-  title: "Existing Repeaters (post event)",
-  maxColumnsNumber: 4,
-  useColorLinearGradient: false,
-  useSelectButtons: true,
-  disableSelectButtons: true,
-  disableInfo: true,
-  selectHoverColor: "#EDF6FF",
-  selectTextColor: "#229E38",
-  tableData: tableData1,
-  useCheckBoxes: false,
-  enableHover: false,
-  enablePagination: true
-};