@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/stories/spec/schemas/const/ConstLayout.story.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Const',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export function ConstSchemaWithLayoutWithSelect() {
+    return render(undefined);
+}
+export function ConstSchemaWithLayoutWithRadio() {
+    return render('radio');
+}
+export function ConstSchemaWithLayoutWithTabs() {
+    return render('tab');
+}
+const render = (control) => {
+    return (_jsx("div", { style: {
+            width: '60%',
+            margin: 'auto',
+        }, children: renderWithStep(step(control)) }));
+};
+const step = (control) => ({
+    id: 'const-layout-step',
+    title: 'Const Schemas with Layout',
+    schemas: [
+        {
+            $id: '#schema',
+            control,
+            oneOf: [
+                {
+                    title: 'Option A',
+                    const: 'A',
+                    layout: [
+                        {
+                            type: 'heading',
+                            text: 'This is Option A',
+                        },
+                        {
+                            type: 'paragraph',
+                            text: 'Option A is a great choice because, it offers unique benefits and features that are tailored to your needs.',
+                        },
+                        {
+                            type: 'list',
+                            items: [
+                                {
+                                    title: 'Reason 1',
+                                    description: 'Firstly, it is a great choice because it offers unique benefits and features that are tailored to your needs.',
+                                    media: textMediaAvatar('T1'),
+                                },
+                                {
+                                    title: 'Reason 2',
+                                    description: 'Secondly, it provides exceptional value and quality, ensuring that you get the best possible experience.',
+                                    media: textMediaAvatar('T2'),
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    title: 'Option B',
+                    const: 'B',
+                    layout: [
+                        {
+                            type: 'heading',
+                            text: 'This is Option B',
+                        },
+                        {
+                            type: 'paragraph',
+                            text: 'Option B stands out due to its innovative approach and user-friendly design, making it an excellent choice for those seeking simplicity and efficiency.',
+                        },
+                        {
+                            type: 'list',
+                            items: [
+                                {
+                                    title: 'Reason 1',
+                                    description: 'Firstly, it is a great choice because it offers unique benefits and features that are tailored to your needs.',
+                                    media: textMediaAvatar('T1'),
+                                },
+                                {
+                                    title: 'Reason 2',
+                                    description: 'Secondly, it provides exceptional value and quality, ensuring that you get the best possible experience.',
+                                    media: textMediaAvatar('T2'),
+                                },
+                                {
+                                    title: 'Reason 3',
+                                    description: 'Finally, its reliability and performance make it a trusted option for users who prioritize consistency and dependability.',
+                                    media: textMediaAvatar('T3'),
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    title: 'Option C',
+                    const: 'C',
+                    layout: [
+                        {
+                            type: 'heading',
+                            text: 'This is Option C',
+                        },
+                        {
+                            type: 'paragraph',
+                            text: 'Option C is distinguished by its comprehensive features and robust performance, making it a top choice for users who demand the best.',
+                        },
+                        {
+                            type: 'image',
+                            content: {
+                                uri: 'urn:wise:illustrations:plane',
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+    layout: [
+        {
+            type: 'box',
+            width: 'md',
+            control: 'bordered',
+            components: [
+                {
+                    type: 'markdown',
+                    content: 'This example demonstrates the use of constant schemas with a defined layout.',
+                    align: 'center',
+                    margin: 'lg',
+                },
+                {
+                    type: 'form',
+                    schemaId: '#schema',
+                },
+                {
+                    type: 'alert',
+                    markdown: 'This alert is separate from the form const schemas.',
+                },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    control: 'primary',
+                    behavior: {
+                        type: 'action',
+                        action: {
+                            url: '/submit',
+                        },
+                    },
+                },
+            ],
+        },
+    ],
+    model: 'A',
+});
+const textMediaAvatar = (text) => ({
+    type: 'avatar',
+    content: [{ type: 'text', text }],
+});

package/build/stories/spec/schemas/const/ObjectConst.story.js

@@ -0,0 +1,94 @@
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+const getHttpClient = () => getMockHttpClient({
+    '/submit': async (input, init) => {
+        console.log(input, init && JSON.parse(init.body));
+        return respondWith({});
+    },
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Const',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function ConstObjectSchema() {
+    return renderWithStep(getBasicStep(), getHttpClient());
+}
+export function ConstObjectSchemaWithModel() {
+    const step = Object.assign(Object.assign({}, getBasicStep()), { model: { recurrence: { interval: 1, frequency: 'WEEKLY' } } });
+    return renderWithStep(step, getHttpClient());
+}
+const getBasicStep = () => getStep('Object Const', {
+    $id: 'object-const',
+    properties: {
+        recurrence: {
+            oneOf: [
+                {
+                    const: {
+                        interval: 0,
+                        frequency: 'ONCE',
+                    },
+                    title: 'Never',
+                    description: 'On some date only',
+                },
+                {
+                    const: {
+                        interval: 1,
+                        frequency: 'WEEKLY',
+                    },
+                    title: 'Weekly',
+                    description: 'On some date every week',
+                },
+                {
+                    const: {
+                        interval: 2,
+                        frequency: 'WEEKLY',
+                    },
+                    title: 'Biweekly',
+                    description: 'On some date every two weeks',
+                },
+                {
+                    const: {
+                        interval: 1,
+                        frequency: 'MONTHLY',
+                    },
+                    title: 'Monthly',
+                    description: 'Monthly',
+                },
+                {
+                    const: {
+                        interval: 3,
+                        frequency: 'MONTHLY',
+                    },
+                    title: 'Quarterly',
+                    description: 'Every 3 months on X',
+                },
+            ],
+            placeholder: 'Select a start date',
+            title: 'Repeats',
+            default: {
+                interval: 0,
+                frequency: 'ONCE',
+            },
+            refreshStepOnChange: true,
+        },
+    },
+    displayOrder: ['recurrence'],
+    type: 'object',
+});
+const getStep = (title, schema) => ({
+    id: 'step-id',
+    title,
+    schemas: [schema],
+    layout: [
+        { type: 'form', schemaId: schema.$id },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+});

package/build/stories/spec/schemas/date/DateSchema.story.js

@@ -0,0 +1,59 @@
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Date',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+};
+const availability = {
+    message: 'Some dates have limited appointment availability.',
+    unavailable: [
+        {
+            type: 'dates',
+            dates: ['2026-09-07'],
+            reason: 'This date is a bank holiday.',
+        },
+        {
+            type: 'range',
+            start: '2026-09-14',
+            end: '2026-09-18',
+            reason: 'Appointments are unavailable while the office is closed.',
+        },
+        {
+            type: 'weekdays',
+            weekdays: ['sat', 'sun'],
+            reason: 'Appointments are not available at weekends.',
+        },
+    ],
+};
+const constraints = {
+    minimum: '2026-09-01',
+    maximum: '2026-09-30',
+    availability,
+};
+const step = {
+    id: 'date-schema',
+    title: 'Choose dates',
+    schemas: [
+        {
+            $id: '#dates',
+            type: 'object',
+            displayOrder: ['appointment', 'dateInput'],
+            required: ['appointment', 'dateInput'],
+            properties: {
+                appointment: Object.assign(Object.assign({}, constraints), { type: 'date', title: 'Appointment date', description: 'Unavailable dates cannot be selected.', control: 'date-lookup' }),
+                dateInput: Object.assign(Object.assign({}, constraints), { type: 'date', title: 'Appointment date input', description: 'Enter the same unavailable dates, then blur the field to see validation.' }),
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#dates' },
+        { type: 'button', action: { url: '/submit' }, title: 'Submit' },
+    ],
+    model: { appointment: '2026-09-02', dateInput: '2026-09-02' },
+};
+export const AvailabilityRules = {
+    render: () => renderWithStep(step),
+};

package/build/stories/spec/schemas/features/PersistAsync.story.js

@@ -0,0 +1,230 @@
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+import { respondWithDelay } from '../../../../test-utils/fetch-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+const httpClient = getMockHttpClient({
+    '/submit': async () => respondWithDelay({
+        id: 'new-df-flow-id',
+        title: 'Success',
+        layout: [],
+        schemas: [],
+    }, 1000),
+    '/persist-async': async () => respondWith({ token: '123' }),
+    '/persist-async-delayed-2s': async () => respondWithDelay({ token: '123' }, 2000),
+    '/persist-async-delayed-5s': async () => respondWithDelay({ token: '345' }, 5000),
+    '/persist-async-generic-failure': async () => Promise.reject(new Error('Failed to persist')),
+    '/persist-async-validation-failure': async () => respondWithDelay({ validation: { param: 'Invalid field' } }, 2000, { status: 401 }),
+    '/persist-async-file-upload': async () => respondWithDelay({ token: '123' }, 1000),
+    '/persist-async-file-upload-fail': async () => respondWith({
+        validation: {
+            document: 'This is a custom, server-side, error message',
+        },
+    }, { status: 401 }),
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Features/Persist Async',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function BasicPersistAsync() {
+    return renderWithStep(getBasicStep('/persist-async'), httpClient);
+}
+export function PersistAsyncWithDelay() {
+    return renderWithStep(getBasicStep('/persist-async-delayed-2s'), httpClient);
+}
+export function MultiplePersistAsyncWithDelay() {
+    return renderWithStep(getComplexStepWithDelay(), httpClient);
+}
+export function PersistAsyncGenericFailure() {
+    return renderWithStep(getBasicStep('/persist-async-generic-failure'), httpClient);
+}
+export function PersistAsyncValidationFailure() {
+    return renderWithStep(getBasicStep('/persist-async-validation-failure'), httpClient);
+}
+export function PersistAsyncValidationFailureWithObjectSchemaWrapper() {
+    return renderWithStep(getBasicStepWithObjectWrapper('/persist-async-validation-failure'), httpClient);
+}
+export function PersistAsyncFileUpload() {
+    return renderWithStep(getFileUploadStep(), httpClient);
+}
+export function PersistAsyncFileUploadWithAutoSubmit() {
+    return renderWithStep(getFileUploadStep(true), httpClient);
+}
+const getBasicStep = (url) => ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'string',
+            persistAsync: {
+                method: 'POST',
+                url,
+                param: 'param',
+                idProperty: 'token',
+                schema: {
+                    title: 'Card number',
+                    type: 'number',
+                    inlineAlert: {
+                        content: 'Guess what!!?',
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+    model: 'the-token',
+});
+const getBasicStepWithObjectWrapper = (url) => ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['field'],
+            properties: {
+                field: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url,
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: { title: 'Card number', type: 'number' },
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+    model: 'the-token',
+});
+const getComplexStepWithDelay = () => ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['name', 'number'],
+            properties: {
+                name: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-delayed-5s',
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: {
+                            title: 'Name on card',
+                            type: 'string',
+                        },
+                    },
+                },
+                number: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-delayed-2s',
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: {
+                            title: 'Card number',
+                            type: 'string',
+                            inlineAlert: {
+                                content: "We'll store this securely, we promise!",
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+});
+const getFileUploadStep = (submitOnChange = false) => ({
+    id: 'step-id',
+    title: 'Persist async on file upload',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['okFile', 'failFile'],
+            required: ['okFile'],
+            properties: {
+                okFile: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-file-upload',
+                        param: 'document',
+                        idProperty: 'token',
+                        schema: {
+                            title: 'Upload any file',
+                            description: 'The request should succeed.',
+                            type: 'blob',
+                            inlineAlert: {
+                                content: 'Guess what!!?',
+                            },
+                        },
+                    },
+                    onChange: submitOnChange
+                        ? {
+                            type: 'action',
+                            action: {
+                                url: '/submit',
+                            },
+                        }
+                        : undefined,
+                },
+                failFile: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-file-upload-fail',
+                        param: 'document',
+                        idProperty: 'token',
+                        schema: {
+                            title: 'Upload any file',
+                            description: 'The request should fail with a custom error mesage.',
+                            type: 'blob',
+                        },
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+});

package/build/stories/spec/schemas/features/ValidationAsync.story.js

@@ -0,0 +1,137 @@
+import { getMockHttpClient, respondWith, respondWithEmptyOk } from '../../../../test-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+const validationAsyncConfig = {
+    method: 'POST',
+    url: '/validate',
+    param: 'param',
+};
+const wait = async (ms) => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});
+const getHttpClient = (validateAsync = 'failValidation') => getMockHttpClient({
+    '/submit': async (input, init) => {
+        console.log(input, init && JSON.parse(init.body));
+        return respondWith({
+            title: 'Success',
+            schemas: [],
+            layout: [{ type: 'heading', title: 'Success' }],
+        });
+    },
+    '/validate': async () => {
+        switch (validateAsync) {
+            case 'failGenerically':
+                await wait(200);
+                return Promise.reject(new Error('Failed to validate'));
+            case 'failValidation':
+                await wait(3000);
+                return Promise.resolve(new Response(JSON.stringify({ message: 'This field is invalid' }), {
+                    status: 422,
+                }));
+            case 'succeedWithMessage':
+                await wait(1000);
+                return respondWith({ message: 'This field is super valid' });
+            case 'succeed':
+            default:
+                await wait(500);
+                return respondWithEmptyOk();
+        }
+    },
+    '/persist-async': async (input, init) => {
+        return respondWith({ token: '123' });
+    },
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Features/Validation Async',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        validateAsync: {
+            options: ['succeed', 'succeedWithMessage', 'failGenerically', 'failValidation'],
+            type: 'select',
+            defaultValue: 'failValidation',
+        },
+    },
+};
+export const BasicTypes = {
+    args: { validateAsync: 'failValidation' },
+    render: ({ validateAsync }) => renderWithStep(getBasicTypesStep(), getHttpClient(validateAsync)),
+};
+const getBasicTypesStep = () => getStep('Basic inputs with validation async', {
+    $id: '#the-schema',
+    type: 'object',
+    displayOrder: ['name', 'boolean', 'rate', 'age', 'date'],
+    properties: {
+        name: {
+            type: 'string',
+            title: 'Full Name',
+            description: 'Please enter your full name',
+            inlineAlert: {
+                content: `This is an inline alert with a neutral context.`,
+                context: 'neutral',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        boolean: {
+            type: 'boolean',
+            title: 'I accept the terms and conditions',
+            inlineAlert: {
+                content: `This is an inline alert with an info context.`,
+                context: 'info',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        rate: {
+            title: 'Conversion rate',
+            type: 'number',
+            inlineAlert: {
+                content: `This is an inline alert with a positive context.`,
+                context: 'positive',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        age: {
+            title: 'Age',
+            type: 'integer',
+            inlineAlert: {
+                content: `This is an inline alert with a negative context.`,
+                context: 'negative',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        date: {
+            type: 'string',
+            format: 'date',
+            title: 'Date of Birth',
+            inlineAlert: {
+                content: `This is an inline with a warning context.`,
+                context: 'warning',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+    },
+});
+const getStep = (title, schema) => ({
+    id: 'step-id',
+    title,
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            properties: {
+                schema,
+            },
+            displayOrder: ['schema'],
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+});