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

package/dist/components/Number/Number.stories.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Zero = exports.Two = exports.Three = exports.Six = exports.Seven = exports.One = exports.NumberRow = exports.Nine = exports.InvalidNumber = exports.Four = exports.Five = exports.Eight = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Number = require("./Number");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Number',
-  component: _Number.Number,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A component that displays numbers using SVG icons.'
-      }
-    }
-  },
-  argTypes: {
-    number: {
-      control: {
-        type: 'number',
-        min: 0,
-        max: 9,
-        step: 1
-      },
-      description: 'Number to display (0-9)'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_Number.Number, args);
-
-// Individual numbers
-const Zero = exports.Zero = Template.bind({});
-Zero.args = {
-  number: 0
-};
-const One = exports.One = Template.bind({});
-One.args = {
-  number: 1
-};
-const Two = exports.Two = Template.bind({});
-Two.args = {
-  number: 2
-};
-const Three = exports.Three = Template.bind({});
-Three.args = {
-  number: 3
-};
-const Four = exports.Four = Template.bind({});
-Four.args = {
-  number: 4
-};
-const Five = exports.Five = Template.bind({});
-Five.args = {
-  number: 5
-};
-const Six = exports.Six = Template.bind({});
-Six.args = {
-  number: 6
-};
-const Seven = exports.Seven = Template.bind({});
-Seven.args = {
-  number: 7
-};
-const Eight = exports.Eight = Template.bind({});
-Eight.args = {
-  number: 8
-};
-const Nine = exports.Nine = Template.bind({});
-Nine.args = {
-  number: 9
-};
-
-// Example of invalid number
-const InvalidNumber = exports.InvalidNumber = Template.bind({});
-InvalidNumber.args = {
-  number: 10
-};
-
-// Row of multiple numbers
-const NumberRow = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    gap: '8px'
-  }
-}, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(num => /*#__PURE__*/_react.default.createElement(_Number.Number, {
-  key: num,
-  number: num
-})));
-exports.NumberRow = NumberRow;

package/dist/components/Pagination/Pagination.stories.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PaginationWithInput = exports.PaginationExample = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Pagination = require("./Pagination");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _InputWithButton = require("../Input/InputWithButton");
-var _Button = require("../Button/Button.styles");
-var _Card = require("../Card/Card.styles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Pagination',
-  component: _Pagination.Pagination,
-  argTypes: {
-    currentPage: {
-      type: 'number',
-      defaultValue: 0
-    },
-    totalCount: {
-      type: 'number',
-      defaultValue: 0
-    },
-    pageSize: {
-      type: 'number',
-      defaultValue: 10
-    },
-    siblingCount: {
-      type: 'number',
-      defaultValue: 0
-    },
-    onPageChange: {
-      type: 'function',
-      required: true
-    }
-  }
-};
-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(_Pagination.Pagination, args)));
-const TemplateWithInput = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
-  noPaddingHorizontal: true,
-  flex: true,
-  style: {
-    justifyContent: 'space-between',
-    flexWrap: 'wrap'
-  }
-}, /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, args), /*#__PURE__*/_react.default.createElement(_Card.Card, {
-  noPadding: true
-}, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, {
-  style: {
-    padding: '2px 20px'
-  }
-}, "Page Size:"), /*#__PURE__*/_react.default.createElement(_InputWithButton.InputWithButton, {
-  id: "pageSize",
-  name: "pageSize",
-  type: "number",
-  placeholder: 'Page size'
-  // onChange={(e) => setinputPageSize(e.target.value)}
-}, /*#__PURE__*/_react.default.createElement(_Button.Button
-//   onClick={() => setpageSize(Number(inputPageSize))}
-, null, "apply")))));
-const PaginationExample = exports.PaginationExample = Template.bind({});
-PaginationExample.args = {
-  currentPage: 1,
-  totalCount: 100,
-  pageSize: 10,
-  siblingCount: 1,
-  onPageChange: page => {
-    console.log('page changed to', page);
-  }
-};
-const PaginationWithInput = exports.PaginationWithInput = TemplateWithInput.bind({});
-PaginationWithInput.args = {
-  currentPage: 1,
-  totalCount: 100,
-  pageSize: 10,
-  siblingCount: 1,
-  onPageChange: page => {
-    console.log('page changed to', page);
-  }
-};

package/dist/components/Pagination/PaginationControls.stories.js

