@wise/dynamic-flow-client-internal 5.0.0 → 5.0.1-exp-css-28d60ea

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
@@ -50,15 +50,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 +91,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 +203,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 +217,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 +230,36 @@ onLog={(level, message, extra) => {
 }}
 ```
 
-### Loader configuration
+## DynamicForm Component
 
-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
-
-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 +270,7 @@ function DynamicFlowWithRef() {
       >
         Log value
       </Button>
-    </>
+    </div>
   );
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.0.0",
+  "version": "5.0.1-exp-css-28d60ea",
   "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"
@@ -78,8 +79,8 @@
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
-    "@wise/dynamic-flow-types": "4.0.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-types": "4.0.0",
     "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
@@ -94,7 +95,7 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.0.0",
+    "@wise/dynamic-flow-client": "5.0.1-exp-css-28d60ea",
     "@wise/dynamic-flow-types": "4.0.0"
   },
   "scripts": {