web-ui/src/components/MDXEditorField.stories.tsx

import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
    headingsPlugin,
    listsPlugin,
    markdownShortcutPlugin,
    quotePlugin,
} from '@mdxeditor/editor';
import { MDXEditorField } from './MDXEditorField';

const basePlugins = [headingsPlugin(), listsPlugin(), quotePlugin(), markdownShortcutPlugin()];

const sampleMarkdown = `# Hello from MDXEditor

This is a paragraph with **bold** and _italic_ text.

- First bullet
- Second bullet
`;

const meta = {
    title: 'Components/MDXEditorField',
    component: MDXEditorField,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.',
            },
        },
    },
    argTypes: {
        label: {
            description: 'Field label shown above the editor.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        markdown: {
            description: 'Controlled markdown content value.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        readOnly: {
            description: 'Enables read-only mode.',
            control: 'boolean',
            table: { type: { summary: 'boolean' } },
        },
        disabled: {
            description: 'Disables editing and applies disabled visuals.',
            control: 'boolean',
            table: { type: { summary: 'boolean' } },
        },
        themeClassName: {
            description:
                'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        plugins: {
            description: 'MDXEditor plugins array.',
            control: false,
            table: { type: { summary: 'MDXEditorProps["plugins"]' } },
        },
        contentEditableClassName: {
            description: 'CSS class used on the content editable area.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        className: {
            description: 'Extra CSS classes for the outer wrapper.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        editorWrapperClassName: {
            description: 'Extra CSS classes for the editor shell element.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        editorWrapperStyle: {
            description: 'Inline style object for the editor shell.',
            control: 'object',
            table: { type: { summary: 'CSSProperties' } },
        },
        editorClassName: {
            description: 'Extra CSS classes for the MDXEditor instance.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        error: {
            description: 'Error message shown below the editor.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        onChange: {
            description: 'Callback fired when markdown changes in editable mode.',
            action: 'changed',
            table: { type: { summary: '(markdown: string) => void' } },
        },
        editorRef: {
            description: 'Ref to MDXEditor methods.',
            control: false,
            table: { type: { summary: 'Ref<MDXEditorMethods | null>' } },
        },
    },
    args: {
        label: 'Content',
        markdown: sampleMarkdown,
        plugins: basePlugins,
        themeClassName: '',
    },
} satisfies Meta<typeof MDXEditorField>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Editable: Story = {
    render: (args) => {
        const [markdown, setMarkdown] = useState(args.markdown);
        return (
            <div className="w-full max-w-2xl">
                <MDXEditorField
                    {...args}
                    markdown={markdown}
                    onChange={(next) => {
                        setMarkdown(next);
                        args.onChange?.(next);
                    }}
                    editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
                />
            </div>
        );
    },
};

export const ReadOnly: Story = {
    args: {
        readOnly: true,
    },
    render: (args) => (
        <div className="w-full max-w-2xl">
            <MDXEditorField
                {...args}
                editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
            />
        </div>
    ),
};

export const DisabledWithError: Story = {
    args: {
        disabled: true,
        error: 'Editor is currently disabled',
    },
    render: (args) => (
        <div className="w-full max-w-2xl">
            <MDXEditorField
                {...args}
                editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
            />
        </div>
    ),
};