@wise/dynamic-flow-client 2.3.0 → 2.3.2

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

@@ -1,6 +1,6 @@
 import { Align, Size } from '@wise/dynamic-flow-types';
 export { getNavigationOptionMedia } from './getNavigationOptionMedia';
-declare const getMargin: (size: Size | undefined) => "" | "m-t-0" | "m-t-1" | "m-t-2" | "m-t-3" | "m-t-5";
+declare const getMargin: (size: Size | undefined) => "" | "m-b-0" | "m-b-1" | "m-b-2" | "m-b-3" | "m-b-5";
 declare const getTextAlignmentAndMargin: (component: {
     align?: Align;
     margin?: Size;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -52,6 +52,7 @@
     "@types/testing-library__jest-dom": "5.14.9",
     "@wise/art": "2.8.4",
     "@wise/components-theming": "^0.8.4",
+    "@wise/forms": "0.2.2",
     "babel-jest": "29.7.0",
     "currency-flags": "4.0.7",
     "enzyme": "^3.11.0",
@@ -80,7 +81,7 @@
     "@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",

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[];