@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.11

package/dist/components/AdminDashboard/Table/ReactTable.stories.js

@@ -1,406 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ReactTable = require("./ReactTable");
-var _ReactTableWrapper = require("./ReactTableWrapper");
-var _global = _interopRequireDefault(require("../../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _default = exports.default = {
-  title: 'Components Library/React table',
-  component: _ReactTable.ReactTable,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A flexible and customizable data table component with sorting, pagination, and custom styling options.'
-      }
-    }
-  },
-  argTypes: {
-    data: {
-      control: 'object'
-    },
-    columns: {
-      control: 'object'
-    },
-    noPagination: {
-      control: 'boolean'
-    },
-    blue: {
-      control: 'boolean'
-    },
-    withSubTable: {
-      control: 'boolean'
-    },
-    customTdStyles: {
-      control: 'function'
-    },
-    customThStyles: {
-      control: 'function'
-    },
-    customRowHoverStyles: {
-      control: 'function'
-    },
-    customRowHoverContent: {
-      control: 'function'
-    }
-  }
-}; // Sample columns and data for demonstration
-const columns = [{
-  Header: 'ID',
-  accessor: 'id',
-  width: '10%',
-  minWidth: '80px'
-}, {
-  Header: 'Name',
-  accessor: 'name',
-  width: '30%',
-  minWidth: '150px'
-}, {
-  Header: 'Status',
-  accessor: 'status',
-  width: '20%',
-  minWidth: '100px'
-}, {
-  Header: '',
-  accessor: 'dropdown',
-  width: '40%',
-  minWidth: '120px'
-}];
-const columnsWrapper = [{
-  label: 'ID',
-  key: 'id',
-  width: '10%',
-  minWidth: '80px'
-}, {
-  label: 'Name',
-  key: 'name',
-  width: '30%',
-  minWidth: '150px'
-}, {
-  label: 'Status',
-  key: 'status',
-  width: '20%',
-  minWidth: '100px'
-}, {
-  label: '',
-  key: 'dropdown',
-  width: '40%',
-  minWidth: '120px'
-}];
-const subColumns = [{
-  Header: 'Detail ID',
-  accessor: 'detailId'
-}, {
-  Header: 'Detail Name',
-  accessor: 'detailName'
-}];
-const subColumnsWrapper = [{
-  label: 'Detail ID',
-  key: 'detailId'
-}, {
-  label: 'Detail Name',
-  key: 'detailName'
-}];
-const data = [{
-  id: 1,
-  name: 'Alice',
-  status: 'Active',
-  subData: [{
-    detailId: 101,
-    detailName: 'Detail A1'
-  }, {
-    detailId: 102,
-    detailName: 'Detail A2'
-  }]
-}, {
-  id: 2,
-  name: 'Bob',
-  status: 'Inactive',
-  subData: [{
-    detailId: 201,
-    detailName: 'Detail B1'
-  }, {
-    detailId: 202,
-    detailName: 'Detail B2'
-  }]
-}, {
-  id: 3,
-  name: 'Carol',
-  status: 'Active',
-  subData: []
-}, {
-  id: 4,
-  name: 'Dave',
-  status: 'Pending',
-  subData: []
-}];
-
-// Custom styling functions
-const customTdStyles = (index, row, column) => {
-  if (index === 0) {
-    return {
-      backgroundColor: 'lightblue',
-      fontWeight: 'bold',
-      paddingBottom: 0
-    };
-  }
-  if (row.status === 'Inactive') {
-    return {
-      backgroundColor: 'lightgray'
-    };
-  }
-  if (row.status === 'Pending') {
-    return {
-      backgroundColor: 'lightyellow'
-    };
-  }
-  return {}; // default style
-};
-const customThStyles = column => {
-  return {
-    backgroundColor: 'lightblue'
-  };
-};
-
-// Custom row hover styles function
-const customRowHoverStyles = (rowIndex, rowData) => {
-  return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    transition: all 0.2s ease-in-out;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    \n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
-};
-
-// Custom row hover content function
-const customRowHoverContent = (columnId, rowIndex, rowData) => {
-  switch (columnId) {
-    case 'name':
-      // Show underlined link on hover
-      return /*#__PURE__*/_react.default.createElement("a", {
-        href: "/user/".concat(rowData.id),
-        style: {
-          textDecoration: 'underline',
-          color: '#0050ca',
-          fontWeight: 'bold'
-        }
-      }, rowData.name);
-    case 'dropdown':
-      // Show action buttons on hover
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          display: 'flex',
-          gap: '8px'
-        }
-      }, /*#__PURE__*/_react.default.createElement("button", {
-        style: {
-          padding: '4px 8px',
-          fontSize: '12px',
-          backgroundColor: '#0050ca',
-          color: 'white',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer'
-        },
-        onClick: () => alert("Edit ".concat(rowData.name))
-      }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
-        style: {
-          padding: '4px 8px',
-          fontSize: '12px',
-          backgroundColor: '#dc3545',
-          color: 'white',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer'
-        },
-        onClick: () => alert("Delete ".concat(rowData.name))
-      }, "Delete"));
-    case 'status':
-      // Show status with icon on hover
-      const statusColors = {
-        Active: '#28a745',
-        Inactive: '#dc3545',
-        Pending: '#ffc107'
-      };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px'
-        }
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        style: {
-          width: '8px',
-          height: '8px',
-          borderRadius: '50%',
-          backgroundColor: statusColors[rowData.status] || '#6c757d'
-        }
-      }), rowData.status);
-    default:
-      return undefined;
-    // Return undefined to use default content
-  }
-};
-
-// Status-based hover styles
-const statusBasedHoverStyles = (rowIndex, rowData) => {
-  switch (rowData.status) {
-    case 'Active':
-      return "\n        background-color: #e8f5e8 !important;\n        td {\n          background-color: #e8f5e8 !important;\n          border-bottom-color: #28a745 !important;\n        }\n      ";
-    case 'Inactive':
-      return "\n        background-color: #ffe8e8 !important;\n        td {\n          background-color: #ffe8e8 !important;\n          border-bottom-color: #dc3545 !important;\n        }\n      ";
-    case 'Pending':
-      return "\n        background-color: #fff3cd !important;\n        td {\n          background-color: #fff3cd !important;\n          border-bottom-color: #ffc107 !important;\n        }\n      ";
-    default:
-      return "\n        background-color: #f8f9fa !important;\n        td {\n          background-color: #f8f9fa !important;\n        }\n      ";
-  }
-};
-
-// Row-specific hover styles (example: different styles for first and last rows)
-const rowSpecificHoverStyles = (rowIndex, rowData) => {
-  // Special styling for first row
-  if (rowIndex === 0) {
-    return "\n      background-color: #e3f2fd !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n      td {\n        background-color: #e3f2fd !important;\n        border-bottom-color: #2196f3 !important;\n        font-weight: bold;\n      }\n    ";
-  }
-
-  // Special styling for last row
-  if (rowIndex === data.length - 1) {
-    return "\n      background-color: #f3e5f5 !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);\n      td {\n        background-color: #f3e5f5 !important;\n        border-bottom-color: #9c27b0 !important;\n        font-weight: bold;\n      }\n    ";
-  }
-
-  // Default styling for other rows
-  return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
-};
-
-// Function to calculate sub data
-const calculateSubData = row => {
-  return row.original.subData || [];
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, args));
-const TemplateWrapper = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTableWrapper.ReactTableWrapper, args));
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  columns: columns,
-  data: data,
-  noPagination: false
-};
-const WithoutPagination = exports.WithoutPagination = Template.bind({});
-WithoutPagination.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  noPagination: true
-});
-const WithCustomStyling = exports.WithCustomStyling = Template.bind({});
-WithCustomStyling.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customTdStyles: customTdStyles,
-  customThStyles: customThStyles
-});
-const WithRowHover = exports.WithRowHover = Template.bind({});
-WithRowHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: customRowHoverStyles
-});
-const WithHoverContent = exports.WithHoverContent = Template.bind({});
-WithHoverContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverContent: customRowHoverContent
-});
-const WithHoverStylesAndContent = exports.WithHoverStylesAndContent = Template.bind({});
-WithHoverStylesAndContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: customRowHoverStyles,
-  customRowHoverContent: customRowHoverContent
-});
-const WithStatusBasedHover = exports.WithStatusBasedHover = Template.bind({});
-WithStatusBasedHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: statusBasedHoverStyles
-});
-const WithRowSpecificHover = exports.WithRowSpecificHover = Template.bind({});
-WithRowSpecificHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: rowSpecificHoverStyles
-});
-const WithFixedColumnWidths = exports.WithFixedColumnWidths = Template.bind({});
-WithFixedColumnWidths.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverContent: customRowHoverContent,
-  customRowHoverStyles: customRowHoverStyles
-});
-const WithSubTable = exports.WithSubTable = Template.bind({});
-WithSubTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  withSubTable: true,
-  subColumns: subColumns,
-  calculateSubData: calculateSubData
-});
-const BlueTable = exports.BlueTable = Template.bind({});
-BlueTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  blue: true
-});
-
-// Wrapper examples
-const DefaultWrapper = exports.DefaultWrapper = TemplateWrapper.bind({});
-DefaultWrapper.args = {
-  columns: columnsWrapper,
-  data: data,
-  noPagination: false
-};
-const WrapperWithSubTable = exports.WrapperWithSubTable = TemplateWrapper.bind({});
-WrapperWithSubTable.args = {
-  columns: columnsWrapper,
-  data: data,
-  withSubTable: true,
-  subColumns: subColumnsWrapper,
-  calculateSubData: calculateSubData
-};
-const BlueWrapper = exports.BlueWrapper = TemplateWrapper.bind({});
-BlueWrapper.args = {
-  columns: columnsWrapper,
-  data: data,
-  blue: true
-};
-
-// Box-style table example
-const BoxStyleTable = exports.BoxStyleTable = Template.bind({});
-BoxStyleTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowStyles: (rowIndex, rowData) => {
-    // return {
-    //   border: '1px solid #e1e1e1',
-    //   borderRadius: '8px',
-    //   marginBottom: '12px',
-    //   borderRight: '1px solid red !important',
-
-    //   backgroundColor: '#ffffff',
-    // }
-    return "\n      border: 1px solid #e1e1e1;\n      border-radius: 8px;\n      margin-bottom: 12px;\n      background-color: #ffffff;\n\n      td{\n        border:inherit;\n        border-right:none;\n        border-left:none;\n        \n        &:first-child {\n          border-left:inherit;\n          border-top-left-radius:4px;\n          border-bottom-left-radius:4px;\n        }\n        &:last-child {\n            border-right:inherit;\n            border-top-right-radius:4px;\n            border-bottom-right-radius:4px;\n        }\n        }\n    ";
-  },
-  customRowHoverStyles: (rowIndex, rowData) => ({
-    backgroundColor: '#e1e1e1'
-  }),
-  customTableStyles: () => ({
-    borderSpacing: '0 20px'
-  })
-});
-
-// Table with custom styling
-const CustomStyledTable = exports.CustomStyledTable = Template.bind({});
-CustomStyledTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customTableStyles: () => ({
-    border: '2px solid #4caf50',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    boxShadow: '0 8px 16px rgba(76, 175, 80, 0.2)',
-    backgroundColor: '#f8fff8'
-  }),
-  customRowStyles: (rowIndex, rowData) => ({
-    backgroundColor: rowIndex % 2 === 0 ? '#ffffff' : '#f0f8f0',
-    borderBottom: '1px solid #e8f5e8'
-  }),
-  customRowHoverStyles: (rowIndex, rowData) => ({
-    backgroundColor: '#e8f5e8',
-    transform: 'scale(1.01)'
-  }),
-  customThStyles: column => ({
-    backgroundColor: '#4caf50',
-    color: '#ffffff',
-    fontWeight: 'bold',
-    textTransform: 'uppercase',
-    letterSpacing: '0.5px'
-  })
-});

