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

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 (256) hide show
  1. package/dist/analytics/index.js +162 -0
  2. package/dist/components/2FA/login-with-otp-flow.js +1 -1
  3. package/dist/components/2FA/main-flow.js +40 -12
  4. package/dist/components/Chips/Chip.js +1 -2
  5. package/dist/components/Chips/Chip.styles.js +3 -2
  6. package/dist/components/ConfirmModal/ConfirmModal.js +240 -0
  7. package/dist/components/ConfirmModal/ConfirmModal.styles.js +26 -0
  8. package/dist/components/CryptoAddress/CryptoAddress.js +10 -4
  9. package/dist/components/CryptoAddress/CryptoAddress.styles.js +1 -1
  10. package/dist/components/Footer/FooterLayout.js +13 -4
  11. package/dist/components/Footer/FooterMenu.js +19 -3
  12. package/dist/components/Footer/FooterMenu.styles.js +14 -2
  13. package/dist/components/Header/Header.styles.js +1 -1
  14. package/dist/components/Input/DatePickerInput.js +134 -30
  15. package/dist/components/Input/DatePickerInput.styles.js +16 -3
  16. package/dist/components/Input/MultiSelect.js +10 -8
  17. package/dist/components/Input/TableFilterDropdown.js +228 -0
  18. package/dist/components/Input/Textarea.js +59 -0
  19. package/dist/components/Input/Textarea.styles.js +18 -0
  20. package/dist/components/Modal/Modal.js +39 -6
  21. package/dist/components/Modal/Modal.styles.js +2 -2
  22. package/dist/components/Modal/SideModal.js +44 -2
  23. package/dist/components/Modal/SuccessModal/SuccessModal.js +173 -0
  24. package/dist/components/Modal/SuccessModal/SuccessModal.styles.js +29 -0
  25. package/dist/components/Modal/SuccessModal/index.js +37 -0
  26. package/dist/components/Payment/PaymentDetailsCard.js +14 -11
  27. package/dist/components/Payment/PaymentDisplay.js +2 -12
  28. package/dist/components/Snackbar/Snackbar.js +3 -0
  29. package/dist/components/Snackbar/Snackbar.styles.js +18 -9
  30. package/dist/components/StatusTag/StatusTag.js +38 -71
  31. package/dist/components/StatusTag/StatusTag.styles.js +4 -16
  32. package/dist/components/Timeline/Timeline.styles.js +1 -1
  33. package/dist/components/Timeline/TimelineStep.js +0 -1
  34. package/dist/context/AuthContext.js +5 -0
  35. package/dist/favicon.ico +0 -0
  36. package/dist/index.css +1 -0
  37. package/dist/index.js +55 -0
  38. package/dist/index.js.map +1 -0
  39. package/dist/index.umd.cjs +10371 -0
  40. package/dist/index.umd.cjs.map +1 -0
  41. package/dist/logo192.png +0 -0
  42. package/dist/logo512.png +0 -0
  43. package/dist/manifest.json +25 -0
  44. package/dist/robots.txt +3 -0
  45. package/dist/static/animations/checked.lottie +0 -0
  46. package/dist/static/animations/progress.lottie +0 -0
  47. package/dist/static/images/add-folder-icon.svg +5 -0
  48. package/dist/static/images/background3.png +0 -0
  49. package/dist/static/images/bmn2-logo.svg +9 -9
  50. package/dist/static/images/checkmark-circle-icon.svg +4 -0
  51. package/dist/static/images/close-circle-icon.svg +3 -0
  52. package/dist/static/images/doc-icon.svg +4 -0
  53. package/dist/static/images/filter-icon.svg +6 -0
  54. package/dist/styles/colors.js +2 -1
  55. package/dist/styles/global.js +1 -1
  56. package/dist/utils/customHooks.js +24 -2
  57. package/dist/utils/formatCurrencyValue.js +9 -2
  58. package/package.json +5 -2
  59. package/dist/components/2FA/EnterCode.stories.js +0 -35
  60. package/dist/components/2FA/disable-2fa-flow.stories.js +0 -31
  61. package/dist/components/2FA/enable-2fa-flow.stories.js +0 -31
  62. package/dist/components/2FA/login-with-otp-flow.stories.js +0 -31
  63. package/dist/components/2FA/main-flow.stories.js +0 -162
  64. package/dist/components/AccountBalance/AccountBalance.stories.js +0 -83
  65. package/dist/components/AdminDashboard/Table/ReactTable.stories.js +0 -913
  66. package/dist/components/AgreementItem/AgreementItem.stories.js +0 -105
  67. package/dist/components/AnalyticGraphs/Analytic.js +0 -541
  68. package/dist/components/AnalyticGraphs/Analytic.styles.js +0 -25
  69. package/dist/components/BackButton/BackButton.stories.js +0 -32
  70. package/dist/components/Background/Background.stories.js +0 -75
  71. package/dist/components/BarChart/BarChart.js +0 -263
  72. package/dist/components/BarChart/BarChart.stories.js +0 -66
  73. package/dist/components/BarChart/BarChart.styles.js +0 -26
  74. package/dist/components/BarChartLegend/BarChartLegend.js +0 -79
  75. package/dist/components/BarChartLegend/BarChartLegend.styles.js +0 -21
  76. package/dist/components/BasicTable/BasicTable.stories.js +0 -59
  77. package/dist/components/BlogPost/BlogPost.stories.js +0 -160
  78. package/dist/components/Button/Button.stories.js +0 -146
  79. package/dist/components/Button/GlareButton.stories.js +0 -132
  80. package/dist/components/CapitalRaisedSummary/CapitalRaisedSummery.stories.js +0 -42
  81. package/dist/components/ChartBox/ChartBox.js +0 -41
  82. package/dist/components/ChartBox/ChartBox.stories.js +0 -17
  83. package/dist/components/ChartBox/ChartBox.styles.js +0 -27
  84. package/dist/components/ChartBox/ChartBoxDistribution.js +0 -27
  85. package/dist/components/ChartBox/ChartBoxDistribution.stories.js +0 -18
  86. package/dist/components/ChartLegend/ChartLegend.stories.js +0 -90
  87. package/dist/components/Checkbox/Checkbox.stories.js +0 -88
  88. package/dist/components/Checklist/ChecklistCard.stories.js +0 -102
  89. package/dist/components/Checklist/UserChecklist.js +0 -184
  90. package/dist/components/Checklist/UserChecklist.stories.js +0 -317
  91. package/dist/components/Chips/Chip.stories.js +0 -36
  92. package/dist/components/Chips/ChipsWrapper.stories.js +0 -47
  93. package/dist/components/ComponentScroll/ComponentScroll.stories.js +0 -111
  94. package/dist/components/CryptoAddress/CryptoAddress.stories.js +0 -205
  95. package/dist/components/CryptoAddressDetails/CryptoAddressDetails.stories.js +0 -70
  96. package/dist/components/DonutChart/DonutChart.stories.js +0 -54
  97. package/dist/components/FAQ/FAQ.stories.js +0 -76
  98. package/dist/components/Footer/Footer.stories.js +0 -49
  99. package/dist/components/Footer/FooterLayout.stories.js +0 -26
  100. package/dist/components/Footer/FooterMenu.stories.js +0 -113
  101. package/dist/components/Footer/mangopay.png +0 -0
  102. package/dist/components/Footer/mangopay.svg +0 -20
  103. package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js +0 -69
  104. package/dist/components/Form/Form.stories.js +0 -32
  105. package/dist/components/FullscreenCard/FullscreenCard.styles.js +0 -27
  106. package/dist/components/Header/Header.stories.js +0 -192
  107. package/dist/components/Icon/Icon.stories.js +0 -108
  108. package/dist/components/InfoIcon/InfoIcon.stories.js +0 -299
  109. package/dist/components/InfoPanel/InfoPanel.js +0 -124
  110. package/dist/components/Input/DatePickerInput.stories.js +0 -87
  111. package/dist/components/Input/Input.stories.js +0 -217
  112. package/dist/components/Input/InputPassword.stories.js +0 -80
  113. package/dist/components/Input/InputWithButton.stories.js +0 -75
  114. package/dist/components/Input/MultiSelect.stories.js +0 -264
  115. package/dist/components/Input/OtpInput.stories.js +0 -57
  116. package/dist/components/Input/RangeInput.stories.js +0 -58
  117. package/dist/components/Input/SearchInput.stories.js +0 -366
  118. package/dist/components/Input/Select.stories.js +0 -478
  119. package/dist/components/InvestCalculator/InvestCalculator.stories.js +0 -135
  120. package/dist/components/InvestmentStat/InvestmentStat.stories.js +0 -52
  121. package/dist/components/KYCFlow/BasicInfo.js +0 -448
  122. package/dist/components/KYCFlow/Confirmation.js +0 -46
  123. package/dist/components/KYCFlow/DocumentFileUpload.js +0 -263
  124. package/dist/components/KYCFlow/DocumentScan.js +0 -75
  125. package/dist/components/KYCFlow/DocumentScanUpload.js +0 -251
  126. package/dist/components/KYCFlow/DocumentSelect.js +0 -118
  127. package/dist/components/KYCFlow/DocumentSuccess.js +0 -63
  128. package/dist/components/KYCFlow/DocumentUpload.js +0 -53
  129. package/dist/components/KYCFlow/DocumentVerificationType.js +0 -131
  130. package/dist/components/KYCFlow/FaceScan.js +0 -54
  131. package/dist/components/KYCFlow/FaceScanRecognition.js +0 -61
  132. package/dist/components/KYCFlow/FaceScanSuccess.js +0 -56
  133. package/dist/components/KYCFlow/Terms.js +0 -119
  134. package/dist/components/KYCFlow/_styles.js +0 -111
  135. package/dist/components/KYCFlow/index.js +0 -97
  136. package/dist/components/KYCSelectBox/KYCSelectBox.styles.js +0 -29
  137. package/dist/components/LatestUpdate/LatestUpdate.stories.js +0 -58
  138. package/dist/components/Layout/Layout.stories.js +0 -60
  139. package/dist/components/LearnMoreCarousel/LearnMoreCarousel.stories.js +0 -66
  140. package/dist/components/LearnMorePage/LearnMore.stories.js +0 -48
  141. package/dist/components/LearnMorePage/LearnMoreItem.stories.js +0 -62
  142. package/dist/components/LearnMoreSection/LearnMore.stories.js +0 -30
  143. package/dist/components/LearnMoreSection/LearnMoreItem.stories.js +0 -59
  144. package/dist/components/LoginModal/LoginModal.stories.js +0 -74
  145. package/dist/components/MatomoConnect/Matomo.js +0 -228
  146. package/dist/components/MatomoConnect/Matomo_fuckup.js +0 -387
  147. package/dist/components/Modal/Modal.stories.js +0 -75
  148. package/dist/components/Modal/NewVentureModal/NewVentureModal.stories.js +0 -150
  149. package/dist/components/Modal/PaymentModal.stories.js +0 -57
  150. package/dist/components/Modal/SideModal.stories.js +0 -342
  151. package/dist/components/MultiProgressBar/MultiProgressBar.stories.js +0 -67
  152. package/dist/components/Newsletter/Newsletter.stories.js +0 -16
  153. package/dist/components/NotificationContext/NotificationContext.js +0 -141
  154. package/dist/components/Number/Number.stories.js +0 -92
  155. package/dist/components/Pagination/Pagination.stories.js +0 -83
  156. package/dist/components/Pagination/PaginationControls.stories.js +0 -112
  157. package/dist/components/Payment/PaymentDetailsCard.stories.js +0 -198
  158. package/dist/components/Payment/PaymentDisplay.stories.js +0 -302
  159. package/dist/components/Payment/TimerComponent.stories.js +0 -236
  160. package/dist/components/Process/Process.stories.js +0 -42
  161. package/dist/components/ProfileBadge/ProfileBadge.stories.js +0 -45
  162. package/dist/components/ProfileBox/ProfileBox.stories.js +0 -35
  163. package/dist/components/ProfileHeader/ProfileHeader.js +0 -252
  164. package/dist/components/ProfileHeader/ProfileHeader.styles.js +0 -65
  165. package/dist/components/ProfileStat/ProfileStat.stories.js +0 -66
  166. package/dist/components/ProofOfAddress/ProofOfAddress.styles.js +0 -53
  167. package/dist/components/QRCode/QRCode.stories.js +0 -104
  168. package/dist/components/Radio/Radio.stories.js +0 -73
  169. package/dist/components/RefreshButton/RefreshButton.stories.js +0 -38
  170. package/dist/components/RegisterAlgorand/AlgoAddressName.js +0 -138
  171. package/dist/components/RegisterAlgorand/AlgoAdressSelect.js +0 -443
  172. package/dist/components/RegisterAlgorand/AlgoConnectWallet.js +0 -47
  173. package/dist/components/RegisterAlgorand/AlgoSuccess.js +0 -38
  174. package/dist/components/RegisterAlgorand/Algorand.stories.js +0 -80
  175. package/dist/components/RegisterAlgorand/ChooseWallet.js +0 -97
  176. package/dist/components/RegisterAlgorand/SelectProject.js +0 -89
  177. package/dist/components/RegisterAlgorand/_styles.js +0 -28
  178. package/dist/components/RegisterAlgorand/flow.js +0 -409
  179. package/dist/components/RegisterAlgorand/flowWithMemo.js +0 -410
  180. package/dist/components/RegisterAlgorand/index.js +0 -48
  181. package/dist/components/RegisterConfirmModal/RegisterConfirmModal.stories.js +0 -41
  182. package/dist/components/RegisterEthereum/EthAddressLedger.js +0 -226
  183. package/dist/components/RegisterEthereum/EthAddressMetamask.js +0 -204
  184. package/dist/components/RegisterEthereum/EthAddressName.js +0 -135
  185. package/dist/components/RegisterEthereum/EthConnectLedger.js +0 -194
  186. package/dist/components/RegisterEthereum/EthConnectMetamask.js +0 -35
  187. package/dist/components/RegisterEthereum/EthFinish.js +0 -41
  188. package/dist/components/RegisterEthereum/EthIntro.js +0 -95
  189. package/dist/components/RegisterEthereum/_styles.js +0 -28
  190. package/dist/components/RegisterEthereum/index.js +0 -68
  191. package/dist/components/RegisterModal/RegisterModal.stories.js +0 -49
  192. package/dist/components/RequestDataBox/RequestDataBox.stories.js +0 -37
  193. package/dist/components/RiskQuestionnaire/RiskQuestionnaireContext.js +0 -185
  194. package/dist/components/RiskQuestionnaire/_styles.js +0 -15
  195. package/dist/components/SEO/SEO.stories.js +0 -60
  196. package/dist/components/SideLine/SideLine.stories.js +0 -28
  197. package/dist/components/SigningSubflow/SignSubAddressMetamask.js +0 -137
  198. package/dist/components/SigningSubflow/SignSubConnectLedger.js +0 -150
  199. package/dist/components/SigningSubflow/SignSubConnectMetamask.js +0 -137
  200. package/dist/components/SigningSubflow/SignSubIntro.js +0 -55
  201. package/dist/components/SigningSubflow/SignSubSendLedger.js +0 -150
  202. package/dist/components/SigningSubflow/SignSubSendMetamask.js +0 -62
  203. package/dist/components/SigningSubflow/SignSubTransactionLedger.js +0 -161
  204. package/dist/components/SigningSubflow/SignSubTransactionMetamask.js +0 -166
  205. package/dist/components/SigningSubflow/_styles.js +0 -34
  206. package/dist/components/SigningSubflow/index.js +0 -32
  207. package/dist/components/Slider/Slider.stories.js +0 -68
  208. package/dist/components/Snackbar/Snackbar.stories.js +0 -292
  209. package/dist/components/StatusTag/StatusTag.stories.js +0 -262
  210. package/dist/components/StepController/StepController.stories.js +0 -60
  211. package/dist/components/StepController/StepControllerProgress.stories.js +0 -49
  212. package/dist/components/StepsProgress/StepIndicator.stories.js +0 -153
  213. package/dist/components/StepsProgress/StepsProgress.stories.js +0 -49
  214. package/dist/components/Switch/Switch.stories.js +0 -81
  215. package/dist/components/Tabs/Tabs.stories.js +0 -36
  216. package/dist/components/TabsNav/TabNav.stories.js +0 -40
  217. package/dist/components/TabsNav/TabsNav.stories.js +0 -37
  218. package/dist/components/TeamOverview/TeamOverview.stories.js +0 -76
  219. package/dist/components/TermsModal/TermsModal.stories.js +0 -31
  220. package/dist/components/Text/Headline.stories.js +0 -48
  221. package/dist/components/Text/Text.stories.js +0 -70
  222. package/dist/components/TextLink/TextLink.stories.js +0 -35
  223. package/dist/components/Timeline/Timeline.stories.js +0 -393
  224. package/dist/components/ToDoList/ToDoList.stories.js +0 -133
  225. package/dist/components/ToDoList/ToDoListTask.stories.js +0 -70
  226. package/dist/components/TransactionDetails/TransactionDetails.stories.js +0 -55
  227. package/dist/components/TransactionDetails/TransactionDetailsTable.stories.js +0 -305
  228. package/dist/components/TransactionInfo/TransactionInfo.stories.js +0 -61
  229. package/dist/components/TwoFactorModal/TwoFactorModal.js +0 -100
  230. package/dist/components/VerifyEmailModal/VerifyEmailModal.stories.js +0 -59
  231. package/dist/components/headerHo/HeaderHo.stories.js +0 -35
  232. package/dist/components/icons/Arrow.stories.js +0 -42
  233. package/dist/components/icons/ArrowSimple.stories.js +0 -48
  234. package/dist/components/icons/Check.stories.js +0 -22
  235. package/dist/components/icons/Facebook.stories.js +0 -21
  236. package/dist/components/icons/Facebook_Logo.png +0 -0
  237. package/dist/components/icons/Info.stories.js +0 -16
  238. package/dist/components/icons/Instagram.stories.js +0 -21
  239. package/dist/components/icons/LI-In-Bug.png +0 -0
  240. package/dist/components/icons/LinkIcon.stories.js +0 -21
  241. package/dist/components/icons/LinkedIn.stories.js +0 -16
  242. package/dist/components/icons/Medium.stories.js +0 -16
  243. package/dist/components/icons/Reddit.stories.js +0 -21
  244. package/dist/components/icons/Share.stories.js +0 -16
  245. package/dist/components/icons/Telegram-Logo.png +0 -0
  246. package/dist/components/icons/Telegram.stories.js +0 -16
  247. package/dist/components/icons/Twitter.stories.js +0 -21
  248. package/dist/components/icons/X-logo-black.png +0 -0
  249. package/dist/components/icons/X.stories.js +0 -16
  250. package/dist/components/icons/Youtube.stories.js +0 -21
  251. package/dist/components/icons/youtube_social_circle_red.png +0 -0
  252. package/dist/components/logo/Logo.stories.js +0 -260
  253. package/dist/components/taxId/TaxId.stories.js +0 -50
  254. package/dist/components/video/Video.stories.js +0 -52
  255. package/dist/static/images/document-icon.svg +0 -3
  256. 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;