@apify/ui-library 1.85.0 → 1.87.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/dist/src/design_system/colors/colors.stories.d.ts +6 -0
- package/dist/src/design_system/colors/colors.stories.d.ts.map +1 -0
- package/dist/src/design_system/colors/colors.stories.js +17 -0
- package/dist/src/design_system/colors/colors.stories.js.map +1 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/components/badge.stories.jsx +104 -0
- package/src/components/button.stories.jsx +126 -0
- package/src/design_system/colors/colors.stories.tsx +22 -0
- package/src/design_system/colors/figma_color_tokens.dark.json +23 -23
- package/src/design_system/colors/figma_color_tokens.light.json +23 -23
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apify/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.87.0",
|
|
4
4
|
"description": "React UI library used by apify.com",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"It's not nice, but helps us to get around the problem of multiple react instances."
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@apify/ui-icons": "^1.
|
|
29
|
+
"@apify/ui-icons": "^1.15.0",
|
|
30
30
|
"@floating-ui/react": "^0.26.2",
|
|
31
31
|
"@react-hook/resize-observer": "^2.0.2",
|
|
32
32
|
"clsx": "^2.0.0",
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"styled-components": "^5.3.3"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
+
"@storybook/react-vite": "^9.0.16",
|
|
55
56
|
"@types/lodash": "^4.14.200",
|
|
56
57
|
"@types/node": "^22.10.5",
|
|
57
58
|
"@types/react": "^18.2.74",
|
|
@@ -65,5 +66,5 @@
|
|
|
65
66
|
"src",
|
|
66
67
|
"style"
|
|
67
68
|
],
|
|
68
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "c80be45a31239ca261a853575b916283723a252a"
|
|
69
70
|
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { PeopleIcon } from '@apify/ui-icons';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import { Badge, BADGE_SIZES, BADGE_VARIANTS } from './badge';
|
|
6
|
+
import { SHARED_TEXT_TYPES } from './text';
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
title: 'UI-Library/Badge',
|
|
10
|
+
component: Badge,
|
|
11
|
+
parameters: {
|
|
12
|
+
design: {
|
|
13
|
+
type: 'figma',
|
|
14
|
+
url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/Shared-library?node-id=4253-5781&t=6aCmGWZ0tbFpElNN-0',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const Table = styled.table`
|
|
20
|
+
td {
|
|
21
|
+
padding: 8px
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
|
+
|
|
25
|
+
export const Default = () => {
|
|
26
|
+
return (
|
|
27
|
+
<Table>
|
|
28
|
+
<tbody>
|
|
29
|
+
{BADGE_VARIANTS.map((variant) => <tr key={variant}>
|
|
30
|
+
{BADGE_SIZES.map((size) => {
|
|
31
|
+
return (
|
|
32
|
+
<React.Fragment key={size}>
|
|
33
|
+
<td>
|
|
34
|
+
<Badge
|
|
35
|
+
size={size}
|
|
36
|
+
variant={variant}
|
|
37
|
+
LeadingIcon={PeopleIcon}
|
|
38
|
+
>
|
|
39
|
+
Badge
|
|
40
|
+
</Badge>
|
|
41
|
+
</td>
|
|
42
|
+
<td>
|
|
43
|
+
<Badge
|
|
44
|
+
size={size}
|
|
45
|
+
type="code"
|
|
46
|
+
variant={variant}
|
|
47
|
+
LeadingIcon={PeopleIcon}
|
|
48
|
+
>
|
|
49
|
+
Badge
|
|
50
|
+
</Badge>
|
|
51
|
+
</td>
|
|
52
|
+
</React.Fragment>
|
|
53
|
+
);
|
|
54
|
+
})}
|
|
55
|
+
</tr>,
|
|
56
|
+
)}
|
|
57
|
+
</tbody>
|
|
58
|
+
</Table>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export const Playground = ({ size, LeadingIcon, ...props }) => {
|
|
63
|
+
return (
|
|
64
|
+
<Badge
|
|
65
|
+
size={size}
|
|
66
|
+
LeadingIcon={LeadingIcon ? PeopleIcon : undefined}
|
|
67
|
+
{...props}
|
|
68
|
+
/>
|
|
69
|
+
);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
Playground.propTypes = {
|
|
73
|
+
size: PropTypes.string,
|
|
74
|
+
LeadingIcon: PropTypes.bool,
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
Playground.args = {
|
|
78
|
+
size: 'small',
|
|
79
|
+
type: 'body',
|
|
80
|
+
variant: 'neutral',
|
|
81
|
+
children: 'Badge',
|
|
82
|
+
LeadingIcon: false,
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
Playground.argTypes = {
|
|
86
|
+
size: {
|
|
87
|
+
options: BADGE_SIZES,
|
|
88
|
+
control: 'select',
|
|
89
|
+
},
|
|
90
|
+
type: {
|
|
91
|
+
options: SHARED_TEXT_TYPES,
|
|
92
|
+
control: 'select',
|
|
93
|
+
},
|
|
94
|
+
variant: {
|
|
95
|
+
options: BADGE_VARIANTS,
|
|
96
|
+
control: 'select',
|
|
97
|
+
},
|
|
98
|
+
children: {
|
|
99
|
+
control: 'text',
|
|
100
|
+
},
|
|
101
|
+
LeadingIcon: {
|
|
102
|
+
control: 'boolean',
|
|
103
|
+
},
|
|
104
|
+
};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { X16 } from '@apify/icons';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import { Button } from './button';
|
|
5
|
+
import { theme } from '../design_system/theme';
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'UI-Library/Button',
|
|
9
|
+
component: Button,
|
|
10
|
+
parameters: {
|
|
11
|
+
design: {
|
|
12
|
+
type: 'figma',
|
|
13
|
+
url: 'https://www.figma.com/design/yftmrF413idIDbu0OcjlAQ/%F0%9F%8E%AE-Console-library?node-id=0-1',
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const Wrapper = styled.div`
|
|
19
|
+
background-color: ${theme.color.neutral.background};
|
|
20
|
+
padding: 2rem;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
align-items: flex-start;
|
|
24
|
+
gap: 8px;
|
|
25
|
+
`;
|
|
26
|
+
|
|
27
|
+
const TwoColumns = styled.div`
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-template-columns: auto auto;
|
|
30
|
+
gap: 40px;
|
|
31
|
+
`;
|
|
32
|
+
|
|
33
|
+
const ButtonGrid = styled.div`
|
|
34
|
+
display: flex;
|
|
35
|
+
gap: 8px;
|
|
36
|
+
margin-bottom: 16px;
|
|
37
|
+
`;
|
|
38
|
+
|
|
39
|
+
const ButtonSection = ({
|
|
40
|
+
...props
|
|
41
|
+
}) => {
|
|
42
|
+
return (
|
|
43
|
+
<Wrapper>
|
|
44
|
+
<ButtonGrid>
|
|
45
|
+
<Button {...props} variant='primary'>Primary</Button>
|
|
46
|
+
<Button {...props} variant='secondary'>Secondary</Button>
|
|
47
|
+
<Button {...props} variant='tertiary'>Tertiary</Button>
|
|
48
|
+
<Button {...props} disabled>Disabled</Button>
|
|
49
|
+
</ButtonGrid>
|
|
50
|
+
|
|
51
|
+
<h6>With leading icon</h6>
|
|
52
|
+
<ButtonGrid>
|
|
53
|
+
<Button {...props} LeftIcon={X16} variant='primary'>Primary</Button>
|
|
54
|
+
<Button {...props} LeftIcon={X16} variant='secondary'>Secondary</Button>
|
|
55
|
+
<Button {...props} LeftIcon={X16} variant='tertiary'>Tertiary</Button>
|
|
56
|
+
<Button {...props} LeftIcon={X16} disabled>Disabled</Button>
|
|
57
|
+
</ButtonGrid>
|
|
58
|
+
|
|
59
|
+
<h6>With trailing icon</h6>
|
|
60
|
+
<ButtonGrid>
|
|
61
|
+
<Button {...props} RightIcon={X16} variant='primary'>Primary</Button>
|
|
62
|
+
<Button {...props} RightIcon={X16} variant='secondary'>Secondary</Button>
|
|
63
|
+
<Button {...props} RightIcon={X16} variant='tertiary'>Tertiary</Button>
|
|
64
|
+
<Button {...props} RightIcon={X16} disabled>Disabled</Button>
|
|
65
|
+
</ButtonGrid>
|
|
66
|
+
|
|
67
|
+
<h6>With both icons</h6>
|
|
68
|
+
<ButtonGrid>
|
|
69
|
+
<Button
|
|
70
|
+
{...props}
|
|
71
|
+
RightIcon={X16}
|
|
72
|
+
LeftIcon={X16}
|
|
73
|
+
variant='primary'
|
|
74
|
+
>
|
|
75
|
+
Primary test
|
|
76
|
+
</Button>
|
|
77
|
+
<Button
|
|
78
|
+
{...props}
|
|
79
|
+
RightIcon={X16}
|
|
80
|
+
LeftIcon={X16}
|
|
81
|
+
variant='secondary'
|
|
82
|
+
>
|
|
83
|
+
Secondary
|
|
84
|
+
</Button>
|
|
85
|
+
<Button
|
|
86
|
+
{...props}
|
|
87
|
+
RightIcon={X16}
|
|
88
|
+
LeftIcon={X16}
|
|
89
|
+
variant='tertiary'
|
|
90
|
+
>
|
|
91
|
+
Tertiary
|
|
92
|
+
</Button>
|
|
93
|
+
<Button
|
|
94
|
+
{...props}
|
|
95
|
+
RightIcon={X16}
|
|
96
|
+
LeftIcon={X16}
|
|
97
|
+
disabled
|
|
98
|
+
>
|
|
99
|
+
Disabled
|
|
100
|
+
</Button>
|
|
101
|
+
</ButtonGrid>
|
|
102
|
+
</Wrapper>
|
|
103
|
+
);
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
export const Default = () => {
|
|
107
|
+
return (
|
|
108
|
+
<Wrapper>
|
|
109
|
+
<h4>Primary</h4>
|
|
110
|
+
<TwoColumns>
|
|
111
|
+
<ButtonSection color='default' />
|
|
112
|
+
<ButtonSection color='default' size='small' />
|
|
113
|
+
</TwoColumns>
|
|
114
|
+
<h4>Success</h4>
|
|
115
|
+
<TwoColumns>
|
|
116
|
+
<ButtonSection color='success' />
|
|
117
|
+
<ButtonSection color='success' size='small' />
|
|
118
|
+
</TwoColumns>
|
|
119
|
+
<h4>Danger</h4>
|
|
120
|
+
<TwoColumns>
|
|
121
|
+
<ButtonSection color='danger' />
|
|
122
|
+
<ButtonSection color='danger' size='small' />
|
|
123
|
+
</TwoColumns>
|
|
124
|
+
</Wrapper>
|
|
125
|
+
);
|
|
126
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
// eslint-disable-next-line import/no-default-export
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Design Tokens/Colors',
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const Grid = styled.div`
|
|
9
|
+
padding: 32px;
|
|
10
|
+
width: 100%;
|
|
11
|
+
display: grid;
|
|
12
|
+
grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
|
|
13
|
+
gap: 32px 16px;
|
|
14
|
+
`;
|
|
15
|
+
|
|
16
|
+
export const Default = () => {
|
|
17
|
+
return (
|
|
18
|
+
<Grid>
|
|
19
|
+
TODO COLORS PALETTE
|
|
20
|
+
</Grid>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
@@ -607,95 +607,95 @@
|
|
|
607
607
|
},
|
|
608
608
|
"25": {
|
|
609
609
|
"$type": "color",
|
|
610
|
-
"$value": "#
|
|
610
|
+
"$value": "#f9fafa"
|
|
611
611
|
},
|
|
612
612
|
"50": {
|
|
613
613
|
"$type": "color",
|
|
614
|
-
"$value": "#
|
|
614
|
+
"$value": "#f4f4f5"
|
|
615
615
|
},
|
|
616
616
|
"75": {
|
|
617
617
|
"$type": "color",
|
|
618
|
-
"$value": "#
|
|
618
|
+
"$value": "#edeeef"
|
|
619
619
|
},
|
|
620
620
|
"100": {
|
|
621
621
|
"$type": "color",
|
|
622
|
-
"$value": "#
|
|
622
|
+
"$value": "#e4e5e6"
|
|
623
623
|
},
|
|
624
624
|
"150": {
|
|
625
625
|
"$type": "color",
|
|
626
|
-
"$value": "#
|
|
626
|
+
"$value": "#d2d3d6"
|
|
627
627
|
},
|
|
628
628
|
"200": {
|
|
629
629
|
"$type": "color",
|
|
630
|
-
"$value": "#
|
|
630
|
+
"$value": "#c9cbcf"
|
|
631
631
|
},
|
|
632
632
|
"250": {
|
|
633
633
|
"$type": "color",
|
|
634
|
-
"$value": "#
|
|
634
|
+
"$value": "#bfc1c5"
|
|
635
635
|
},
|
|
636
636
|
"300": {
|
|
637
637
|
"$type": "color",
|
|
638
|
-
"$value": "#
|
|
638
|
+
"$value": "#b4b6bb"
|
|
639
639
|
},
|
|
640
640
|
"350": {
|
|
641
641
|
"$type": "color",
|
|
642
|
-
"$value": "#
|
|
642
|
+
"$value": "#a9acb1"
|
|
643
643
|
},
|
|
644
644
|
"400": {
|
|
645
645
|
"$type": "color",
|
|
646
|
-
"$value": "#
|
|
646
|
+
"$value": "#9ea2a8"
|
|
647
647
|
},
|
|
648
648
|
"450": {
|
|
649
649
|
"$type": "color",
|
|
650
|
-
"$value": "#
|
|
650
|
+
"$value": "#848890"
|
|
651
651
|
},
|
|
652
652
|
"500": {
|
|
653
653
|
"$type": "color",
|
|
654
|
-
"$value": "#
|
|
654
|
+
"$value": "#6d7178"
|
|
655
655
|
},
|
|
656
656
|
"550": {
|
|
657
657
|
"$type": "color",
|
|
658
|
-
"$value": "#
|
|
658
|
+
"$value": "#5c5f66"
|
|
659
659
|
},
|
|
660
660
|
"600": {
|
|
661
661
|
"$type": "color",
|
|
662
|
-
"$value": "#
|
|
662
|
+
"$value": "#4f5257"
|
|
663
663
|
},
|
|
664
664
|
"650": {
|
|
665
665
|
"$type": "color",
|
|
666
|
-
"$value": "#
|
|
666
|
+
"$value": "#44464b"
|
|
667
667
|
},
|
|
668
668
|
"700": {
|
|
669
669
|
"$type": "color",
|
|
670
|
-
"$value": "#
|
|
670
|
+
"$value": "#3d3f43"
|
|
671
671
|
},
|
|
672
672
|
"750": {
|
|
673
673
|
"$type": "color",
|
|
674
|
-
"$value": "#
|
|
674
|
+
"$value": "#333538"
|
|
675
675
|
},
|
|
676
676
|
"775": {
|
|
677
677
|
"$type": "color",
|
|
678
|
-
"$value": "#
|
|
678
|
+
"$value": "#292b2e"
|
|
679
679
|
},
|
|
680
680
|
"800": {
|
|
681
681
|
"$type": "color",
|
|
682
|
-
"$value": "#
|
|
682
|
+
"$value": "#242528"
|
|
683
683
|
},
|
|
684
684
|
"850": {
|
|
685
685
|
"$type": "color",
|
|
686
|
-
"$value": "#
|
|
686
|
+
"$value": "#1f2123"
|
|
687
687
|
},
|
|
688
688
|
"875": {
|
|
689
689
|
"$type": "color",
|
|
690
|
-
"$value": "#
|
|
690
|
+
"$value": "#1b1c1d"
|
|
691
691
|
},
|
|
692
692
|
"900": {
|
|
693
693
|
"$type": "color",
|
|
694
|
-
"$value": "#
|
|
694
|
+
"$value": "#161718"
|
|
695
695
|
},
|
|
696
696
|
"950": {
|
|
697
697
|
"$type": "color",
|
|
698
|
-
"$value": "#
|
|
698
|
+
"$value": "#0a0a0b"
|
|
699
699
|
}
|
|
700
700
|
},
|
|
701
701
|
"Yellow": {
|
|
@@ -607,95 +607,95 @@
|
|
|
607
607
|
},
|
|
608
608
|
"25": {
|
|
609
609
|
"$type": "color",
|
|
610
|
-
"$value": "#
|
|
610
|
+
"$value": "#f9fafa"
|
|
611
611
|
},
|
|
612
612
|
"50": {
|
|
613
613
|
"$type": "color",
|
|
614
|
-
"$value": "#
|
|
614
|
+
"$value": "#f4f4f5"
|
|
615
615
|
},
|
|
616
616
|
"75": {
|
|
617
617
|
"$type": "color",
|
|
618
|
-
"$value": "#
|
|
618
|
+
"$value": "#edeeef"
|
|
619
619
|
},
|
|
620
620
|
"100": {
|
|
621
621
|
"$type": "color",
|
|
622
|
-
"$value": "#
|
|
622
|
+
"$value": "#e4e5e6"
|
|
623
623
|
},
|
|
624
624
|
"150": {
|
|
625
625
|
"$type": "color",
|
|
626
|
-
"$value": "#
|
|
626
|
+
"$value": "#d2d3d6"
|
|
627
627
|
},
|
|
628
628
|
"200": {
|
|
629
629
|
"$type": "color",
|
|
630
|
-
"$value": "#
|
|
630
|
+
"$value": "#c9cbcf"
|
|
631
631
|
},
|
|
632
632
|
"250": {
|
|
633
633
|
"$type": "color",
|
|
634
|
-
"$value": "#
|
|
634
|
+
"$value": "#bfc1c5"
|
|
635
635
|
},
|
|
636
636
|
"300": {
|
|
637
637
|
"$type": "color",
|
|
638
|
-
"$value": "#
|
|
638
|
+
"$value": "#b4b6bb"
|
|
639
639
|
},
|
|
640
640
|
"350": {
|
|
641
641
|
"$type": "color",
|
|
642
|
-
"$value": "#
|
|
642
|
+
"$value": "#a9acb1"
|
|
643
643
|
},
|
|
644
644
|
"400": {
|
|
645
645
|
"$type": "color",
|
|
646
|
-
"$value": "#
|
|
646
|
+
"$value": "#9ea2a8"
|
|
647
647
|
},
|
|
648
648
|
"450": {
|
|
649
649
|
"$type": "color",
|
|
650
|
-
"$value": "#
|
|
650
|
+
"$value": "#848890"
|
|
651
651
|
},
|
|
652
652
|
"500": {
|
|
653
653
|
"$type": "color",
|
|
654
|
-
"$value": "#
|
|
654
|
+
"$value": "#6d7178"
|
|
655
655
|
},
|
|
656
656
|
"550": {
|
|
657
657
|
"$type": "color",
|
|
658
|
-
"$value": "#
|
|
658
|
+
"$value": "#5c5f66"
|
|
659
659
|
},
|
|
660
660
|
"600": {
|
|
661
661
|
"$type": "color",
|
|
662
|
-
"$value": "#
|
|
662
|
+
"$value": "#4f5257"
|
|
663
663
|
},
|
|
664
664
|
"650": {
|
|
665
665
|
"$type": "color",
|
|
666
|
-
"$value": "#
|
|
666
|
+
"$value": "#44464b"
|
|
667
667
|
},
|
|
668
668
|
"700": {
|
|
669
669
|
"$type": "color",
|
|
670
|
-
"$value": "#
|
|
670
|
+
"$value": "#3d3f43"
|
|
671
671
|
},
|
|
672
672
|
"750": {
|
|
673
673
|
"$type": "color",
|
|
674
|
-
"$value": "#
|
|
674
|
+
"$value": "#333538"
|
|
675
675
|
},
|
|
676
676
|
"775": {
|
|
677
677
|
"$type": "color",
|
|
678
|
-
"$value": "#
|
|
678
|
+
"$value": "#292b2e"
|
|
679
679
|
},
|
|
680
680
|
"800": {
|
|
681
681
|
"$type": "color",
|
|
682
|
-
"$value": "#
|
|
682
|
+
"$value": "#242528"
|
|
683
683
|
},
|
|
684
684
|
"850": {
|
|
685
685
|
"$type": "color",
|
|
686
|
-
"$value": "#
|
|
686
|
+
"$value": "#1f2123"
|
|
687
687
|
},
|
|
688
688
|
"875": {
|
|
689
689
|
"$type": "color",
|
|
690
|
-
"$value": "#
|
|
690
|
+
"$value": "#1b1c1d"
|
|
691
691
|
},
|
|
692
692
|
"900": {
|
|
693
693
|
"$type": "color",
|
|
694
|
-
"$value": "#
|
|
694
|
+
"$value": "#161718"
|
|
695
695
|
},
|
|
696
696
|
"950": {
|
|
697
697
|
"$type": "color",
|
|
698
|
-
"$value": "#
|
|
698
|
+
"$value": "#0a0a0b"
|
|
699
699
|
}
|
|
700
700
|
},
|
|
701
701
|
"Yellow": {
|