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

package/dist/components/TabsNav/TabsNav.stories.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TabsNavExample = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TabsNav = require("./TabsNav");
-var _Number = _interopRequireDefault(require("../Number/Number"));
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Tabs/TabsNav',
-  component: _TabsNav.TabsNav,
-  argTypes: {
-    children: {
-      type: 'node',
-      defaultValue: [],
-      required: true
-    },
-    activeTab: {
-      type: 'array of numbers',
-      defaultValue: []
-    }
-
-    // handleItemClick: { type: 'function', action: 'handleItemClick' },
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_TabsNav.TabsNav, args));
-const TabsNavExample = exports.TabsNavExample = Template.bind({});
-TabsNavExample.args = {
-  children: [/*#__PURE__*/_react.default.createElement(_Number.default, null), /*#__PURE__*/_react.default.createElement(_Number.default, null), /*#__PURE__*/_react.default.createElement(_Number.default, null)],
-  activeTab: [1]
-};
-
-// //doublecheck:
-// // less visible than in TabNav ( activeTab not showing)

package/dist/components/TeamOverview/TeamOverview.stories.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TeamOverviewOverview = exports.TeamOverviewExample = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TeamOverview = require("./TeamOverview");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Team Overview',
-  component: _TeamOverview.TeamOverview,
-  argTypes: {
-    name: {
-      type: 'string',
-      defaultValue: ''
-    },
-    memberrole: {
-      type: 'string'
-    },
-    avatar: {
-      type: 'string',
-      defaultValue: ''
-    },
-    email: {
-      type: 'string',
-      defaultValue: ''
-    },
-    position: {
-      type: 'string',
-      defaultValue: ''
-    },
-    projectName: {
-      type: 'string',
-      defaultValue: ''
-    },
-    stats: {
-      type: 'array of shape',
-      defaultValue: [{
-        name: ''
-      }, {
-        count: 0
-      }],
-      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(_TeamOverview.TeamOverview, args)));
-const TeamOverviewExample = exports.TeamOverviewExample = Template.bind({});
-TeamOverviewExample.args = {
-  name: 'John Doe',
-  memberrole: 'Memberrole',
-  avatar: 'Avatar',
-  email: 'john@doe.com',
-  position: 'Chief',
-  projectName: 'Aquarius is Raising',
-  stats: [{
-    count: 15,
-    name: 'Stat Name'
-  }]
-};
-const TeamOverviewOverview = exports.TeamOverviewOverview = Template.bind({});
-TeamOverviewOverview.args = {
-  name: 'Name',
-  memberrole: 'Memberrole ',
-  avatar: 'Avatar',
-  email: 'Email',
-  position: 'Position',
-  projectName: 'Project Name',
-  stats: [{
-    count: 1,
-    name: 'Stat Name'
-  }]
-};

package/dist/components/TermsModal/TermsModal.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TermsModalDefault = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TermsModal = require("./TermsModal");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _reactRouterDom = require("react-router-dom");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Terms Modal',
-  component: _TermsModal.TermsModal,
-  argTypes: {
-    isModalOpen: {
-      type: 'boolean',
-      defaultValue: true,
-      required: true
-    },
-    onModalClose: {
-      type: 'function',
-      action: 'onModalClose',
-      required: true
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TermsModal.TermsModal, args))));
-const TermsModalDefault = exports.TermsModalDefault = Template.bind({});
-TermsModalDefault.args = {};

package/dist/components/Text/Headline.stories.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.headline = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Headline = _interopRequireDefault(require("./Headline"));
-var _Text = _interopRequireDefault(require("./Text.styles"));
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Headline',
-  component: _Headline.default,
-  argTypes: {
-    h1: {
-      type: 'style'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Headline.default, args));
-const headline = exports.headline = Template.bind({});
-headline.args = {};
-
-//doublecheck:
-
-//maybe its only style and I don't need it
-//
-//maybe only Text.stories.js?
-//
-//put css into template?
-// export default {
-//   title: 'Components Library/Headline',
-//   component: Headline,
-//   argTypes: {
-//     headline: { type: 'string', defaultValue: 'HEADLINE' },
-//     style: {
-//       defaultValue: { marginBottom: 10 },
-//     },
-//   },
-// }
-
-//Helpers?
-
-//Basically make all the headline options here,
-//controlled styles for h1-5 etc
-//and then import the story into where headlines are used?
-//or just don't make it and only use it where used

