@stokr/components-library 2.3.63-beta.2 → 2.3.65-beta.1

package/dist/components/TransactionDetails/TransactionDetailsTable.stories.js

@@ -0,0 +1,305 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutBorders = exports.WithIcons = exports.WithCustomStyling = exports.WithContainerStyling = exports.SingleRow = exports.MultipleRows = exports.LongTextContent = exports.EmptyState = exports.CustomWidth = exports.ComplexExample = exports.Basic = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TransactionDetailsTable = require("./TransactionDetailsTable");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _InfoIcon = require("../InfoIcon/InfoIcon");
+var _Info = require("../icons/Info");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components Library/TransactionDetails/TransactionDetailsTable',
+  component: _TransactionDetailsTable.TransactionDetailsTable,
+  argTypes: {
+    data: {
+      control: 'object',
+      description: 'Array of objects with label, value, labelIcon, and valueIcon properties'
+    },
+    showBorders: {
+      control: 'boolean',
+      description: 'Show borders around the table and rows',
+      defaultValue: true
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Maximum width of the table container'
+    },
+    labelCellStyle: {
+      control: false,
+      description: 'Function that returns style object for label cells: (index, item) => style'
+    },
+    valueCellStyle: {
+      control: false,
+      description: 'Function that returns style object for value cells: (index, item) => style'
+    },
+    rowStyle: {
+      control: false,
+      description: 'Function that returns style object for rows: (index, item) => style'
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Style object for the table container'
+    },
+    className: {
+      control: 'text',
+      description: 'CSS class name for the table container'
+    },
+    labelCellClassName: {
+      control: false,
+      description: 'Function that returns className for label cells: (index, item) => className'
+    },
+    valueCellClassName: {
+      control: false,
+      description: 'Function that returns className for value cells: (index, item) => className'
+    },
+    rowClassName: {
+      control: false,
+      description: 'Function that returns className for rows: (index, item) => className'
+    }
+  },
+  decorators: [Story => /*#__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(Story, null)))]
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TransactionDetailsTable.TransactionDetailsTable, args);
+
+// Basic example
+const Basic = exports.Basic = Template.bind({});
+Basic.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234...5678'
+  }, {
+    label: 'Amount',
+    value: '1,000.00 EUR'
+  }, {
+    label: 'Status',
+    value: 'Completed'
+  }]
+};
+
+// Multiple rows
+const MultipleRows = exports.MultipleRows = Template.bind({});
+MultipleRows.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234567890abcdef'
+  }, {
+    label: 'From Address',
+    value: '0xabcd...ef01'
+  }, {
+    label: 'To Address',
+    value: '0x2345...6789'
+  }, {
+    label: 'Amount',
+    value: '5,000.00 EUR'
+  }, {
+    label: 'Gas Fee',
+    value: '0.001 ETH'
+  }, {
+    label: 'Status',
+    value: 'Completed'
+  }, {
+    label: 'Date',
+    value: '2024-01-15 14:30:00'
+  }]
+};
+
+// With icons
+const WithIcons = exports.WithIcons = Template.bind({});
+WithIcons.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234...5678',
+    labelIcon: /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+      title: "This is the unique identifier for your transaction",
+      position: "right"
+    })
+  }, {
+    label: 'Amount',
+    value: '1,000.00 EUR',
+    valueIcon: /*#__PURE__*/_react.default.createElement(_Info.Info, {
+      style: {
+        marginRight: '8px',
+        display: 'inline-block'
+      }
+    })
+  }, {
+    label: 'Status',
+    value: 'Completed'
+  }]
+};
+
+// Without borders
+const WithoutBorders = exports.WithoutBorders = Template.bind({});
+WithoutBorders.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234...5678'
+  }, {
+    label: 'Amount',
+    value: '1,000.00 EUR'
+  }, {
+    label: 'Status',
+    value: 'Completed'
+  }],
+  showBorders: false
+};
+
+// Custom width
+const CustomWidth = exports.CustomWidth = Template.bind({});
+CustomWidth.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234...5678'
+  }, {
+    label: 'Amount',
+    value: '1,000.00 EUR'
+  }, {
+    label: 'Status',
+    value: 'Completed'
+  }],
+  maxWidth: '800px'
+};
+
+// With custom styling
+const WithCustomStyling = exports.WithCustomStyling = Template.bind({});
+WithCustomStyling.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234...5678'
+  }, {
+    label: 'Amount',
+    value: '1,000.00 EUR'
+  }, {
+    label: 'Status',
+    value: 'Completed'
+  }, {
+    label: 'Priority',
+    value: 'High'
+  }],
+  rowStyle: (index, item) => {
+    if (item.value === 'Completed') {
+      return {
+        backgroundColor: _colors.default.veryLightGreen
+      };
+    }
+    if (item.value === 'High') {
+      return {
+        backgroundColor: _colors.default.lightPeach
+      };
+    }
+    return {};
+  },
+  valueCellStyle: (index, item) => {
+    if (item.value === 'Completed') {
+      return {
+        color: _colors.default.freshGreen,
+        fontWeight: 'bold'
+      };
+    }
+    return {};
+  }
+};
+
+// Long text content
+const LongTextContent = exports.LongTextContent = Template.bind({});
+LongTextContent.args = {
+  data: [{
+    label: 'Transaction Hash',
+    value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef'
+  }, {
+    label: 'Description',
+    value: 'This is a very long description that should wrap properly within the table cell and demonstrate how the component handles word wrapping and text overflow scenarios.'
+  }, {
+    label: 'Short Label',
+    value: 'Short value'
+  }]
+};
+
+// Empty state (edge case)
+const EmptyState = exports.EmptyState = Template.bind({});
+EmptyState.args = {
+  data: []
+};
+
+// Single row
+const SingleRow = exports.SingleRow = Template.bind({});
+SingleRow.args = {
+  data: [{
+    label: 'Total Amount',
+    value: '10,000.00 EUR'
+  }]
+};
+
+// With container styling
+const WithContainerStyling = exports.WithContainerStyling = Template.bind({});
+WithContainerStyling.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234...5678'
+  }, {
+    label: 'Amount',
+    value: '1,000.00 EUR'
+  }, {
+    label: 'Status',
+    value: 'Completed'
+  }],
+  containerStyle: {
+    borderRadius: '8px',
+    padding: '20px',
+    backgroundColor: _colors.default.grey3
+  }
+};
+
+// Complex example with all features
+const ComplexExample = exports.ComplexExample = Template.bind({});
+ComplexExample.args = {
+  data: [{
+    label: 'Transaction ID',
+    value: '0x1234...5678',
+    labelIcon: /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+      title: "Unique transaction identifier",
+      position: "right",
+      noMarginLeft: true
+    })
+  }, {
+    label: 'Amount',
+    value: '5,000.00 EUR',
+    valueIcon: /*#__PURE__*/_react.default.createElement(_Info.Info, {
+      style: {
+        marginRight: '8px',
+        display: 'inline-block'
+      }
+    })
+  }, {
+    label: 'Status',
+    value: 'Pending'
+  }, {
+    label: 'Gas Fee',
+    value: '0.002 ETH'
+  }, {
+    label: 'Network',
+    value: 'Ethereum Mainnet'
+  }],
+  maxWidth: '700px',
+  rowStyle: (index, item) => {
+    if (item.value === 'Pending') {
+      return {
+        backgroundColor: _colors.default.yellowLight
+      };
+    }
+    return {};
+  },
+  valueCellStyle: (index, item) => {
+    if (item.value === 'Pending') {
+      return {
+        color: _colors.default.warningOrange
+      };
+    }
+    return {};
+  }
+};

