@wise/dynamic-flow-client 2.4.0 → 2.6.0

package/build/types/formControl/FormControl.d.ts

@@ -1,5 +1,6 @@
 import { RadioGroupRadios } from '@transferwise/components/build/types/radioGroup/RadioGroup';
 import { UploadProps } from '@transferwise/components/build/types/upload/Upload';
+import { AutocompleteHint } from '@wise/dynamic-flow-types';
 import { ReactNode } from 'react';
 import { PureComponent } from 'react';
 import { FormControlType } from '../common/constants';
@@ -43,12 +44,7 @@ export default class FormControl extends PureComponent<FormControlProps, FormCon
         prevValue: string | number | boolean | Date | null;
         value: string | number | boolean | Date | null;
     } | null;
-    /**
-     * autocomplete hides our form help so we need to disable it when help text
-     * is present. Chrome ignores autocomplete=off, the only way to disable it is
-     * to provide an 'invalid' value, for which 'disabled' serves.
-     */
-    getAutocompleteStatus: () => "on" | "disabled";
+    getAutocompleteValue: () => string;
     handleOnChange: (value: string | number | boolean | null) => void;
     handleInputOnChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     handleOnFocus: () => void;
@@ -106,7 +102,9 @@ type FormControlSelectedOption = {
 type FormControlProps = {
     name: string;
     onChange: (value: string | number | boolean | null, type?: 'init' | 'user') => void;
+    /** @deprecated - Use autocompleteHint instead */
     autoComplete?: boolean;
+    autocompleteHint?: AutocompleteHint[];
     countryCode?: string;
     disabled?: boolean;
     displayPattern?: string;

package/build/types/formControl/utils/getAutocompleteString.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteHint } from '@wise/dynamic-flow-types';
+export declare const getAutocompleteString: (hints: AutocompleteHint[]) => string;

package/build/types/formControl/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './value-utils';
+export { getAutocompleteString } from './getAutocompleteString';

package/build/types/revamp/domain/components/AlertComponent.d.ts

@@ -4,8 +4,10 @@ export type AlertComponent = LayoutComponent & {
     type: 'alert';
     markdown: string;
     context: Context;
+    getValue: () => null;
 };
 export declare const createAlertComponent: (alertProps: {
+    uid: string;
     markdown: string;
     context: Context;
     margin: Margin;

package/build/types/revamp/domain/components/ButtonComponent.d.ts

@@ -0,0 +1,23 @@
+import { Context, Margin } from '@wise/dynamic-flow-types';
+import { LayoutComponent } from '../types';
+export type ButtonComponent = LayoutComponent & {
+    type: 'button';
+    title: string;
+    context: Context;
+    control?: string;
+    disabled: boolean;
+    margin: Margin;
+    pinOrder?: number;
+    onClick: () => void;
+    getValue: () => null;
+};
+export declare const createButtonComponent: (buttonProps: {
+    uid: string;
+    title: string;
+    context: Context;
+    control?: string;
+    disabled: boolean;
+    pinOrder?: number;
+    margin: Margin;
+    onClick: () => void;
+}) => ButtonComponent;

package/build/types/revamp/domain/components/HeadingComponent.d.ts

@@ -5,8 +5,10 @@ export type HeadingComponent = LayoutComponent & {
     text: string;
     align: Align;
     size: Size;
+    getValue: () => null;
 };
 export declare const createHeadingComponent: (headingProps: {
+    uid: string;
     text: string;
     align: Align;
     margin: Margin;

package/build/types/revamp/domain/components/ObjectComponent.d.ts

@@ -1,9 +1,17 @@
-import { SchemaMapperProps } from '../mappers/schema/types';
-import { StepComponent } from '../types';
-export type ObjectComponent = {
+import { ObjectModel } from '@wise/dynamic-flow-types';
+import { RenderableComponent, StepComponent } from '../types';
+export type ObjectComponent = RenderableComponent & {
     type: 'object';
-    uid?: string;
-    propertyName?: string;
-    childComponents: StepComponent[];
+    title?: string;
+    description?: string;
+    componentMap: Record<string, StepComponent>;
+    getChildren: () => StepComponent[];
+    getValue: () => ObjectModel;
 };
-export declare const createObjectComponent: (components: StepComponent[], mapperProps: SchemaMapperProps) => ObjectComponent;
+export declare const createObjectComponent: (objectProps: {
+    uid: string;
+    title?: string | undefined;
+    description?: string | undefined;
+    displayOrder: string[];
+    components: Record<string, StepComponent>;
+}) => ObjectComponent;

package/build/types/revamp/domain/components/ParagraphComponent.d.ts

@@ -5,8 +5,10 @@ export type ParagraphComponent = LayoutComponent & {
     text: string;
     control?: 'copyable' | string;
     align: Align;
+    getValue: () => null;
 };
 export declare const createParagraphComponent: (paragraphProps: {
+    uid: string;
     text: string;
     control?: string | undefined;
     margin: Margin;

package/build/types/revamp/domain/components/TextInputComponent.d.ts

@@ -1,5 +1,5 @@
 import { StringSchema } from '@wise/dynamic-flow-types';
-import { InputComponent } from '../types';
+import { InputComponent, UpdateComponent } from '../types';
 type TextInputFormat = 'text' | 'date';
 type TextInputControl = 'password' | 'textarea' | 'email' | 'numeric' | 'phone-number' | 'date-lookup' | string;
 export type TextInputComponent = InputComponent & {
@@ -11,7 +11,7 @@ export type TextInputComponent = InputComponent & {
     format: TextInputFormat;
     value: string | undefined;
     onChange: (value: string | undefined) => void;
-    getValue: () => string | undefined;
+    getValue: () => string | null;
 };
 export declare const createTextInputComponent: (textInputProps: {
     uid: string;
@@ -19,9 +19,8 @@ export declare const createTextInputComponent: (textInputProps: {
     title?: string | undefined;
     description?: string | undefined;
     placeholder?: string | undefined;
-    control: StringSchema['control'];
+    control?: StringSchema['control'];
     format: StringSchema['format'];
     value?: string | undefined;
-    propertyName: string;
-}) => TextInputComponent;
+}, updateComponent: UpdateComponent) => TextInputComponent;
 export {};

package/build/types/revamp/domain/mappers/layout/alertLayoutToComponent.d.ts

@@ -1,2 +1,3 @@
 import { AlertLayout } from '@wise/dynamic-flow-types';
-export declare const alertLayoutToComponent: ({ markdown, margin, context }: AlertLayout) => import("../../components/AlertComponent").AlertComponent;
+import { MapperProps } from '../schema/types';
+export declare const alertLayoutToComponent: ({ markdown, margin, context }: AlertLayout, { uid }: MapperProps) => import("../../components/AlertComponent").AlertComponent;

package/build/types/revamp/domain/mappers/layout/buttonLayoutToComponent.d.ts

@@ -0,0 +1,3 @@
+import { ButtonLayout } from '@wise/dynamic-flow-types';
+import { MapperProps } from '../schema/types';
+export declare const buttonLayoutToComponent: ({ title, action, context, disabled, control, margin }: ButtonLayout, { uid, onAction }: MapperProps) => import("../../components/ButtonComponent").ButtonComponent;

package/build/types/revamp/domain/mappers/layout/formLayoutToComponent.d.ts

@@ -1,3 +1,4 @@
-import { FormLayout, Step as DFStep } from '@wise/dynamic-flow-types';
+import { FormLayout } from '@wise/dynamic-flow-types';
 import { StepComponent } from '../../types';
-export declare const formLayoutToComponent: ({ schemaId }: FormLayout, uid: string, step: DFStep) => StepComponent;
+import { MapperProps } from '../schema/types';
+export declare const formLayoutToComponent: ({ schemaId }: FormLayout, mapperProps: MapperProps) => StepComponent;

package/build/types/revamp/domain/mappers/layout/headingLayoutToComponent.d.ts

@@ -1,2 +1,3 @@
 import { HeadingLayout } from '@wise/dynamic-flow-types';
-export declare const headingLayoutToComponent: ({ text, size, margin, align }: HeadingLayout) => import("../../components/HeadingComponent").HeadingComponent;
+import { MapperProps } from '../schema/types';
+export declare const headingLayoutToComponent: ({ text, size, margin, align }: HeadingLayout, { uid }: MapperProps) => import("../../components/HeadingComponent").HeadingComponent;

package/build/types/revamp/domain/mappers/layout/paragraphLayoutToComponent.d.ts

@@ -1,2 +1,3 @@
 import { ParagraphLayout } from '@wise/dynamic-flow-types';
-export declare const paragraphLayoutToComponent: ({ text, control, align, margin }: ParagraphLayout) => import("../../components/ParagraphComponent").ParagraphComponent;
+import { MapperProps } from '../schema/types';
+export declare const paragraphLayoutToComponent: ({ text, control, align, margin }: ParagraphLayout, { uid }: MapperProps) => import("../../components/ParagraphComponent").ParagraphComponent;

package/build/types/revamp/domain/mappers/mapSchemaToComponents.d.ts

@@ -1,4 +1,4 @@
 import { Schema } from '@wise/dynamic-flow-types';
 import { StepComponent } from '../types';
-import { SchemaMapperProps } from './schema/types';
-export declare const mapSchemaToComponents: (schema: Schema, mapperProps: SchemaMapperProps) => StepComponent;
+import { MapperProps } from './schema/types';
+export declare const mapSchemaToComponents: (schema: Schema, mapperProps: MapperProps) => StepComponent;

package/build/types/revamp/domain/mappers/mapStepToComponents.d.ts

@@ -1,4 +1,9 @@
 import { Step as DFStep } from '@wise/dynamic-flow-types';
-export declare const mapStepToComponents: ({ step }: {
+import { OnAction, StepComponent, UpdateComponent } from '../types';
+type MapStepToComponentsProps = {
     step: DFStep;
-}) => import("../components/Step").Step;
+    updateComponent: UpdateComponent;
+    onAction: OnAction;
+};
+export declare const mapStepToComponents: (mapStepToComponentsProps: MapStepToComponentsProps) => StepComponent[];
+export {};

package/build/types/revamp/domain/mappers/schema/objectSchemaToComponent.d.ts

@@ -0,0 +1,3 @@
+import { ObjectSchema } from '@wise/dynamic-flow-types';
+import { MapperProps } from './types';
+export declare const objectSchemaToComponent: (schema: ObjectSchema, mapperProps: MapperProps) => import("../../components/ObjectComponent").ObjectComponent;

package/build/types/revamp/domain/mappers/schema/stringSchemaToComponent.d.ts

@@ -1,3 +1,3 @@
 import { StringSchema } from '@wise/dynamic-flow-types';
-import { SchemaMapperProps } from './types';
-export declare const stringSchemaToComponent: (schema: StringSchema, mapperProps: SchemaMapperProps) => import("../../components/TextInputComponent").TextInputComponent;
+import { MapperProps } from './types';
+export declare const stringSchemaToComponent: (schema: StringSchema, mapperProps: MapperProps) => import("../../components/TextInputComponent").TextInputComponent;

package/build/types/revamp/domain/mappers/schema/types.d.ts

@@ -1,4 +1,8 @@
-export type SchemaMapperProps = {
+import { Step as DFStep } from '@wise/dynamic-flow-types';
+import { OnAction, UpdateComponent } from '../../types';
+export type MapperProps = {
     uid: string;
-    propertyName?: string;
+    step: DFStep;
+    onAction: OnAction;
+    updateComponent: UpdateComponent;
 };

package/build/types/revamp/domain/mappers/utils/legacy-utils.d.ts

@@ -0,0 +1,2 @@
+import { Context, LegacyContext } from '@wise/dynamic-flow-types';
+export declare const mapLegacyContext: (context: Context | LegacyContext) => "positive" | "negative" | "warning" | "neutral";

package/build/types/revamp/domain/types.d.ts

@@ -1,19 +1,25 @@
-import { Margin } from '@wise/dynamic-flow-types';
+import { Action, Margin, Model } from '@wise/dynamic-flow-types';
 import { AlertComponent } from './components/AlertComponent';
+import { ButtonComponent } from './components/ButtonComponent';
 import { HeadingComponent } from './components/HeadingComponent';
 import { ObjectComponent } from './components/ObjectComponent';
 import { ParagraphComponent } from './components/ParagraphComponent';
 import { TextInputComponent } from './components/TextInputComponent';
-export type StepComponent = AlertComponent | HeadingComponent | ParagraphComponent | ObjectComponent | TextInputComponent;
+export type StepComponent = AlertComponent | HeadingComponent | ParagraphComponent | ObjectComponent | TextInputComponent | ButtonComponent;
+export type ContainerComponent = ObjectComponent;
 export type BaseComponent = {
     type: string;
+    uid: string;
+    getValue: () => Model;
+};
+export type RenderableComponent = BaseComponent & {
     keyProp: string;
 };
-export type LayoutComponent = BaseComponent & {
+export type LayoutComponent = RenderableComponent & {
     margin: Margin;
 };
-export type InputComponent = BaseComponent & {
-    uid: string;
+export type InputComponent = RenderableComponent & {
     id: string;
-    propertyName: string;
 };
+export type UpdateComponent = (id: string, update: (component: StepComponent) => void) => void;
+export type OnAction = (action: Action) => void;

package/build/types/revamp/renderers/mappers/buttonComponentToProps.d.ts

@@ -0,0 +1,3 @@
+import { ButtonComponent } from '../../domain/components/ButtonComponent';
+import { ButtonRendererProps } from '../types';
+export declare const buttonComponentToProps: (component: ButtonComponent) => ButtonRendererProps;

package/build/types/revamp/renderers/mappers/componentToRendererProps.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { StepComponent } from '../../domain/types';
 import { RendererProps } from '../types';
-export declare const componentToRendererProps: (component: StepComponent) => RendererProps[];
+export declare const componentToRendererProps: (component: StepComponent, children?: ReactNode) => RendererProps;

package/build/types/revamp/renderers/mappers/objectComponentToProps.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { ObjectComponent } from '../../domain/components/ObjectComponent';
+import { ObjectRendererProps } from '../types';
+export declare const objectComponentToProps: ({ keyProp, title, description }: ObjectComponent, children: ReactNode) => ObjectRendererProps;

package/build/types/revamp/renderers/types.d.ts

@@ -33,6 +33,12 @@ export interface ParagraphRendererProps extends RendererProps {
     margin: Margin;
     align: Align;
 }
+export interface ObjectRendererProps extends RendererProps {
+    type: 'object';
+    title?: string;
+    description?: string;
+    children: ReactNode;
+}
 export interface TextInputRendererProps extends RendererProps {
     type: 'input-text';
     control?: 'password' | 'textarea' | 'email' | 'numeric' | 'phone-number' | 'date-lookup' | string;
@@ -45,3 +51,12 @@ export interface TextInputRendererProps extends RendererProps {
     value?: string;
     onChange: (value: string | undefined) => void;
 }
+export interface ButtonRendererProps extends RendererProps {
+    type: 'button';
+    title: string;
+    control?: 'primary' | 'secondary' | 'tertiary' | string;
+    context: Context;
+    disabled: boolean;
+    margin: Margin;
+    onClick: () => void;
+}

package/build/types/revamp/step/utils/render-utils.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { StepComponent } from '../../domain/types';
+import { Renderer, RendererProps } from '../../renderers/types';
+export declare const renderComponent: (component: StepComponent, render: (props: RendererProps) => ReactNode) => ReactNode;
+export declare const getPropsRenderer: <P extends RendererProps>(renderers: Renderer<P>[]) => (props: P) => ReactNode;

package/build/types/revamp/utils/findComponent.d.ts

@@ -0,0 +1,2 @@
+import { StepComponent } from '../domain/types';
+export declare const findComponent: (components: StepComponent[], id: string) => StepComponent | undefined;

package/build/types/revamp/utils/getSubmittableData.d.ts

@@ -0,0 +1,3 @@
+import { Model } from '@wise/dynamic-flow-types';
+import { StepComponent } from '../domain/types';
+export declare const getSubmittableData: (components: StepComponent[]) => Model;

package/build/types/revamp/utils/type-utils.d.ts

@@ -0,0 +1,4 @@
+import { Model } from '@wise/dynamic-flow-types';
+import { StepComponent } from '../domain/types';
+export declare const isContainerComponent: (component: StepComponent) => component is import("../domain/components/ObjectComponent").ObjectComponent;
+export declare const isObjectModel: (model: Model) => model is Record<string, Model>;

package/build/types/revamp/wise/renderers/ButtonRenderer.d.ts

@@ -0,0 +1,3 @@
+import { ButtonRendererProps, Renderer } from '../../renderers/types';
+declare const ButtonRenderer: Renderer<ButtonRendererProps>;
+export default ButtonRenderer;

package/build/types/revamp/wise/renderers/ObjectRenderer.d.ts

@@ -0,0 +1,3 @@
+import { ObjectRendererProps, Renderer } from '../../renderers/types';
+declare const ObjectRenderer: Renderer<ObjectRendererProps>;
+export default ObjectRenderer;

package/build/types/revamp/wise/renderers/utils/layout-utils.d.ts

@@ -1,5 +1,5 @@
 import { Align, Size } from '../../../renderers/types';
-declare const getTopMargin: (size: Size) => "" | "m-t-2" | "m-t-0" | "m-t-1" | "m-t-3" | "m-t-5";
+declare const getTopMargin: (size: Size) => "" | "m-t-1" | "m-t-2" | "m-t-0" | "m-t-3" | "m-t-5";
 declare const getTextAlignmentAndTopMargin: (component: {
     align: Align;
     margin: Size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -18,35 +18,35 @@
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
   "devDependencies": {
-    "@babel/core": "7.23.2",
-    "@babel/plugin-syntax-flow": "7.22.5",
+    "@babel/core": "7.23.3",
+    "@babel/plugin-syntax-flow": "7.23.3",
     "@babel/plugin-transform-react-jsx": "7.22.15",
-    "@babel/preset-env": "7.23.2",
-    "@babel/preset-react": "7.22.15",
-    "@babel/preset-typescript": "7.23.2",
+    "@babel/preset-env": "7.23.3",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
     "@cfaester/enzyme-adapter-react-18": "0.7.1",
-    "@formatjs/cli": "^4.8.4",
-    "@storybook/addon-a11y": "7.5.1",
-    "@storybook/addon-actions": "7.5.1",
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addon-interactions": "7.5.1",
-    "@storybook/addon-links": "7.5.1",
-    "@storybook/react": "7.5.1",
-    "@storybook/react-webpack5": "7.5.1",
+    "@formatjs/cli": "^6.2.3",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-actions": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "14.1.0",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.1",
-    "@transferwise/components": "45.17.1",
+    "@transferwise/components": "45.20.0",
     "@transferwise/eslint-config": "8.2.0",
     "@transferwise/formatting": "^2.10.0",
-    "@transferwise/icons": "3.10.0",
-    "@transferwise/neptune-css": "14.6.1",
-    "@transferwise/neptune-tokens": "8.5.1",
-    "@types/enzyme": "^3.10.15",
-    "@types/jest": "29.5.6",
+    "@transferwise/icons": "3.12.0",
+    "@transferwise/neptune-css": "14.6.2",
+    "@transferwise/neptune-tokens": "8.7.0",
+    "@types/enzyme": "^3.10.16",
+    "@types/jest": "29.5.8",
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/testing-library__jest-dom": "5.14.9",
@@ -57,21 +57,22 @@
     "currency-flags": "4.0.7",
     "enzyme": "^3.11.0",
     "esbuild": "0.19.5",
-    "eslint": "8.52.0",
+    "eslint": "8.53.0",
     "eslint-plugin-storybook": "0.6.15",
+    "immer": "10.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^2.2.2",
     "npm-run-all": "4.1.5",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "prettier": "2.8.8",
+    "prettier": "3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-intl": "6.5.1",
-    "storybook": "7.5.1",
+    "react-intl": "6.5.4",
+    "storybook": "7.5.3",
     "stylelint": "14.16.1",
     "stylelint-config-standard": "25.0.0",
     "stylelint-no-unsupported-browser-features": "5.0.4",
@@ -91,9 +92,9 @@
   },
   "dependencies": {
     "classnames": "2.3.2",
-    "react-webcam": "^7.1.1",
+    "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.1.0"
+    "@wise/dynamic-flow-types": "2.2.0"
   },
   "prettier": "@transferwise/eslint-config/.prettierrc.js",
   "scripts": {

package/build/types/revamp/domain/components/Step.d.ts

@@ -1,9 +0,0 @@
-import { StepComponent } from '../types';
-export type Step = {
-    id: string;
-    components: StepComponent[];
-};
-export declare const createStep: ({ id, components, }: {
-    id: string;
-    components: StepComponent[];
-}) => Step;