package/dist/components/Text/Text.stories.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.headline = exports.default = exports.caption = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Text = _interopRequireDefault(require("./Text.styles"));
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Text',
-  component: _Text.default,
-  argTypes: {
-    h1: {
-      type: 'style'
-    },
-    h2: {
-      type: 'style'
-    },
-    h3: {
-      type: 'style'
-    },
-    h4: {
-      type: 'style'
-    },
-    h5: {
-      type: 'style'
-    },
-    p: {
-      type: 'style'
-    },
-    a: {
-      type: 'style'
-    },
-    ul: {
-      type: 'style'
-    },
-    li: {
-      type: 'style'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Text.default, args));
-const headline = exports.headline = Template.bind({});
-headline.args = {
-  children: 'hahha',
-  as: 'h1'
-};
-const caption = exports.caption = Template.bind({});
-caption.args = {};
-
-//doublecheck:
-//maybe its only style and I don't need it
-//
-//maybe only StyledText.stories.js?
-//
-//put css into template?
-// export default {
-//   title: 'Components Library/Headline',
-//   component: Headline,
-//   argTypes: {
-//     headline: { type: 'string', defaultValue: 'HEADLINE' },
-//     style: {
-//       defaultValue: { marginBottom: 10 },
-//     },
-//   },
-// }
-
-//Helpers?

package/dist/components/Timeline/Timeline.stories.js

