1import { useState } from 'react';
2
3import { Icon, Option, SelectTwo } from '@proton/components';
4
5import { Input } from './Input';
6import mdx from './Input.mdx';
7
8export default {
9    component: Input,
10    title: 'components/Input',
11    parameters: { docs: { page: mdx } },
12};
13
14export const Basic = () => {
15    const [value, setValue] = useState('');
16
17    const handleValue = (updatedValue: string) => setValue(updatedValue);
18
19    return <Input placeholder="Placeholder" value={value} onValue={handleValue} />;
20};
21
22export const Controlled = () => {
23    const [value, setValue] = useState('');
24
25    const handleValue = (updatedValue: string) => setValue(updatedValue);
26
27    return (
28        <>
29            <Input placeholder="Placeholder" value={value} onValue={handleValue} />
30
31            <p className="mb-1">
32                The `disableChange` prop can be used to prevent the input value from updating. Try updating the value
33                from the input below.
34            </p>
35            <Input disableChange placeholder="Placeholder" value={value} onValue={handleValue} />
36        </>
37    );
38};
39
40export const Error = () => {
41    return <Input error />;
42};
43
44export const Disabled = () => {
45    return (
46        <>
47            <Input disabled />
48            <p className="mb-1">Note the disabled styling added to the prefix and suffix</p>
49            <Input disabled prefix={<Icon name="magnifier" />} suffix="@protonmail.com" />
50        </>
51    );
52};
53
54export const Unstyled = () => {
55    return <Input unstyled prefix={<Icon name="magnifier" />} placeholder="Search" />;
56};
57
58export const Adornments = () => {
59    return (
60        <>
61            <Input className="mb-2" prefix={<Icon name="magnifier" />} />
62            <Input className="mb-2" placeholder="**** **** **** ****" suffix={<Icon name="credit-card" />} />
63            <Input className="mb-2" placeholder="username" suffix="@protonmail.com" />
64            <Input
65                className="mb-2"
66                placeholder="username"
67                suffix={
68                    <SelectTwo unstyled value="pm.me">
69                        <Option key="pm.me" value="pm.me" title="pm.me">
70                            @pm.me
71                        </Option>
72                        <Option key="protonmail.com" value="protonmail.com" title="protonmail.com">
73                            @protonmail.com
74                        </Option>
75                    </SelectTwo>
76                }
77            />
78        </>
79    );
80};