1import type { ChangeEvent } from 'react';
2import { useState } from 'react';
3
4import { ThemeColor, getVariableFromThemeColor } from '@proton/colors';
5
6import Donut from './Donut';
7import mdx from './Donut.mdx';
8
9export default {
10    component: Donut,
11    title: 'components/Donut',
12    parameters: {
13        docs: {
14            page: mdx,
15        },
16    },
17};
18
19export const Basic = () => {
20    return (
21        <div style={{ width: 200, height: 200 }}>
22            <Donut
23                segments={[
24                    [20, ThemeColor.Danger],
25                    [10, ThemeColor.Warning],
26                    [15, ThemeColor.Success],
27                    [10, ThemeColor.Norm],
28                    [5, ThemeColor.Weak],
29                ]}
30            />
31        </div>
32    );
33};
34
35export const WithSlider = () => {
36    const [success, setSuccess] = useState(20);
37
38    return (
39        <div>
40            <input
41                className="mb-8"
42                style={{ appearance: 'auto' }}
43                type="range"
44                value={success}
45                min={0}
46                max={200}
47                onInput={(e: ChangeEvent<HTMLInputElement>) => setSuccess(Number(e.target.value))}
48            />
49
50            <div style={{ width: 200, height: 200 }}>
51                <Donut
52                    segments={[
53                        [40, ThemeColor.Danger],
54                        [20, ThemeColor.Warning],
55                        [success, ThemeColor.Success],
56                    ]}
57                />
58            </div>
59        </div>
60    );
61};
62
63export const Accessibility = () => {
64    const used = 40;
65    const alreadyAllocated = 20;
66    const allocated = 30;
67
68    const labelledSegments = [
69        { label: 'Already used', value: [used, ThemeColor.Danger] },
70        { label: 'Already allocated', value: [alreadyAllocated, ThemeColor.Warning] },
71        { label: 'Allocated', value: [allocated, ThemeColor.Success] },
72    ] as const;
73
74    return (
75        <div className="flex items-center">
76            <div className="mr-8" style={{ width: 160, height: 160 }}>
77                <Donut segments={labelledSegments.map(({ value }) => value as [number, string])} />
78            </div>
79            <div>
80                {labelledSegments.map(({ label, value: [share, color] }) => (
81                    <div className="mb-4 flex items-center">
82                        <span
83                            className="inline-block mr-4"
84                            style={{
85                                width: 36,
86                                height: 24,
87                                borderRadius: 8,
88                                background: `var(${getVariableFromThemeColor(color)})`,
89                            }}
90                        />
91                        <strong>
92                            <span className="sr-only">{share} GB</span>
93                            {label}
94                        </strong>
95                    </div>
96                ))}
97            </div>
98        </div>
99    );
100};