@wise/dynamic-flow-client 2.3.0-beta-53b1ff.25 → 2.3.1

package/build/types/common/contexts/featureContext/FeatureContext.d.ts

@@ -2,9 +2,9 @@
 import { Feature } from '../../../dynamicFlow/DynamicFlowTypes';
 import { FeatureName } from '../../constants/FeatureName';
 type FeatureContextProviderProps = {
-    featureFlags: Feature[] | undefined;
+    features: Feature[] | undefined;
     children: React.ReactNode;
 };
-export declare const FeatureContextProvider: ({ featureFlags, children }: FeatureContextProviderProps) => JSX.Element;
+export declare const FeatureContextProvider: ({ features, children }: FeatureContextProviderProps) => JSX.Element;
 export declare const useFeatureFlag: (featureName: FeatureName) => Feature | undefined;
 export {};

package/build/types/dynamicFlow/DynamicFlowTypes.d.ts

@@ -5,7 +5,7 @@ export type DynamicFlowPropsBasic = {
     flowId: string;
     loaderConfig?: LoaderConfig;
     displayStepTitle?: boolean;
-    featureFlags?: Feature[];
+    features?: Feature[];
     httpClient: HttpClient;
     onCompletion: (result: Record<string, unknown> | undefined | null) => void;
     onError: (error: unknown, status?: number) => void;
@@ -57,8 +57,5 @@ export type Feature = {
      * This is the same as checking if `variant > 0`.
      */
     enabled: boolean;
-    /**
-     * See https://transferwise.atlassian.net/wiki/spaces/FS/pages/384401678/Feature+Service+Domain+Assignment
-     */
     initiation: 'MISSING' | 'SKIPPED' | 'DEFAULT' | 'INITIATED';
 };

package/build/types/revamp/domain/{AlertComponent.d.ts → components/AlertComponent.d.ts}

@@ -1,13 +1,11 @@
 import { Context, Margin } from '@wise/dynamic-flow-types';
-import { LayoutComponent } from './types';
+import { LayoutComponent } from '../types';
 export type AlertComponent = LayoutComponent & {
     type: 'alert';
     markdown: string;
     context: Context;
-    margin: Margin;
 };
 export declare const createAlertComponent: (alertProps: {
-    uid: string;
     markdown: string;
     context: Context;
     margin: Margin;

package/build/types/revamp/domain/{HeadingComponent.d.ts → components/HeadingComponent.d.ts}

@@ -1,14 +1,12 @@
 import { Align, Margin, Size } from '@wise/dynamic-flow-types';
-import { LayoutComponent } from './types';
+import { LayoutComponent } from '../types';
 export type HeadingComponent = LayoutComponent & {
     type: 'heading';
     text: string;
     align: Align;
-    margin: Margin;
     size: Size;
 };
 export declare const createHeadingComponent: (headingProps: {
-    uid: string;
     text: string;
     align: Align;
     margin: Margin;

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

@@ -0,0 +1,9 @@
+import { SchemaMapperProps } from '../mappers/schema/types';
+import { StepComponent } from '../types';
+export type ObjectComponent = {
+    type: 'object';
+    uid?: string;
+    propertyName?: string;
+    childComponents: StepComponent[];
+};
+export declare const createObjectComponent: (components: StepComponent[], mapperProps: SchemaMapperProps) => ObjectComponent;

package/build/types/revamp/domain/{ParagraphComponent.d.ts → components/ParagraphComponent.d.ts}

@@ -1,16 +1,14 @@
 import { Align, Margin } from '@wise/dynamic-flow-types';
-import { LayoutComponent } from './types';
+import { LayoutComponent } from '../types';
 export type ParagraphComponent = LayoutComponent & {
     type: 'paragraph';
     text: string;
     control?: 'copyable' | string;
-    margin: Margin;
     align: Align;
 };
 export declare const createParagraphComponent: (paragraphProps: {
-    uid: string;
     text: string;
-    control?: 'copyable' | string;
+    control?: string | undefined;
     margin: Margin;
     align: Align;
 }) => ParagraphComponent;

package/build/types/revamp/domain/{Step.d.ts → components/Step.d.ts}

@@ -1,4 +1,4 @@
-import { StepComponent } from './types';
+import { StepComponent } from '../types';
 export type Step = {
     id: string;
     components: StepComponent[];

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +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;

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

@@ -0,0 +1,4 @@
+import { Step as DFStep } from '@wise/dynamic-flow-types';
+export declare const mapStepToComponents: ({ step }: {
+    step: DFStep;
+}) => import("../components/Step").Step;

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

@@ -0,0 +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;

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

@@ -0,0 +1,4 @@
+export type SchemaMapperProps = {
+    uid: string;
+    propertyName?: string;
+};

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

@@ -1,8 +1,19 @@
-import { AlertComponent } from './AlertComponent';
-import { HeadingComponent } from './HeadingComponent';
-import { ParagraphComponent } from './ParagraphComponent';
-export type StepComponent = AlertComponent | HeadingComponent | ParagraphComponent;
-export type LayoutComponent = {
+import { Margin } from '@wise/dynamic-flow-types';
+import { AlertComponent } from './components/AlertComponent';
+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 BaseComponent = {
     type: string;
+    keyProp: string;
+};
+export type LayoutComponent = BaseComponent & {
+    margin: Margin;
+};
+export type InputComponent = BaseComponent & {
     uid: string;
+    id: string;
+    propertyName: string;
 };

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

@@ -0,0 +1,3 @@
+import { AlertComponent } from '../../domain/components/AlertComponent';
+import { AlertRendererProps } from '../types';
+export declare const alertComponentToProps: ({ keyProp, markdown, margin, context, }: AlertComponent) => AlertRendererProps;

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

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

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

@@ -0,0 +1,3 @@
+import { HeadingComponent } from '../../domain/components/HeadingComponent';
+import { HeadingRendererProps } from '../types';
+export declare const headingComponentToProps: ({ keyProp, text, align, margin, size, }: HeadingComponent) => HeadingRendererProps;

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

@@ -0,0 +1,3 @@
+import { ParagraphComponent } from '../../domain/components/ParagraphComponent';
+import { ParagraphRendererProps } from '../types';
+export declare const paragraphComponentToProps: ({ keyProp, text, control, align, margin, }: ParagraphComponent) => ParagraphRendererProps;

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

@@ -0,0 +1,3 @@
+import { TextInputComponent } from '../../domain/components/TextInputComponent';
+import { TextInputRendererProps } from '../types';
+export declare const textComponentToProps: ({ keyProp, format, id, title, description, placeholder, value, onChange, }: TextInputComponent) => TextInputRendererProps;

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

@@ -1,12 +1,16 @@
-import { Align, Context, Margin, Size } from '@wise/dynamic-flow-types';
+import { Context as DFContext, Margin as DFMargin, Size as DFSize } from '@wise/dynamic-flow-types';
 import { ReactNode } from 'react';
 export type Renderer<P extends RendererProps> = {
     canRender: (props: RendererProps) => boolean;
     render: (props: P) => ReactNode;
 };
+export type Align = 'start' | 'center' | 'end';
+export type Margin = DFMargin;
+export type Context = DFContext;
+export type Size = DFSize;
 export interface RendererProps {
     type: string;
-    id: string;
+    keyProp: string;
 }
 export interface AlertRendererProps extends RendererProps {
     type: 'alert';
@@ -29,3 +33,15 @@ export interface ParagraphRendererProps extends RendererProps {
     margin: Margin;
     align: Align;
 }
+export interface TextInputRendererProps extends RendererProps {
+    type: 'input-text';
+    control?: 'password' | 'textarea' | 'email' | 'numeric' | 'phone-number' | 'date-lookup' | string;
+    format: 'text' | 'date';
+    id: string;
+    name: string;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    value?: string;
+    onChange: (value: string | undefined) => void;
+}

package/build/types/revamp/renderers/utils/mapping-utils.d.ts

@@ -0,0 +1,3 @@
+import { Align as DFAlign } from '@wise/dynamic-flow-types';
+import { Align } from '../types';
+export declare const mapAlign: (align: DFAlign) => Align;

package/build/types/revamp/{renderers/neptune → wise/renderers}/AlertRenderer.d.ts

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

package/build/types/revamp/{renderers/neptune → wise/renderers}/HeadingRenderer.d.ts

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

package/build/types/revamp/{renderers/neptune → wise/renderers}/ParagraphRenderer.d.ts

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

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

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

package/build/types/revamp/{renderers/neptune → wise/renderers}/utils/layout-utils.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "2.3.0-beta-53b1ff.25",
+  "version": "2.3.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -17,25 +17,6 @@
     "fullname": "transferwise/dynamic-flow",
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
-  "scripts": {
-    "dev": "storybook dev -p 3003",
-    "build": "rm -rf build && npm-run-all build:*",
-    "build:types": "tsc --project ./tsconfig.types.json",
-    "build:js": "node ./scripts/build.mjs",
-    "build:css": "postcss src/main.css -o build/main.css",
-    "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",
-    "build:compiled-messages": "mkdir -p build/i18n && cp src/i18n/*.json build/i18n",
-    "test": "npm-run-all test:once test:tz",
-    "test:once": "jest --config jest.config.js --env=jsdom -w 2",
-    "test:coverage": "jest --config jest.config.js --env=jsdom --coverage",
-    "test:tz": "TZ=US/Pacific jest ./src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.errors.spec.js ./src/formControl/FormControl.spec.js",
-    "test:watch": "pnpm test:once --watch",
-    "types": "pnpm tsc",
-    "lint": "npm-run-all lint:ts lint:css",
-    "lint:ts": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
-    "lint:css": "stylelint './src/**/*.css'",
-    "build-storybook": "storybook build -c .storybook"
-  },
   "devDependencies": {
     "@babel/core": "7.23.2",
     "@babel/plugin-syntax-flow": "7.22.5",
@@ -71,7 +52,7 @@
     "@types/testing-library__jest-dom": "5.14.9",
     "@wise/art": "2.8.4",
     "@wise/components-theming": "^0.8.4",
-    "@wise/dynamic-flow-fixtures": "workspace:*",
+    "@wise/forms": "0.2.2",
     "babel-jest": "29.7.0",
     "currency-flags": "4.0.7",
     "enzyme": "^3.11.0",
@@ -96,10 +77,11 @@
     "stylelint-no-unsupported-browser-features": "5.0.4",
     "stylelint-value-no-unknown-custom-properties": "4.0.0",
     "typescript": "4.9.5",
-    "webpack": "5.89.0"
+    "webpack": "5.89.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
-    "@transferwise/components": "^43",
+    "@transferwise/components": "43 || 44 || 45",
     "@transferwise/formatting": "^2",
     "@transferwise/icons": "^3",
     "@transferwise/neptune-css": "^14",
@@ -108,10 +90,29 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-types": "workspace:*",
     "classnames": "2.3.2",
     "react-webcam": "^7.1.1",
-    "screenfull": "^5.2.0"
+    "screenfull": "^5.2.0",
+    "@wise/dynamic-flow-types": "2.0.1"
   },
-  "prettier": "@transferwise/eslint-config/.prettierrc.js"
-}
+  "prettier": "@transferwise/eslint-config/.prettierrc.js",
+  "scripts": {
+    "dev": "storybook dev -p 3003",
+    "build": "rm -rf build && npm-run-all build:*",
+    "build:types": "tsc --project ./tsconfig.types.json",
+    "build:js": "node ./scripts/build.mjs",
+    "build:css": "postcss src/main.css -o build/main.css",
+    "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",
+    "build:compiled-messages": "mkdir -p build/i18n && cp src/i18n/*.json build/i18n",
+    "test": "npm-run-all test:once test:tz",
+    "test:once": "jest --config jest.config.js --env=jsdom -w 2",
+    "test:coverage": "jest --config jest.config.js --env=jsdom --coverage",
+    "test:tz": "TZ=US/Pacific jest ./src/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.errors.spec.js ./src/formControl/FormControl.spec.js",
+    "test:watch": "pnpm test:once --watch",
+    "types": "pnpm tsc",
+    "lint": "npm-run-all lint:ts lint:css",
+    "lint:ts": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
+    "lint:css": "stylelint './src/**/*.css'",
+    "build-storybook": "storybook build -c .storybook"
+  }
+}

package/build/types/revamp/mappers/componentToProps/alertComponentToProps.d.ts

@@ -1,3 +0,0 @@
-import { AlertComponent } from '../../domain/AlertComponent';
-import { AlertRendererProps } from '../../renderers/types';
-export declare const alertComponentToProps: ({ uid, markdown, margin, context, }: AlertComponent) => AlertRendererProps;

package/build/types/revamp/mappers/componentToProps/headingComponentToProps.d.ts

@@ -1,3 +0,0 @@
-import { HeadingComponent } from '../../domain/HeadingComponent';
-import { HeadingRendererProps } from '../../renderers/types';
-export declare const headingComponentToProps: ({ uid, text, align, margin, size, }: HeadingComponent) => HeadingRendererProps;

package/build/types/revamp/mappers/componentToProps/paragraphComponentToProps.d.ts

@@ -1,3 +0,0 @@
-import { ParagraphComponent } from '../../domain/ParagraphComponent';
-import { ParagraphRendererProps } from '../../renderers/types';
-export declare const paragraphComponentToProps: ({ uid, text, control, align, margin, }: ParagraphComponent) => ParagraphRendererProps;

package/build/types/revamp/mappers/specToDomain/alertLayoutToDomain.d.ts

@@ -1,2 +0,0 @@
-import { AlertLayout } from '@wise/dynamic-flow-types';
-export declare const alertLayoutToDomain: ({ markdown, margin, context }: AlertLayout, uid: string) => import("../../domain/AlertComponent").AlertComponent;

package/build/types/revamp/mappers/specToDomain/headingLayoutToDomain.d.ts

@@ -1,2 +0,0 @@
-import { HeadingLayout } from '@wise/dynamic-flow-types';
-export declare const headingLayoutToDomain: ({ text, size, margin, align }: HeadingLayout, uid: string) => import("../../domain/HeadingComponent").HeadingComponent;

package/build/types/revamp/mappers/specToDomain/mapStepToDomain.d.ts

@@ -1,4 +0,0 @@
-import { Step as DFStep } from '@wise/dynamic-flow-types';
-export declare const mapStepToDomain: ({ step }: {
-    step: DFStep;
-}) => import("../../domain/Step").Step;

package/build/types/revamp/mappers/specToDomain/paragraphLayoutToDomain.d.ts

@@ -1,2 +0,0 @@
-import { ParagraphLayout } from '@wise/dynamic-flow-types';
-export declare const paragraphLayoutToDomain: ({ text, control, align, margin }: ParagraphLayout, uid: string) => import("../../domain/ParagraphComponent").ParagraphComponent;

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

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