@stokr/components-library 2.3.65-beta.9 → 2.3.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (254) hide show
  1. package/dist/components/2FA/login-with-otp-flow.js +1 -1
  2. package/dist/components/2FA/main-flow.js +40 -12
  3. package/dist/components/Chips/Chip.js +1 -2
  4. package/dist/components/Chips/Chip.styles.js +3 -2
  5. package/dist/components/ConfirmModal/ConfirmModal.js +240 -0
  6. package/dist/components/ConfirmModal/ConfirmModal.styles.js +26 -0
  7. package/dist/components/CryptoAddress/CryptoAddress.js +10 -4
  8. package/dist/components/CryptoAddress/CryptoAddress.styles.js +1 -1
  9. package/dist/components/Footer/FooterLayout.js +13 -4
  10. package/dist/components/Footer/FooterMenu.js +19 -3
  11. package/dist/components/Footer/FooterMenu.styles.js +14 -2
  12. package/dist/components/Header/Header.styles.js +1 -1
  13. package/dist/components/Input/DatePickerInput.js +134 -30
  14. package/dist/components/Input/DatePickerInput.styles.js +16 -3
  15. package/dist/components/Input/MultiSelect.js +10 -8
  16. package/dist/components/Input/TableFilterDropdown.js +228 -0
  17. package/dist/components/Input/Textarea.js +59 -0
  18. package/dist/components/Input/Textarea.styles.js +18 -0
  19. package/dist/components/Modal/Modal.js +39 -6
  20. package/dist/components/Modal/Modal.styles.js +2 -2
  21. package/dist/components/Modal/SideModal.js +44 -2
  22. package/dist/components/Modal/SuccessModal/SuccessModal.js +173 -0
  23. package/dist/components/Modal/SuccessModal/SuccessModal.styles.js +29 -0
  24. package/dist/components/Modal/SuccessModal/index.js +37 -0
  25. package/dist/components/Payment/PaymentDetailsCard.js +14 -11
  26. package/dist/components/Payment/PaymentDisplay.js +2 -12
  27. package/dist/components/Snackbar/Snackbar.js +3 -0
  28. package/dist/components/Snackbar/Snackbar.styles.js +18 -9
  29. package/dist/components/StatusTag/StatusTag.js +38 -71
  30. package/dist/components/StatusTag/StatusTag.styles.js +4 -16
  31. package/dist/components/Timeline/Timeline.styles.js +1 -1
  32. package/dist/components/Timeline/TimelineStep.js +0 -1
  33. package/dist/favicon.ico +0 -0
  34. package/dist/index.css +1 -0
  35. package/dist/index.js +44 -0
  36. package/dist/index.js.map +1 -0
  37. package/dist/index.umd.cjs +10371 -0
  38. package/dist/index.umd.cjs.map +1 -0
  39. package/dist/logo192.png +0 -0
  40. package/dist/logo512.png +0 -0
  41. package/dist/manifest.json +25 -0
  42. package/dist/robots.txt +3 -0
  43. package/dist/static/animations/checked.lottie +0 -0
  44. package/dist/static/animations/progress.lottie +0 -0
  45. package/dist/static/images/add-folder-icon.svg +5 -0
  46. package/dist/static/images/background3.png +0 -0
  47. package/dist/static/images/bmn2-logo.svg +9 -9
  48. package/dist/static/images/checkmark-circle-icon.svg +4 -0
  49. package/dist/static/images/close-circle-icon.svg +3 -0
  50. package/dist/static/images/doc-icon.svg +4 -0
  51. package/dist/static/images/filter-icon.svg +6 -0
  52. package/dist/styles/colors.js +2 -1
  53. package/dist/styles/global.js +1 -1
  54. package/dist/utils/customHooks.js +24 -2
  55. package/dist/utils/formatCurrencyValue.js +9 -2
  56. package/package.json +4 -2
  57. package/dist/components/2FA/EnterCode.stories.js +0 -35
  58. package/dist/components/2FA/disable-2fa-flow.stories.js +0 -31
  59. package/dist/components/2FA/enable-2fa-flow.stories.js +0 -31
  60. package/dist/components/2FA/login-with-otp-flow.stories.js +0 -31
  61. package/dist/components/2FA/main-flow.stories.js +0 -162
  62. package/dist/components/AccountBalance/AccountBalance.stories.js +0 -83
  63. package/dist/components/AdminDashboard/Table/ReactTable.stories.js +0 -913
  64. package/dist/components/AgreementItem/AgreementItem.stories.js +0 -105
  65. package/dist/components/AnalyticGraphs/Analytic.js +0 -541
  66. package/dist/components/AnalyticGraphs/Analytic.styles.js +0 -25
  67. package/dist/components/BackButton/BackButton.stories.js +0 -32
  68. package/dist/components/Background/Background.stories.js +0 -75
  69. package/dist/components/BarChart/BarChart.js +0 -263
  70. package/dist/components/BarChart/BarChart.stories.js +0 -66
  71. package/dist/components/BarChart/BarChart.styles.js +0 -26
  72. package/dist/components/BarChartLegend/BarChartLegend.js +0 -79
  73. package/dist/components/BarChartLegend/BarChartLegend.styles.js +0 -21
  74. package/dist/components/BasicTable/BasicTable.stories.js +0 -59
  75. package/dist/components/BlogPost/BlogPost.stories.js +0 -160
  76. package/dist/components/Button/Button.stories.js +0 -146
  77. package/dist/components/Button/GlareButton.stories.js +0 -132
  78. package/dist/components/CapitalRaisedSummary/CapitalRaisedSummery.stories.js +0 -42
  79. package/dist/components/ChartBox/ChartBox.js +0 -41
  80. package/dist/components/ChartBox/ChartBox.stories.js +0 -17
  81. package/dist/components/ChartBox/ChartBox.styles.js +0 -27
  82. package/dist/components/ChartBox/ChartBoxDistribution.js +0 -27
  83. package/dist/components/ChartBox/ChartBoxDistribution.stories.js +0 -18
  84. package/dist/components/ChartLegend/ChartLegend.stories.js +0 -90
  85. package/dist/components/Checkbox/Checkbox.stories.js +0 -88
  86. package/dist/components/Checklist/ChecklistCard.stories.js +0 -102
  87. package/dist/components/Checklist/UserChecklist.js +0 -184
  88. package/dist/components/Checklist/UserChecklist.stories.js +0 -317
  89. package/dist/components/Chips/Chip.stories.js +0 -36
  90. package/dist/components/Chips/ChipsWrapper.stories.js +0 -47
  91. package/dist/components/ComponentScroll/ComponentScroll.stories.js +0 -111
  92. package/dist/components/CryptoAddress/CryptoAddress.stories.js +0 -205
  93. package/dist/components/CryptoAddressDetails/CryptoAddressDetails.stories.js +0 -70
  94. package/dist/components/DonutChart/DonutChart.stories.js +0 -54
  95. package/dist/components/FAQ/FAQ.stories.js +0 -76
  96. package/dist/components/Footer/Footer.stories.js +0 -49
  97. package/dist/components/Footer/FooterLayout.stories.js +0 -26
  98. package/dist/components/Footer/FooterMenu.stories.js +0 -113
  99. package/dist/components/Footer/mangopay.png +0 -0
  100. package/dist/components/Footer/mangopay.svg +0 -20
  101. package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js +0 -69
  102. package/dist/components/Form/Form.stories.js +0 -32
  103. package/dist/components/FullscreenCard/FullscreenCard.styles.js +0 -27
  104. package/dist/components/Header/Header.stories.js +0 -192
  105. package/dist/components/Icon/Icon.stories.js +0 -108
  106. package/dist/components/InfoIcon/InfoIcon.stories.js +0 -299
  107. package/dist/components/InfoPanel/InfoPanel.js +0 -124
  108. package/dist/components/Input/DatePickerInput.stories.js +0 -87
  109. package/dist/components/Input/Input.stories.js +0 -217
  110. package/dist/components/Input/InputPassword.stories.js +0 -80
  111. package/dist/components/Input/InputWithButton.stories.js +0 -75
  112. package/dist/components/Input/MultiSelect.stories.js +0 -264
  113. package/dist/components/Input/OtpInput.stories.js +0 -57
  114. package/dist/components/Input/RangeInput.stories.js +0 -58
  115. package/dist/components/Input/SearchInput.stories.js +0 -366
  116. package/dist/components/Input/Select.stories.js +0 -478
  117. package/dist/components/InvestCalculator/InvestCalculator.stories.js +0 -135
  118. package/dist/components/InvestmentStat/InvestmentStat.stories.js +0 -52
  119. package/dist/components/KYCFlow/BasicInfo.js +0 -448
  120. package/dist/components/KYCFlow/Confirmation.js +0 -46
  121. package/dist/components/KYCFlow/DocumentFileUpload.js +0 -263
  122. package/dist/components/KYCFlow/DocumentScan.js +0 -75
  123. package/dist/components/KYCFlow/DocumentScanUpload.js +0 -251
  124. package/dist/components/KYCFlow/DocumentSelect.js +0 -118
  125. package/dist/components/KYCFlow/DocumentSuccess.js +0 -63
  126. package/dist/components/KYCFlow/DocumentUpload.js +0 -53
  127. package/dist/components/KYCFlow/DocumentVerificationType.js +0 -131
  128. package/dist/components/KYCFlow/FaceScan.js +0 -54
  129. package/dist/components/KYCFlow/FaceScanRecognition.js +0 -61
  130. package/dist/components/KYCFlow/FaceScanSuccess.js +0 -56
  131. package/dist/components/KYCFlow/Terms.js +0 -119
  132. package/dist/components/KYCFlow/_styles.js +0 -111
  133. package/dist/components/KYCFlow/index.js +0 -97
  134. package/dist/components/KYCSelectBox/KYCSelectBox.styles.js +0 -29
  135. package/dist/components/LatestUpdate/LatestUpdate.stories.js +0 -58
  136. package/dist/components/Layout/Layout.stories.js +0 -60
  137. package/dist/components/LearnMoreCarousel/LearnMoreCarousel.stories.js +0 -66
  138. package/dist/components/LearnMorePage/LearnMore.stories.js +0 -48
  139. package/dist/components/LearnMorePage/LearnMoreItem.stories.js +0 -62
  140. package/dist/components/LearnMoreSection/LearnMore.stories.js +0 -30
  141. package/dist/components/LearnMoreSection/LearnMoreItem.stories.js +0 -59
  142. package/dist/components/LoginModal/LoginModal.stories.js +0 -74
  143. package/dist/components/MatomoConnect/Matomo.js +0 -228
  144. package/dist/components/MatomoConnect/Matomo_fuckup.js +0 -387
  145. package/dist/components/Modal/Modal.stories.js +0 -75
  146. package/dist/components/Modal/NewVentureModal/NewVentureModal.stories.js +0 -150
  147. package/dist/components/Modal/PaymentModal.stories.js +0 -57
  148. package/dist/components/Modal/SideModal.stories.js +0 -342
  149. package/dist/components/MultiProgressBar/MultiProgressBar.stories.js +0 -67
  150. package/dist/components/Newsletter/Newsletter.stories.js +0 -16
  151. package/dist/components/NotificationContext/NotificationContext.js +0 -141
  152. package/dist/components/Number/Number.stories.js +0 -92
  153. package/dist/components/Pagination/Pagination.stories.js +0 -83
  154. package/dist/components/Pagination/PaginationControls.stories.js +0 -112
  155. package/dist/components/Payment/PaymentDetailsCard.stories.js +0 -198
  156. package/dist/components/Payment/PaymentDisplay.stories.js +0 -302
  157. package/dist/components/Payment/TimerComponent.stories.js +0 -236
  158. package/dist/components/Process/Process.stories.js +0 -42
  159. package/dist/components/ProfileBadge/ProfileBadge.stories.js +0 -45
  160. package/dist/components/ProfileBox/ProfileBox.stories.js +0 -35
  161. package/dist/components/ProfileHeader/ProfileHeader.js +0 -252
  162. package/dist/components/ProfileHeader/ProfileHeader.styles.js +0 -65
  163. package/dist/components/ProfileStat/ProfileStat.stories.js +0 -66
  164. package/dist/components/ProofOfAddress/ProofOfAddress.styles.js +0 -53
  165. package/dist/components/QRCode/QRCode.stories.js +0 -104
  166. package/dist/components/Radio/Radio.stories.js +0 -73
  167. package/dist/components/RefreshButton/RefreshButton.stories.js +0 -38
  168. package/dist/components/RegisterAlgorand/AlgoAddressName.js +0 -138
  169. package/dist/components/RegisterAlgorand/AlgoAdressSelect.js +0 -443
  170. package/dist/components/RegisterAlgorand/AlgoConnectWallet.js +0 -47
  171. package/dist/components/RegisterAlgorand/AlgoSuccess.js +0 -38
  172. package/dist/components/RegisterAlgorand/Algorand.stories.js +0 -80
  173. package/dist/components/RegisterAlgorand/ChooseWallet.js +0 -97
  174. package/dist/components/RegisterAlgorand/SelectProject.js +0 -89
  175. package/dist/components/RegisterAlgorand/_styles.js +0 -28
  176. package/dist/components/RegisterAlgorand/flow.js +0 -409
  177. package/dist/components/RegisterAlgorand/flowWithMemo.js +0 -410
  178. package/dist/components/RegisterAlgorand/index.js +0 -48
  179. package/dist/components/RegisterConfirmModal/RegisterConfirmModal.stories.js +0 -41
  180. package/dist/components/RegisterEthereum/EthAddressLedger.js +0 -226
  181. package/dist/components/RegisterEthereum/EthAddressMetamask.js +0 -204
  182. package/dist/components/RegisterEthereum/EthAddressName.js +0 -135
  183. package/dist/components/RegisterEthereum/EthConnectLedger.js +0 -194
  184. package/dist/components/RegisterEthereum/EthConnectMetamask.js +0 -35
  185. package/dist/components/RegisterEthereum/EthFinish.js +0 -41
  186. package/dist/components/RegisterEthereum/EthIntro.js +0 -95
  187. package/dist/components/RegisterEthereum/_styles.js +0 -28
  188. package/dist/components/RegisterEthereum/index.js +0 -68
  189. package/dist/components/RegisterModal/RegisterModal.stories.js +0 -49
  190. package/dist/components/RequestDataBox/RequestDataBox.stories.js +0 -37
  191. package/dist/components/RiskQuestionnaire/RiskQuestionnaireContext.js +0 -185
  192. package/dist/components/RiskQuestionnaire/_styles.js +0 -15
  193. package/dist/components/SEO/SEO.stories.js +0 -60
  194. package/dist/components/SideLine/SideLine.stories.js +0 -28
  195. package/dist/components/SigningSubflow/SignSubAddressMetamask.js +0 -137
  196. package/dist/components/SigningSubflow/SignSubConnectLedger.js +0 -150
  197. package/dist/components/SigningSubflow/SignSubConnectMetamask.js +0 -137
  198. package/dist/components/SigningSubflow/SignSubIntro.js +0 -55
  199. package/dist/components/SigningSubflow/SignSubSendLedger.js +0 -150
  200. package/dist/components/SigningSubflow/SignSubSendMetamask.js +0 -62
  201. package/dist/components/SigningSubflow/SignSubTransactionLedger.js +0 -161
  202. package/dist/components/SigningSubflow/SignSubTransactionMetamask.js +0 -166
  203. package/dist/components/SigningSubflow/_styles.js +0 -34
  204. package/dist/components/SigningSubflow/index.js +0 -32
  205. package/dist/components/Slider/Slider.stories.js +0 -68
  206. package/dist/components/Snackbar/Snackbar.stories.js +0 -292
  207. package/dist/components/StatusTag/StatusTag.stories.js +0 -262
  208. package/dist/components/StepController/StepController.stories.js +0 -60
  209. package/dist/components/StepController/StepControllerProgress.stories.js +0 -49
  210. package/dist/components/StepsProgress/StepIndicator.stories.js +0 -153
  211. package/dist/components/StepsProgress/StepsProgress.stories.js +0 -49
  212. package/dist/components/Switch/Switch.stories.js +0 -81
  213. package/dist/components/Tabs/Tabs.stories.js +0 -36
  214. package/dist/components/TabsNav/TabNav.stories.js +0 -40
  215. package/dist/components/TabsNav/TabsNav.stories.js +0 -37
  216. package/dist/components/TeamOverview/TeamOverview.stories.js +0 -76
  217. package/dist/components/TermsModal/TermsModal.stories.js +0 -31
  218. package/dist/components/Text/Headline.stories.js +0 -48
  219. package/dist/components/Text/Text.stories.js +0 -70
  220. package/dist/components/TextLink/TextLink.stories.js +0 -35
  221. package/dist/components/Timeline/Timeline.stories.js +0 -393
  222. package/dist/components/ToDoList/ToDoList.stories.js +0 -133
  223. package/dist/components/ToDoList/ToDoListTask.stories.js +0 -70
  224. package/dist/components/TransactionDetails/TransactionDetails.stories.js +0 -55
  225. package/dist/components/TransactionDetails/TransactionDetailsTable.stories.js +0 -305
  226. package/dist/components/TransactionInfo/TransactionInfo.stories.js +0 -61
  227. package/dist/components/TwoFactorModal/TwoFactorModal.js +0 -100
  228. package/dist/components/VerifyEmailModal/VerifyEmailModal.stories.js +0 -59
  229. package/dist/components/headerHo/HeaderHo.stories.js +0 -35
  230. package/dist/components/icons/Arrow.stories.js +0 -42
  231. package/dist/components/icons/ArrowSimple.stories.js +0 -48
  232. package/dist/components/icons/Check.stories.js +0 -22
  233. package/dist/components/icons/Facebook.stories.js +0 -21
  234. package/dist/components/icons/Facebook_Logo.png +0 -0
  235. package/dist/components/icons/Info.stories.js +0 -16
  236. package/dist/components/icons/Instagram.stories.js +0 -21
  237. package/dist/components/icons/LI-In-Bug.png +0 -0
  238. package/dist/components/icons/LinkIcon.stories.js +0 -21
  239. package/dist/components/icons/LinkedIn.stories.js +0 -16
  240. package/dist/components/icons/Medium.stories.js +0 -16
  241. package/dist/components/icons/Reddit.stories.js +0 -21
  242. package/dist/components/icons/Share.stories.js +0 -16
  243. package/dist/components/icons/Telegram-Logo.png +0 -0
  244. package/dist/components/icons/Telegram.stories.js +0 -16
  245. package/dist/components/icons/Twitter.stories.js +0 -21
  246. package/dist/components/icons/X-logo-black.png +0 -0
  247. package/dist/components/icons/X.stories.js +0 -16
  248. package/dist/components/icons/Youtube.stories.js +0 -21
  249. package/dist/components/icons/youtube_social_circle_red.png +0 -0
  250. package/dist/components/logo/Logo.stories.js +0 -260
  251. package/dist/components/taxId/TaxId.stories.js +0 -50
  252. package/dist/components/video/Video.stories.js +0 -52
  253. package/dist/static/images/document-icon.svg +0 -3
  254. package/dist/static/images/sent-icon.svg +0 -10
