@wise/dynamic-flow-client 0.0.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.
- package/LICENSE.md +13 -0
- package/README.md +188 -0
- package/package.json +121 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
Copyright 2019 Wise Ltd.
|
|
2
|
+
|
|
3
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License.
|
|
5
|
+
You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
See the License for the specific language governing permissions and
|
|
13
|
+
limitations under the License.
|
package/README.md
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
# Dynamic Flow Web Client
|
|
2
|
+
|
|
3
|
+
This is the Dynamic Flow web client. It provides a simple way to integrate a Dynamic Flow into your web app.
|
|
4
|
+
|
|
5
|
+
## Integration
|
|
6
|
+
|
|
7
|
+
1. Install `@wise/dynamic-flow-client`.
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
# yarn
|
|
11
|
+
yarn add @wise/dynamic-flow-client
|
|
12
|
+
|
|
13
|
+
# npm
|
|
14
|
+
npm install @wise/dynamic-flow-client
|
|
15
|
+
|
|
16
|
+
# pnpm
|
|
17
|
+
pnpm install @wise/dynamic-flow-client
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
2. Install required peer dependencies (if not already installed). Please refer to setup instructions for `@transferwise/components` and `@transferwise/neptune-css` if installing up for the first time.
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
# yarn
|
|
24
|
+
yarn add prop-types react react-dom react-intl
|
|
25
|
+
yarn add @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
|
|
26
|
+
|
|
27
|
+
# npm
|
|
28
|
+
npm install prop-types react react-dom react-intl
|
|
29
|
+
npm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
|
|
30
|
+
|
|
31
|
+
# pnpm
|
|
32
|
+
pnpm install prop-types react react-dom react-intl
|
|
33
|
+
pnpm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
// Should be imported once in your application
|
|
38
|
+
import '@wise/dynamic-flow-client/build/main.css';
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
The `DynamicFlow` component must be wraped in a Neptune `Provider` to support localisation, a `ThemeProvider` to provide theming, and a `SnackbarProvider` to ensure snackbars display correctly. Translations should be imported from both components and dynamic flows, merged, and passed to the `Provider` component (as below).
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
import {
|
|
45
|
+
Provider,
|
|
46
|
+
SnackbarProvider,
|
|
47
|
+
translations as componentTranslations,
|
|
48
|
+
getLangFromLocale,
|
|
49
|
+
DEFAULT_LANG,
|
|
50
|
+
} from '@transferwise/components';
|
|
51
|
+
import {
|
|
52
|
+
DynamicFlow,
|
|
53
|
+
translations as dynamicFlowsTranslations,
|
|
54
|
+
} from '@wise/dynamic-flow-client/';
|
|
55
|
+
|
|
56
|
+
const lang = getLangFromLocale(locale) || DEFAULT_LANG;
|
|
57
|
+
const i18n = {
|
|
58
|
+
locale,
|
|
59
|
+
messages: {
|
|
60
|
+
...componentTranslations[lang],
|
|
61
|
+
...dynamicFlowsTranslations[lang],
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<Provider i18n={i18n}>
|
|
67
|
+
<ThemeProvider theme={theme}>
|
|
68
|
+
<SnackbarProvider>
|
|
69
|
+
<DynamicFlow {...props} />
|
|
70
|
+
</SnackbarProvider>
|
|
71
|
+
</ThemeProvider>
|
|
72
|
+
</Provider>
|
|
73
|
+
);
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Configuring your Flow
|
|
77
|
+
|
|
78
|
+
There are few ways to initialise DF:
|
|
79
|
+
|
|
80
|
+
- with a `initialAction` or with an `initialStep`
|
|
81
|
+
- with a `baseUrl` or with a `fetcher` function
|
|
82
|
+
|
|
83
|
+
We recommend using a `initialAction` and a `fetcher` function.
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<DynamicFlow
|
|
87
|
+
initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
|
|
88
|
+
fetcher={(...args) => fetch(...args)}
|
|
89
|
+
onClose={(result) => {
|
|
90
|
+
console.log('Flow exited with', result);
|
|
91
|
+
}}
|
|
92
|
+
onError={(error, statusCode) => {
|
|
93
|
+
console.error('Flow Error:', error, 'status code', statusCode);
|
|
94
|
+
}}
|
|
95
|
+
/>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### `initialAction` vs `initialStep`
|
|
99
|
+
|
|
100
|
+
In some cases you may want to obtain the initial step yourself, and then pass it to DF component. In these cases you don't provide a `initialAction` since the next steps will result from interactions in the provided `initialStep`:
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
<DynamicFlow
|
|
104
|
+
initialStep={someInitialStepIfoundLayingAroundHere}
|
|
105
|
+
fetcher={...}
|
|
106
|
+
onClose={...}
|
|
107
|
+
onError={...}
|
|
108
|
+
/>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### `baseUrl` vs `fetcher`
|
|
112
|
+
|
|
113
|
+
We recommend passing a fetcher function. This can be `window.fetch` itself or some wrapper function where you inject auth headers and anything else you many need.
|
|
114
|
+
|
|
115
|
+
You can take advantage of the `makeFetcher` utility function. This function takes a `baseUrl` and `additionalHeaders` arguments. The `baseUrl` will be prefixed to any relative request URLs. Absolute URLs will not be altered. The `additionalHeaders` parameter can be used to add any request headers you need in all requests, such as `{ 'X-Access-Token': 'Tr4n5f3rw153' }`:
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
import { makeFetcher, DynamicFlow } from '@wise/dynamic-flow-client';
|
|
119
|
+
|
|
120
|
+
const myFetcher = makeFetcher('/my-base-url', { 'X-Access-Token': 'Tr4n5f3rw153' });
|
|
121
|
+
|
|
122
|
+
...
|
|
123
|
+
|
|
124
|
+
<DynamicFlow
|
|
125
|
+
initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
|
|
126
|
+
fetcher={myFetcher}
|
|
127
|
+
// baseUrl="/my-base-url"
|
|
128
|
+
onClose={...}
|
|
129
|
+
onError={...}
|
|
130
|
+
/>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
**Important**: You must not throw from your fetcher function. Errors should result in a response with an error status code and potentially a body with an error message.
|
|
134
|
+
|
|
135
|
+
### Logging and Tracking
|
|
136
|
+
|
|
137
|
+
The `DynamicFlow` component accepts two optional props: `onTrackableEvent` and `onLog` which can be used to track and log.
|
|
138
|
+
|
|
139
|
+
In the example below we send tracking events to Mixpanel and logging events to Rollbar.
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
<DynamicFlow
|
|
143
|
+
onTrackableEvent={(event, props) => mixpanel.track(event, props)}
|
|
144
|
+
onLog={(level, message, extra) => Rollbar[level](message, extra)}
|
|
145
|
+
/>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
Alternatively, you can log to the browser console:
|
|
149
|
+
|
|
150
|
+
```ts
|
|
151
|
+
onTrackableEvent={(event, props) => console.log(event, props)}
|
|
152
|
+
onLog={(level, message, extra) => {
|
|
153
|
+
const levelToConsole = {
|
|
154
|
+
critical: console.error,
|
|
155
|
+
error: console.error,
|
|
156
|
+
warning: console.warn,
|
|
157
|
+
info: console.info,
|
|
158
|
+
debug: console.log,
|
|
159
|
+
} as const;
|
|
160
|
+
levelToConsole[level](message, extra);
|
|
161
|
+
}}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### Loader configuration
|
|
165
|
+
|
|
166
|
+
By default, DF will display a loading animation (The `Loader` component from Neptune) when the first step is loading. It will not display it during refresh-on-change or while submitting forms.
|
|
167
|
+
|
|
168
|
+
You can change the defaults by passing a `loaderConfig` prop:
|
|
169
|
+
|
|
170
|
+
```ts
|
|
171
|
+
type LoaderConfig = {
|
|
172
|
+
size?: `xs | sm | md | lg | xl`;
|
|
173
|
+
initial?: boolean;
|
|
174
|
+
submission?: boolean;
|
|
175
|
+
};
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
| property | type | notes | default |
|
|
179
|
+
| ------------ | ------- | ------------------------------------------------------------------------------ | ------- |
|
|
180
|
+
| `size` | string | The size of the Loader component. | `xl` |
|
|
181
|
+
| `initial` | boolean | Whether or not to display the Loader component while loading the initial step. | true |
|
|
182
|
+
| `submission` | boolean | Whether or not to display the Loader component during form submissions. | false |
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
## Contributing
|
|
186
|
+
|
|
187
|
+
We love contributions! Check out `CONTRIBUTING.md` for more information.
|
|
188
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@wise/dynamic-flow-client",
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "Wise Dynamic Flow web client",
|
|
5
|
+
"main": "./build/index.js",
|
|
6
|
+
"types": "./build/index.d.ts",
|
|
7
|
+
"style": "./build/main.css",
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"*.css"
|
|
10
|
+
],
|
|
11
|
+
"files": [
|
|
12
|
+
"build"
|
|
13
|
+
],
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"fullname": "transferwise/neptune-web",
|
|
17
|
+
"url": "git+https://github.com/transferwise/neptune-web.git"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@babel/core": "7.20.12",
|
|
21
|
+
"@babel/preset-env": "7.20.2",
|
|
22
|
+
"@babel/preset-react": "^7.18.6",
|
|
23
|
+
"@babel/preset-typescript": "^7.21.0",
|
|
24
|
+
"@formatjs/cli": "^4.8.3",
|
|
25
|
+
"@storybook/addon-a11y": "6.5.16",
|
|
26
|
+
"@storybook/addon-actions": "6.5.16",
|
|
27
|
+
"@storybook/addon-essentials": "6.5.16",
|
|
28
|
+
"@storybook/addon-interactions": "6.5.16",
|
|
29
|
+
"@storybook/addon-links": "6.5.16",
|
|
30
|
+
"@storybook/builder-webpack5": "6.5.16",
|
|
31
|
+
"@storybook/manager-webpack5": "6.5.16",
|
|
32
|
+
"@storybook/react": "6.5.16",
|
|
33
|
+
"@storybook/testing-library": "0.0.13",
|
|
34
|
+
"@testing-library/dom": "8.20.0",
|
|
35
|
+
"@testing-library/jest-dom": "5.14.1",
|
|
36
|
+
"@testing-library/react": "^12.0.0",
|
|
37
|
+
"@testing-library/react-hooks": "^8.0.1",
|
|
38
|
+
"@testing-library/user-event": "13.2.1",
|
|
39
|
+
"@transferwise/components": "^43.13.49",
|
|
40
|
+
"@transferwise/eslint-config": "^8.0.1",
|
|
41
|
+
"@transferwise/formatting": "^2.10.0",
|
|
42
|
+
"@transferwise/icons": "^3.2.3",
|
|
43
|
+
"@transferwise/neptune-css": "^14.3.45",
|
|
44
|
+
"@transferwise/neptune-tokens": "^8.4.0",
|
|
45
|
+
"@types/enzyme": "^3.10.12",
|
|
46
|
+
"@types/jest": "29.4.0",
|
|
47
|
+
"@types/lodash": "^4.14.167",
|
|
48
|
+
"@types/lodash.debounce": "^4.0.7",
|
|
49
|
+
"@types/react": "17",
|
|
50
|
+
"@types/react-dom": "17",
|
|
51
|
+
"@types/testing-library__jest-dom": "5.9.5",
|
|
52
|
+
"@wise/art": "2.0.1",
|
|
53
|
+
"@wise/components-theming": "^0.7.4",
|
|
54
|
+
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
|
|
55
|
+
"babel-jest": "29.5.0",
|
|
56
|
+
"cpx": "1.5.0",
|
|
57
|
+
"currency-flags": "4.0.7",
|
|
58
|
+
"enzyme": "^3.11.0",
|
|
59
|
+
"eslint": "8.36.0",
|
|
60
|
+
"jest": "29.5.0",
|
|
61
|
+
"jest-environment-jsdom": "29.5.0",
|
|
62
|
+
"jest-fetch-mock": "^3.0.3",
|
|
63
|
+
"npm-run-all": "4.1.5",
|
|
64
|
+
"postcss": "^8.4.21",
|
|
65
|
+
"postcss-cli": "^10.1.0",
|
|
66
|
+
"postcss-import": "^15.1.0",
|
|
67
|
+
"prettier": "2.8.4",
|
|
68
|
+
"react": "17",
|
|
69
|
+
"react-dom": "17",
|
|
70
|
+
"react-intl": "5.20.6",
|
|
71
|
+
"require-from-string": "2.0.2",
|
|
72
|
+
"stylelint": "^14.7.1",
|
|
73
|
+
"stylelint-config-standard": "^25.0.0",
|
|
74
|
+
"stylelint-no-unsupported-browser-features": "^5.0.3",
|
|
75
|
+
"stylelint-value-no-unknown-custom-properties": "^4.0.0",
|
|
76
|
+
"typescript": "4.9.5",
|
|
77
|
+
"webpack": "5.75.0"
|
|
78
|
+
},
|
|
79
|
+
"peerDependencies": {
|
|
80
|
+
"@transferwise/components": "^43",
|
|
81
|
+
"@transferwise/formatting": "^2.10.0",
|
|
82
|
+
"@transferwise/icons": "^3",
|
|
83
|
+
"@transferwise/neptune-css": "^14",
|
|
84
|
+
"@transferwise/neptune-validation": "^3",
|
|
85
|
+
"prop-types": "^15.7.2",
|
|
86
|
+
"react": ">=16.14",
|
|
87
|
+
"react-dom": ">=16.14",
|
|
88
|
+
"react-intl": "^5.10.0 || ^6"
|
|
89
|
+
},
|
|
90
|
+
"peerDependenciesMeta": {
|
|
91
|
+
"prop-types": {
|
|
92
|
+
"optional": true
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
"dependencies": {
|
|
96
|
+
"@babel/runtime": "^7.18.3",
|
|
97
|
+
"classnames": "^2.2.6",
|
|
98
|
+
"core-js": "^3.8.0",
|
|
99
|
+
"lodash.debounce": "^4.0.8",
|
|
100
|
+
"lodash.isequal": "^4.5.0",
|
|
101
|
+
"react-use": "^17.4.0",
|
|
102
|
+
"react-webcam": "^7.0.1",
|
|
103
|
+
"screenfull": "^5.0.2"
|
|
104
|
+
},
|
|
105
|
+
"prettier": "@transferwise/eslint-config/.prettierrc.js",
|
|
106
|
+
"scripts": {
|
|
107
|
+
"dev": "start-storybook -p 3003",
|
|
108
|
+
"build": "npm-run-all build:*",
|
|
109
|
+
"build:ts": "tsc --build ./tsconfig.build.json",
|
|
110
|
+
"build:css": "postcss src/main.css -o build/main.css",
|
|
111
|
+
"build:messages-source": "formatjs extract 'src/**/*.messages.{js,ts}' --out-file src/i18n/en.json --format simple && prettier --find-config-path --write src/i18n/*.json",
|
|
112
|
+
"build:compiled-messages": "cpx 'src/i18n/*.json' build/i18n",
|
|
113
|
+
"test": "npm-run-all test:once test:tz",
|
|
114
|
+
"test:once": "jest --config jest.config.js --env=jsdom",
|
|
115
|
+
"test:tz": "TZ=US/Pacific jest ./src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.errors.spec.js ./src/formControl/FormControl.spec.js",
|
|
116
|
+
"test:watch": "pnpm test:once --watch",
|
|
117
|
+
"lint": "npm-run-all lint:ts lint:css",
|
|
118
|
+
"lint:ts": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
|
|
119
|
+
"lint:css": "stylelint --allow-empty-input './src/**/*.less'"
|
|
120
|
+
}
|
|
121
|
+
}
|