<commit_before>import { useState } from 'react';
import { Icon, InputFieldTwo, PasswordInputTwo, TextAreaTwo } from '@proton/components';
import { getTitle } from '../../helpers/title';

import mdx from './InputFieldTwo.mdx';

export default {
    component: InputFieldTwo,
    title: getTitle(__filename, false),
    parameters: {
        docs: {
            page: mdx,
        },
    },
};

export const Playground = ({ ...args }) => <InputFieldTwo {...args} />;
Playground.args = {
    label: 'Basic input',
    hint: '',
    assistiveText: '',
    disabled: false,
    bigger: false,
    id: '',
    error: '',
    warning: '',
    rootClassName: '',
};
Playground.argTypes = {
    label: {
        type: { name: 'string' },
    },
    hint: {
        type: { name: 'string' },
    },
    assistiveText: {
        type: { name: 'string' },
    },
    error: {
        type: { name: 'string' },
    },
    warning: {
        type: { name: 'string' },
    },
    as: {
        table: {
            disable: true,
        },
    },
};

export const Basic = () => {
    const [value, setValue] = useState('');

    const sharedInputProps = {
        value,
        onValue: setValue,
        placeholder: "e.g. '<NAME>'",
    };

    const hint = `${value.length}/100`;

    return (
        <div>
            <div className="mb1">
                <InputFieldTwo label="Rudimentary" {...sharedInputProps} placeholder={undefined} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo label="Hint" hint={hint} {...sharedInputProps} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo
                    label="Assistive Text"
                    assistiveText="Your legal surname/s (separated by spaces)"
                    {...sharedInputProps}
                />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo
                    label="Hint & Assistive Text"
                    hint={hint}
                    assistiveText="Your legal surname/s (separated by spaces)"
                    {...sharedInputProps}
                />
            </div>
            <div className="mt1">
                <InputFieldTwo
                    disabled
                    label="Disabled"
                    hint={hint}
                    assistiveText="Your legal surname/s (separated by spaces)"
                    {...sharedInputProps}
                />
            </div>
        </div>
    );
};

export const Validation = () => {
    const sharedInputProps = {
        placeholder: "e.g. '<NAME>'",
    };

    return (
        <div>
            <div className="mb1">
                <InputFieldTwo label="Error" error="Something's not quite right here" {...sharedInputProps} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo label="Warning" warning="This value might be wrong" {...sharedInputProps} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo
                    label="Warning as boolean"
                    warning
                    assistiveText="Should be hidden"
                    {...sharedInputProps}
                />
            </div>
            <div className="mt1">
                <InputFieldTwo label="Error as boolean" error assistiveText="Should be hidden" {...sharedInputProps} />
            </div>
        </div>
    );
};

export const Adornments = () => {
    return (
        <div>
            <div className="mb1">
                <InputFieldTwo
                    label="Input with icon"
                    placeholder="**** **** **** ****"
                    icon={<Icon name="credit-card" />}
                />
            </div>
            <div className="mt1">
                <InputFieldTwo label="Input with suffix" placeholder="username" suffix="@pro<EMAIL>.<EMAIL>" />
            </div>
        </div>
    );
};

export const Sizes = () => {
    const sharedInputProps = {
        placeholder: "e.g. '<NAME>'",
    };

    return (
        <div>
            <div className="mb1">
                <InputFieldTwo label="Default" {...sharedInputProps} />
            </div>
            <div className="mt1">
                <InputFieldTwo label="Bigger" bigger {...sharedInputProps} />
            </div>
        </div>
    );
};

export const CustomElements = () => {
    return (
        <div>
            <div className="mb1">
                <InputFieldTwo as={PasswordInputTwo} label="Password input" placeholder="Password" />
            </div>
            <div className="mb1">
                <InputFieldTwo as={TextAreaTwo} rows={3} label="Text area" placeholder="Placeholder" />
            </div>
        </div>
    );
};
<commit_msg>Add select input field example<commit_after>import { useState } from 'react';
import { Icon, InputFieldTwo, Option, PasswordInputTwo, SelectTwo, TextAreaTwo } from '@proton/components';
import { getTitle } from '../../helpers/title';

import mdx from './InputFieldTwo.mdx';

export default {
    component: InputFieldTwo,
    title: getTitle(__filename, false),
    parameters: {
        docs: {
            page: mdx,
        },
    },
};