package/dist/context/Checkbox/CheckboxContext.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCheckboxes = exports.CheckboxProvider = void 0;
+exports.useCheckboxes = exports.useCheckboxActions = exports.CheckboxProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _fetchDataPublic = _interopRequireDefault(require("../../api/fetchDataPublic"));
+var _fetchData = _interopRequireDefault(require("../../api/fetchData"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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; }
@@ -20,6 +21,7 @@ const CheckboxProvider = _ref => {
   } = _ref;
   const [checkboxes, setCheckboxes] = (0, _react.useState)({});
   const [loadingStates, setLoadingStates] = (0, _react.useState)({});
+  const [errorStates, setErrorStates] = (0, _react.useState)({});
   const fetchCheckboxes = async function (key) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const {
@@ -27,13 +29,18 @@ const CheckboxProvider = _ref => {
       labels
     } = options;
 
-    // Don't fetch if already loading or already fetched
-    if (loadingStates[key] || checkboxes[key]) {
+    // Don't fetch if already loading, already fetched, or previously failed
+    if (loadingStates[key] || checkboxes[key] !== undefined || errorStates[key]) {
       return;
     }
     setLoadingStates(prev => _objectSpread(_objectSpread({}, prev), {}, {
       [key]: true
     }));
+    setErrorStates(prev => {
+      const newState = _objectSpread({}, prev);
+      delete newState[key]; // Clear previous error if retrying
+      return newState;
+    });
     try {
       let response;
       if (group) {
@@ -54,6 +61,14 @@ const CheckboxProvider = _ref => {
       }));
     } catch (error) {
       console.error("Failed to fetch checkboxes for key: ".concat(key), error);
+      // Mark as failed to prevent infinite retries
+      setErrorStates(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        [key]: error
+      }));
+      // Set checkboxes to null to indicate fetch was attempted but failed
+      setCheckboxes(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        [key]: null
+      }));
     } finally {
       setLoadingStates(prev => _objectSpread(_objectSpread({}, prev), {}, {
         [key]: false
@@ -62,16 +77,56 @@ const CheckboxProvider = _ref => {
   };
   const getCheckboxes = function (key) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    // Auto-fetch if not already loaded
-    if (!checkboxes[key] && !loadingStates[key]) {
+    // Auto-fetch if not already loaded, not loading, and not in error state
+    if (checkboxes[key] === undefined && !loadingStates[key] && !errorStates[key]) {
       fetchCheckboxes(key, options);
     }
     return {
       checkboxes: checkboxes[key] || null,
       isLoading: loadingStates[key] || false,
-      refetch: () => fetchCheckboxes(key, options)
+      error: errorStates[key] || null,
+      refetch: () => {
+        // Clear error state to allow retry
+        setErrorStates(prev => {
+          const newState = _objectSpread({}, prev);
+          delete newState[key];
+          return newState;
+        });
+        setCheckboxes(prev => {
+          const newState = _objectSpread({}, prev);
+          delete newState[key];
+          return newState;
+        });
+        fetchCheckboxes(key, options);
+      }
     };
   };
+  const checkCheckbox = async function (checkboxId) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const {
+      userId,
+      investmentId = '',
+      privateInvestorId = ''
+    } = data;
+    if (!userId) {
+      throw new Error('userId is required to check checkbox');
+    }
+    if (!checkboxId) {
+      throw new Error('checkboxId is required');
+    }
+    try {
+      const response = await (0, _fetchData.default)('compliance/check-checkbox', {
+        userId,
+        checkboxId,
+        investmentId,
+        privateInvestorId
+      });
+      return response;
+    } catch (error) {
+      console.error("Failed to check checkbox: ".concat(checkboxId), error);
+      throw error;
+    }
+  };
   const clearCheckboxes = key => {
     if (key) {
       // Clear specific key
@@ -85,14 +140,21 @@ const CheckboxProvider = _ref => {
         delete newState[key];
         return newState;
       });
+      setErrorStates(prev => {
+        const newState = _objectSpread({}, prev);
+        delete newState[key];
+        return newState;
+      });
     } else {
       // Clear all checkboxes
       setCheckboxes({});
       setLoadingStates({});
+      setErrorStates({});
     }
   };
   const value = {
     getCheckboxes,
+    checkCheckbox,
     clearCheckboxes
   };
   return /*#__PURE__*/_react.default.createElement(CheckboxContext.Provider, {
@@ -111,4 +173,16 @@ const useCheckboxes = function (key) {
   }
   return context.getCheckboxes(key, options);
 };
-exports.useCheckboxes = useCheckboxes;
+exports.useCheckboxes = useCheckboxes;
+const useCheckboxActions = () => {
+  const context = (0, _react.useContext)(CheckboxContext);
+  if (!context) {
+    throw new Error('useCheckboxActions must be used within CheckboxProvider');
+  }
+  return {
+    checkCheckbox: context.checkCheckbox,
+    uncheckCheckbox: context.uncheckCheckbox,
+    clearCheckboxes: context.clearCheckboxes
+  };
+};
+exports.useCheckboxActions = useCheckboxActions;

package/dist/index.js

@@ -124,28 +124,6 @@ Object.keys(_CaptialRaisedSummary).forEach(function (key) {
     }
   });
 });
