@wise/dynamic-flow-client 5.25.2 → 5.25.4

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

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

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

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

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

@@ -1,137 +0,0 @@
-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' },
-        },
-    ],
-});