import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { withForm } from '../../lib/decorators.js';
import { IdField } from './id-field.js';
const meta = {
    title: 'Scalars/Id Field',
    component: IdField,
    decorators: [withForm],
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    argTypes: {
        name: {
            control: false,
            description: 'Name of the field in the form data',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'id' },
                category: 'Default',
            },
        },
        value: {
            control: false,
            description: 'A predefined value for the ID field. If provided, this value will be used instead of generating a new ID.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'auto-generated' },
                category: 'Default',
            },
        },
        generator: {
            control: false,
            description: 'Generator function or built-in generator to generate the ID.',
            table: {
                type: { summary: 'UUID | (() => string)' },
                defaultValue: { summary: 'UUID' },
                category: 'Default',
            },
        },
    },
};
export default meta;
export const Default = {
    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "text-sm text-gray-500", children: [_jsx("p", { children: "This form contains a hidden IdField that will generate a UUID." }), _jsx("p", { children: "Submit the form to see the generated ID in the alert." })] }), _jsx(IdField, {}), _jsx("button", { type: "submit", children: "Submit to see ID" })] })),
    parameters: {
        docs: {
            source: {
                code: '<IdField />',
            },
        },
    },
};
export const CustomGenerator = {
    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "text-sm text-gray-500", children: [_jsx("p", { children: "This form contains a hidden IdField with a custom ID generator." }), _jsx("p", { children: "Submit the form to see the generated ID in the alert." })] }), _jsx(IdField, { generator: () => `custom-${Date.now()}` }), _jsx("button", { type: "submit", children: "Submit to see ID" })] })),
    parameters: {
        docs: {
            source: {
                code: '<IdField generator={() => `custom-${Date.now()}`} />',
            },
        },
    },
};
export const CustomIdValue = {
    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "text-sm text-gray-500", children: [_jsx("p", { children: "This form contains a hidden IdField with the id: \"custom-id\"." }), _jsx("p", { children: "Submit the form to see the ID in the alert." })] }), _jsx(IdField, { value: "custom-id" }), _jsx("button", { type: "submit", children: "Submit to see ID" })] })),
    parameters: {
        docs: {
            source: {
                code: '<IdField value="custom-id" />',
            },
        },
    },
};
//# sourceMappingURL=id-field.stories.js.map