@stokr/components-library 2.3.63-beta.2 → 2.3.64

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/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];
+    }
+  });
 });