@soul-refiner/design-system 0.2.106 → 0.2.107
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/components/actions/button/button.d.ts +1 -1
- package/dist/components/actions/button/button.js +22 -0
- package/dist/components/custom/index.d.ts +2 -0
- package/dist/components/custom/index.js +1 -0
- package/dist/components/custom/users_selection/index.d.ts +2 -0
- package/dist/components/custom/users_selection/index.js +1 -0
- package/dist/components/custom/users_selection/users_selection.d.ts +22 -0
- package/dist/components/custom/users_selection/users_selection.js +118 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/input/checkbox/checkbox.d.ts +2 -1
- package/dist/components/input/checkbox/checkbox.js +3 -2
- package/dist/components/input/search/search.js +1 -0
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
type NativeProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML' | 'onClick' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'> & {
|
|
3
3
|
value?: string;
|
|
4
4
|
};
|
|
5
|
-
type ButtonTypes = 'primary' | 'secondary' | 'outlined' | 'danger' | 'text' | 'raised' | 'special';
|
|
5
|
+
type ButtonTypes = 'primary' | 'secondary' | 'outlined' | 'danger' | 'text' | 'raised' | 'special' | 'dropdown';
|
|
6
6
|
type ButtonSize = 'small' | 'large';
|
|
7
7
|
type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
|
|
8
8
|
export interface ButtonProps extends NativeProps, React.PropsWithChildren {
|
|
@@ -51,6 +51,7 @@ const Components = () => ({
|
|
|
51
51
|
raised: Raised,
|
|
52
52
|
special: Special,
|
|
53
53
|
text: Text,
|
|
54
|
+
dropdown: Dropdown,
|
|
54
55
|
});
|
|
55
56
|
const base = css `
|
|
56
57
|
font-family: var(--font-inter);
|
|
@@ -246,3 +247,24 @@ const Special = styled(Box) `
|
|
|
246
247
|
|
|
247
248
|
${({ $sx }) => ($sx ? $sx : '')}
|
|
248
249
|
`;
|
|
250
|
+
const Dropdown = styled(Box) `
|
|
251
|
+
width: 100%;
|
|
252
|
+
background-color: var(--color-blue-10);
|
|
253
|
+
color: var(--color-grey-3);
|
|
254
|
+
border: 1px solid var(--color-primary-blue-2);
|
|
255
|
+
justify-content: flex-start;
|
|
256
|
+
padding: 16px;
|
|
257
|
+
border-radius: 8px;
|
|
258
|
+
border: 0;
|
|
259
|
+
|
|
260
|
+
&:hover {
|
|
261
|
+
border: 0;
|
|
262
|
+
background-color: var(--color-blue-10);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
${base}
|
|
266
|
+
${Styles.flex}
|
|
267
|
+
${Styles.padding}
|
|
268
|
+
|
|
269
|
+
${({ $sx }) => ($sx ? $sx : '')}
|
|
270
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { UsersSelection } from './users_selection';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { UsersSelection } from './users_selection';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
|
|
3
|
+
type User = {
|
|
4
|
+
id: string;
|
|
5
|
+
fullName: string;
|
|
6
|
+
imageSrc: string;
|
|
7
|
+
};
|
|
8
|
+
export interface UsersSelectionProps extends NativeProps, React.PropsWithChildren {
|
|
9
|
+
closeOnBlur?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
offset?: [number, number];
|
|
12
|
+
sx?: string;
|
|
13
|
+
containerSx?: string;
|
|
14
|
+
searchSx?: string;
|
|
15
|
+
users: User[];
|
|
16
|
+
label: string;
|
|
17
|
+
title: string;
|
|
18
|
+
userIsChecked: Record<string, boolean>;
|
|
19
|
+
setUserIsChecked: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
|
|
20
|
+
}
|
|
21
|
+
export declare const UsersSelection: ({ closeOnBlur, disabled, offset, sx, containerSx, searchSx, users, label, title, userIsChecked, setUserIsChecked, ...rest }: UsersSelectionProps) => React.JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { Group } from '../../../icons';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import { Button, P, Search, Checkbox, Box } from '../../';
|
|
6
|
+
export const UsersSelection = ({ closeOnBlur = true, disabled = false, offset = [0, 0], sx, containerSx, searchSx, users, label, title, userIsChecked, setUserIsChecked, ...rest }) => {
|
|
7
|
+
const wrapperRef = React.useRef(null);
|
|
8
|
+
const [open, setOpen] = React.useState(true);
|
|
9
|
+
const [searchValue, setSearchValue] = React.useState('');
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
if (disabled) {
|
|
12
|
+
setOpen(false);
|
|
13
|
+
}
|
|
14
|
+
}, [disabled]);
|
|
15
|
+
const handleOpen = () => {
|
|
16
|
+
if (disabled) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
setOpen((prev) => !prev);
|
|
20
|
+
};
|
|
21
|
+
const handleBlur = (event) => {
|
|
22
|
+
if (closeOnBlur &&
|
|
23
|
+
wrapperRef?.current &&
|
|
24
|
+
!wrapperRef?.current?.contains(event.relatedTarget)) {
|
|
25
|
+
setOpen(false);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur, ...rest },
|
|
29
|
+
React.createElement(Button, { type: "dropdown", isDropdownOpen: open, onClick: handleOpen },
|
|
30
|
+
React.createElement(Group, { size: 16, sx: "margin-right: 16px;" }),
|
|
31
|
+
label),
|
|
32
|
+
open && (React.createElement(Container, { "$offset": offset, "$sx": containerSx },
|
|
33
|
+
React.createElement(P, null, title),
|
|
34
|
+
React.createElement(Search, { onChange: (event) => setSearchValue(event.target.value), onClearText: () => setSearchValue(''), value: searchValue, size: "large", placeholder: "Search...", sx: `margin-top: 8px; margin-bottom: 8px; border-radius: 76px; ${searchSx}` }),
|
|
35
|
+
users
|
|
36
|
+
.filter((user) => searchValue
|
|
37
|
+
? user.fullName
|
|
38
|
+
.toLowerCase()
|
|
39
|
+
.includes(searchValue.toLowerCase())
|
|
40
|
+
: true)
|
|
41
|
+
.map((user) => (React.createElement(React.Fragment, { key: user.id },
|
|
42
|
+
React.createElement(OptionWrapper, { "$disabled": disabled, onClick: () => setUserIsChecked({
|
|
43
|
+
...userIsChecked,
|
|
44
|
+
[user.id]: !userIsChecked[user.id],
|
|
45
|
+
}) },
|
|
46
|
+
React.createElement(Box, { "$display": "flex", "$align": "center" },
|
|
47
|
+
React.createElement(Image, { src: user.imageSrc }),
|
|
48
|
+
React.createElement(P, { "$color": 'grey-4', "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, user.fullName),
|
|
49
|
+
React.createElement(Checkbox, { selected: userIsChecked[user.id], sx: "margin-left: auto;" }))),
|
|
50
|
+
React.createElement(Spacer, null))))))));
|
|
51
|
+
};
|
|
52
|
+
const Wrapper = styled.div `
|
|
53
|
+
position: relative;
|
|
54
|
+
display: block;
|
|
55
|
+
outline: none;
|
|
56
|
+
${({ $sx }) => ($sx ? $sx : '')}
|
|
57
|
+
`;
|
|
58
|
+
const Container = styled.div `
|
|
59
|
+
min-width: 280px;
|
|
60
|
+
max-height: 600px;
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
background-color: var(--color-white);
|
|
64
|
+
position: absolute;
|
|
65
|
+
width: 100%;
|
|
66
|
+
outline: none;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
box-shadow: var(--elevation-2);
|
|
69
|
+
border-radius: 8px;
|
|
70
|
+
overflow: auto;
|
|
71
|
+
padding: 24px;
|
|
72
|
+
|
|
73
|
+
${({ $sx }) => ($sx ? $sx : '')}
|
|
74
|
+
|
|
75
|
+
${({ $offset }) => $offset ? `transform: translate(${$offset[0]}px, ${$offset[1]}px);` : ''}
|
|
76
|
+
`;
|
|
77
|
+
const OptionWrapper = styled.div `
|
|
78
|
+
position: relative;
|
|
79
|
+
padding: 12px 16px;
|
|
80
|
+
user-select: none;
|
|
81
|
+
gap: 8px;
|
|
82
|
+
|
|
83
|
+
& > * {
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
${({ $disabled }) => {
|
|
88
|
+
if ($disabled) {
|
|
89
|
+
return `cursor: initial;
|
|
90
|
+
color: var(--color-grey-7);
|
|
91
|
+
background-color: var(--color-grey-10);`;
|
|
92
|
+
}
|
|
93
|
+
return `
|
|
94
|
+
&:hover {
|
|
95
|
+
background-color: var(--color-blue-10);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:active {
|
|
99
|
+
background-color: var(--color-grey-8);
|
|
100
|
+
}
|
|
101
|
+
`;
|
|
102
|
+
}}
|
|
103
|
+
`;
|
|
104
|
+
const Image = styled.img `
|
|
105
|
+
border-radius: 50%;
|
|
106
|
+
width: 40px;
|
|
107
|
+
height: 40px;
|
|
108
|
+
margin-right: 16px;
|
|
109
|
+
`;
|
|
110
|
+
const Spacer = styled.div `
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 1px;
|
|
113
|
+
background-color: var(--color-grey-8);
|
|
114
|
+
|
|
115
|
+
&:hover {
|
|
116
|
+
appearance: none;
|
|
117
|
+
}
|
|
118
|
+
`;
|
package/dist/components/index.js
CHANGED
|
@@ -3,6 +3,7 @@ type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onCha
|
|
|
3
3
|
export interface CheckboxProps extends NativeProps {
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
selected: boolean;
|
|
6
|
+
sx?: string;
|
|
6
7
|
}
|
|
7
|
-
export declare const Checkbox: ({ disabled, selected, ...rest }: CheckboxProps) => React.JSX.Element;
|
|
8
|
+
export declare const Checkbox: ({ disabled, selected, sx, ...rest }: CheckboxProps) => React.JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -3,8 +3,8 @@ import React from 'react';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { Styles } from '../../../common';
|
|
5
5
|
import { Checkmark } from '../../../icons';
|
|
6
|
-
export const Checkbox = ({ disabled, selected, ...rest }) => {
|
|
7
|
-
return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
|
|
6
|
+
export const Checkbox = ({ disabled, selected, sx, ...rest }) => {
|
|
7
|
+
return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
|
|
8
8
|
};
|
|
9
9
|
const Box = styled.div `
|
|
10
10
|
display: flex;
|
|
@@ -19,4 +19,5 @@ const Box = styled.div `
|
|
|
19
19
|
border: 1px solid var(--color-primary-blue-2);`
|
|
20
20
|
: 'border: 1px solid var(--color-grey-8);'}
|
|
21
21
|
${Styles.flex}
|
|
22
|
+
${({ $sx }) => ($sx ? $sx : '')}
|
|
22
23
|
`;
|