@@ -1,305 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- 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;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _TransactionDetailsTable = require("./TransactionDetailsTable");
9
- var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
10
- var _global = _interopRequireDefault(require("../../styles/global"));
11
- var _InfoIcon = require("../InfoIcon/InfoIcon");
12
- var _Info = require("../icons/Info");
13
- var _colors = _interopRequireDefault(require("../../styles/colors"));
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
- var _default = exports.default = {
16
- title: 'Components Library/TransactionDetails/TransactionDetailsTable',
17
- component: _TransactionDetailsTable.TransactionDetailsTable,
18
- argTypes: {
19
- data: {
20
- control: 'object',
21
- description: 'Array of objects with label, value, labelIcon, and valueIcon properties'
22
- },
23
- showBorders: {
24
- control: 'boolean',
25
- description: 'Show borders around the table and rows',
26
- defaultValue: true
27
- },
28
- maxWidth: {
29
- control: 'text',
30
- description: 'Maximum width of the table container'
31
- },
32
- labelCellStyle: {
33
- control: false,
34
- description: 'Function that returns style object for label cells: (index, item) => style'
35
- },
36
- valueCellStyle: {
37
- control: false,
38
- description: 'Function that returns style object for value cells: (index, item) => style'
39
- },
40
- rowStyle: {
41
- control: false,
42
- description: 'Function that returns style object for rows: (index, item) => style'
43
- },
44
- containerStyle: {
45
- control: 'object',
46
- description: 'Style object for the table container'
47
- },
48
- className: {
49
- control: 'text',
50
- description: 'CSS class name for the table container'
51
- },
52
- labelCellClassName: {
53
- control: false,
54
- description: 'Function that returns className for label cells: (index, item) => className'
55
- },
56
- valueCellClassName: {
57
- control: false,
58
- description: 'Function that returns className for value cells: (index, item) => className'
59
- },
60
- rowClassName: {
61
- control: false,
62
- description: 'Function that returns className for rows: (index, item) => className'
63
- }
64
- },
65
- 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)))]
66
- };
67
- const Template = args => /*#__PURE__*/_react.default.createElement(_TransactionDetailsTable.TransactionDetailsTable, args);
68
-
69
- // Basic example
70
- const Basic = exports.Basic = Template.bind({});
71
- Basic.args = {
72
- data: [{
73
- label: 'Transaction ID',
74
- value: '0x1234...5678'
75
- }, {
76
- label: 'Amount',
77
- value: '1,000.00 EUR'
78
- }, {
79
- label: 'Status',
80
- value: 'Completed'
81
- }]
82
- };
83
-
84
- // Multiple rows
85
- const MultipleRows = exports.MultipleRows = Template.bind({});
86
- MultipleRows.args = {
87
- data: [{
88
- label: 'Transaction ID',
89
- value: '0x1234567890abcdef'
90
- }, {
91
- label: 'From Address',
92
- value: '0xabcd...ef01'
93
- }, {
94
- label: 'To Address',
95
- value: '0x2345...6789'
96
- }, {
97
- label: 'Amount',
98
- value: '5,000.00 EUR'
99
- }, {
100
- label: 'Gas Fee',
101
- value: '0.001 ETH'
102
- }, {
103
- label: 'Status',
104
- value: 'Completed'
105
- }, {
106
- label: 'Date',
107
- value: '2024-01-15 14:30:00'
108
- }]
109
- };
110
-
111
- // With icons
112
- const WithIcons = exports.WithIcons = Template.bind({});
113
- WithIcons.args = {
114
- data: [{
115
- label: 'Transaction ID',
116
- value: '0x1234...5678',
117
- labelIcon: /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
118
- title: "This is the unique identifier for your transaction",
119
- position: "right"
120
- })
121
- }, {
122
- label: 'Amount',
123
- value: '1,000.00 EUR',
124
- valueIcon: /*#__PURE__*/_react.default.createElement(_Info.Info, {
125
- style: {
126
- marginRight: '8px',
127
- display: 'inline-block'
128
- }
129
- })
130
- }, {
131
- label: 'Status',
132
- value: 'Completed'
133
- }]
134
- };
135
-
136
- // Without borders
137
- const WithoutBorders = exports.WithoutBorders = Template.bind({});
138
- WithoutBorders.args = {
139
- data: [{
140
- label: 'Transaction ID',
141
- value: '0x1234...5678'
142
- }, {
143
- label: 'Amount',
144
- value: '1,000.00 EUR'
145
- }, {
146
- label: 'Status',
147
- value: 'Completed'
148
- }],
149
- showBorders: false
150
- };
151
-
152
- // Custom width
153
- const CustomWidth = exports.CustomWidth = Template.bind({});
154
- CustomWidth.args = {
155
- data: [{
156
- label: 'Transaction ID',
157
- value: '0x1234...5678'
158
- }, {
159
- label: 'Amount',
160
- value: '1,000.00 EUR'
161
- }, {
162
- label: 'Status',
163
- value: 'Completed'
164
- }],
165
- maxWidth: '800px'
166
- };
167
-
168
- // With custom styling
169
- const WithCustomStyling = exports.WithCustomStyling = Template.bind({});
170
- WithCustomStyling.args = {
171
- data: [{
172
- label: 'Transaction ID',
173
- value: '0x1234...5678'
174
- }, {
175
- label: 'Amount',
176
- value: '1,000.00 EUR'
177
- }, {
178
- label: 'Status',
179
- value: 'Completed'
180
- }, {
181
- label: 'Priority',
182
- value: 'High'
183
- }],
184
- rowStyle: (index, item) => {
185
- if (item.value === 'Completed') {
186
- return {
187
- backgroundColor: _colors.default.veryLightGreen
188
- };
189
- }
190
- if (item.value === 'High') {
191
- return {
192
- backgroundColor: _colors.default.lightPeach
193
- };
194
- }
195
- return {};
196
- },
197
- valueCellStyle: (index, item) => {
198
- if (item.value === 'Completed') {
199
- return {
200
- color: _colors.default.freshGreen,
201
- fontWeight: 'bold'
202
- };
203
- }
204
- return {};
205
- }
206
- };
207
-
208
- // Long text content
209
- const LongTextContent = exports.LongTextContent = Template.bind({});
210
- LongTextContent.args = {
211
- data: [{
212
- label: 'Transaction Hash',
213
- value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef'
214
- }, {
215
- label: 'Description',
216
- 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.'
217
- }, {
218
- label: 'Short Label',
219
- value: 'Short value'
220
- }]
221
- };
222
-
223
- // Empty state (edge case)
224
- const EmptyState = exports.EmptyState = Template.bind({});
225
- EmptyState.args = {
226
- data: []
227
- };
228
-
229
- // Single row
230
- const SingleRow = exports.SingleRow = Template.bind({});
231
- SingleRow.args = {
232
- data: [{
233
- label: 'Total Amount',
234
- value: '10,000.00 EUR'
235
- }]
236
- };
237
-
238
- // With container styling
239
- const WithContainerStyling = exports.WithContainerStyling = Template.bind({});
240
- WithContainerStyling.args = {
241
- data: [{
242
- label: 'Transaction ID',
243
- value: '0x1234...5678'
244
- }, {
245
- label: 'Amount',
246
- value: '1,000.00 EUR'
247
- }, {
248
- label: 'Status',
249
- value: 'Completed'
250
- }],
251
- containerStyle: {
252
- borderRadius: '8px',
253
- padding: '20px',
254
- backgroundColor: _colors.default.grey3
255
- }
256
- };
257
-
258
- // Complex example with all features
259
- const ComplexExample = exports.ComplexExample = Template.bind({});
260
- ComplexExample.args = {
261
- data: [{
262
- label: 'Transaction ID',
263
- value: '0x1234...5678',
264
- labelIcon: /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
265
- title: "Unique transaction identifier",
266
- position: "right",
267
- noMarginLeft: true
268
- })
269
- }, {
270
- label: 'Amount',
271
- value: '5,000.00 EUR',
272
- valueIcon: /*#__PURE__*/_react.default.createElement(_Info.Info, {
273
- style: {
274
- marginRight: '8px',
275
- display: 'inline-block'
276
- }
277
- })
278
- }, {
279
- label: 'Status',
280
- value: 'Pending'
281
- }, {
282
- label: 'Gas Fee',
283
- value: '0.002 ETH'
284
- }, {
285
- label: 'Network',
286
- value: 'Ethereum Mainnet'
287
- }],
288
- maxWidth: '700px',
289
- rowStyle: (index, item) => {
290
- if (item.value === 'Pending') {
291
- return {
292
- backgroundColor: _colors.default.yellowLight
293
- };
294
- }
295
- return {};
296
- },
297
- valueCellStyle: (index, item) => {
298
- if (item.value === 'Pending') {
299
- return {
300
- color: _colors.default.warningOrange
301
- };
302
- }
303
- return {};
304
- }
305
- };
@@ -1,61 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.TransactionInfoExample = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _TransactionInfo = require("./TransactionInfo");
9
- var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
10
- var _global = _interopRequireDefault(require("../../styles/global"));
11
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
- var _default = exports.default = {
13
- title: 'Components Library/TransactionInfo',
14
- component: _TransactionInfo.TransactionInfo,
15
- argTypes: {
16
- value1: {
17
- type: 'string',
18
- defaultValue: ''
19
- },
20
- unit1: {
21
- type: 'string',
22
- defaultValue: ''
23
- },
24
- name1: {
25
- type: 'string',
26
- defaultValue: ''
27
- },
28
- owner1: {
29
- type: 'string',
30
- defaultValue: ''
31
- },
32
- value2: {
33
- type: 'string',
34
- defaultValue: ''
35
- },
36
- unit2: {
37
- type: 'string',
38
- defaultValue: ''
39
- },
40
- name2: {
41
- type: 'string',
42
- defaultValue: ''
43
- },
44
- owner2: {
45
- type: 'string',
46
- defaultValue: ''
47
- }
48
- }
49
- };
50
- 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(_TransactionInfo.TransactionInfo, args)));
51
- const TransactionInfoExample = exports.TransactionInfoExample = Template.bind({});
52
- TransactionInfoExample.args = {
53
- value1: 'value 1',
54
- unit1: 'unit 1',
55
- name1: 'name 1',
56
- owner1: 'owner 1',
57
- value2: 'value 2',
58
- unit2: 'unit 2',
59
- name2: 'name 2',
60
- owner2: 'owner 2'
61
- };
@@ -1,100 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.TwoFactorModal = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _formik = require("formik");
10
- var Yup = _interopRequireWildcard(require("yup"));
11
- var _Modal = require("../Modal/Modal");
12
- var _Form = _interopRequireWildcard(require("../Form/Form"));
13
- var _Text = _interopRequireDefault(require("../Text/Text.styles"));
14
- var _Input = _interopRequireDefault(require("../Input/Input"));
15
- var _Button = _interopRequireDefault(require("../Button/Button.styles"));
16
- var _Grid = require("../Grid/Grid.styles");
17
- var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
18
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
19
- 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); }
20
- 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; }
21
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
22
- 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); }
23
- class TwoFactorModal extends _react.PureComponent {
24
- constructor() {
25
- super(...arguments);
26
- _defineProperty(this, "initialValues", {
27
- fa2code: ''
28
- });
29
- _defineProperty(this, "validationSchema", Yup.object().shape({
30
- fa2code: Yup.string().required('Token is required')
31
- }));
32
- }
33
- render() {
34
- const {
35
- isModalOpen,
36
- onModalClose,
37
- onFormSend
38
- } = this.props;
39
- return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
40
- isOpen: isModalOpen,
41
- onClose: onModalClose
42
- }, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
43
- part: 8
44
- }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
45
- modalTop: true
46
- }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Two Factor Authentication"), /*#__PURE__*/_react.default.createElement("p", null, 'Please log in to engage in our community & invest in exciting opportunities.'))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
47
- modalBot: true
48
- })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
49
- part: 8
50
- }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
51
- initialValues: this.initialValues,
52
- validationSchema: this.validationSchema,
53
- onSubmit: onFormSend
54
- }, _ref => {
55
- let {
56
- values,
57
- errors,
58
- touched,
59
- handleBlur,
60
- setFieldValue,
61
- setFieldTouched
62
- } = _ref;
63
- const onChangeWithTouch = e => {
64
- const field = e.target;
65
- setFieldValue(field.name, field.value, false);
66
- setFieldTouched(field.name);
67
- };
68
- const submitDisabled = !touched.fa2code || !!errors.fa2code;
69
- return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
70
- noPadding: true
71
- }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
72
- id: "two-factor",
73
- name: "fa2code",
74
- type: "text",
75
- label: "Token",
76
- value: values.fa2code,
77
- onChange: onChangeWithTouch,
78
- onBlur: handleBlur,
79
- error: !!errors.fa2code,
80
- touched: !!touched.fa2code
81
- }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
82
- show: errors.fa2code && touched.fa2code
83
- }, errors.fa2code))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
84
- noPaddingBottom: true,
85
- noPaddingHorizontal: true
86
- }, /*#__PURE__*/_react.default.createElement(_Button.default, {
87
- type: "submit",
88
- fluid: true,
89
- disabled: submitDisabled
90
- }, "Login")));
91
- })))));
92
- }
93
- }
94
- exports.TwoFactorModal = TwoFactorModal;
95
- TwoFactorModal.propTypes = {
96
- isModalOpen: _propTypes.default.bool.isRequired,
97
- onModalClose: _propTypes.default.func.isRequired,
98
- onFormSend: _propTypes.default.func.isRequired
99
- };
100
- var _default = exports.default = TwoFactorModal;
@@ -1,59 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.VerifyEmailSuccess = exports.VerifyEmailError = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _VerifyEmailModal = require("./VerifyEmailModal");
9
- var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
10
- var _global = _interopRequireDefault(require("../../styles/global"));
11
- var _reactRouterDom = require("react-router-dom");
12
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
- var _default = exports.default = {
14
- title: 'Components Library/Verify Email Modal',
15
- component: _VerifyEmailModal.VerifyEmailModal,
16
- argTypes: {
17
- isModalOpen: {
18
- type: 'boolean',
19
- defaultValue: true,
20
- required: true
21
- },
22
- onModalClose: {
23
- type: 'function',
24
- action: 'onModalClose',
25
- required: true
26
- },
27
- popupError: {
28
- type: 'object',
29
- defaultValue: {}
30
- },
31
- isSuccess: {
32
- type: 'boolean',
33
- defaultValue: true,
34
- required: true
35
- }
36
- }
37
- };
38
- 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(_VerifyEmailModal.VerifyEmailModal, args))));
39
- const VerifyEmailError = exports.VerifyEmailError = Template.bind({});
40
- VerifyEmailError.args = {
41
- popupError: {},
42
- isModalOpen: true,
43
- popupSuccess: {},
44
- error: {
45
- message: 'This link has expired. Please try verifying email again.'
46
- },
47
- isSuccess: false,
48
- onResend: data => {
49
- console.log(data);
50
- }
51
- };
52
- const VerifyEmailSuccess = exports.VerifyEmailSuccess = Template.bind({});
53
- VerifyEmailSuccess.args = {
54
- popupError: {},
55
- isModalOpen: true,
56
- popupSuccess: {},
57
- isSuccess: true,
58
- continueUrl: 'https://www.stokr.info'
59
- };
@@ -1,35 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.HeaderHoOverview = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _HeaderHo = _interopRequireDefault(require("./HeaderHo"));
9
- var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
10
- var _global = _interopRequireDefault(require("../../styles/global"));
11
- var _AuthContext = require("../../context/AuthContext");
12
- var _reactRouterDom = require("react-router-dom");
13
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
- var _default = exports.default = {
15
- title: 'Components Library/Header Ho',
16
- component: _HeaderHo.default,
17
- argTypes: {
18
- // isModalOpen: { type: 'boolean', defaultValue: true },
19
- // onModalClose: { type: 'function', action: 'onModalClose', required: true },
20
- // onFormSend: { type: 'function', action: 'onFormSend', required: true },
21
- // onModalSwitch: {
22
- // type: 'function',
23
- // action: 'onModalSwitch',
24
- // required: true,
25
- // },
26
- }
27
- };
28
- const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_HeaderHo.default, args), /*#__PURE__*/_react.default.createElement("div", {
29
- style: {
30
- height: '1700px',
31
- background: 'orange'
32
- }
33
- }))));
34
- const HeaderHoOverview = exports.HeaderHoOverview = Template.bind({});
35
- HeaderHoOverview.args = {};
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.ArrowTop = exports.ArrowRight = exports.ArrowLeft = exports.ArrowBottom = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _Arrow = require("./Arrow");
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- var _default = exports.default = {
11
- title: 'Components Library/Icons/Arrow',
12
- component: _Arrow.Arrow,
13
- argTypes: {
14
- direction: {
15
- type: 'string',
16
- defaultValue: 'bottom'
17
- }
18
- },
19
- parameters: {
20
- backgrounds: {
21
- default: 'grey'
22
- }
23
- }
24
- }; //making default background grey in story as the element is white
25
- const Template = args => /*#__PURE__*/_react.default.createElement(_Arrow.Arrow, args);
26
- const ArrowBottom = exports.ArrowBottom = Template.bind({});
27
- ArrowBottom.args = {};
28
- const ArrowRight = exports.ArrowRight = Template.bind({});
29
- ArrowRight.args = {
30
- direction: 'right'
31
- };
32
- const ArrowLeft = exports.ArrowLeft = Template.bind({});
33
- ArrowLeft.args = {
34
- direction: 'left'
35
- };
36
- const ArrowTop = exports.ArrowTop = Template.bind({});
37
- ArrowTop.args = {
38
- direction: 'top'
39
- };
40
-
41
- //doublecheck:
42
- //make variants from directions?
@@ -1,48 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.ArrowSimpleTop = exports.ArrowSimpleRight = exports.ArrowSimpleLeft = exports.ArrowSimpleBottom = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ArrowSimple = require("./ArrowSimple");
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- var _default = exports.default = {
11
- title: 'Components Library/Icons/ArrowSimple',
12
- component: _ArrowSimple.ArrowSimple
13
- };
14
- const Template = args => /*#__PURE__*/_react.default.createElement(_ArrowSimple.ArrowSimple, args);
15
- const ArrowSimpleBottom = exports.ArrowSimpleBottom = Template.bind({});
16
- ArrowSimpleBottom.args = {
17
- direction: 'bottom',
18
- children: 'ArrowSimpleBottom'
19
- };
20
- const ArrowSimpleRight = exports.ArrowSimpleRight = Template.bind({});
21
- ArrowSimpleRight.args = {
22
- direction: 'right',
23
- children: 'ArrowSimpleRight'
24
- };
25
- const ArrowSimpleLeft = exports.ArrowSimpleLeft = Template.bind({});
26
- ArrowSimpleLeft.args = {
27
- direction: 'left',
28
- children: 'ArrowSimpleLeft'
29
- };
30
- const ArrowSimpleTop = exports.ArrowSimpleTop = Template.bind({});
31
- ArrowSimpleTop.args = {
32
- direction: 'top',
33
- children: 'ArrowSimpleTop'
34
- };
35
-
36
- //before
37
- // export const arrowsimple = () => <ArrowSimple />
38
-
39
- // export const ArrowSimpleBottom = () => (
40
- // <ArrowSimple direction="bottom"></ArrowSimple>
41
- // )
42
- // export const ArrowSimpleRight = () => (
43
- // <ArrowSimple direction="right"></ArrowSimple>
44
- // )
45
- // export const ArrowSimpleLeft = () => (
46
- // <ArrowSimple direction="left"></ArrowSimple>
47
- // )
48
- // export const ArrowSimpleTop = () => <ArrowSimple direction="top"></ArrowSimple>
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.check = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _Check = require("./Check");
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- var _default = exports.default = {
11
- title: 'Components Library/Icons/Check',
12
- component: _Check.Check,
13
- parameters: {
14
- backgrounds: {
15
- default: 'grey'
16
- }
17
- }
18
- };
19
- const check = () => /*#__PURE__*/_react.default.createElement(_Check.Check, null);
20
-
21
- //making default background grey in story as the element is white
22
- exports.check = check;