@wise/dynamic-flow-client-internal 5.30.1-experimental-1e1196b → 5.31.0

package/build/main.mjs

@@ -127,7 +127,7 @@ import { useDynamicFlow } from "@wise/dynamic-flow-client";
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.30.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.31.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -6777,98 +6777,7 @@ import {
   TextArea,
   TextareaWithDisplayFormat
 } from "@transferwise/components";
-import { Eye, EyeShut } from "@transferwise/icons";
-import { useIntl as useIntl21 } from "react-intl";
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState20 } from "react";
-
-// ../renderers/src/messages/ssn-input.messages.ts
-import { defineMessages as defineMessages15 } from "react-intl";
-var ssn_input_messages_default = defineMessages15({
-  showValue: {
-    id: "df.wise.ssnInput.showValue",
-    defaultMessage: "Show value",
-    description: "Accessible label for showing a masked SSN or SIN value"
-  },
-  hideValue: {
-    id: "df.wise.ssnInput.hideValue",
-    defaultMessage: "Hide value",
-    description: "Accessible label for hiding an SSN or SIN value"
-  }
-});
-
-// ../renderers/src/components/ssnInputUtils.ts
-function formatSsnValue(rawValue, displayFormat, isVisible) {
-  if (!displayFormat) {
-    return isVisible ? rawValue : "\u2022".repeat(rawValue.length);
-  }
-  return displayFormat.split("").reduce(
-    ({ display, digitsUsed }, character) => {
-      if (character === "*") {
-        return digitsUsed < rawValue.length ? {
-          display: `${display}${isVisible ? rawValue[digitsUsed] : "\u2022"}`,
-          digitsUsed: digitsUsed + 1
-        } : { display, digitsUsed };
-      }
-      return digitsUsed > 0 && digitsUsed < rawValue.length ? { display: `${display}${character}`, digitsUsed } : { display, digitsUsed };
-    },
-    { display: "", digitsUsed: 0 }
-  ).display;
-}
-function getRawOffset(displayValue, displayOffset, rawValueLength) {
-  return Math.min(
-    displayValue.slice(0, displayOffset).split("").filter((character) => character === "\u2022" || /\d/.test(character)).length,
-    rawValueLength
-  );
-}
-function replaceSsnSelection(rawValue, displayValue, insertedValue, start, end, maxDigits) {
-  const startOffset = getRawOffset(displayValue, start, rawValue.length);
-  const endOffset = getRawOffset(displayValue, end, rawValue.length);
-  const selectedLength = endOffset - startOffset;
-  const availableCapacity = Math.max(0, maxDigits - (rawValue.length - selectedLength));
-  const acceptedInsertedValue = insertedValue.slice(0, availableCapacity);
-  if (!acceptedInsertedValue) {
-    return void 0;
-  }
-  return {
-    value: `${rawValue.slice(0, startOffset)}${acceptedInsertedValue}${rawValue.slice(endOffset)}`,
-    caret: startOffset + acceptedInsertedValue.length
-  };
-}
-function deleteSsnSelection(rawValue, displayValue, start, end, backward) {
-  let startOffset = getRawOffset(displayValue, start, rawValue.length);
-  let endOffset = getRawOffset(displayValue, end, rawValue.length);
-  if (startOffset === endOffset) {
-    if (backward) {
-      startOffset = Math.max(0, startOffset - 1);
-    } else {
-      endOffset = Math.min(rawValue.length, endOffset + 1);
-    }
-  }
-  return {
-    value: `${rawValue.slice(0, startOffset)}${rawValue.slice(endOffset)}`,
-    caret: startOffset
-  };
-}
-function getDisplayOffset(displayValue, rawOffset) {
-  if (rawOffset === 0) {
-    return 0;
-  }
-  let displayOffset = 0;
-  let digitsSeen = 0;
-  for (const character of displayValue) {
-    if (character === "\u2022" || /\d/.test(character)) {
-      digitsSeen += 1;
-      if (digitsSeen === rawOffset) {
-        return displayOffset + 1;
-      }
-    }
-    displayOffset += 1;
-  }
-  return displayOffset;
-}
-
-// ../renderers/src/components/VariableTextInput.tsx
-import { jsx as jsx100, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -6885,9 +6794,6 @@ var commonKeys = [
 function VariableTextInput(inputProps) {
   const { id, value, control, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
-  if (control === "ssn-input") {
-    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { maxLength: inputProps.maxLength, onChange }));
-  }
   switch (control) {
     case "email":
       return /* @__PURE__ */ jsx100(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
@@ -6913,142 +6819,10 @@ function VariableTextInput(inputProps) {
   }
 }
 function TextInput(props) {
-  const _a = props, { control, displayFormat, onChange, type } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange", "type"]);
+  const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
   const InputWithPattern = control === "textarea" ? TextareaWithDisplayFormat : InputWithDisplayFormat;
   const InputWithoutPattern = control === "textarea" ? TextArea : Input6;
-  return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
-}
-function SsnInput(props) {
-  const _a = props, {
-    displayFormat = "",
-    maxLength,
-    onChange,
-    type: _type,
-    value = ""
-  } = _a, commonProps = __objRest(_a, [
-    "displayFormat",
-    "maxLength",
-    "onChange",
-    "type",
-    "value"
-  ]);
-  const { formatMessage } = useIntl21();
-  const [isVisible, setIsVisible] = useState20(false);
-  const [editVersion, setEditVersion] = useState20(0);
-  const inputRef = useRef5(null);
-  const selection = useRef5({ start: 0, end: 0 });
-  const pendingCaret = useRef5(null);
-  const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
-  const rawValue = value.replace(/\D/g, "");
-  const formattedValue = formatSsnValue(rawValue, displayFormat, isVisible);
-  const scheduleCaret = (rawOffset) => {
-    pendingCaret.current = rawOffset;
-    setEditVersion((version) => version + 1);
-  };
-  const replaceSelection = (insertedValue, start, end) => {
-    const result = replaceSsnSelection(
-      rawValue,
-      formattedValue,
-      insertedValue,
-      start,
-      end,
-      maxDigits
-    );
-    if (!result) {
-      return;
-    }
-    scheduleCaret(result.caret);
-    onChange(result.value);
-  };
-  const deleteSelection = (start, end, backward) => {
-    const result = deleteSsnSelection(rawValue, formattedValue, start, end, backward);
-    scheduleCaret(result.caret);
-    onChange(result.value);
-  };
-  useLayoutEffect3(() => {
-    if (pendingCaret.current === null || !inputRef.current) {
-      return;
-    }
-    inputRef.current.setSelectionRange(
-      getDisplayOffset(formattedValue, pendingCaret.current),
-      getDisplayOffset(formattedValue, pendingCaret.current)
-    );
-    pendingCaret.current = null;
-  }, [editVersion, formattedValue, rawValue]);
-  return /* @__PURE__ */ jsxs40("div", { className: "df-ssn-input-wrapper", children: [
-    /* @__PURE__ */ jsx100(
-      "input",
-      __spreadProps(__spreadValues({
-        ref: inputRef
-      }, commonProps), {
-        className: "form-control np-form-control np-input np-input--shape-rectangle df-ssn-input",
-        type: "text",
-        inputMode: "numeric",
-        maxLength: displayFormat.length || maxLength,
-        value: formattedValue,
-        onChange: (event) => {
-          const nextValue = event.currentTarget.value;
-          const inputType = event.nativeEvent.inputType;
-          const start = selection.current.start;
-          const end = selection.current.end;
-          if (isVisible || /^\d+$/.test(nextValue)) {
-            const nextRawValue = nextValue.replace(/\D/g, "").slice(0, maxDigits);
-            scheduleCaret(nextRawValue.length);
-            onChange(nextRawValue);
-          } else if ((inputType == null ? void 0 : inputType.startsWith("delete")) || nextValue.length < formattedValue.length) {
-            deleteSelection(start, end, inputType === "deleteContentBackward");
-          } else {
-            replaceSelection(nextValue.replace(/\D/g, ""), start, end);
-          }
-        },
-        onSelect: (event) => {
-          var _a2, _b;
-          selection.current = {
-            start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-            end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-          };
-        },
-        onKeyDown: (event) => {
-          var _a2, _b;
-          selection.current = {
-            start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-            end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-          };
-          if (/^\d$/.test(event.key)) {
-            event.preventDefault();
-            replaceSelection(event.key, selection.current.start, selection.current.end);
-          } else if (event.key === "Backspace") {
-            event.preventDefault();
-            deleteSelection(selection.current.start, selection.current.end, true);
-          } else if (event.key === "Delete") {
-            event.preventDefault();
-            deleteSelection(selection.current.start, selection.current.end, false);
-          }
-        },
-        onPaste: (event) => {
-          var _a2, _b;
-          event.preventDefault();
-          selection.current = {
-            start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-            end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-          };
-          const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
-          replaceSelection(pastedValue, selection.current.start, selection.current.end);
-        }
-      })
-    ),
-    /* @__PURE__ */ jsx100(
-      "button",
-      {
-        type: "button",
-        className: "df-ssn-input-toggle",
-        "aria-label": formatMessage(isVisible ? ssn_input_messages_default.hideValue : ssn_input_messages_default.showValue),
-        "aria-pressed": isVisible,
-        onClick: () => setIsVisible((visible) => !visible),
-        children: isVisible ? /* @__PURE__ */ jsx100(EyeShut, { size: 24 }) : /* @__PURE__ */ jsx100(Eye, { size: 24 })
-      }
-    )
-  ] });
+  return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -7260,7 +7034,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_classnames35 = __toESM(require_classnames());
 import { Nudge } from "@transferwise/components";
-import { useState as useState21 } from "react";
+import { useState as useState20 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -7268,7 +7042,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = useState21(true);
+  const [isVisible, setIsVisible] = useState20(true);
   return isVisible ? /* @__PURE__ */ jsx104(
     Nudge,
     {
@@ -7498,11 +7272,11 @@ var customEventsToAnalytics = {
 
 // src/dynamicFlow/useOnCopy.tsx
 import { useCallback as useCallback2 } from "react";
-import { useIntl as useIntl22 } from "react-intl";
+import { useIntl as useIntl21 } from "react-intl";
 
 // src/dynamicFlow/messages.ts
-import { defineMessages as defineMessages16 } from "react-intl";
-var messages_default = defineMessages16({
+import { defineMessages as defineMessages15 } from "react-intl";
+var messages_default = defineMessages15({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -7517,7 +7291,7 @@ var messages_default = defineMessages16({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = useIntl22();
+  const { formatMessage } = useIntl21();
   const createSnackBar = useSnackBarIfAvailable();
   return useCallback2(
     (copiedContent) => {
@@ -7533,9 +7307,9 @@ var useOnCopy = () => {
 
 // src/dynamicFlow/useWiseHttpClient.tsx
 import { useCallback as useCallback3 } from "react";
-import { useIntl as useIntl23 } from "react-intl";
+import { useIntl as useIntl22 } from "react-intl";
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = useIntl23();
+  const { locale } = useIntl22();
   return useCallback3(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
@@ -7615,13 +7389,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsxs as jsxs40 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = useDynamicFlow(dfProps);
   const { onContextMenu, contextMenu } = useDFContextMenu(df.controller);
-  return /* @__PURE__ */ jsxs41("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs40("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });

package/build/stories/ButtonLoader.story.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+export default {
+    title: 'Initialisation',
+    component: DynamicFlow,
+};
+const onCompletion = action('onCompletion');
+const onError = action('onError');
+const onEvent = action('onEvent');
+const onLog = action('onLog');
+export const ButtonLoader = {
+    render: () => (_jsx(DynamicFlow, { flowId: "initialisation-telemetry", customFetch: fixtureHttpClient, initialStep: step, onCompletion: onCompletion, onError: onError, onEvent: onEvent, onLog: onLog })),
+};
+const step = {
+    id: 'convert-review',
+    title: 'Does everything look right?',
+    schemas: [
+        {
+            properties: {
+                quoteId: {
+                    const: '123',
+                },
+                profileId: {
+                    const: 6666,
+                },
+                context: {
+                    const: 'CONVERT',
+                },
+            },
+            displayOrder: ['quoteId', 'profileId', 'context'],
+            required: ['quoteId', 'profileId', 'context'],
+            hidden: true,
+            type: 'object',
+        },
+    ],
+    layout: [
+        {
+            components: [
+                {
+                    fields: [
+                        {
+                            label: "You're converting",
+                            value: '123 EUR',
+                        },
+                        {
+                            label: 'To',
+                            value: '101.61 GBP',
+                        },
+                        {
+                            label: 'Our fee',
+                            value: '6.15 EUR',
+                        },
+                        {
+                            label: 'Rate',
+                            value: '1 EUR = 0.8696 GBP',
+                        },
+                    ],
+                    title: 'Conversion details',
+                    callToAction: {
+                        title: 'Edit',
+                        behavior: {
+                            action: {
+                                exit: true,
+                                result: {
+                                    action: 'EDIT',
+                                },
+                            },
+                            type: 'action',
+                        },
+                        action: {
+                            exit: true,
+                            result: {
+                                action: 'EDIT',
+                            },
+                        },
+                    },
+                    control: 'horizontal',
+                    type: 'review',
+                },
+                {
+                    title: 'Convert',
+                    behavior: {
+                        action: {
+                            exit: true,
+                            result: {
+                                action: 'CONVERT',
+                            },
+                        },
+                        type: 'action',
+                    },
+                    control: 'primary',
+                    margin: 'xs',
+                    type: 'button',
+                    action: {
+                        exit: true,
+                        result: {
+                            action: 'CONVERT',
+                        },
+                    },
+                },
+            ],
+            control: 'bordered',
+            type: 'box',
+        },
+    ],
+    refreshUrl: '/v1/convert/review?refresh=true',
+};

package/build/stories/ContainerQueries.story.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+import { Fragment } from 'react/jsx-runtime';
+export default {
+    component: ImageLayoutWithSize,
+    title: 'Dev Tools/Container Queries',
+    argTypes: {
+        width: {
+            options: ['100%', '900px', '600px', '575px', '400px'],
+            control: { type: 'select' },
+            description: 'Width of the div containing the DynamicFlow component',
+        },
+    },
+    args: {
+        width: '575px',
+    },
+};
+export function ImageLayoutWithSize({ width }) {
+    return _jsx(Fragment, { children: renderWithStep(imageLayoutStep, width) }, width);
+}
+function renderWithStep(step, width) {
+    const getDF = () => (_jsx(DynamicFlow, { flowId: "new-df-flow-id", className: "df-prefer-container-queries", customFetch: async (input, init) => {
+            action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+            return fetch(input, init);
+        }, initialStep: Object.assign(Object.assign({}, step), { title: `Dynamic Flow Step - ${width}`, description: `This is a DynamicFlow component inside a ${width}-wide <div> container. You can change the width in the Storybook controls.` }), onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+            action('onError');
+            console.error(error);
+        } }));
+    return (_jsxs("div", { className: "d-flex", children: [_jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " }), _jsx("div", { style: { width, backgroundColor: 'white' }, children: getDF() }), _jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " })] }));
+}
+const imageLayoutStep = {
+    id: 'step-id',
+    title: 'Dynamic Flow Step',
+    description: 'This is a step in the dynamic flow.',
+    schemas: [],
+    layout: [
+        {
+            type: 'image',
+            size: 'xs',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'sm',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'md',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'lg',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'xl',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+    ],
+};

package/build/stories/DynamicFlow.story.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { layouts, schemas, misc, step } from '@wise/dynamic-flow-fixtures';
+import { DynamicFlow } from '../index';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+const fixtures = Object.assign(Object.assign(Object.assign(Object.assign({}, schemas), layouts), misc), step);
+function DynamicFlowRenderer({ initialStepName = '', }) {
+    const selectedStep = fixtures[initialStepName] || {};
+    const parsedStep = typeof selectedStep === 'string' ? JSON.parse(selectedStep) : selectedStep;
+    const props = {
+        flowId: 'storybook',
+        customFetch: fixtureHttpClient,
+        onCompletion: action('onCompletion'),
+        onError: action('onError'),
+        onEvent: action('onEvent'),
+        onLog: action('onLog'),
+    };
+    return (_jsx(DynamicFlow, Object.assign({}, props, { initialAction: { method: 'GET', url: `/steps/${initialStepName}` } }), parsedStep.id));
+}
+const meta = {
+    title: 'Multi-fixture',
+    component: DynamicFlowRenderer,
+};
+export const AllFixtures = {
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[1], revampEnabled: false },
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/stories/DynamicFlowWithRef.story.js

@@ -0,0 +1,72 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { Button } from '@transferwise/components';
+import { useRef, useState } from 'react';
+import { DynamicFlowWithRef } from '..';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+const step = {
+    id: 'dynamic-form-story',
+    title: 'Dynamic Form',
+    schemas: [
+        {
+            $id: '#form',
+            type: 'object',
+            displayOrder: ['name', 'city'],
+            required: ['name'],
+            properties: {
+                name: { type: 'string', title: 'Name', minLength: 2 },
+                city: {
+                    title: 'City',
+                    oneOf: [
+                        { title: 'London', const: 'London', icon: { name: 'flag-gb' } },
+                        { title: 'Paris', const: 'Paris', icon: { name: 'flag-fr' } },
+                        { title: 'New York', const: 'New York', icon: { name: 'flag-us' } },
+                    ],
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#form',
+        },
+    ],
+};
+function DynamicFlowWithRefStory() {
+    const ref = useRef(null);
+    const props = {
+        flowId: 'storybook',
+        analyticsId: 'storybook',
+        customFetch: fixtureHttpClient,
+        onValueChange: action('onValueChange'),
+        onError: action('onError'),
+        onEvent: action('onEvent'),
+        onLog: action('onLog'),
+    };
+    const [currentValue, setCurrentValue] = useState('');
+    const [isValid, setValid] = useState(null);
+    const backgroundColor = isValid === null ? '#eeeeee' : isValid ? '#eeffee' : '#ffeeee';
+    const validityText = isValid === null ? '' : isValid ? '✅ valid\n\n' : '❌ invalid\n\n';
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicFlowWithRef, Object.assign({ ref: ref }, props, { initialStep: step, onValueChange: async () => {
+                    var _a;
+                    var _b;
+                    const newValue = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : null;
+                    setCurrentValue(JSON.stringify(newValue, null, 2));
+                }, onCompletion: () => { } }), JSON.stringify(step)), _jsx(Button, { onClick: async () => {
+                    var _a;
+                    var _b;
+                    const ok = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : false;
+                    setValid(ok);
+                }, children: "validate()" }), _jsx("hr", {}), _jsxs("pre", { style: { backgroundColor }, children: [validityText, currentValue] })] }));
+}
+const meta = {
+    title: 'Dynamic Form',
+    component: DynamicFlowWithRefStory,
+};
+export const AllFixtures = {
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/stories/Editable.story.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { layouts, schemas } from '@wise/dynamic-flow-fixtures';
+import { useMemo, useState } from 'react';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+const fixtures = Object.assign(Object.assign({}, schemas), layouts);
+export function Editable({ initialStepName = '' }) {
+    const selectedStep = fixtures[initialStepName] || {};
+    const selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return _jsx(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+}
+function InteractiveDemo({ selectedInitialStep }) {
+    const [initialStatusCode, setInitialStatusCode] = useState(200);
+    const [initialStep, setInitialStep] = useState(selectedInitialStep);
+    const onTextAreaChange = (event) => {
+        setInitialStep(event.target.value);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h3", { children: "Editable Demo" }), _jsx("p", { children: "You can specify a response status code and body, and DF will load your step below." }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "status-code", children: "Response Status code: " }), _jsx(StatusCodeSelect, { id: "status-code", state: [initialStatusCode, setInitialStatusCode] })] }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "textarea", children: "Response Body:" }), _jsx(InvalidJsonWarning, { initialStep: initialStep }), _jsx("textarea", { id: "textarea", wrap: "off", rows: 40, style: {
+                                    fontFamily: 'monospace',
+                                    fontSize: '0.9em',
+                                    width: '100%',
+                                    maxHeight: '200px',
+                                }, value: initialStep, onChange: onTextAreaChange })] })] }), isValidJson(initialStep) ? (_jsx(DynamicFlow, { flowId: "storybook", customFetch: fetch, initialStep: JSON.parse(initialStep), onCompletion: action('onCompletion'), onError: (error) => {
+                    action('onError')(error);
+                    console.error(error);
+                } }, `${initialStep}-${initialStatusCode}`)) : null] }));
+}
+function InvalidJsonWarning({ initialStep }) {
+    const validJson = useMemo(() => isValidJson(initialStep), [initialStep]);
+    return !validJson ? (_jsx("p", { children: "\u274C Invalid syntax or missing elements are preventing the JSON code you entered from being parsed." })) : null;
+}
+const isValidJson = (value) => {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+function StatusCodeSelect({ id, state: [value, setValue], }) {
+    return (_jsxs("select", { id: id, value: value, onChange: (event) => setValue(Number.parseInt(event.target.value, 10)), children: [_jsx("option", { children: "200" }), _jsx("option", { children: "400" }), _jsx("option", { children: "500" })] }));
+}
+export default {
+    component: Editable,
+    title: 'Multi-fixture',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] },
+};