@wise/dynamic-flow-client-internal 5.0.0 → 5.1.0

package/README.md

@@ -19,7 +19,7 @@ npm install @wise/dynamic-flow-client-internal
 pnpm install @wise/dynamic-flow-client-internal
 ```
 
-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.
+2. Install required peer dependencies (if not already installed). Please refer to setup instructions for `@transferwise/components` and `@transferwise/neptune-css` if installing for the first time.
 
 ```
 # yarn
@@ -37,9 +37,14 @@ pnpm install @transferwise/components @transferwise/formatting @transferwise/ico
 
 **Note:** Keep in mind that some of these dependencies have their own peer dependencies. Don't forget to install those, for instance: `@transferwise/components` needs `@wise/art` and `@wise/components-theming`.
 
+3. In addition to the design system styles, you need to import the DynamicFlow styles once into your application. You can do this either via JavaScript or CSS.
+
 ```js
-// Should be imported once in your application
-import '@wise/dynamic-flow-client-internal/build/main.css';
+import '@wise/dynamic-flow-client-internal/main.css'; // JavaScript
+```
+
+```css
+@import url('@wise/dynamic-flow-client-internal/build/main.css'); /* CSS */
 ```
 
 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).
@@ -50,15 +55,15 @@ The `DynamicFlow` component must be wraped in a Neptune `Provider` to support lo
 import {
   Provider,
   SnackbarProvider,
-  translations as componentTranslations,
+  translations as dsTranslations,
 } from '@transferwise/components';
 import { getLocalisedMessages } from '@transferwise/crab/client';
 import {
   DynamicFlow,
-  translations as dynamicFlowsTranslations,
+  translations as dfTranslations,
 } from '@wise/dynamic-flow-client-internal';
 
