@wise/dynamic-flow-client 5.28.0 → 5.28.1

package/build/stories/spec/schemas/Upload.story.js

@@ -1,168 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from 'storybook/actions';
-import { getMockHttpClient, respondWith } from '../../../test-utils';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-const wait = async (ms) => new Promise((resolve) => {
-    setTimeout(resolve, ms);
-});
-const persistAsyncConfig = {
-    method: 'POST',
-    url: '/persist-async',
-    param: 'param',
-    idProperty: 'token',
-};
-const uploadConfig = {
-    title: 'Upload label (from innner schema title)',
-    accepts: ['image/png', 'image/jpeg', 'application/pdf'],
-    validationMessages: {
-        maxSize: 'Your file is too large',
-        required: 'Please enter a valid file (uploadConfig).',
-    },
-};
-const multiFileConfig = {
-    title: 'Upload label (from innner schema title)',
-    maxItems: 5,
-    addItemTitle: 'Add',
-    editItemTitle: 'Edit',
-    summary: {
-        defaultTitle: 'File',
-        defaultDescription: 'Click to edit or remove',
-        defaultIcon: { name: 'document', type: 'icon' },
-    },
-};
-const logPersistAsync = (input, init) => {
-    if (init && init.body instanceof FormData) {
-        console.log(input, init.body.get(persistAsyncConfig.param));
-    }
-    else {
-        console.log(input, init && JSON.parse(init.body));
-    }
-};
-const getHttpClient = (persistAsync = 'succeed') => getMockHttpClient({
-    '/submit': async (input, init) => {
-        console.log(input, init && JSON.parse(init.body));
-        return respondWith({
-            id: 'success',
-            title: 'Submission successful',
-            description: 'Your file has been uploaded successfully.',
-            schemas: [],
-            layout: [
-                { type: 'paragraph', text: 'Refresh the page to start again.', align: 'center' },
-            ],
-        }, { status: 200 });
-    },
-    '/persist-async': async (input, init) => {
-        logPersistAsync(input, init);
-        switch (persistAsync) {
-            case 'rejectPromise':
-                return Promise.reject(new Error('Failed to persist async'));
-            case 'failGenerically':
-                await wait(1000);
-                return Promise.resolve(new Response(null, { status: 404 }));
-            case 'failValidation':
-                await wait(1000);
-                return Promise.resolve(new Response(JSON.stringify({ validation: { param: 'Error message from the server.' } }), { status: 422 }));
-            case 'succeed':
-            default:
-                await wait(1000);
-                return respondWith({ token: '123' });
-        }
-    },
-});
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/Upload',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    argTypes: {
-        persistAsync: {
-            options: ['succeed', 'rejectPromise', 'failGenerically', 'failValidation'],
-            type: 'select',
-            defaultValue: 'succeed',
-        },
-    },
-};
-export function Base64Upload() {
-    return renderWithStep(getBase64UploadStep());
-}
-export function Base64UploadLarge() {
-    return renderWithStep(getBase64UploadStepLarge());
-}
-export function Base64UploadWithPersistAsync({ persistAsync }) {
-    return renderWithStep(getBase64UploadWithPersistAsync(), persistAsync);
-}
-export function BlobUploadWithPersistAsync({ persistAsync }) {
-    return renderWithStep(getBlobUploadWithPersistAsync(), persistAsync);
-}
-export function BlobUploadWithPersistAsyncLarge({ persistAsync }) {
-    return renderWithStep(getBlobUploadWithPersistAsyncLarge(), persistAsync);
-}
-export function MultiBase64Upload() {
-    return renderWithStep(getMultiBase64Upload());
-}
-export function MultiBase64UploadWithPersistAsync({ persistAsync }) {
-    return renderWithStep(getMultiBase64UploadWithPersistAsync(), persistAsync);
-}
-export function MultiBlobUploadWithPersistAsync({ persistAsync }) {
-    return renderWithStep(getMultiBlobUploadWithPersistAsync(), persistAsync);
-}
-const renderWithStep = (step, persistAsync = 'succeed') => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: getHttpClient(persistAsync), initialStep: step, features: { nativeBack: true }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
-        action('onError');
-        console.error(error);
-    } }));
-const getBase64UploadStep = () => getStep('Base64 Upload', Object.assign({ $id: '#schema', type: 'string', format: 'base64url' }, uploadConfig));
-const getBase64UploadStepLarge = () => getStep('Base64 Upload (Large)', Object.assign({ $id: '#schema', type: 'string', control: 'upload-large', format: 'base64url' }, uploadConfig));
-const getBase64UploadWithPersistAsync = () => getStep('Base64 Upload (Persist Async)', {
-    $id: '#schema',
-    type: 'string',
-    persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'string', format: 'base64url' }, uploadConfig) }),
-});
-const getBlobUploadWithPersistAsync = () => getStep('Blob Upload (Persist Async)', {
-    $id: '#schema',
-    type: 'string',
-    validationMessages: { required: 'Please enter a valid file.' },
-    persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'blob', source: 'file' }, uploadConfig) }),
-});
-const getBlobUploadWithPersistAsyncLarge = () => getStep('Blob Upload (Persist Async, Large)', {
-    $id: '#schema',
-    type: 'string',
-    validationMessages: { required: 'Please enter a valid file.' },
-    persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'blob', control: 'upload-large', source: 'file' }, uploadConfig) }),
-});
-const getMultiBase64Upload = () => getStep('Base64 Upload (Multiple)', Object.assign(Object.assign({ $id: '#schema', type: 'array' }, multiFileConfig), { items: Object.assign({ type: 'string', format: 'base64url' }, uploadConfig) }));
-const getMultiBase64UploadWithPersistAsync = () => getStep('Base64 Upload (Multiple, Persist Async)', Object.assign(Object.assign({ $id: '#schema', type: 'array' }, multiFileConfig), { items: {
-        $id: '#id',
-        type: 'string',
-        persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'string', format: 'base64url' }, uploadConfig) }),
-    } }));
-const getMultiBlobUploadWithPersistAsync = () => getStep('Blob Upload (Multiple, Persist Async)', Object.assign(Object.assign({ type: 'array', $id: '#schema' }, multiFileConfig), { items: {
-        $id: '#id',
-        type: 'string',
-        persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'blob', source: 'file' }, uploadConfig) }),
-    } }));
-const getStep = (title, schema) => {
-    const objectSchema = {
-        type: 'object',
-        $id: '#object-schema',
-        displayOrder: ['fileUpload', 'thing'],
-        required: ['fileUpload'],
-        properties: {
-            thing: { const: 'hidden-value' },
-            fileUpload: schema,
-        },
-    };
-    return {
-        id: 'step-id',
-        title,
-        schemas: [objectSchema],
-        layout: [
-            { type: 'form', schemaId: '#object-schema' },
-            {
-                type: 'button',
-                title: 'Submit',
-                action: { url: '/submit', method: 'POST' },
-            },
-        ],
-    };
-};

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),
-};