@@ -1,112 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutPageSizeControl = exports.SmallDataSet = exports.LargeDataSet = exports.Default = exports.CustomStyle = exports.CustomPageSizeLabel = exports.CustomListStyle = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _PaginationControls = _interopRequireDefault(require("./PaginationControls"));
-var _global = _interopRequireDefault(require("../../styles/global"));
-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; }
-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); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-// Create mock data array
-const mockItems = Array.from({
-  length: 15
-}, (_, index) => ({
-  id: index + 1,
-  name: "Item ".concat(index + 1)
-}));
-var _default = exports.default = {
-  title: 'Components Library/Pagination',
-  component: _PaginationControls.default,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Pagination controls component with customizable page size and navigation.'
-      }
-    }
-  }
-};
-const Template = args => {
-  const [currentPage, setCurrentPage] = (0, _react.useState)(1);
-  const [pageSize, setPageSize] = (0, _react.useState)(10);
-  const [inputPageSize, setInputPageSize] = (0, _react.useState)(10);
-
-  // Get current items
-  const indexOfLastItem = currentPage * pageSize;
-  const indexOfFirstItem = indexOfLastItem - pageSize;
-  const currentItems = mockItems.slice(indexOfFirstItem, indexOfLastItem);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginBottom: '20px'
-    }
-  }, "Showing items ", (currentPage - 1) * pageSize + 1, " to", ' ', Math.min(currentPage * pageSize, mockItems.length), " of", ' ', mockItems.length), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginBottom: '20px'
-    }
-  }, currentItems.map(item => /*#__PURE__*/_react.default.createElement("div", {
-    key: item.id,
-    style: {
-      padding: '8px',
-      borderBottom: '1px solid #eee'
-    }
-  }, item.name))), /*#__PURE__*/_react.default.createElement(_PaginationControls.default, _extends({}, args, {
-    currentPage: currentPage,
-    totalCount: mockItems.length,
-    pageSize: pageSize,
-    inputPageSize: inputPageSize,
-    onPageChange: setCurrentPage,
-    setPageSize: setPageSize,
-    setInputPageSize: setInputPageSize
-  })));
-};
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  scrollOffset: -100,
-  showPageSizeControl: true,
-  pageSizeLabel: 'Page Size:',
-  applyButtonText: 'Apply'
-};
-const WithoutPageSizeControl = exports.WithoutPageSizeControl = Template.bind({});
-WithoutPageSizeControl.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  showPageSizeControl: false
-});
-const CustomPageSizeLabel = exports.CustomPageSizeLabel = Template.bind({});
-CustomPageSizeLabel.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  pageSizeLabel: 'Items per page:',
-  applyButtonText: 'Set'
-});
-const CustomStyle = exports.CustomStyle = Template.bind({});
-CustomStyle.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  containerStyle: {
-    backgroundColor: '#f5f5f5',
-    padding: '20px',
-    borderRadius: '8px'
-  }
-});
-const SmallDataSet = exports.SmallDataSet = Template.bind({});
-SmallDataSet.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  totalCount: 20
-});
-
-// Example showing how the component handles a large dataset
-const LargeDataSet = exports.LargeDataSet = Template.bind({});
-LargeDataSet.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  totalCount: 1000
-});
-
-// Example with custom list style
-const CustomListStyle = exports.CustomListStyle = Template.bind({});
-CustomListStyle.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  listStyle: {
-    backgroundColor: '#e6f7ff',
-    borderRadius: '4px',
-    padding: '8px'
-  }
-});

package/dist/components/Payment/PaymentDetailsCard.stories.js

