1import { useState } from 'react';
2
3import { Button } from '@proton/atoms/Button/Button';
4import ButtonLike from '@proton/atoms/Button/ButtonLike';
5import { Checkbox, Icon, RadioGroup, Table, TableBody, TableCell, TableHeader, TableRow } from '@proton/components';
6
7import mdx from './Button.mdx';
8
9export default {
10    component: Button,
11    title: 'components/Button',
12    parameters: {
13        docs: {
14            page: mdx,
15        },
16    },
17};
18
19export const Example = () => (
20    <Button color="norm" size="large">
21        Loremium
22    </Button>
23);
24
25export const Basic = ({ ...args }) => <Button {...args}>Loremium</Button>;
26
27Basic.args = {};
28
29type ButtonProps = React.ComponentProps<typeof Button>;
30
31const shapes: Required<ButtonProps>['shape'][] = ['solid', 'outline', 'ghost', 'underline'];
32
33const colors: Required<ButtonProps>['color'][] = ['norm', 'weak', 'danger', 'warning', 'success', 'info'];
34
35const sizes: Required<ButtonProps>['size'][] = ['small', 'medium', 'large'];
36
37const toggles = ['loading', 'pill', 'fullWidth', 'icon', 'disabled'] as const;
38
39const buttonContainerClassName = 'flex md:flex-1 items-center justify-center border';
40
41export const Sandbox = () => {
42    const [selectedShape, setSelectedShape] = useState<Required<ButtonProps>['shape']>('solid');
43    const [selectedColor, setSelectedColor] = useState<Required<ButtonProps>['color']>('weak');
44    const [selectedSize, setSelectedSize] = useState<Required<ButtonProps>['size']>('medium');
45    const [selectedToggles, setSelectedToggles] = useState(toggles.map(() => false));
46
47    const button = (
48        <Button
49            shape={selectedShape}
50            color={selectedColor}
51            size={selectedSize}
52            {...selectedToggles.reduce<{ [key: string]: boolean }>((acc, value, i) => {
53                acc[toggles[i]] = value;
54                return acc;
55            }, {})}
56        >
57            {selectedToggles[toggles.indexOf('icon')] ? (
58                <Icon name="brand-proton-mail" />
59            ) : (
60                <>
61                    {selectedShape} {selectedColor} {selectedSize}
62                </>
63            )}
64        </Button>
65    );
66
67    return (
68        <div className="flex *:min-size-auto flex-column md:flex-row py-7">
69            <div className="flex flex-column flex-nowrap md:flex-1">
70                <div className="mr-8 mb-4">
71                    <strong className="block mb-4">Color</strong>
72                    <RadioGroup
73                        name="selected-color"
74                        onChange={(v) => setSelectedColor(v)}
75                        value={selectedColor}
76                        options={colors.map((color) => ({ value: color, label: color }))}
77                    />
78                </div>
79                <div className="mr-8 mb-4">
80                    <strong className="block mb-4">Shape</strong>
81                    <RadioGroup
82                        name="selected-shape"
83                        onChange={(v) => setSelectedShape(v)}
84                        value={selectedShape}
85                        options={shapes.map((shape) => ({ value: shape, label: shape }))}
86                    />
87                </div>
88                <div className="mr-8 mb-4">
89                    <strong className="block mb-4">Size</strong>
90                    <RadioGroup
91                        name="selected-size"
92                        onChange={(v) => setSelectedSize(v)}
93                        value={selectedSize}
94                        options={sizes.map((size) => ({ value: size, label: size }))}
95                    />
96                </div>
97                <div className="mr-8 mb-4">
98                    <strong className="block mb-4">Toggles</strong>
99                    {toggles.map((prop, i) => {
100                        return (
101                            <div className="mb-2" key={i}>
102                                <Checkbox
103                                    checked={selectedToggles[i]}
104                                    onChange={({ target: { checked } }) => {
105                                        setSelectedToggles(
106                                            selectedToggles.map((oldValue, otherIndex) =>
107                                                otherIndex === i ? checked : oldValue
108                                            )
109                                        );
110                                    }}
111                                >
112                                    {prop}
113                                </Checkbox>
114                            </div>
115                        );
116                    })}
117                </div>
118            </div>
119            <div className={buttonContainerClassName}>{button}</div>
120        </div>
121    );
122};
123
124export const Variants = () => {
125    return (
126        <Table className="color-norm">
127            <TableHeader>
128                <TableRow>
129                    <TableCell>
130                        <></>
131                    </TableCell>
132                    {colors.map((color) => (
133                        <TableCell key={color} scope="col">
134                            {color}
135                        </TableCell>
136                    ))}
137                </TableRow>
138            </TableHeader>
139            <TableBody>
140                {shapes.map((shape) => (
141                    <TableRow key={shape}>
142                        <TableCell>{shape}</TableCell>
143                        {colors.map((color) => (
144                            <TableCell key={color}>
145                                <div className="flex gap-2 justify-center">
146                                    <Button shape={shape} color={color}>
147                                        Lorem
148                                    </Button>
149                                    {shape !== 'underline' && (
150                                        <Button icon shape={shape} color={color}>
151                                            <Icon name="brand-proton-mail" alt="Lorem" />
152                                        </Button>
153                                    )}
154                                </div>
155                            </TableCell>
156                        ))}
157                    </TableRow>
158                ))}
159            </TableBody>
160        </Table>
161    );
162};
163
164const Component = (props: any) => {
165    return <div {...props}>Component</div>;
166};
167
168export const Like = () => {
169    return (
170        <div>
171            <div>
172                <ButtonLike as="a" shape="outline" color="norm" href="https://proton.me">
173                    Link
174                </ButtonLike>
175            </div>
176            <div className="mt-4">
177                <ButtonLike as={Component} color="danger" className="mb-4" />
178            </div>
179        </div>
180    );
181};