-var _ChartBox = require("./components/ChartBox/ChartBox");
-Object.keys(_ChartBox).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartBox[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartBox[key];
-    }
-  });
-});
-var _ChartBoxDistribution = require("./components/ChartBox/ChartBoxDistribution");
-Object.keys(_ChartBoxDistribution).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartBoxDistribution[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartBoxDistribution[key];
-    }
-  });
-});
 var _ChartLegend = require("./components/ChartLegend/ChartLegend");
 Object.keys(_ChartLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -487,28 +465,6 @@ Object.keys(_SpanButton).forEach(function (key) {
     }
   });
 });
-var _KYCFlow = require("./components/KYCFlow");
-Object.keys(_KYCFlow).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _KYCFlow[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _KYCFlow[key];
-    }
-  });
-});
-var _KYCSelectBox = require("./components/KYCSelectBox/KYCSelectBox.styles");
-Object.keys(_KYCSelectBox).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _KYCSelectBox[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _KYCSelectBox[key];
-    }
-  });
-});
 var _LatestUpdate = require("./components/LatestUpdate/LatestUpdate");
 Object.keys(_LatestUpdate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -707,17 +663,6 @@ Object.keys(_Process).forEach(function (key) {
     }
   });
 });
-var _ProofOfAddress = require("./components/ProofOfAddress/ProofOfAddress.styles");
-Object.keys(_ProofOfAddress).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ProofOfAddress[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ProofOfAddress[key];
-    }
-  });
-});
 var _ProfileBadge = require("./components/ProfileBadge/ProfileBadge");
 Object.keys(_ProfileBadge).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -850,17 +795,6 @@ Object.keys(_SideLine).forEach(function (key) {
     }
   });
 });