@@ -1,198 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutSeparators = exports.WithTooltips = exports.WithPlaceholders = exports.WithCustomInfoSection = exports.WithCustomAmountSection = exports.WithBitcoin = exports.DetailsOnly = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PaymentDetailsCard = _interopRequireDefault(require("./PaymentDetailsCard"));
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _colors = _interopRequireDefault(require("../../styles/colors"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StoryContainer = _styledComponents.default.div.withConfig({
-  displayName: "PaymentDetailsCardstories__StoryContainer",
-  componentId: "sc-1bzi48y-0"
-})(["max-width:500px;padding:20px;background:", ";"], _colors.default.offWhite);
-var _default = exports.default = {
-  title: 'Components Library/Payment/PaymentDetailsCard',
-  component: _PaymentDetailsCard.default,
-  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(StoryContainer, null, /*#__PURE__*/_react.default.createElement(Story, null))))]
-};
-const Default = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-  title: "Payment Details",
-  amountSection: {
-    label: 'Amount to pay',
-    amount: 1250.5,
-    currency: 'USDC'
-  },
-  details: [{
-    label: 'Reference',
-    value: 'INV-2024-001234'
-  }, {
-    label: 'Date',
-    value: 'Dec 19, 2024'
-  }, {
-    label: 'Status',
-    value: 'Pending'
-  }]
-});
-exports.Default = Default;
-const WithBitcoin = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-  amountSection: {
-    label: 'Transfer amount',
-    amount: 0.054321,
-    currency: 'BTC'
-  },
-  details: [{
-    label: 'Network',
-    value: 'Bitcoin Mainnet'
-  }, {
-    label: 'Fee',
-    value: '0.00001 BTC'
-  }, {
-    label: 'Confirmations',
-    value: '3/6'
-  }]
-});
-exports.WithBitcoin = WithBitcoin;
-const WithTooltips = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-  amountSection: {
-    label: 'Investment amount',
-    amount: 50000,
-    currency: 'USDT'
-  },
-  details: [{
-    label: 'Token price',
-    value: '$1.25',
-    tooltip: 'Current token price at the time of investment'
-  }, {
-    label: 'Tokens received',
-    value: '40,000 TKN',
-    tooltip: 'Number of tokens you will receive'
-  }, {
-    label: 'Lock-up period',
-    value: '12 months',
-    tooltip: 'Tokens will be locked for this period'
-  }]
-});
-exports.WithTooltips = WithTooltips;
-const WithPlaceholders = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-  title: "Pending Payment",
-  amountSection: {
-    label: 'Amount',
-    amount: 500,
-    currency: 'USDC'
-  },
-  details: [{
-    label: 'Transaction ID',
-    value: null,
-    placeholder: 'Awaiting confirmation'
-  }, {
-    label: 'Recipient',
-    value: 'John Doe'
-  }, {
-    label: 'Status',
-    value: null,
-    placeholder: 'Processing...'
-  }]
-});
-exports.WithPlaceholders = WithPlaceholders;
-const WithCustomInfoSection = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-  title: "Order Confirmation",
-  amountSection: {
-    label: 'Total amount',
-    amount: 2500,
-    currency: 'USDC'
-  },
-  details: [{
-    label: 'Order ID',
-    value: 'ORD-789456'
-  }, {
-    label: 'Items',
-    value: '3 tokens'
-  }],
-  infoSection: /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '12px',
-      background: _colors.default.lightGrey,
-      borderRadius: '4px',
-      fontSize: '14px',
-      color: _colors.default.grey2
-    }
-  }, "\u24D8 Your payment will be processed within 24 hours. You will receive a confirmation email once complete.")
-});
-exports.WithCustomInfoSection = WithCustomInfoSection;
-const WithoutSeparators = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-  title: "Compact View",
-  amountSection: {
-    label: 'Amount',
-    amount: 100,
-    currency: 'USDC'
-  },
-  details: [{
-    label: 'From',
-    value: 'Wallet A'
-  }, {
-    label: 'To',
-    value: 'Wallet B'
-  }],
-  showSeparators: false
-});
-exports.WithoutSeparators = WithoutSeparators;
-const DetailsOnly = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-  title: "Account Information",
-  details: [{
-    label: 'Account holder',
-    value: 'Jane Smith'
-  }, {
-    label: 'Account type',
-    value: 'Premium'
-  }, {
-    label: 'Member since',
-    value: 'Jan 2023'
-  }, {
-    label: 'Total investments',
-    value: '$125,000'
-  }]
-});
-exports.DetailsOnly = DetailsOnly;
-const WithCustomAmountSection = () => {
-  const CustomAmount = () => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      textAlign: 'center',
-      padding: '20px 0'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      fontSize: '14px',
-      color: _colors.default.grey2,
-      marginBottom: '8px'
-    }
-  }, "You are investing"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      fontSize: '48px',
-      fontWeight: '800',
-      color: _colors.default.black
-    }
-  }, "$10,000"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      fontSize: '14px',
-      color: _colors.default.freshGreen,
-      marginTop: '8px'
-    }
-  }, "\u2713 Best rate available"));
-  return /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
-    title: "Custom Investment",
-    amountSection: /*#__PURE__*/_react.default.createElement(CustomAmount, null),
-    details: [{
-      label: 'Exchange rate',
-      value: '1 USD = 0.92 EUR'
-    }, {
-      label: 'Fees',
-      value: '$0.00'
-    }]
-  });
-};
-exports.WithCustomAmountSection = WithCustomAmountSection;