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

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.
@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _Icon = require("../Icon/Icon.style");
9
9
  var _InfoIcon = require("../InfoIcon/InfoIcon");
10
10
  var _Timeline = require("./Timeline.styles");
11
- var _crossIcon = require("static/images/cross-icon.svg");
12
- var _checkIcon = require("static/images/check-icon.svg");
11
+ var _crossIcon = require("../../static/images/cross-icon.svg");
12
+ var _checkIcon = require("../../static/images/check-icon.svg");
13
13
  var _moment = _interopRequireDefault(require("moment"));
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
15
  const TimelineStep = _ref => {
@@ -0,0 +1,260 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.SvgFile = exports.Small = exports.OnDifferentBackgrounds = exports.Medium = exports.LogoSvgComponent = exports.Large = exports.Default = exports.AllVersions = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Logo = require("./Logo");
9
+ var _LogoSvg = _interopRequireDefault(require("../SvgIcons/LogoSvg"));
10
+ var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
11
+ var _global = _interopRequireDefault(require("../../styles/global"));
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+ var _logo = _interopRequireDefault(require("../../static/images/logo.svg"));
14
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
+ // Import the SVG file as an image
16
+
17
+ const ComparisonContainer = _styledComponents.default.div.withConfig({
18
+ displayName: "Logostories__ComparisonContainer",
19
+ componentId: "sc-e8wyjz-0"
20
+ })(["display:flex;flex-direction:column;gap:32px;padding:24px;"]);
21
+ const LogoSection = _styledComponents.default.div.withConfig({
22
+ displayName: "Logostories__LogoSection",
23
+ componentId: "sc-e8wyjz-1"
24
+ })(["display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid #e1e1e1;border-radius:8px;background-color:#f8f8f8;"]);
25
+ const LogoTitle = _styledComponents.default.h3.withConfig({
26
+ displayName: "Logostories__LogoTitle",
27
+ componentId: "sc-e8wyjz-2"
28
+ })(["font-size:18px;font-weight:600;margin:0 0 8px 0;color:#202020;"]);
29
+ const LogoDescription = _styledComponents.default.p.withConfig({
30
+ displayName: "Logostories__LogoDescription",
31
+ componentId: "sc-e8wyjz-3"
32
+ })(["font-size:14px;color:#666;margin:0 0 16px 0;"]);
33
+ const LogoDisplay = _styledComponents.default.div.withConfig({
34
+ displayName: "Logostories__LogoDisplay",
35
+ componentId: "sc-e8wyjz-4"
36
+ })(["display:flex;align-items:center;gap:24px;padding:16px;background-color:white;border-radius:4px;min-height:60px;"]);
37
+ const SizeLabel = _styledComponents.default.span.withConfig({
38
+ displayName: "Logostories__SizeLabel",
39
+ componentId: "sc-e8wyjz-5"
40
+ })(["font-size:12px;color:#999;min-width:100px;"]);
41
+ var _default = exports.default = {
42
+ title: 'Components Library/Logo',
43
+ component: _Logo.Logo,
44
+ argTypes: {
45
+ width: {
46
+ control: 'number',
47
+ description: 'Width of the logo in pixels'
48
+ },
49
+ height: {
50
+ control: 'number',
51
+ description: 'Height of the logo in pixels'
52
+ }
53
+ },
54
+ 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)))]
55
+ }; // Logo.jsx component template
56
+ const LogoTemplate = args => /*#__PURE__*/_react.default.createElement(_Logo.Logo, args);
57
+
58
+ // Comparison view showing all versions
59
+ const AllVersions = () => /*#__PURE__*/_react.default.createElement(ComparisonContainer, null, /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "Logo.jsx (Class Component)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "Class component with customizable width and height props. Default: 70x17"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Default (70x17):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, null)), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Custom (100x24):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
60
+ width: 100,
61
+ height: 24
62
+ })), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Small (50x12):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
63
+ width: 50,
64
+ height: 12
65
+ })), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Large (140x34):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
66
+ width: 140,
67
+ height: 34
68
+ }))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "LogoSvg.js (Functional Component)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "Functional component with fixed size: 66px x 16px"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Fixed Size:"), /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "logo.svg (Image File)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "SVG file imported as an image. Can be used with img tag or as background"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "As img tag:"), /*#__PURE__*/_react.default.createElement("img", {
69
+ src: _logo.default,
70
+ alt: "STOKR Logo",
71
+ style: {
72
+ height: '17px'
73
+ }
74
+ })), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Larger size:"), /*#__PURE__*/_react.default.createElement("img", {
75
+ src: _logo.default,
76
+ alt: "STOKR Logo",
77
+ style: {
78
+ height: '34px'
79
+ }
80
+ })), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "As background:"), /*#__PURE__*/_react.default.createElement("div", {
81
+ style: {
82
+ width: '70px',
83
+ height: '17px',
84
+ backgroundImage: "url(".concat(_logo.default, ")"),
85
+ backgroundSize: 'contain',
86
+ backgroundRepeat: 'no-repeat',
87
+ backgroundPosition: 'center'
88
+ }
89
+ }))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "Side by Side Comparison"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "All three versions at similar sizes for direct comparison"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement("div", {
90
+ style: {
91
+ display: 'flex',
92
+ flexDirection: 'column',
93
+ gap: '16px'
94
+ }
95
+ }, /*#__PURE__*/_react.default.createElement("div", {
96
+ style: {
97
+ display: 'flex',
98
+ alignItems: 'center',
99
+ gap: '16px'
100
+ }
101
+ }, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Logo.jsx:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
102
+ width: 70,
103
+ height: 17
104
+ })), /*#__PURE__*/_react.default.createElement("div", {
105
+ style: {
106
+ display: 'flex',
107
+ alignItems: 'center',
108
+ gap: '16px'
109
+ }
110
+ }, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "LogoSvg.js:"), /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null)), /*#__PURE__*/_react.default.createElement("div", {
111
+ style: {
112
+ display: 'flex',
113
+ alignItems: 'center',
114
+ gap: '16px'
115
+ }
116
+ }, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "logo.svg:"), /*#__PURE__*/_react.default.createElement("img", {
117
+ src: _logo.default,
118
+ alt: "STOKR Logo",
119
+ style: {
120
+ height: '17px'
121
+ }
122
+ }))))));
123
+
124
+ // Default Logo.jsx
125
+ exports.AllVersions = AllVersions;
126
+ const Default = exports.Default = LogoTemplate.bind({});
127
+ Default.args = {
128
+ width: 70,
129
+ height: 17
130
+ };
131
+
132
+ // Small size
133
+ const Small = exports.Small = LogoTemplate.bind({});
134
+ Small.args = {
135
+ width: 50,
136
+ height: 12
137
+ };
138
+
139
+ // Medium size
140
+ const Medium = exports.Medium = LogoTemplate.bind({});
141
+ Medium.args = {
142
+ width: 100,
143
+ height: 24
144
+ };
145
+
146
+ // Large size
147
+ const Large = exports.Large = LogoTemplate.bind({});
148
+ Large.args = {
149
+ width: 140,
150
+ height: 34
151
+ };
152
+
153
+ // LogoSvg component
154
+ const LogoSvgComponent = () => /*#__PURE__*/_react.default.createElement("div", {
155
+ style: {
156
+ padding: '20px'
157
+ }
158
+ }, /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null));
159
+
160
+ // SVG file as image
161
+ exports.LogoSvgComponent = LogoSvgComponent;
162
+ const SvgFile = () => /*#__PURE__*/_react.default.createElement("div", {
163
+ style: {
164
+ padding: '20px',
165
+ display: 'flex',
166
+ flexDirection: 'column',
167
+ gap: '16px'
168
+ }
169
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
170
+ style: {
171
+ marginBottom: '8px',
172
+ fontSize: '14px',
173
+ color: '#666'
174
+ }
175
+ }, "Default size:"), /*#__PURE__*/_react.default.createElement("img", {
176
+ src: _logo.default,
177
+ alt: "STOKR Logo"
178
+ })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
179
+ style: {
180
+ marginBottom: '8px',
181
+ fontSize: '14px',
182
+ color: '#666'
183
+ }
184
+ }, "Custom height (34px):"), /*#__PURE__*/_react.default.createElement("img", {
185
+ src: _logo.default,
186
+ alt: "STOKR Logo",
187
+ style: {
188
+ height: '34px'
189
+ }
190
+ })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
191
+ style: {
192
+ marginBottom: '8px',
193
+ fontSize: '14px',
194
+ color: '#666'
195
+ }
196
+ }, "Custom height (50px):"), /*#__PURE__*/_react.default.createElement("img", {
197
+ src: _logo.default,
198
+ alt: "STOKR Logo",
199
+ style: {
200
+ height: '50px'
201
+ }
202
+ })));
203
+
204
+ // Different backgrounds for testing visibility
205
+ exports.SvgFile = SvgFile;
206
+ const OnDifferentBackgrounds = () => /*#__PURE__*/_react.default.createElement("div", {
207
+ style: {
208
+ display: 'flex',
209
+ flexDirection: 'column',
210
+ gap: '24px',
211
+ padding: '20px'
212
+ }
213
+ }, /*#__PURE__*/_react.default.createElement("div", {
214
+ style: {
215
+ padding: '20px',
216
+ backgroundColor: '#ffffff',
217
+ borderRadius: '8px'
218
+ }
219
+ }, /*#__PURE__*/_react.default.createElement("p", {
220
+ style: {
221
+ marginBottom: '12px',
222
+ fontSize: '14px',
223
+ fontWeight: '600'
224
+ }
225
+ }, "White Background:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
226
+ width: 70,
227
+ height: 17
228
+ })), /*#__PURE__*/_react.default.createElement("div", {
229
+ style: {
230
+ padding: '20px',
231
+ backgroundColor: '#f8f8f8',
232
+ borderRadius: '8px'
233
+ }
234
+ }, /*#__PURE__*/_react.default.createElement("p", {
235
+ style: {
236
+ marginBottom: '12px',
237
+ fontSize: '14px',
238
+ fontWeight: '600'
239
+ }
240
+ }, "Light Grey Background:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
241
+ width: 70,
242
+ height: 17
243
+ })), /*#__PURE__*/_react.default.createElement("div", {
244
+ style: {
245
+ padding: '20px',
246
+ backgroundColor: '#202020',
247
+ borderRadius: '8px'
248
+ }
249
+ }, /*#__PURE__*/_react.default.createElement("p", {
250
+ style: {
251
+ marginBottom: '12px',
252
+ fontSize: '14px',
253
+ fontWeight: '600',
254
+ color: 'white'
255
+ }
256
+ }, "Dark Background (Logo should be visible):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
257
+ width: 70,
258
+ height: 17
259
+ })));
260
+ exports.OnDifferentBackgrounds = OnDifferentBackgrounds;
@@ -3,7 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.walletTypes = exports.platformURL = exports.platformDomain = exports.emailRegex = exports.UserTypes = exports.USInvestorAcreditationStatuses = exports.ProjectTypes = exports.ProjectStatus = exports.ProjectStates = exports.ProfessionalInvestorStatuses = void 0;
6
+ exports.walletTypes = exports.transactionTypeDisplayNames = exports.platformURL = exports.platformDomain = exports.emailRegex = exports.UserTypes = exports.USInvestorAcreditationStatuses = exports.TransactionTypes = exports.ProjectTypes = exports.ProjectStatus = exports.ProjectStates = exports.ProfessionalInvestorStatuses = exports.LoanActivityTypes = void 0;
7
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
8
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
9
+ 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; }
10
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
11
+ 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); }
7
12
  const platformDomain = exports.platformDomain = process.env.REACT_APP_WEBSITE_DOMAIN;