-var _SigningSubflow = require("./components/SigningSubflow");
-Object.keys(_SigningSubflow).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _SigningSubflow[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _SigningSubflow[key];
-    }
-  });
-});
 var _Slider = require("./components/Slider/Slider");
 Object.keys(_Slider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1103,17 +1037,6 @@ Object.keys(_TransactionInfo).forEach(function (key) {
     }
   });
 });
-var _TwoFactorModal = require("./components/TwoFactorModal/TwoFactorModal");
-Object.keys(_TwoFactorModal).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _TwoFactorModal[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _TwoFactorModal[key];
-    }
-  });
-});
 var _Layout = require("./components/Layout/Layout");
 Object.keys(_Layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1476,4 +1399,48 @@ Object.keys(_useTimer).forEach(function (key) {
       return _useTimer[key];
     }
   });
+});
+var _PaymentDisplay = require("./components/Payment/PaymentDisplay");
+Object.keys(_PaymentDisplay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PaymentDisplay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PaymentDisplay[key];
+    }
+  });
+});
+var _TimerComponent = require("./components/Payment/TimerComponent");
+Object.keys(_TimerComponent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TimerComponent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TimerComponent[key];
+    }
+  });
+});
+var _Timeline = require("./components/Timeline/Timeline");
+Object.keys(_Timeline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Timeline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Timeline[key];
+    }
+  });
+});
+var _TimelineStep = require("./components/Timeline/TimelineStep");
+Object.keys(_TimelineStep).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TimelineStep[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TimelineStep[key];
+    }
+  });
 });