package/dist/components/AgreementItem/AgreementItem.stories.js

@@ -1,105 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AgreementItemOverview = exports.AgreementItemExample = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AgreementItem = _interopRequireDefault(require("./AgreementItem"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// import Checkbox, { CheckboxPropTypes } from '../Checkbox/Checkbox'
-var _default = exports.default = {
-  title: 'Components Library/Agreement Item',
-  component: _AgreementItem.default,
-  argTypes: {
-    title: {
-      type: 'string',
-      defaultValue: ''
-    },
-    text: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    withTermsLink: {
-      type: 'boolean'
-    },
-    ventureName: {
-      type: 'string'
-    },
-    info: {
-      type: 'string',
-      defaultValue: ''
-    },
-    checkbox: {
-      type: 'shape',
-      defaultValue: {
-        id: '',
-        name: '',
-        text: '',
-        label: '',
-        value: '',
-        checked: false,
-        large: false,
-        error: false,
-        touched: false
-      }
-    },
-    checkboxWithFileDownload: {
-      type: 'shape',
-      defaultValue: {
-        id: '',
-        name: '',
-        text: '',
-        label: '',
-        value: '',
-        checked: false,
-        large: false,
-        error: false,
-        touched: false
-      }
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_AgreementItem.default, args)));
-const AgreementItemOverview = exports.AgreementItemOverview = Template.bind({});
-AgreementItemOverview.args = {
-  title: 'Agreement Item Title',
-  text: 'some Text',
-  withTermsLink: true,
-  ventureName: 'Venture Name',
-  info: 'Info'
-};
-const AgreementItemExample = exports.AgreementItemExample = Template.bind({});
-AgreementItemExample.args = {
-  title: 'disclaimer',
-  text: 'Before being able to view any fund offering, you, as a prospective investor, must confirm a few things. Please read check the boxes',
-  withTermsLink: true,
-  ventureName: 'Algorand',
-  info: 'Info',
-  checkbox: {
-    checked: true
-  },
-  checkboxWithFileDownload: {
-    checked: true
-  }
-};
-
-//doublecheck:
-// CheckboxPropTypes....
-//  events/actions not incooporated
-//     onChange: { type: 'function', action: 'onChange' },
-//     onBlur: { type: 'function', action: 'onBlur' },
-//     onFocus: { type: 'function', action: 'onFocus' },
-
-// 'Please read check the boxes to the right.' - is bad english in Disclaimer
-
-// change since Merge:
-//OfferingPageLink
-//TermsOfOfferingLink
-//withTermsLink
-// ventureName
-//checkboxwithfiledownload
-//hardcoded texts all taken out.