@stokr/components-library 3.0.76 → 3.0.77
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.
- package/README.md +177 -177
- package/dist/components/Modal/Modal.js +6 -3
- package/dist/components/Modal/SuccessModal/SuccessModal.js +6 -3
- package/dist/index.js +2 -2
- package/dist/manifest.json +25 -25
- package/dist/robots.txt +3 -3
- package/dist/runtime-config.js +1 -1
- package/dist/static/fonts/icomoon/icomoon.eot +0 -0
- package/dist/static/fonts/icomoon/icomoon.svg +52 -52
- package/dist/static/fonts/icomoon/icomoon.ttf +0 -0
- package/dist/static/fonts/icomoon/icomoon.woff +0 -0
- package/dist/static/fonts/icomoon/selection.json +0 -0
- package/dist/static/fonts/icomoon/style.css +0 -0
- package/dist/static/images/Glassess.svg +5 -5
- package/dist/static/images/add-folder-icon.svg +4 -4
- package/dist/static/images/arrow-down-black.svg +21 -21
- package/dist/static/images/check-icon.svg +3 -3
- package/dist/static/images/checkmark-circle-icon.svg +3 -3
- package/dist/static/images/close-circle-icon.svg +2 -2
- package/dist/static/images/copy_icon.svg +4 -4
- package/dist/static/images/cross-icon.svg +3 -3
- package/dist/static/images/currency/eth.svg +10 -10
- package/dist/static/images/currency/eth_logo.svg +8 -8
- package/dist/static/images/currency/eur.svg +4 -4
- package/dist/static/images/currency/eur.svg.js +1 -1
- package/dist/static/images/currency/usd.svg +4 -4
- package/dist/static/images/currency/usd.svg.js +1 -1
- package/dist/static/images/currency/usdc-logo.svg +5 -5
- package/dist/static/images/doc-icon.svg +3 -3
- package/dist/static/images/download_icon.svg +3 -3
- package/dist/static/images/external-link-icon.svg +3 -3
- package/dist/static/images/filter-icon.svg +6 -6
- package/dist/static/images/globe.svg +15 -15
- package/dist/static/images/mangopay.svg +20 -20
- package/dist/static/images/numbers/number_eight.svg +3 -3
- package/dist/static/images/numbers/number_five.svg +4 -4
- package/dist/static/images/numbers/number_four.svg +3 -3
- package/dist/static/images/numbers/number_nine.svg +4 -4
- package/dist/static/images/numbers/number_one.svg +4 -4
- package/dist/static/images/numbers/number_seven.svg +4 -4
- package/dist/static/images/numbers/number_six.svg +4 -4
- package/dist/static/images/numbers/number_three.svg +3 -3
- package/dist/static/images/numbers/number_two.svg +4 -4
- package/dist/static/images/numbers/number_zero.svg +3 -3
- package/dist/static/images/plus-icon.svg +4 -4
- package/dist/static/images/prof-inv.svg +3 -3
- package/dist/static/images/search-icon.svg +3 -3
- package/dist/static/images/transfer-icon.svg +10 -10
- package/dist/static/images/trash.svg +16 -16
- package/dist/static/images/upload.svg +5 -5
- package/dist/static/images/warning-filled.svg +3 -3
- package/package.json +143 -143
package/README.md
CHANGED
|
@@ -1,177 +1,177 @@
|
|
|
1
|
-
# @stokr/components-library
|
|
2
|
-
|
|
3
|
-
React UI library for STOKR apps: modals, forms, navigation, tables, auth context, styles.
|
|
4
|
-
|
|
5
|
-
## Contents
|
|
6
|
-
|
|
7
|
-
- [Quick start](#quick-start) — install, router, `AuthProvider`, styles
|
|
8
|
-
- [Configuration reference](#runtime-config) — `config` keys & helpers
|
|
9
|
-
- [AuthProvider & AuthContext](#authprovider-optional-props)
|
|
10
|
-
- [Troubleshooting](#troubleshooting)
|
|
11
|
-
- [Development](#development--publishing)
|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
## Quick start
|
|
16
|
-
|
|
17
|
-
**Install**
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
npm install @stokr/components-library
|
|
21
|
-
npm install react react-dom styled-components react-router-dom
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
Peers: React 18+/19+, styled-components 6.x, react-router-dom 6.x when you use routing-driven components (`HeaderHo`, `MainMenu`, …).
|
|
25
|
-
|
|
26
|
-
**1. Router** — Navigation helpers need a React Router:
|
|
27
|
-
|
|
28
|
-
```jsx
|
|
29
|
-
import { BrowserRouter } from 'react-router-dom'
|
|
30
|
-
import { RouterWrapper } from '@stokr/components-library'
|
|
31
|
-
|
|
32
|
-
// Normal app
|
|
33
|
-
root.render(
|
|
34
|
-
<BrowserRouter>
|
|
35
|
-
<App />
|
|
36
|
-
</BrowserRouter>,
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
// Outside a Router: RouterWrapper wraps children in BrowserRouter once.
|
|
40
|
-
// Inside an existing Router: it renders children only (no nested BrowserRouter).
|
|
41
|
-
root.render(
|
|
42
|
-
<RouterWrapper>
|
|
43
|
-
<App />
|
|
44
|
-
</RouterWrapper>,
|
|
45
|
-
)
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
**2. Auth & runtime config (required when consuming via npm)** — Vite freezes `import.meta.env` inside pre-built deps, so push your `.env` at runtime via `config`:
|
|
49
|
-
|
|
50
|
-
```jsx
|
|
51
|
-
import { AuthProvider } from '@stokr/components-library'
|
|
52
|
-
|
|
53
|
-
export default function App() {
|
|
54
|
-
return (
|
|
55
|
-
<AuthProvider
|
|
56
|
-
config={{
|
|
57
|
-
apiUrl: import.meta.env.VITE_API_URL,
|
|
58
|
-
baseUrlPublic: import.meta.env.VITE_BASE_URL_PUBLIC,
|
|
59
|
-
cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
|
|
60
|
-
websiteDomain: import.meta.env.VITE_WEBSITE_DOMAIN,
|
|
61
|
-
onboardingUrl: import.meta.env.VITE_ONBOARDING_URL,
|
|
62
|
-
dashboardUrl: import.meta.env.VITE_DASHBOARD_URL,
|
|
63
|
-
adminUrl: import.meta.env.VITE_ADMIN_URL,
|
|
64
|
-
registerUrl: import.meta.env.VITE_REGISTER_URL,
|
|
65
|
-
firebase: {
|
|
66
|
-
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
|
|
67
|
-
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
|
|
68
|
-
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
|
|
69
|
-
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
|
|
70
|
-
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
|
|
71
|
-
appId: import.meta.env.VITE_FIREBASE_APP_ID,
|
|
72
|
-
measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
|
|
73
|
-
},
|
|
74
|
-
}}>
|
|
75
|
-
{/* app */}
|
|
76
|
-
</AuthProvider>
|
|
77
|
-
)
|
|
78
|
-
}
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
**3. Earlier config** (e.g. analytics before mount): `import { configure } from '@stokr/components-library'` with the same shape as `config`.
|
|
82
|
-
|
|
83
|
-
**4. Icons / fonts** — Optional: `<IoniconsStyles />` at root, or rely on lazy injection when a component uses icons; for Layout / Open Sans: `import '@stokr/components-library/styles.css'`.
|
|
84
|
-
|
|
85
|
-
**5. Imports** — `import { ConfirmModal, Button, … } from '@stokr/components-library'`.
|
|
86
|
-
|
|
87
|
-
Full URL env example:
|
|
88
|
-
|
|
89
|
-
```bash
|
|
90
|
-
VITE_WEBSITE_DOMAIN=example.com
|
|
91
|
-
VITE_ONBOARDING_URL=https://signup.example.com
|
|
92
|
-
VITE_DASHBOARD_URL=https://dashboard.example.com
|
|
93
|
-
VITE_ADMIN_URL=https://admin.example.com
|
|
94
|
-
VITE_REGISTER_URL=https://example.com/signup
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
---
|
|
98
|
-
|
|
99
|
-
## Configuration reference {#runtime-config}
|
|
100
|
-
|
|
101
|
-
| `config` key | Typical `VITE_*` | Role |
|
|
102
|
-
| ----------------- | -------------------------- | ----------------------------------------- |
|
|
103
|
-
| `apiUrl` | `VITE_API_URL` | Authenticated REST base |
|
|
104
|
-
| `baseUrlPublic` | `VITE_BASE_URL_PUBLIC` | Public API base |
|
|
105
|
-
| `cookieDomain` | `VITE_COOKIE_DOMAIN` | Auth cookie `domain` attribute |
|
|
106
|
-
| `websiteDomain` | `VITE_WEBSITE_DOMAIN` | Bare host → links / `getPlatformURL()` |
|
|
107
|
-
| `onboardingUrl` | `VITE_ONBOARDING_URL` | Full signup/sign-in app URL |
|
|
108
|
-
| `dashboardUrl` | `VITE_DASHBOARD_URL` | Investor dashboard URL |
|
|
109
|
-
| `adminUrl` | `VITE_ADMIN_URL` | Venture / admin dashboard URL |
|
|
110
|
-
| `registerUrl` | `VITE_REGISTER_URL` | Public registration entry |
|
|
111
|
-
| `firebase` | `VITE_FIREBASE_*` | Firebase client config |
|
|
112
|
-
|
|
113
|
-
**Helpers:** `getConfig('…')` for any key above; `getPlatformURL()` → `https://{websiteDomain}`; `getAnalyticsIngestUrl()`, `getBackofficeAppUrl(path)`; **`getFooterGroups()`** replaces static footer URL lists.
|
|
114
|
-
|
|
115
|
-
**Auth-only HTTP:** `authenticationApi.post(segment, body)` for `auth/*`; default axios stays the main API client after login.
|
|
116
|
-
|
|
117
|
-
Missing overrides may trigger a **one-time** warning listing unresolved `VITE_*` expectations.
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
## AuthProvider & AuthContext {#authprovider-optional-props}
|
|
122
|
-
|
|
123
|
-
`AuthProvider` is wrapped with **`withRouter`** — mount it inside a **`Router`** so redirects work.
|
|
124
|
-
|
|
125
|
-
### Optional provider props
|
|
126
|
-
|
|
127
|
-
- **`inactivityTimeMs`** — Idle timeout before auto-logout + session modal (default 5 min).
|
|
128
|
-
- **`inactivityWarningBeforeMs`** — How long before that timeout to show the **“session about to expire”** warning modal (default 30 s). See [Inactivity auto-logout](#inactivity-auto-logout).
|
|
129
|
-
- **`accessTokenExpiryMs`** — Cookie TTL when **`Auth.setAccessToken`** runs (default **`DEFAULT_TOKEN_EXPIRY_MS`** = 1 h); not extended by **`getUser`** alone.
|
|
130
|
-
- **`hideInactivityModal`** — Suppress both built-in inactivity modals (warning + session expired).
|
|
131
|
-
- **`onSessionExpiredLoginClick`** — Called when the user clicks **Log in** on the session-expired modal.
|
|
132
|
-
- **`customValidateGetUser(user)`** — Hook after **`user/get`** succeeds (see `src/context/AuthContext.js`).
|
|
133
|
-
|
|
134
|
-
### Inactivity auto-logout {#inactivity-auto-logout}
|
|
135
|
-
|
|
136
|
-
When a user is logged in, `AuthProvider` resets an idle timer on mouse, keyboard, click, scroll, and touch events.
|
|
137
|
-
|
|
138
|
-
1. **Warning modal** — Shown **`inactivityWarningBeforeMs`** before the idle deadline (default: 30 s before the 5 min timeout). The user can click **To continue, press here** to reset the idle timer, or close the modal (logout still happens at the deadline). Any activity also resets the timer and closes the warning.
|
|
139
|
-
2. **Session expired modal** — Shown when the idle deadline is reached (existing behaviour). The warning modal closes automatically at the same moment.
|
|
140
|
-
|
|
141
|
-
Neither modal is shown when the user is not logged in. Both are skipped when **`hideInactivityModal`** is set.
|
|
142
|
-
|
|
143
|
-
**Storybook:** `Authentication / Auto-logout (inactivity)` → **With warning modal** (20 s idle, warning at 10 s).
|
|
144
|
-
|
|
145
|
-
### AuthContext consumer {#authcontext-usecontext}
|
|
146
|
-
|
|
147
|
-
`import { AuthContext } from '…'` then `useContext(AuthContext)`.
|
|
148
|
-
|
|
149
|
-
- **Invalid Firebase guard:** value is **`{ user: null, isFetchingUser: false }`** only (no methods).
|
|
150
|
-
- **State (grouped):** `user` / `firebaseUser`, `isFetchingUser`, `avatar`; MFA (`waitingFor2fa`, `userMfaEnrollment`, `firebaseError`); verify-email (`verifyEmailError`, `isVerifyingEmail`); session UX (`loggedOutDueToInactivity`, `loggedOutDueToCookieExpiry`, `sessionExpiryPendingReason`, `showInactivityWarningModal`).
|
|
151
|
-
- **Actions (grouped):** `userRef`, `loginUser`, `logoutUser`, `getUser`, `setUser`, `updateUser`, `refreshIdToken`; `checkUserIsValid`, `checkTokenIsValid`; `uploadPhoto`, `deletePhoto`, `checkUserPhoto`; MFA enroll / verify / unenroll + `reset2faFlow`; subscription/onboarding helpers; password & email (`handleResetPassword`, `handleVerifyEmail`, `requestUpdateEmail`, …); wallets / PoA (`uploaProofOfAddress` keeps the source spelling); **`dismissSessionExpiryModal`**, **`extendSessionFromInactivityWarning`**, **`dismissInactivityWarningModal`**.
|
|
152
|
-
|
|
153
|
-
Use **`AuthConsumer`** for the render-prop pattern.
|
|
154
|
-
|
|
155
|
-
---
|
|
156
|
-
|
|
157
|
-
## Troubleshooting {#troubleshooting}
|
|
158
|
-
|
|
159
|
-
**`useNavigate` / Router**
|
|
160
|
-
|
|
161
|
-
Add `BrowserRouter` (or **`RouterWrapper`** from this package where the shell has no router). Install `react-router-dom`.
|
|
162
|
-
|
|
163
|
-
**Invalid hook call / duplicated React**
|
|
164
|
-
|
|
165
|
-
Dedupe peers in Vite: `resolve: { dedupe: ['react', 'react-dom', 'styled-components'] }`.
|
|
166
|
-
|
|
167
|
-
---
|
|
168
|
-
|
|
169
|
-
## Development {#development--publishing}
|
|
170
|
-
|
|
171
|
-
| Command | Meaning |
|
|
172
|
-
| -------------------- | -------------------------------- |
|
|
173
|
-
| `npm run storybook` | Local docs / stories |
|
|
174
|
-
| `npm run build:dist` | Library build + static copy |
|
|
175
|
-
| `npm run pub` | Build then publish (`npm login`) |
|
|
176
|
-
|
|
177
|
-
Release: changelog entry → `npm version` → `npm run pub`. Details: [CHANGELOG.md](CHANGELOG.md).
|
|
1
|
+
# @stokr/components-library
|
|
2
|
+
|
|
3
|
+
React UI library for STOKR apps: modals, forms, navigation, tables, auth context, styles.
|
|
4
|
+
|
|
5
|
+
## Contents
|
|
6
|
+
|
|
7
|
+
- [Quick start](#quick-start) — install, router, `AuthProvider`, styles
|
|
8
|
+
- [Configuration reference](#runtime-config) — `config` keys & helpers
|
|
9
|
+
- [AuthProvider & AuthContext](#authprovider-optional-props)
|
|
10
|
+
- [Troubleshooting](#troubleshooting)
|
|
11
|
+
- [Development](#development--publishing)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Quick start
|
|
16
|
+
|
|
17
|
+
**Install**
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @stokr/components-library
|
|
21
|
+
npm install react react-dom styled-components react-router-dom
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Peers: React 18+/19+, styled-components 6.x, react-router-dom 6.x when you use routing-driven components (`HeaderHo`, `MainMenu`, …).
|
|
25
|
+
|
|
26
|
+
**1. Router** — Navigation helpers need a React Router:
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
import { BrowserRouter } from 'react-router-dom'
|
|
30
|
+
import { RouterWrapper } from '@stokr/components-library'
|
|
31
|
+
|
|
32
|
+
// Normal app
|
|
33
|
+
root.render(
|
|
34
|
+
<BrowserRouter>
|
|
35
|
+
<App />
|
|
36
|
+
</BrowserRouter>,
|
|
37
|
+
)
|
|
38
|
+
|
|
39
|
+
// Outside a Router: RouterWrapper wraps children in BrowserRouter once.
|
|
40
|
+
// Inside an existing Router: it renders children only (no nested BrowserRouter).
|
|
41
|
+
root.render(
|
|
42
|
+
<RouterWrapper>
|
|
43
|
+
<App />
|
|
44
|
+
</RouterWrapper>,
|
|
45
|
+
)
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**2. Auth & runtime config (required when consuming via npm)** — Vite freezes `import.meta.env` inside pre-built deps, so push your `.env` at runtime via `config`:
|
|
49
|
+
|
|
50
|
+
```jsx
|
|
51
|
+
import { AuthProvider } from '@stokr/components-library'
|
|
52
|
+
|
|
53
|
+
export default function App() {
|
|
54
|
+
return (
|
|
55
|
+
<AuthProvider
|
|
56
|
+
config={{
|
|
57
|
+
apiUrl: import.meta.env.VITE_API_URL,
|
|
58
|
+
baseUrlPublic: import.meta.env.VITE_BASE_URL_PUBLIC,
|
|
59
|
+
cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
|
|
60
|
+
websiteDomain: import.meta.env.VITE_WEBSITE_DOMAIN,
|
|
61
|
+
onboardingUrl: import.meta.env.VITE_ONBOARDING_URL,
|
|
62
|
+
dashboardUrl: import.meta.env.VITE_DASHBOARD_URL,
|
|
63
|
+
adminUrl: import.meta.env.VITE_ADMIN_URL,
|
|
64
|
+
registerUrl: import.meta.env.VITE_REGISTER_URL,
|
|
65
|
+
firebase: {
|
|
66
|
+
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
|
|
67
|
+
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
|
|
68
|
+
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
|
|
69
|
+
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
|
|
70
|
+
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
|
|
71
|
+
appId: import.meta.env.VITE_FIREBASE_APP_ID,
|
|
72
|
+
measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
|
|
73
|
+
},
|
|
74
|
+
}}>
|
|
75
|
+
{/* app */}
|
|
76
|
+
</AuthProvider>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**3. Earlier config** (e.g. analytics before mount): `import { configure } from '@stokr/components-library'` with the same shape as `config`.
|
|
82
|
+
|
|
83
|
+
**4. Icons / fonts** — Optional: `<IoniconsStyles />` at root, or rely on lazy injection when a component uses icons; for Layout / Open Sans: `import '@stokr/components-library/styles.css'`.
|
|
84
|
+
|
|
85
|
+
**5. Imports** — `import { ConfirmModal, Button, … } from '@stokr/components-library'`.
|
|
86
|
+
|
|
87
|
+
Full URL env example:
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
VITE_WEBSITE_DOMAIN=example.com
|
|
91
|
+
VITE_ONBOARDING_URL=https://signup.example.com
|
|
92
|
+
VITE_DASHBOARD_URL=https://dashboard.example.com
|
|
93
|
+
VITE_ADMIN_URL=https://admin.example.com
|
|
94
|
+
VITE_REGISTER_URL=https://example.com/signup
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Configuration reference {#runtime-config}
|
|
100
|
+
|
|
101
|
+
| `config` key | Typical `VITE_*` | Role |
|
|
102
|
+
| ----------------- | -------------------------- | ----------------------------------------- |
|
|
103
|
+
| `apiUrl` | `VITE_API_URL` | Authenticated REST base |
|
|
104
|
+
| `baseUrlPublic` | `VITE_BASE_URL_PUBLIC` | Public API base |
|
|
105
|
+
| `cookieDomain` | `VITE_COOKIE_DOMAIN` | Auth cookie `domain` attribute |
|
|
106
|
+
| `websiteDomain` | `VITE_WEBSITE_DOMAIN` | Bare host → links / `getPlatformURL()` |
|
|
107
|
+
| `onboardingUrl` | `VITE_ONBOARDING_URL` | Full signup/sign-in app URL |
|
|
108
|
+
| `dashboardUrl` | `VITE_DASHBOARD_URL` | Investor dashboard URL |
|
|
109
|
+
| `adminUrl` | `VITE_ADMIN_URL` | Venture / admin dashboard URL |
|
|
110
|
+
| `registerUrl` | `VITE_REGISTER_URL` | Public registration entry |
|
|
111
|
+
| `firebase` | `VITE_FIREBASE_*` | Firebase client config |
|
|
112
|
+
|
|
113
|
+
**Helpers:** `getConfig('…')` for any key above; `getPlatformURL()` → `https://{websiteDomain}`; `getAnalyticsIngestUrl()`, `getBackofficeAppUrl(path)`; **`getFooterGroups()`** replaces static footer URL lists.
|
|
114
|
+
|
|
115
|
+
**Auth-only HTTP:** `authenticationApi.post(segment, body)` for `auth/*`; default axios stays the main API client after login.
|
|
116
|
+
|
|
117
|
+
Missing overrides may trigger a **one-time** warning listing unresolved `VITE_*` expectations.
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## AuthProvider & AuthContext {#authprovider-optional-props}
|
|
122
|
+
|
|
123
|
+
`AuthProvider` is wrapped with **`withRouter`** — mount it inside a **`Router`** so redirects work.
|
|
124
|
+
|
|
125
|
+
### Optional provider props
|
|
126
|
+
|
|
127
|
+
- **`inactivityTimeMs`** — Idle timeout before auto-logout + session modal (default 5 min).
|
|
128
|
+
- **`inactivityWarningBeforeMs`** — How long before that timeout to show the **“session about to expire”** warning modal (default 30 s). See [Inactivity auto-logout](#inactivity-auto-logout).
|
|
129
|
+
- **`accessTokenExpiryMs`** — Cookie TTL when **`Auth.setAccessToken`** runs (default **`DEFAULT_TOKEN_EXPIRY_MS`** = 1 h); not extended by **`getUser`** alone.
|
|
130
|
+
- **`hideInactivityModal`** — Suppress both built-in inactivity modals (warning + session expired).
|
|
131
|
+
- **`onSessionExpiredLoginClick`** — Called when the user clicks **Log in** on the session-expired modal.
|
|
132
|
+
- **`customValidateGetUser(user)`** — Hook after **`user/get`** succeeds (see `src/context/AuthContext.js`).
|
|
133
|
+
|
|
134
|
+
### Inactivity auto-logout {#inactivity-auto-logout}
|
|
135
|
+
|
|
136
|
+
When a user is logged in, `AuthProvider` resets an idle timer on mouse, keyboard, click, scroll, and touch events.
|
|
137
|
+
|
|
138
|
+
1. **Warning modal** — Shown **`inactivityWarningBeforeMs`** before the idle deadline (default: 30 s before the 5 min timeout). The user can click **To continue, press here** to reset the idle timer, or close the modal (logout still happens at the deadline). Any activity also resets the timer and closes the warning.
|
|
139
|
+
2. **Session expired modal** — Shown when the idle deadline is reached (existing behaviour). The warning modal closes automatically at the same moment.
|
|
140
|
+
|
|
141
|
+
Neither modal is shown when the user is not logged in. Both are skipped when **`hideInactivityModal`** is set.
|
|
142
|
+
|
|
143
|
+
**Storybook:** `Authentication / Auto-logout (inactivity)` → **With warning modal** (20 s idle, warning at 10 s).
|
|
144
|
+
|
|
145
|
+
### AuthContext consumer {#authcontext-usecontext}
|
|
146
|
+
|
|
147
|
+
`import { AuthContext } from '…'` then `useContext(AuthContext)`.
|
|
148
|
+
|
|
149
|
+
- **Invalid Firebase guard:** value is **`{ user: null, isFetchingUser: false }`** only (no methods).
|
|
150
|
+
- **State (grouped):** `user` / `firebaseUser`, `isFetchingUser`, `avatar`; MFA (`waitingFor2fa`, `userMfaEnrollment`, `firebaseError`); verify-email (`verifyEmailError`, `isVerifyingEmail`); session UX (`loggedOutDueToInactivity`, `loggedOutDueToCookieExpiry`, `sessionExpiryPendingReason`, `showInactivityWarningModal`).
|
|
151
|
+
- **Actions (grouped):** `userRef`, `loginUser`, `logoutUser`, `getUser`, `setUser`, `updateUser`, `refreshIdToken`; `checkUserIsValid`, `checkTokenIsValid`; `uploadPhoto`, `deletePhoto`, `checkUserPhoto`; MFA enroll / verify / unenroll + `reset2faFlow`; subscription/onboarding helpers; password & email (`handleResetPassword`, `handleVerifyEmail`, `requestUpdateEmail`, …); wallets / PoA (`uploaProofOfAddress` keeps the source spelling); **`dismissSessionExpiryModal`**, **`extendSessionFromInactivityWarning`**, **`dismissInactivityWarningModal`**.
|
|
152
|
+
|
|
153
|
+
Use **`AuthConsumer`** for the render-prop pattern.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## Troubleshooting {#troubleshooting}
|
|
158
|
+
|
|
159
|
+
**`useNavigate` / Router**
|
|
160
|
+
|
|
161
|
+
Add `BrowserRouter` (or **`RouterWrapper`** from this package where the shell has no router). Install `react-router-dom`.
|
|
162
|
+
|
|
163
|
+
**Invalid hook call / duplicated React**
|
|
164
|
+
|
|
165
|
+
Dedupe peers in Vite: `resolve: { dedupe: ['react', 'react-dom', 'styled-components'] }`.
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Development {#development--publishing}
|
|
170
|
+
|
|
171
|
+
| Command | Meaning |
|
|
172
|
+
| -------------------- | -------------------------------- |
|
|
173
|
+
| `npm run storybook` | Local docs / stories |
|
|
174
|
+
| `npm run build:dist` | Library build + static copy |
|
|
175
|
+
| `npm run pub` | Build then publish (`npm login`) |
|
|
176
|
+
|
|
177
|
+
Release: changelog entry → `npm version` → `npm run pub`. Details: [CHANGELOG.md](CHANGELOG.md).
|
|
@@ -18,7 +18,8 @@ const Modal = ({
|
|
|
18
18
|
background,
|
|
19
19
|
maxHeight,
|
|
20
20
|
boxStyles,
|
|
21
|
-
maxWidth
|
|
21
|
+
maxWidth,
|
|
22
|
+
hideCloseButton = false
|
|
22
23
|
}) => {
|
|
23
24
|
const [isVisible, setIsVisible] = useState(false);
|
|
24
25
|
const [shouldRender, setShouldRender] = useState(false);
|
|
@@ -80,7 +81,7 @@ const Modal = ({
|
|
|
80
81
|
maxHeight,
|
|
81
82
|
maxWidth,
|
|
82
83
|
children: [
|
|
83
|
-
/* @__PURE__ */ jsx(ModalClose, { onClick: onClose }),
|
|
84
|
+
!hideCloseButton && /* @__PURE__ */ jsx(ModalClose, { onClick: onClose }),
|
|
84
85
|
children
|
|
85
86
|
]
|
|
86
87
|
}
|
|
@@ -101,7 +102,9 @@ Modal.propTypes = {
|
|
|
101
102
|
boxStyle: PropTypes.object,
|
|
102
103
|
maxHeight: PropTypes.string,
|
|
103
104
|
/** Max width limit in pixels (e.g., '1200px'). Uses min(percentage, maxWidth) */
|
|
104
|
-
maxWidth: PropTypes.string
|
|
105
|
+
maxWidth: PropTypes.string,
|
|
106
|
+
/** Hides the (X) close button — for flows where the modal is dismissed only via its own actions. */
|
|
107
|
+
hideCloseButton: PropTypes.bool
|
|
105
108
|
};
|
|
106
109
|
export {
|
|
107
110
|
Modal,
|
|
@@ -18,7 +18,8 @@ const SuccessModalComponent = ({
|
|
|
18
18
|
segment,
|
|
19
19
|
speed = 1,
|
|
20
20
|
modalProps = {},
|
|
21
|
-
maxWidth = "800px"
|
|
21
|
+
maxWidth = "800px",
|
|
22
|
+
hideAnimation = false
|
|
22
23
|
}) => {
|
|
23
24
|
useEffect(() => {
|
|
24
25
|
if (!isOpen) return;
|
|
@@ -40,7 +41,7 @@ const SuccessModalComponent = ({
|
|
|
40
41
|
maxWidth,
|
|
41
42
|
...modalProps,
|
|
42
43
|
children: /* @__PURE__ */ jsxs(SuccessModalContent, { children: [
|
|
43
|
-
/* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsx(
|
|
44
|
+
!hideAnimation && /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsx(
|
|
44
45
|
LottieAnimation,
|
|
45
46
|
{
|
|
46
47
|
variant,
|
|
@@ -72,7 +73,9 @@ SuccessModalComponent.propTypes = {
|
|
|
72
73
|
segment: PropTypes.arrayOf(PropTypes.number),
|
|
73
74
|
speed: PropTypes.number,
|
|
74
75
|
modalProps: PropTypes.object,
|
|
75
|
-
maxWidth: PropTypes.string
|
|
76
|
+
maxWidth: PropTypes.string,
|
|
77
|
+
/** Skips the animation container entirely (e.g. a plain form step with no success/progress state). */
|
|
78
|
+
hideAnimation: PropTypes.bool
|
|
76
79
|
};
|
|
77
80
|
let successContainer = null;
|
|
78
81
|
let successRoot = null;
|
package/dist/index.js
CHANGED
|
@@ -149,6 +149,8 @@ import { navigateToHref, pathnameIfSameOrigin } from "./routing/navigate-app.js"
|
|
|
149
149
|
import { RouterWrapper } from "./routing/RouterWrapper.js";
|
|
150
150
|
import { isAlreadyOnOnboardingFlow } from "./utils/app-urls.js";
|
|
151
151
|
import { authenticationApi } from "./api/authenticationApi.js";
|
|
152
|
+
import { Auth, DEFAULT_TOKEN_EXPIRY_MS } from "./context/Auth.js";
|
|
153
|
+
import { AuthConsumer, AuthContext, AuthProvider } from "./context/AuthContext.js";
|
|
152
154
|
import { colors } from "./styles/colors.js";
|
|
153
155
|
import { default as default2 } from "./styles/fonts.js";
|
|
154
156
|
import { GlobalStyle } from "./styles/global.js";
|
|
@@ -164,8 +166,6 @@ import { LoanActivityTypes, ProfessionalInvestorStatuses, ProjectStates, Project
|
|
|
164
166
|
import { default as default8 } from "./components/SvgIcons/AdminBadgeSvg.js";
|
|
165
167
|
import { Arrow } from "./components/icons/Arrow.js";
|
|
166
168
|
import { ArrowSimple } from "./components/icons/ArrowSimple.js";
|
|
167
|
-
import { Auth, DEFAULT_TOKEN_EXPIRY_MS } from "./context/Auth.js";
|
|
168
|
-
import { AuthConsumer, AuthContext, AuthProvider } from "./context/AuthContext.js";
|
|
169
169
|
import { BackButtonIcon, StyledBackButton, StyledBackButtonExternal, StyledWindowBackButton } from "./components/BackButton/BackButton.styles.js";
|
|
170
170
|
import { Breakdown } from "./components/breakdown/Breakdown.js";
|
|
171
171
|
import { default as default9 } from "./components/SvgIcons/CameraSvg.js";
|
package/dist/manifest.json
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
{
|
|
2
|
-
"short_name": "Vite React App",
|
|
3
|
-
"name": "Vite React App",
|
|
4
|
-
"icons": [
|
|
5
|
-
{
|
|
6
|
-
"src": "favicon.ico",
|
|
7
|
-
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
-
"type": "image/x-icon"
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
"src": "logo192.png",
|
|
12
|
-
"type": "image/png",
|
|
13
|
-
"sizes": "192x192"
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"src": "logo512.png",
|
|
17
|
-
"type": "image/png",
|
|
18
|
-
"sizes": "512x512"
|
|
19
|
-
}
|
|
20
|
-
],
|
|
21
|
-
"start_url": ".",
|
|
22
|
-
"display": "standalone",
|
|
23
|
-
"theme_color": "#000000",
|
|
24
|
-
"background_color": "#ffffff"
|
|
25
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"short_name": "Vite React App",
|
|
3
|
+
"name": "Vite React App",
|
|
4
|
+
"icons": [
|
|
5
|
+
{
|
|
6
|
+
"src": "favicon.ico",
|
|
7
|
+
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
+
"type": "image/x-icon"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"src": "logo192.png",
|
|
12
|
+
"type": "image/png",
|
|
13
|
+
"sizes": "192x192"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"src": "logo512.png",
|
|
17
|
+
"type": "image/png",
|
|
18
|
+
"sizes": "512x512"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"start_url": ".",
|
|
22
|
+
"display": "standalone",
|
|
23
|
+
"theme_color": "#000000",
|
|
24
|
+
"background_color": "#ffffff"
|
|
25
|
+
}
|
package/dist/robots.txt
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# https://www.robotstxt.org/robotstxt.html
|
|
2
|
-
User-agent: *
|
|
3
|
-
Disallow:
|
|
1
|
+
# https://www.robotstxt.org/robotstxt.html
|
|
2
|
+
User-agent: *
|
|
3
|
+
Disallow:
|
package/dist/runtime-config.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false
|
|
1
|
+
const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
|
|
2
2
|
const _overrides = {};
|
|
3
3
|
const ENV_KEY_BY_CONFIG = {
|
|
4
4
|
apiUrl: "VITE_API_URL",
|
|
File without changes
|