v3/packages/design-system/atoms/text-input/TextInput.stories.tsx

import { SmallTitle } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import { FiKey } from 'react-icons/fi';
import { TextInput, TextInputWithIcon } from './TextInput';

export default {
    title: 'Atoms/Text Input',
    argTypes: {
        placeholder: { control: 'text' },
    },
    args: {
        placeholder: 'Fill me in!',
    },
};

export const Common = (args) => (
    <div>
        <SmallTitle>TextInput</SmallTitle>
        <div>
            <TextInput {...args} />
        </div>
        <div>
            <TextInput {...args} disabled />
        </div>
        <SmallTitle>TextInputWithIcon</SmallTitle>
        <div>
            <TextInputWithIcon icon={<FiKey />} {...args} />
        </div>
        <div>
            <TextInputWithIcon icon={<FiKey />} {...args} disabled />
        </div>
        <div>
            <TextInputWithIcon icon={<FiKey />} {...args} type="password" />
        </div>
    </div>
);