veza/apps/web/src/components/ui/HelpText.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { HelpText } from './HelpText';

const meta: Meta = {
    title: 'UI/HelpText',
    component: HelpText,
    tags: ['autodocs'],
    argTypes: {
        text: { control: 'text' },
        position: {
            control: 'select',
            options: ['top', 'bottom', 'left', 'right'],
        },
    },
};

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

export const Default: Story = {
    args: {
        text: 'This is a helpful tooltip message.',
    },
};

export const InlineExample: Story = {
    render: () => (
        <div className="flex items-center gap-2">
            <span className="text-sm font-medium text-foreground">Password</span>
            <HelpText text="Must be at least 12 characters long." />
        </div>
    ),
};