@bundle-stats/ui 4.15.1 → 4.16.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/assets/icons.svg +79 -70
- package/lib/assets/icons.svg.js +7 -0
- package/lib/assets/icons.svg.js.map +1 -1
- package/lib/components/entry-info/entry-info.js +8 -4
- package/lib/components/entry-info/entry-info.js.map +1 -1
- package/lib/components/entry-info/entry-info.module.css +1 -1
- package/lib/ui/copy-to-clipboard/copy-to-clipboard.js +60 -0
- package/lib/ui/copy-to-clipboard/copy-to-clipboard.js.map +1 -0
- package/lib/ui/copy-to-clipboard/copy-to-clipboard.module.css +58 -0
- package/lib/ui/copy-to-clipboard/index.js +18 -0
- package/lib/ui/copy-to-clipboard/index.js.map +1 -0
- package/lib/ui/icon/icon.js +2 -0
- package/lib/ui/icon/icon.js.map +1 -1
- package/lib/ui/index.js +3 -1
- package/lib/ui/index.js.map +1 -1
- package/lib-esm/assets/icons.svg +79 -70
- package/lib-esm/assets/icons.svg.js +7 -0
- package/lib-esm/assets/icons.svg.js.map +1 -1
- package/lib-esm/components/entry-info/entry-info.js +9 -5
- package/lib-esm/components/entry-info/entry-info.js.map +1 -1
- package/lib-esm/components/entry-info/entry-info.module.css +1 -1
- package/lib-esm/ui/copy-to-clipboard/copy-to-clipboard.js +30 -0
- package/lib-esm/ui/copy-to-clipboard/copy-to-clipboard.js.map +1 -0
- package/lib-esm/ui/copy-to-clipboard/copy-to-clipboard.module.css +58 -0
- package/lib-esm/ui/copy-to-clipboard/index.js +2 -0
- package/lib-esm/ui/copy-to-clipboard/index.js.map +1 -0
- package/lib-esm/ui/icon/icon.js +2 -0
- package/lib-esm/ui/icon/icon.js.map +1 -1
- package/lib-esm/ui/index.js +1 -0
- package/lib-esm/ui/index.js.map +1 -1
- package/package.json +8 -8
- package/src/assets/icons/clipboard-check.svg +5 -0
- package/src/assets/icons/clipboard.svg +5 -0
- package/src/assets/icons.svg +79 -70
- package/src/assets/icons.svg.jsx +27 -0
- package/src/components/entry-info/entry-info.module.css +1 -1
- package/src/components/entry-info/entry-info.tsx +23 -9
- package/src/ui/copy-to-clipboard/copy-to-clipboard.module.css +58 -0
- package/src/ui/copy-to-clipboard/copy-to-clipboard.stories.tsx +33 -0
- package/src/ui/copy-to-clipboard/copy-to-clipboard.tsx +57 -0
- package/src/ui/copy-to-clipboard/index.ts +1 -0
- package/src/ui/icon/icon.tsx +2 -0
- package/src/ui/index.js +1 -0
- package/types/ui/copy-to-clipboard/copy-to-clipboard.d.ts +7 -0
- package/types/ui/copy-to-clipboard/index.d.ts +1 -0
- package/types/ui/icon/icon.d.ts +4 -0
- package/types/ui/index.d.ts +1 -0
package/src/assets/icons.svg
CHANGED
|
@@ -1,72 +1,81 @@
|
|
|
1
1
|
<svg width="0" height="0" style="position:absolute">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
2
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path d="M12 5v14M19 12l-7 7-7-7"/>
|
|
4
|
+
</symbol>
|
|
5
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
|
|
6
|
+
<circle cx="12" cy="12" r="10"/>
|
|
7
|
+
<path d="m12 16 4-4-4-4M8 12h8"/>
|
|
8
|
+
</symbol>
|
|
9
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="check" xmlns="http://www.w3.org/2000/svg">
|
|
10
|
+
<path d="M20 6 9 17l-5-5"/>
|
|
11
|
+
</symbol>
|
|
12
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" viewBox="0 0 24 24" id="chevron-down" xmlns="http://www.w3.org/2000/svg">
|
|
13
|
+
<path d="m6 9 6 6 6-6"/>
|
|
14
|
+
</symbol>
|
|
15
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up" viewBox="0 0 24 24" id="chevron-up" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<path d="m18 15-6-6-6 6"/>
|
|
17
|
+
</symbol>
|
|
18
|
+
<symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="clipboard" xmlns="http://www.w3.org/2000/svg">
|
|
19
|
+
<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
|
|
20
|
+
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
|
|
21
|
+
</symbol>
|
|
22
|
+
<symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="clipboard-check" xmlns="http://www.w3.org/2000/svg">
|
|
23
|
+
<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
|
|
24
|
+
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
|
|
25
|
+
<path d="m9.277 15.145 2 2 4-4" />
|
|
26
|
+
</symbol>
|
|
27
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
|
|
28
|
+
<circle cx="12" cy="12" r="10"/>
|
|
29
|
+
<path d="M12 6v6l4 2"/>
|
|
30
|
+
</symbol>
|
|
31
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
|
|
32
|
+
<circle cx="12" cy="12" r="10"/>
|
|
33
|
+
<path d="m15 9-6 6M9 9l6 6"/>
|
|
34
|
+
</symbol>
|
|
35
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
|
|
36
|
+
<circle cx="12" cy="12" r="4"/>
|
|
37
|
+
<path d="M1.05 12H7M17.01 12h5.95"/>
|
|
38
|
+
</symbol>
|
|
39
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="error" xmlns="http://www.w3.org/2000/svg">
|
|
40
|
+
<circle cx="12" cy="12" r="10"/>
|
|
41
|
+
<path d="M12 8v4M12 16h.01"/>
|
|
42
|
+
</symbol>
|
|
43
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
|
|
44
|
+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/>
|
|
45
|
+
</symbol>
|
|
46
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
|
|
47
|
+
<path d="M12 20V10M18 20V4M6 20v-4"/>
|
|
48
|
+
</symbol>
|
|
49
|
+
<symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
|
|
50
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
|
|
51
|
+
</symbol>
|
|
52
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
|
|
53
|
+
<circle cx="12" cy="12" r="10"/>
|
|
54
|
+
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
|
|
55
|
+
</symbol>
|
|
56
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="info" xmlns="http://www.w3.org/2000/svg">
|
|
57
|
+
<circle cx="12" cy="12" r="10"/>
|
|
58
|
+
<path d="M12 16v-4M12 8h.01"/>
|
|
59
|
+
</symbol>
|
|
60
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
|
|
61
|
+
<path d="M3 12h18M3 6h18M3 18h18"/>
|
|
62
|
+
</symbol>
|
|
63
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="more-vertical" xmlns="http://www.w3.org/2000/svg">
|
|
64
|
+
<circle cx="12" cy="12" r="1"/>
|
|
65
|
+
<circle cx="12" cy="5" r="1"/>
|
|
66
|
+
<circle cx="12" cy="19" r="1"/>
|
|
67
|
+
</symbol>
|
|
68
|
+
<symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
|
|
69
|
+
<path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
|
|
70
|
+
<path d="M0 0h24v24H0z" fill="none"/>
|
|
71
|
+
</symbol>
|
|
72
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="table" xmlns="http://www.w3.org/2000/svg">
|
|
73
|
+
<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
|
|
74
|
+
</symbol>
|
|
75
|
+
<symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="treemap" xmlns="http://www.w3.org/2000/svg">
|
|
76
|
+
<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 21h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9M12.025 3.422 12 20.652ZM12.85 9l7.347.025zm-.153 6 7.576.025zm4.334.764L17 20.326Z"/>
|
|
77
|
+
</symbol>
|
|
78
|
+
<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
|
|
79
|
+
<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/>
|
|
80
|
+
</symbol>
|
|
72
81
|
</svg>
|
package/src/assets/icons.svg.jsx
CHANGED
|
@@ -63,6 +63,33 @@ export const SvgIcons = (props) => (
|
|
|
63
63
|
>
|
|
64
64
|
<path d="m18 15-6-6-6 6" />
|
|
65
65
|
</symbol>
|
|
66
|
+
<symbol
|
|
67
|
+
fill="none"
|
|
68
|
+
stroke="currentColor"
|
|
69
|
+
strokeLinecap="round"
|
|
70
|
+
strokeLinejoin="round"
|
|
71
|
+
strokeWidth="2"
|
|
72
|
+
viewBox="0 0 24 24"
|
|
73
|
+
id="clipboard"
|
|
74
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
75
|
+
>
|
|
76
|
+
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
|
|
77
|
+
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
|
|
78
|
+
</symbol>
|
|
79
|
+
<symbol
|
|
80
|
+
fill="none"
|
|
81
|
+
stroke="currentColor"
|
|
82
|
+
strokeLinecap="round"
|
|
83
|
+
strokeLinejoin="round"
|
|
84
|
+
strokeWidth="2"
|
|
85
|
+
viewBox="0 0 24 24"
|
|
86
|
+
id="clipboard-check"
|
|
87
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
88
|
+
>
|
|
89
|
+
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
|
|
90
|
+
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
|
|
91
|
+
<path d="m9.277 15.145 2 2 4-4" />
|
|
92
|
+
</symbol>
|
|
66
93
|
<symbol
|
|
67
94
|
viewBox="0 0 24 24"
|
|
68
95
|
fill="none"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
/** header */
|
|
29
29
|
.header {
|
|
30
30
|
/** space for close icon */
|
|
31
|
-
padding-right: calc(var(--space-
|
|
31
|
+
padding-right: calc(var(--space-xlarge) + var(--space-xxxsmall) + var(--space-xsmall));
|
|
32
32
|
border-bottom: 1px solid var(--color-outline);
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -6,6 +6,7 @@ import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
|
|
|
6
6
|
import { METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
|
|
7
7
|
|
|
8
8
|
import { Box } from '../../layout/box';
|
|
9
|
+
import { FlexStack } from '../../layout/flex-stack';
|
|
9
10
|
import { Stack } from '../../layout/stack';
|
|
10
11
|
import { FileName } from '../../ui/file-name';
|
|
11
12
|
import { Button } from '../../ui/button';
|
|
@@ -14,7 +15,7 @@ import { Table } from '../../ui/table';
|
|
|
14
15
|
import { RunInfo } from '../run-info';
|
|
15
16
|
import * as I18N from './entry-info.i18n';
|
|
16
17
|
import css from './entry-info.module.css';
|
|
17
|
-
import { Tooltip } from '../../ui';
|
|
18
|
+
import { CopyToClipboard, Tooltip } from '../../ui';
|
|
18
19
|
|
|
19
20
|
interface EntryInfoMetaLinkProps {
|
|
20
21
|
as?: ElementType;
|
|
@@ -102,10 +103,10 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
|
|
|
102
103
|
<Portal className={cx(css.root, className)}>
|
|
103
104
|
<Box padding="medium" as="header" className={css.header}>
|
|
104
105
|
<Stack space="small">
|
|
105
|
-
<h3 className={css.label}>
|
|
106
|
+
<FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.label}>
|
|
106
107
|
<FileName as="code" name={itemTitle || item.label} className={css.fileName} />
|
|
107
|
-
|
|
108
|
-
|
|
108
|
+
<CopyToClipboard text={item.label} />
|
|
109
|
+
</FlexStack>
|
|
109
110
|
<div>{renderRunInfo(item)}</div>
|
|
110
111
|
</Stack>
|
|
111
112
|
<Button
|
|
@@ -135,6 +136,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
|
|
|
135
136
|
<Table.TBody>
|
|
136
137
|
{item.runs.map((run, index) => {
|
|
137
138
|
const key = `info-${run?.name || index}-${index}`;
|
|
139
|
+
const rowRun = run as any;
|
|
138
140
|
|
|
139
141
|
return (
|
|
140
142
|
<Table.Tr key={key}>
|
|
@@ -142,11 +144,23 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
|
|
|
142
144
|
{labels[index]}
|
|
143
145
|
</Table.Th>
|
|
144
146
|
<Table.Td className={cx(css.runsCell, css.runsColName)}>
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
147
|
+
{rowRun?.[runNameSelector] ? (
|
|
148
|
+
<FlexStack
|
|
149
|
+
space="xxxsmall"
|
|
150
|
+
alignItems="center"
|
|
151
|
+
as="h3"
|
|
152
|
+
className={css.label}
|
|
153
|
+
>
|
|
154
|
+
<FileName
|
|
155
|
+
as="code"
|
|
156
|
+
name={rowRun[runNameSelector]}
|
|
157
|
+
className={css.fileName}
|
|
158
|
+
/>
|
|
159
|
+
<CopyToClipboard text={item.label} />
|
|
160
|
+
</FlexStack>
|
|
161
|
+
) : (
|
|
162
|
+
'-'
|
|
163
|
+
)}
|
|
150
164
|
</Table.Td>
|
|
151
165
|
<Table.Td className={cx(css.runsCell, css.runsColSize)}>
|
|
152
166
|
<span className={css.size}>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
padding: var(--space-xxxsmall);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.wrapper {
|
|
6
|
+
display: flex;
|
|
7
|
+
gap: var(--space-xxsmall);
|
|
8
|
+
align-items: center;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.content {
|
|
12
|
+
flex: 1 1 auto;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
line-height: 1.1;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.icon {
|
|
18
|
+
flex: 0 0 auto;
|
|
19
|
+
position: relative;
|
|
20
|
+
width: var(--space-small);
|
|
21
|
+
height: var(--space-small);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.iconCopy,
|
|
25
|
+
.iconDone {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 0;
|
|
28
|
+
left: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.iconCopy {
|
|
32
|
+
color: var(--color-text-ultra-light);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.iconDone {
|
|
36
|
+
color: var(--color-success);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/** done state */
|
|
40
|
+
.iconCopy {
|
|
41
|
+
opacity: 1;
|
|
42
|
+
transition: var(--ui-transition-out);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.iconDone {
|
|
46
|
+
opacity: 0;
|
|
47
|
+
transition: var(--ui-transition-out);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.done .iconCopy {
|
|
51
|
+
opacity: 0;
|
|
52
|
+
transition: var(--ui-transition-in);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.done .iconDone {
|
|
56
|
+
opacity: 1;
|
|
57
|
+
transition: var(--ui-transition-in);
|
|
58
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { CopyToClipboard } from '.';
|
|
3
|
+
|
|
4
|
+
const meta: Meta<typeof CopyToClipboard> = {
|
|
5
|
+
title: 'UI/CopyToClipboard',
|
|
6
|
+
component: CopyToClipboard,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export default meta;
|
|
10
|
+
|
|
11
|
+
type Story = StoryObj<Meta>;
|
|
12
|
+
|
|
13
|
+
export const Default: Story = {
|
|
14
|
+
args: {
|
|
15
|
+
text: 'Lorem ipsum dolor sit amd',
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export const Inline: Story = {
|
|
20
|
+
args: {
|
|
21
|
+
...Default.args,
|
|
22
|
+
children: Default.args?.text,
|
|
23
|
+
outline: true,
|
|
24
|
+
size: 'small',
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export const Outline: Story = {
|
|
29
|
+
args: {
|
|
30
|
+
...Default.args,
|
|
31
|
+
outline: true,
|
|
32
|
+
},
|
|
33
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
import React, { useCallback, useState } from 'react';
|
|
3
|
+
import cx from 'classnames';
|
|
4
|
+
import { useCopyToClipboard } from 'react-use';
|
|
5
|
+
|
|
6
|
+
import { Button } from '../button';
|
|
7
|
+
import { Icon } from '../icon';
|
|
8
|
+
import { Tooltip } from '../tooltip';
|
|
9
|
+
import css from './copy-to-clipboard.module.css';
|
|
10
|
+
|
|
11
|
+
export type CopyToClipboardProps = {
|
|
12
|
+
/**
|
|
13
|
+
* Text to copy to clipboard
|
|
14
|
+
*/
|
|
15
|
+
text: string;
|
|
16
|
+
} & ComponentProps<typeof Button>;
|
|
17
|
+
|
|
18
|
+
export const CopyToClipboard = (props: CopyToClipboardProps) => {
|
|
19
|
+
const { className = '', children, text, ...restProps } = props;
|
|
20
|
+
|
|
21
|
+
const [, copyToClipboard] = useCopyToClipboard();
|
|
22
|
+
const [doneTimeout, setDoneTimeout] = useState<ReturnType<typeof setTimeout> | null>();
|
|
23
|
+
|
|
24
|
+
const handleOnClick = useCallback(() => {
|
|
25
|
+
if (doneTimeout) {
|
|
26
|
+
clearTimeout(doneTimeout);
|
|
27
|
+
setDoneTimeout(null);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
setDoneTimeout(null);
|
|
31
|
+
copyToClipboard(text);
|
|
32
|
+
|
|
33
|
+
const done = setTimeout(() => setDoneTimeout(null), 2000);
|
|
34
|
+
setDoneTimeout(done);
|
|
35
|
+
}, [text, doneTimeout, setDoneTimeout]);
|
|
36
|
+
|
|
37
|
+
const rootClassName = cx(css.root, className, doneTimeout && css.done);
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Tooltip
|
|
41
|
+
title={doneTimeout ? 'Copied' : 'Copy to clipboard'}
|
|
42
|
+
as={Button}
|
|
43
|
+
type="button"
|
|
44
|
+
onClick={handleOnClick}
|
|
45
|
+
className={rootClassName}
|
|
46
|
+
{...restProps}
|
|
47
|
+
>
|
|
48
|
+
<span className={css.wrapper}>
|
|
49
|
+
{children && <span className={css.content}>{children}</span>}
|
|
50
|
+
<span className={css.icon}>
|
|
51
|
+
<Icon className={css.iconCopy} glyph={Icon.ICONS.CLIPBOARD} />
|
|
52
|
+
<Icon className={css.iconDone} glyph={Icon.ICONS.CLIPBOARD_CHECK} />
|
|
53
|
+
</span>
|
|
54
|
+
</span>
|
|
55
|
+
</Tooltip>
|
|
56
|
+
);
|
|
57
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './copy-to-clipboard';
|
package/src/ui/icon/icon.tsx
CHANGED
package/src/ui/index.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Button } from '../button';
|
|
4
|
+
export type CopyToClipboardProps = {
|
|
5
|
+
text: string;
|
|
6
|
+
} & ComponentProps<typeof Button>;
|
|
7
|
+
export declare const CopyToClipboard: (props: CopyToClipboardProps) => React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './copy-to-clipboard';
|
package/types/ui/icon/icon.d.ts
CHANGED
|
@@ -9,6 +9,8 @@ declare const ICONS: {
|
|
|
9
9
|
readonly CLOSE: "close";
|
|
10
10
|
readonly CLOCK: "clock";
|
|
11
11
|
readonly COMMIT: "commit";
|
|
12
|
+
readonly CLIPBOARD: "clipboard";
|
|
13
|
+
readonly CLIPBOARD_CHECK: "clipboard-check";
|
|
12
14
|
readonly ERROR: "error";
|
|
13
15
|
readonly EXTERNAL_LINK: "external-link";
|
|
14
16
|
readonly FILTER: "filter";
|
|
@@ -45,6 +47,8 @@ export declare const Icon: {
|
|
|
45
47
|
readonly CLOSE: "close";
|
|
46
48
|
readonly CLOCK: "clock";
|
|
47
49
|
readonly COMMIT: "commit";
|
|
50
|
+
readonly CLIPBOARD: "clipboard";
|
|
51
|
+
readonly CLIPBOARD_CHECK: "clipboard-check";
|
|
48
52
|
readonly ERROR: "error";
|
|
49
53
|
readonly EXTERNAL_LINK: "external-link";
|
|
50
54
|
readonly FILTER: "filter";
|
package/types/ui/index.d.ts
CHANGED