8
13
  const platformURL = exports.platformURL = 'https://' + platformDomain;
9
14
  const walletTypes = exports.walletTypes = {
@@ -44,4 +49,38 @@ const USInvestorAcreditationStatuses = exports.USInvestorAcreditationStatuses =
44
49
  };
45
50
 
46
51
  // should be used for all email form validation globally
47
- const emailRegex = exports.emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
52
+ const emailRegex = exports.emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
53
+ const LoanActivityTypes = exports.LoanActivityTypes = {
54
+ PRINCIPAL_DEPOSIT: 'principal_deposit',
55
+ PRINCIPAL_RELEASE: 'principal_release',
56
+ INTEREST_PAYMENT: 'interest_payment',
57
+ COLLATERAL_DEPOSIT: 'collateral_deposit',
58
+ COLLATERAL_RELEASE: 'collateral_release',
59
+ COLLATERAL_PARTIAL_DEPOSIT: 'collateral_partial_deposit',
60
+ COLLATERAL_PARTIAL_RELEASE: 'collateral_partial_release',
61
+ LIQUIDATION: 'liquidation'
62
+ };
63
+ const TransactionTypes = exports.TransactionTypes = _objectSpread({
64
+ SUBSCRIPTION: 'subscription',
65
+ REFUND: 'refund',
66
+ REDEMPTION: 'redemption',
67
+ VENTURE_PAYOUT: 'issuer_payout',
68
+ AGGREGATION: 'aggregation'
69
+ }, LoanActivityTypes);
70
+
71
+ // Display names for transaction types (matching the spreadsheet)
72
+ const transactionTypeDisplayNames = exports.transactionTypeDisplayNames = {
73
+ [TransactionTypes.INTEREST_PAYMENT]: 'Interest',
74
+ [TransactionTypes.COLLATERAL_DEPOSIT]: 'Collateral Deposit',
75
+ [TransactionTypes.COLLATERAL_RELEASE]: 'Collateral Release',
76
+ [TransactionTypes.COLLATERAL_PARTIAL_DEPOSIT]: 'Collateral Shift (Deposit)',
77
+ [TransactionTypes.COLLATERAL_PARTIAL_RELEASE]: 'Collateral Shift (Release)',
78
+ [TransactionTypes.PRINCIPAL_DEPOSIT]: 'Principal Increase',
79
+ [TransactionTypes.PRINCIPAL_RELEASE]: 'Principal Decrease',
80
+ [TransactionTypes.LIQUIDATION]: 'Liquidation',
81
+ [TransactionTypes.REDEMPTION]: 'Redemption',
82
+ [TransactionTypes.REFUND]: 'Refund',
83
+ [TransactionTypes.AGGREGATION]: 'Aggregation',
84
+ [TransactionTypes.VENTURE_PAYOUT]: 'Issuer Payout',
85
+ [TransactionTypes.SUBSCRIPTION]: 'Issuance'
86
+ };
@@ -181,7 +181,6 @@ const useCheckboxActions = () => {
181
181
  }
182
182
  return {
183
183
  checkCheckbox: context.checkCheckbox,
184
- uncheckCheckbox: context.uncheckCheckbox,
185
184
  clearCheckboxes: context.clearCheckboxes
186
185
  };
187
186
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.65-beta.1",
3
+ "version": "2.3.65-beta.2",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",