-const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations]);
+const messages = getLocalisedMessages(locale, [dsTranslations, dfTranslations]);
 
 return (
   <Provider i18n={{ locale, messages }}>
@@ -91,17 +96,17 @@ You'll need to merge the '@transferwise/components' translations with the '@wise
 import {
   Provider,
   SnackbarProvider,
-  translations as componentTranslations,
+  translations as dsTranslations,
 } from '@transferwise/components';
 import {
   DynamicFlow,
-  translations as dynamicFlowsTranslations,
+  translations as dfTranslations,
 } from '@wise/dynamic-flow-client-internal';
 
 // create your messages object
 const messages: Record<string, string> = {
-  ...(componentTranslations[lang] || componentTranslations[lang.replace('-', '_')] || componentTranslations[lang.substring(0, 2)] || {}),
-  ...(translations[lang] || translations[lang.replace('-', '_')] || translations[lang.substring(0, 2)] || {}),
+  ...(dsTranslations[lang] || dsTranslations[lang.replace('-', '_')] || dsTranslations[lang.substring(0, 2)] || {}),
+  ...(dfTranslations[lang] || dfTranslations[lang.replace('-', '_')] || dfTranslations[lang.substring(0, 2)] || {}),
 }
 
 return (
@@ -203,13 +208,13 @@ const mockCustomFetch = (input, init) => Promise.resolve(new Response(JSON.strin
 
 ### Telemetry
 
-The `DynamicFlow` component accepts two optional props: `onEvent` and `onLog` which can be used to track and log.
+The `DynamicFlow` component accepts two optional props: `onAnalytics` and `onLog` which can be used to track and log.
 
 In the example below we send tracking events to Mixpanel and logging events to Rollbar.
 
 ```tsx
 <DynamicFlow
-  onEvent={(event, props) => mixpanel.track(event, props)}
+  onAnalytics={(event, props) => mixpanel.track(event, props)}
   onLog={(level, message, extra) => Rollbar[level](message, extra)}
 />
 ```
@@ -217,7 +222,7 @@ In the example below we send tracking events to Mixpanel and logging events to R
 Alternatively, you can log to the browser console:
 
 ```ts
-onEvent={(event, props) => console.log(event, props)}
+onAnalytics={(event, props) => console.log(event, props)}
 onLog={(level, message, extra) => {
   const levelToConsole = {
     critical: console.error,
@@ -230,56 +235,36 @@ onLog={(level, message, extra) => {
 }}
 ```
 
-### Loader configuration
-
-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.
-
-You can change the defaults by passing a `loaderConfig` prop:
-
-```ts
-type LoaderConfig = {
-  size?: `xs | sm | md | lg | xl`;
-  initial?: boolean;
-  submission?: boolean;
-};
-```
-
-| property     | type    | notes                                                                          | default |
-| ------------ | ------- | ------------------------------------------------------------------------------ | ------- |
-| `size`       | string  | The size of the Loader component.                                              | `xl`    |
-| `initial`    | boolean | Whether or not to display the Loader component while loading the initial step. | true    |
-| `submission` | boolean | Whether or not to display the Loader component during form submissions.        | false   |
-
-## DynamicFragment
+## DynamicForm Component
 
-If you need to get the submittable data outside of a submission, you can use the `DynamicFragment` component. This will give you access to two methods: `getValue` and `validate` via a [ref](https://react.dev/reference/react/useRef). For example:
+If you need to get the submittable data outside of a submission, you can use the `DynamicForm` component. This will give you access to two methods: `getValue` and `validate` via a [ref](https://react.dev/reference/react/useRef). For example:
 
 ```tsx
-import type { DynamicFragmentController } from '@wise/dynamic-flow-client-internal';
-import { DynamicFragment } from '@wise/dynamic-flow-client-internal';
+import type { DynamicFormController } from '@wise/dynamic-flow-client-internal';
+import { DynamicForm } from '@wise/dynamic-flow-client-internal';
 import { useRef } from 'react';
 
 function DynamicFlowWithRef() {
-  const ref = useRef<DynamicFragmentController>(null);
+  const ref = useRef<DynamicFormController>(null);
 
   return (
-    <>
-      <DynamicFragment
+    <div>
+      <DynamicForm
           ref={ref}
           flowId={"id"}
           customFetch={fetch}
-          initialStep={selectedStep}
-          onValueChange={async () => {
-              const value = (await ref.current?.getValue()) ?? null);
+          initialStep={myStep}
+          onValueChange={ async () => {
+              const value = (await ref.current?.getValue()) ?? null;
               console.log('Value changed to', JSON.stringify(value));
           }}
           onCompletion={(error) => console.error(error)}
           onCompletion={() => console.log('Completed')}
       />
       <Button
-        onClick={async () => {
+        onClick={ async () => {
           // This will get the value, whether or not the form is valid
-          const value = (await ref.current?.getValue()) ?? null);
+          const value = (await ref.current?.getValue()) ?? null;
 
           // This will trigger validation of the form and show any validation messages to the user.
           // The response is a boolean indicating whether or not the form is valid.
@@ -290,7 +275,7 @@ function DynamicFlowWithRef() {
       >
         Log value
       </Button>
-    </>
+    </div>
   );
 }
 ```

package/build/main.js

@@ -1584,7 +1584,7 @@ function MoneyInputRendererComponent(props) {
           ),
           placeholder: (_a = parseFloatOrNull(placeholder)) != null ? _a : void 0,
           onAmountChange: (newAmount) => {
-            onAmountChange(String(newAmount));
+            onAmountChange(newAmount !== null ? String(newAmount) : null);
           },
           onCurrencyChange: (item) => {
             const selectedIndex = Number.parseInt(item.value, 10);
@@ -3749,7 +3749,7 @@ var messages_default = (0, import_react_intl26.defineMessages)({
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.0.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.1.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts

package/build/main.mjs

@@ -1572,7 +1572,7 @@ function MoneyInputRendererComponent(props) {
           ),
           placeholder: (_a = parseFloatOrNull(placeholder)) != null ? _a : void 0,
           onAmountChange: (newAmount) => {
-            onAmountChange(String(newAmount));
+            onAmountChange(newAmount !== null ? String(newAmount) : null);
           },
           onCurrencyChange: (item) => {
             const selectedIndex = Number.parseInt(item.value, 10);
@@ -3743,7 +3743,7 @@ var messages_default = defineMessages12({
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.0.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.1.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -16,7 +16,8 @@
       "import": "./build/main.mjs",
       "require": "./build/main.js"
     },
-    "./build/main.css": "./build/main.css"
+    "./build/main.css": "./build/main.css",
+    "./main.css": "./build/main.css"
   },
   "sideEffects": [
     "*.css"
@@ -30,40 +31,28 @@
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
   "devDependencies": {
-    "@babel/core": "7.28.5",
-    "@babel/plugin-syntax-flow": "7.27.1",
-    "@babel/plugin-transform-react-jsx": "7.27.1",
-    "@babel/preset-env": "7.28.5",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
-    "@chromatic-com/storybook": "4.1.2",
+    "@chromatic-com/storybook": "4.1.3",
     "@formatjs/cli": "^6.7.4",
-    "@storybook/addon-a11y": "^9.1.16",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-links": "^9.1.16",
-    "@storybook/react-vite": "9.1.16",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-links": "^10.1.4",
+    "@storybook/react-vite": "10.1.4",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.113.1",
+    "@transferwise/components": "^46.115.1",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/icons": "4.0.0",
-    "@transferwise/neptune-css": "14.25.1",
-    "@types/jest": "30.0.0",
-    "@types/react": "18.3.26",
+    "@transferwise/neptune-css": "14.25.2",
+    "@types/react": "18.3.27",
     "@types/react-dom": "18.3.7",
     "@wise/art": "2.24.7",
-    "@wise/components-theming": "^1.8.0",
-    "babel-jest": "30.2.0",
+    "@wise/components-theming": "^1.9.0",
     "currency-flags": "4.0.7",
     "esbuild": "0.27.0",
-    "eslint-plugin-storybook": "9.1.16",
-    "framer-motion": "^12.23.24",
-    "jest": "30.2.0",
-    "jest-environment-jsdom": "30.2.0",
-    "jest-fetch-mock": "^3.0.3",
-    "jest-watch-typeahead": "^3.0.1",
+    "eslint-plugin-storybook": "10.1.4",
+    "framer-motion": "^12.23.25",
     "npm-run-all2": "8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -71,16 +60,18 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^9.1.16",
-    "stylelint": "16.25.0",
+    "storybook": "^10.1.4",
+    "stylelint": "16.26.1",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.5",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
-    "tsx": "4.20.6",
+    "tsx": "4.21.0",
     "typescript": "5.9.3",
-    "@wise/dynamic-flow-types": "4.0.0",
+    "vitest": "4.0.15",
+    "vitest-fetch-mock": "0.4.5",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-types": "4.1.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -94,8 +85,8 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.0.0",
-    "@wise/dynamic-flow-types": "4.0.0"
+    "@wise/dynamic-flow-client": "5.1.0",
+    "@wise/dynamic-flow-types": "4.1.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",
@@ -106,10 +97,10 @@
     "build:messages-source": "formatjs extract '../renderers/src/**/{*.messages,messages}.{js,ts}' './src/**/{*.messages,messages}.{js,ts}' --out-file src/i18n/en.json --format simple && prettier --find-config-path --write src/i18n/*.json",
     "build:compiled-messages": "mkdir -p build/i18n && cp src/i18n/*.json build/i18n",
     "build:visual-tests": "tsx ./scripts/build-visual-tests.mjs",
-    "test": "pnpm test:once",
-    "test:once": "jest --config jest.config.js --env=jsdom --passWithNoTests",
-    "test:coverage": "jest --config jest.config.js --env=jsdom --coverage",
-    "test:watch": "pnpm test:once --watch",
+    "test": "npm-run-all test:once",
+    "test:once": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
     "types": "pnpm tsc",
     "types:watch": "pnpm tsc --watch",
     "lint": "npm-run-all lint:ts lint:css",