export const Playground = ({ ...args }) => <InputFieldTwo {...args} />;
Playground.args = {
    label: 'Basic input',
    hint: '',
    assistiveText: '',
    disabled: false,
    bigger: false,
    id: '',
    error: '',
    warning: '',
    rootClassName: '',
};
Playground.argTypes = {
    label: {
        type: { name: 'string' },
    },
    hint: {
        type: { name: 'string' },
    },
    assistiveText: {
        type: { name: 'string' },
    },
    error: {
        type: { name: 'string' },
    },
    warning: {
        type: { name: 'string' },
    },
    as: {
        table: {
            disable: true,
        },
    },
};

export const Basic = () => {
    const [value, setValue] = useState('');

    const sharedInputProps = {
        value,
        onValue: setValue,
        placeholder: "e.g. '<NAME>'",
    };

    const hint = `${value.length}/100`;

    return (
        <div>
            <div className="mb1">
                <InputFieldTwo label="Rudimentary" {...sharedInputProps} placeholder={undefined} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo label="Hint" hint={hint} {...sharedInputProps} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo
                    label="Assistive Text"
                    assistiveText="Your legal surname/s (separated by spaces)"
                    {...sharedInputProps}
                />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo
                    label="Hint & Assistive Text"
                    hint={hint}
                    assistiveText="Your legal surname/s (separated by spaces)"
                    {...sharedInputProps}
                />
            </div>
            <div className="mt1">
                <InputFieldTwo
                    disabled
                    label="Disabled"
                    hint={hint}
                    assistiveText="Your legal surname/s (separated by spaces)"
                    {...sharedInputProps}
                />
            </div>
        </div>
    );
};

export const Validation = () => {
    const sharedInputProps = {
        placeholder: "e.g. '<NAME>'",
    };

    return (
        <div>
            <div className="mb1">
                <InputFieldTwo label="Error" error="Something's not quite right here" {...sharedInputProps} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo label="Warning" warning="This value might be wrong" {...sharedInputProps} />
            </div>
            <div className="mb1 mt1">
                <InputFieldTwo
                    label="Warning as boolean"
                    warning
                    assistiveText="Should be hidden"
                    {...sharedInputProps}
                />
            </div>
            <div className="mt1">
                <InputFieldTwo label="Error as boolean" error assistiveText="Should be hidden" {...sharedInputProps} />
            </div>
        </div>
    );
};

export const Adornments = () => {
    return (
        <div>
            <div className="mb1">
                <InputFieldTwo
                    label="Input with icon"
                    placeholder="**** **** **** ****"
                    icon={<Icon name="credit-card" />}
                />
            </div>
            <div className="mt1">
                <InputFieldTwo label="Input with suffix" placeholder="username" suffix="<EMAIL>" />
            </div>
        </div>
    );
};

export const Sizes = () => {
    const sharedInputProps = {
        placeholder: "e.g. '<NAME>'",
    };

    return (
        <div>
            <div className="mb1">
                <InputFieldTwo label="Default" {...sharedInputProps} />
            </div>
            <div className="mt1">
                <InputFieldTwo label="Bigger" bigger {...sharedInputProps} />
            </div>
        </div>
    );
};

export const CustomElements = () => {
    return (
        <div>
            <div className="mb1">
                <InputFieldTwo as={PasswordInputTwo} label="Password input" placeholder="Password" />
            </div>
            <div className="mb1">
                <InputFieldTwo as={TextAreaTwo} rows={3} label="Text area" placeholder="Placeholder" />
            </div>
            <div className="mb1">
                <InputFieldTwo as={SelectTwo} label="Select" placeholder="Placeholder" assistiveText="Test text" bigger>
                    <Option title="one" value="one" />
                    <Option title="two" value="two" />
                    <Option title="three" value="three" />
                </InputFieldTwo>
            </div>
        </div>
    );
};

{'fraction_non_alphanumeric': 0.14305722288915565, 'fraction_numerical': 0.004901960784313725, 'mean_word_length': 1.4466470876162507, 'pattern_counts': {'":': 0, '<': 133, '<?xml version=': 0, '>': 145, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1566613', 'n_tokens_mistral': 2736, 'n_tokens_neox': 2633, 'n_words': 598}