import { getDefaultArgTypes, getValidationArgTypes, PrebuiltArgTypes, StorybookControlCategory, } from '../../../../scalars/lib/storybook-arg-types.js';
import { Textarea } from './textarea.js';
/**
 * The `Textarea` component provides a multi-line text input field with various features.
 * It supports labels, descriptions, validation states, and text transformations.
 * It also includes auto-expansion capabilities and character counting.
 *
 * > **Note:** This component does not have built-in validation. If you need built-in validation
 * > you can use the [StringField](?path=/docs/scalars-string-field--readme)
 * > component.
 */
const meta = {
    title: 'Data Entry/Textarea',
    component: Textarea,
    parameters: {
        layout: 'centered',
        chromatic: {
            disableSnapshot: true,
        },
    },
    tags: ['autodocs'],
    argTypes: {
        ...getDefaultArgTypes({
            enabledArgTypes: {
                id: false,
            },
            valueControlType: 'text',
            valueType: 'string',
        }),
        ...PrebuiltArgTypes.placeholder,
        ...PrebuiltArgTypes.autoComplete,
        ...PrebuiltArgTypes.spellCheck,
        ...PrebuiltArgTypes.trim,
        ...PrebuiltArgTypes.uppercase,
        ...PrebuiltArgTypes.lowercase,
        ...getValidationArgTypes({
            enabledArgTypes: {
                validators: false,
                showErrorOnBlur: false,
                showErrorOnChange: false,
            },
        }),
        ...PrebuiltArgTypes.minLength,
        ...PrebuiltArgTypes.maxLength,
        ...PrebuiltArgTypes.viewMode,
        ...PrebuiltArgTypes.baseValue,
        diffMode: {
            control: 'select',
            description: 'The mode of the input field',
            options: ['words'],
            table: {
                category: StorybookControlCategory.DIFF,
            },
        },
        autoExpand: {
            control: 'boolean',
            description: 'Whether the textarea should automatically expand with content',
        },
        multiline: {
            control: 'boolean',
            description: 'Whether the textarea allows multiple lines of text',
        },
        rows: {
            control: 'number',
            description: 'Number of visible text lines',
        },
    },
};
export default meta;
export const Default = {
    args: {
        label: 'Comments',
        placeholder: 'Enter your comments',
    },
};
export const WithDefaultValue = {
    args: {
        label: 'Comments',
        defaultValue: 'This is some sample text that appears in the textarea by default.',
        placeholder: 'Enter your comments',
        rows: 3,
    },
};
export const WithDescription = {
    args: {
        label: 'Comments',
        description: 'Please provide detailed feedback',
        placeholder: 'Enter your comments',
    },
};
export const Required = {
    args: {
        label: 'Comments',
        required: true,
        placeholder: 'Enter your comments',
    },
};
export const Disabled = {
    args: {
        label: 'Comments',
        disabled: true,
        defaultValue: 'This textarea is disabled and cannot be edited.',
        placeholder: 'Enter your comments',
    },
};
export const WithCharacterLimit = {
    args: {
        label: 'Comments',
        placeholder: 'Enter your comments',
        maxLength: 100,
    },
};
export const AutoExpand = {
    args: {
        label: 'Comments',
        placeholder: 'This textarea will expand as you type more content...',
        autoExpand: true,
    },
};
export const WithErrors = {
    args: {
        label: 'Comments',
        defaultValue: 'Too short',
        errors: ['Comments must be at least 20 characters long'],
        placeholder: 'Enter your comments',
    },
};
export const WithWarnings = {
    args: {
        label: 'Comments',
        defaultValue: 'Brief comment',
        warnings: ['Consider providing more detailed feedback'],
        placeholder: 'Enter your comments',
    },
};
export const SingleLine = {
    args: {
        label: 'Brief comment',
        placeholder: 'Enter a single line of text',
        multiline: false,
    },
};
export const WithDifferencesAddition = {
    args: {
        label: 'With differences (addition)',
        value: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
        baseValue: 'Dolor sit amet consectetur adipiscing elit quisque faucibus.',
        viewMode: 'addition',
    },
};
export const WithDifferencesRemoval = {
    args: {
        label: 'With differences (removal)',
        value: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
        baseValue: 'Dolor sit amet consectetur adipiscing elit quisque faucibus.',
        viewMode: 'removal',
    },
};
export const WithDifferencesMixed = {
    args: {
        label: 'With differences (mixed)',
        value: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
        baseValue: 'Dolor sit amet consectetur adipiscing elit quisque faucibus.',
        viewMode: 'mixed',
    },
};
//# sourceMappingURL=textarea.stories.js.map