@@ -1,393 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutTooltips = exports.SimpleTimeline = exports.PendingState = exports.PayoutDeclined = exports.PayoutConfirmed = exports.LongCaptions = exports.InitiatedState = exports.DeclinedState = exports.CustomWidth = exports.CustomStyling = exports.CancelledState = exports.AllStates = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Timeline = require("./Timeline");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _moment = require("../../utils/moment");
-var _colors = _interopRequireDefault(require("../../styles/colors"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Timeline',
-  component: _Timeline.Timeline,
-  argTypes: {
-    steps: {
-      control: 'object',
-      description: 'Array of step objects with state, date, title, tooltip, and caption'
-    },
-    maxWidth: {
-      control: 'text',
-      description: 'Maximum width of the timeline container'
-    },
-    showInfoIcons: {
-      control: 'boolean',
-      description: 'Show/hide info icons for tooltips',
-      defaultValue: true
-    },
-    infoIconPosition: {
-      control: 'select',
-      options: ['top', 'bottom', 'left', 'right'],
-      description: 'Position of tooltip relative to info icon'
-    },
-    containerStyle: {
-      control: 'object',
-      description: 'Style object for the timeline container'
-    }
-  },
-  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(_Timeline.Timeline, args);
-
-// Pending state (first step active)
-const PendingState = exports.PendingState = Template.bind({});
-PendingState.args = {
-  steps: [{
-    id: 'pending',
-    date: '2025-08-10T11:57:00',
-    title: 'Pending',
-    tooltip: 'Payout is pending your confirmation',
-    caption: 'Payout is pending your confirmation.'
-  }, {
-    id: 'initiated',
-    state: 'inactive',
-    title: 'Initiated',
-    tooltip: 'Payout initiation information'
-  }, {
-    id: 'payout-confirmed',
-    state: 'inactive',
-    title: 'Payout Confirmed',
-    tooltip: 'Payout confirmation information'
-  }, {
-    id: 'paid-out',
-    state: 'inactive',
-    title: 'Paid out',
-    tooltip: 'Payout completion information'
-  }]
-};
-
-// Initiated state (first two steps completed/active)
-const InitiatedState = exports.InitiatedState = Template.bind({});
-InitiatedState.args = {
-  steps: [{
-    id: 'pending',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Pending',
-    tooltip: 'Payout was pending'
-  }, {
-    id: 'initiated',
-    date: '2025-08-12T11:57:00',
-    title: 'Initiated',
-    tooltip: 'Awaiting your confirmation',
-    caption: 'Awaiting your confirmation.'
-  }, {
-    id: 'transferee-notified',
-    state: 'inactive',
-    title: 'Transferee notified',
-    tooltip: 'Transferee notification information'
-  }, {
-    id: 'payout-confirmed',
-    state: 'inactive',
-    title: 'Payout Confirmed',
-    tooltip: 'Payout confirmation information'
-  }, {
-    id: 'paid-out',
-    state: 'inactive',
-    title: 'Paid out',
-    tooltip: 'Payout completion information'
-  }]
-};
-
-// Payout Declined (failed state)
-const PayoutDeclined = exports.PayoutDeclined = Template.bind({});
-PayoutDeclined.args = {
-  steps: [{
-    id: 'pending',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Pending',
-    tooltip: 'Payout was pending'
-  }, {
-    id: 'initiated',
-    state: 'completed',
-    date: '2025-08-12T11:57:00',
-    title: 'Initiated',
-    tooltip: 'Payout was initiated'
-  }, {
-    id: 'transferee-notified',
-    state: 'completed',
-    date: '2025-08-14T07:12:00',
-    title: 'Transferee notified',
-    tooltip: 'Transferee was notified',
-    caption: 'Change text'
-  }, {
-    id: 'payout-declined',
-    state: 'failed',
-    date: '2025-08-16T21:39:00',
-    title: 'Payout Declined',
-    tooltip: 'Payout was declined',
-    caption: 'Transferee declined the payout.'
-  }, {
-    id: 'paid-out',
-    state: 'inactive',
-    title: 'Paid out',
-    tooltip: 'Payout completion information'
-  }]
-};
-
-// Payout Confirmed (successful flow)
-const PayoutConfirmed = exports.PayoutConfirmed = Template.bind({});
-PayoutConfirmed.args = {
-  steps: [{
-    id: 'pending',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Pending',
-    tooltip: 'Payout was pending'
-  }, {
-    id: 'initiated',
-    state: 'completed',
-    date: '2025-08-12T11:57:00',
-    title: 'Initiated',
-    tooltip: 'Payout was initiated'
-  }, {
-    id: 'transferee-notified',
-    state: 'completed',
-    date: '2025-08-14T07:12:00',
-    title: 'Transferee notified',
-    tooltip: 'Transferee was notified',
-    caption: 'Change text'
-  }, {
-    id: 'payout-confirmed',
-    state: 'completed',
-    date: '2025-08-16T21:39:00',
-    title: 'Payout Confirmed',
-    tooltip: 'Payout was confirmed',
-    caption: 'Transferee has confirmed the payout.'
-  }, {
-    id: 'paid-out',
-    state: 'inactive',
-    title: 'Paid out',
-    tooltip: 'Payout completion information'
-  }]
-};
-
-// All states example
-const AllStates = exports.AllStates = Template.bind({});
-AllStates.args = {
-  steps: [{
-    id: 'completed',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Completed Step',
-    tooltip: 'This step is completed',
-    caption: 'This step has been successfully completed.'
-  }, {
-    id: 'active',
-    date: '2025-08-12T11:57:00',
-    title: 'Active Step',
-    tooltip: 'This step is currently active',
-    caption: 'This step is currently in progress.'
-  }, {
-    id: 'pending',
-    state: 'pending',
-    date: '2025-08-14T07:12:00',
-    title: 'Pending Step',
-    tooltip: 'This step is pending',
-    caption: 'This step is waiting to be processed.'
-  }, {
-    id: 'failed',
-    state: 'failed',
-    date: '2025-08-16T21:39:00',
-    title: 'Failed Step',
-    tooltip: 'This step has failed',
-    caption: 'This step encountered an error.'
-  }, {
-    id: 'inactive',
-    state: 'inactive',
-    title: 'Inactive Step',
-    tooltip: 'This step is not yet started'
-  }]
-};
-
-// Simple timeline without dates
-const SimpleTimeline = exports.SimpleTimeline = Template.bind({});
-SimpleTimeline.args = {
-  steps: [{
-    id: 'step1',
-    state: 'completed',
-    title: 'Step 1',
-    tooltip: 'First step completed'
-  }, {
-    id: 'step2',
-    title: 'Step 2',
-    tooltip: 'Second step in progress',
-    caption: 'Currently working on this step.'
-  }, {
-    id: 'step3',
-    state: 'inactive',
-    title: 'Step 3',
-    tooltip: 'Third step not started'
-  }]
-};
-
-// Without tooltips
-const WithoutTooltips = exports.WithoutTooltips = Template.bind({});
-WithoutTooltips.args = {
-  steps: [{
-    id: 'step1',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Completed',
-    caption: 'This step is done.'
-  }, {
-    id: 'step2',
-    date: '2025-08-12T11:57:00',
-    title: 'Active',
-    caption: 'This step is in progress.'
-  }, {
-    id: 'step3',
-    state: 'inactive',
-    title: 'Upcoming'
-  }],
-  showInfoIcons: false
-};
-
-// Custom width
-const CustomWidth = exports.CustomWidth = Template.bind({});
-CustomWidth.args = {
-  steps: [{
-    id: 'step1',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Step 1',
-    tooltip: 'First step'
-  }, {
-    id: 'step2',
-    date: '2025-08-12T11:57:00',
-    title: 'Step 2',
-    tooltip: 'Second step'
-  }, {
-    id: 'step3',
-    state: 'inactive',
-    title: 'Step 3',
-    tooltip: 'Third step'
-  }],
-  maxWidth: '600px'
-};
-
-// Long captions
-const LongCaptions = exports.LongCaptions = Template.bind({});
-LongCaptions.args = {
-  steps: [{
-    id: 'step1',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Document Upload',
-    tooltip: 'Document upload information',
-    caption: 'All required documents have been successfully uploaded and verified by our team. The verification process took approximately 2 business days.'
-  }, {
-    id: 'step2',
-    date: '2025-08-12T11:57:00',
-    title: 'Review Process',
-    tooltip: 'Review process information',
-    caption: 'Your application is currently under review. Our compliance team is examining all submitted documents to ensure they meet our requirements. This typically takes 3-5 business days.'
-  }, {
-    id: 'step3',
-    state: 'inactive',
-    title: 'Approval',
-    tooltip: 'Approval information',
-    caption: 'Once the review is complete, you will receive a notification about the approval status of your application.'
-  }]
-};
-
-// Custom styling
-const CustomStyling = exports.CustomStyling = Template.bind({});
-CustomStyling.args = {
-  steps: [{
-    id: 'step1',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Step 1',
-    tooltip: 'First step'
-  }, {
-    id: 'step2',
-    date: '2025-08-12T11:57:00',
-    title: 'Step 2',
-    tooltip: 'Second step'
-  }, {
-    id: 'step3',
-    state: 'inactive',
-    title: 'Step 3',
-    tooltip: 'Third step'
-  }],
-  containerStyle: {
-    padding: '20px',
-    backgroundColor: _colors.default.grey3,
-    borderRadius: '8px'
-  }
-};
-
-// Cancelled state
-const CancelledState = exports.CancelledState = Template.bind({});
-CancelledState.args = {
-  steps: [{
-    id: 'step1',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Started',
-    tooltip: 'Process started'
-  }, {
-    id: 'step2',
-    state: 'completed',
-    date: '2025-08-12T11:57:00',
-    title: 'In Progress',
-    tooltip: 'Process in progress'
-  }, {
-    id: 'step3',
-    state: 'cancelled',
-    date: '2025-08-14T07:12:00',
-    title: 'Cancelled',
-    tooltip: 'Process was cancelled',
-    caption: 'The process was cancelled by the user.'
-  }, {
-    id: 'step4',
-    state: 'inactive',
-    title: 'Completed',
-    tooltip: 'Completion information'
-  }]
-};
-
-// Declined state
-const DeclinedState = exports.DeclinedState = Template.bind({});
-DeclinedState.args = {
-  steps: [{
-    id: 'step1',
-    state: 'completed',
-    date: '2025-08-10T11:57:00',
-    title: 'Submitted',
-    tooltip: 'Application submitted'
-  }, {
-    id: 'step2',
-    state: 'completed',
-    date: '2025-08-12T11:57:00',
-    title: 'Under Review',
-    tooltip: 'Application under review'
-  }, {
-    id: 'step3',
-    state: 'declined',
-    date: '2025-08-14T07:12:00',
-    title: 'Declined',
-    tooltip: 'Application declined',
-    caption: 'Your application was declined due to incomplete information.'
-  }, {
-    id: 'step4',
-    state: 'inactive',
-    title: 'Approved',
-    tooltip: 'Approval information'
-  }]
-};