@team-monolith/cds 0.15.1 → 0.17.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.
|
@@ -2,14 +2,14 @@ import React from "react";
|
|
|
2
2
|
import { InputBaseColor, InputBaseProps, InputBaseSize } from "./InputBase";
|
|
3
3
|
export type InputColor = InputBaseColor;
|
|
4
4
|
export type InputSize = InputBaseSize;
|
|
5
|
-
export
|
|
5
|
+
export type InputProps = InputBaseProps & {
|
|
6
6
|
/** Input 컴포넌트 상단에 노출될 문자열 */
|
|
7
7
|
label?: string;
|
|
8
8
|
/** Input 컴포넌트 하단에 노출될 문자열 */
|
|
9
9
|
hintText?: string;
|
|
10
10
|
/** hint 영역 좌측에 노출될 아이콘 */
|
|
11
11
|
hintIcon?: React.ReactNode;
|
|
12
|
-
}
|
|
12
|
+
};
|
|
13
13
|
/**
|
|
14
14
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-10284&t=HnIfxpf8uR6WmzMW-0)
|
|
15
15
|
*/
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { InputHTMLAttributes } from "react";
|
|
1
|
+
import { ForwardedRef, InputHTMLAttributes } from "react";
|
|
2
2
|
export type InputBaseColor = "default" | "base" | "activePrimary" | "activeDanger" | "activeSuccess";
|
|
3
3
|
export type InputBaseSize = "large" | "medium" | "small";
|
|
4
|
-
export
|
|
4
|
+
export type InputBaseProps = InputBaseCommonProps & (InputBaseInputProps | InputBaseTextAreaProps);
|
|
5
|
+
interface InputBaseCommonProps {
|
|
5
6
|
className?: string;
|
|
6
7
|
/** 컴포넌트 색상 */
|
|
7
8
|
color: InputBaseColor;
|
|
@@ -21,14 +22,8 @@ export interface InputBaseProps {
|
|
|
21
22
|
endLabel?: string;
|
|
22
23
|
/** Input 컴포넌트 내의 우측 영역에 노출될 아이콘 */
|
|
23
24
|
endIcon?: React.ReactNode;
|
|
24
|
-
/** HTML input 태그에 전달될 ref */
|
|
25
|
-
inputRef?: React.LegacyRef<HTMLInputElement>;
|
|
26
|
-
/** HTML input 태그에 전달될 props */
|
|
27
|
-
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
28
25
|
/** true일 경우, Input이 상위 요소의 전체 길이를 차지하게 됩니다. */
|
|
29
26
|
fullWidth?: boolean;
|
|
30
|
-
/** 값이 변경될때 호출될 콜백 함수 */
|
|
31
|
-
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
32
27
|
/**
|
|
33
28
|
* Clear Button을 클릭했을 때의 콜백 함수.
|
|
34
29
|
* 설정하면, Input 컴포넌트 내의 우측 영역에 Clear Button이 노출됩니다.
|
|
@@ -39,4 +34,23 @@ export interface InputBaseProps {
|
|
|
39
34
|
/** input의 value (Controlled Component) */
|
|
40
35
|
value?: any;
|
|
41
36
|
}
|
|
37
|
+
interface InputBaseInputProps {
|
|
38
|
+
multiline?: false;
|
|
39
|
+
/** HTML input 태그에 전달될 ref */
|
|
40
|
+
inputRef?: ForwardedRef<HTMLInputElement>;
|
|
41
|
+
/** HTML input 태그에 전달될 props */
|
|
42
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
43
|
+
/** 값이 변경될때 호출될 콜백 함수 */
|
|
44
|
+
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
45
|
+
}
|
|
46
|
+
interface InputBaseTextAreaProps {
|
|
47
|
+
multiline: true;
|
|
48
|
+
/** HTML input 태그에 전달될 ref */
|
|
49
|
+
inputRef?: ForwardedRef<HTMLTextAreaElement>;
|
|
50
|
+
/** HTML input 태그에 전달될 props */
|
|
51
|
+
inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
|
|
52
|
+
/** 값이 변경될때 호출될 콜백 함수 */
|
|
53
|
+
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
54
|
+
}
|
|
42
55
|
export declare function InputBase(props: InputBaseProps): React.ReactElement;
|
|
56
|
+
export {};
|
|
@@ -13,41 +13,56 @@ var __assign = (this && this.__assign) || function () {
|
|
|
13
13
|
};
|
|
14
14
|
return __assign.apply(this, arguments);
|
|
15
15
|
};
|
|
16
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
|
|
16
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
17
|
+
/** @jsxImportSource @emotion/react */
|
|
18
|
+
import { css, useTheme } from "@emotion/react";
|
|
18
19
|
import styled from "@emotion/styled";
|
|
19
20
|
import { CloseCircleFillIcon } from "../icons";
|
|
20
21
|
import { RESET_BUTTON } from "../utils/reset";
|
|
22
|
+
import { TextareaAutosize } from "@mui/material";
|
|
23
|
+
// border를 none으로 설정하지 않고 transparent로 설정한 이유는
|
|
24
|
+
// border의 존재에 따라 크기가 달라지는 것을 방지하기 위함입니다.
|
|
25
|
+
// 이 컴포넌트는 multiline을 고려하여 height를 명시적으로 지정하지 않았습니다.
|
|
21
26
|
var COLOR_TO_INPUT_STYLES = function (theme, color, disabled) {
|
|
22
27
|
if (disabled) {
|
|
23
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border:
|
|
28
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 2px solid transparent;\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid transparent;\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled, theme.color.background.neutralAlt);
|
|
24
29
|
}
|
|
25
30
|
return {
|
|
26
|
-
default: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border:
|
|
27
|
-
base: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border:
|
|
31
|
+
default: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 2px solid transparent;\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid transparent;\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase),
|
|
32
|
+
base: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid transparent;\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid transparent;\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
28
33
|
activePrimary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.primary, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
29
34
|
activeDanger: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.danger, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
30
35
|
activeSuccess: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.success, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
31
36
|
}[color];
|
|
32
37
|
};
|
|
38
|
+
// 아래 padding 값은 피그마와 조금 다릅니다.
|
|
39
|
+
// 왜냐하면 border가 따로 크기가 계산되므로 제외했기 때문입니다.
|
|
33
40
|
var SIZE_TO_STYLES = function (size, fullWidth) {
|
|
34
41
|
return ({
|
|
35
|
-
small: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top:
|
|
36
|
-
medium: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-top:
|
|
37
|
-
large: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-top:
|
|
42
|
+
small: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top: 6px;\n padding-bottom: 6px;\n ", ";\n "], ["\n padding-top: 6px;\n padding-bottom: 6px;\n ", ";\n "])), !fullWidth && "max-width: 300px"),
|
|
43
|
+
medium: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-top: 10px;\n padding-bottom: 10px;\n ", ";\n "], ["\n padding-top: 10px;\n padding-bottom: 10px;\n ", ";\n "])), !fullWidth && "max-width: 375px"),
|
|
44
|
+
large: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-top: 12px;\n padding-bottom: 12px;\n ", ";\n "], ["\n padding-top: 12px;\n padding-bottom: 12px;\n ", ";\n "])), !fullWidth && "max-width: 375px"),
|
|
38
45
|
}[size]);
|
|
39
46
|
};
|
|
47
|
+
function InputComponent(props) {
|
|
48
|
+
var placeholder = props.placeholder, _a = props.disabled, disabled = _a === void 0 ? false : _a, defaultValue = props.defaultValue, value = props.value;
|
|
49
|
+
var theme = useTheme();
|
|
50
|
+
var style = css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n resize: none;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "], ["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n resize: none;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "])), theme.color.foreground.neutralBaseDisabled);
|
|
51
|
+
// Type Safety 때문에 코드의 중복을 허용합니다.
|
|
52
|
+
if (props.multiline) {
|
|
53
|
+
return (_jsx(TextareaAutosize, __assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
return (_jsx("input", __assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
40
59
|
export function InputBase(props) {
|
|
41
|
-
var className = props.className, color = props.color, size = props.size,
|
|
42
|
-
return (_jsxs(InputContainer, __assign({ className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth }, { children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(
|
|
60
|
+
var className = props.className, color = props.color, size = props.size, _a = props.disabled, disabled = _a === void 0 ? false : _a, startIcon = props.startIcon, startLabel = props.startLabel, endLabel = props.endLabel, endIcon = props.endIcon, _b = props.fullWidth, fullWidth = _b === void 0 ? false : _b, onClear = props.onClear;
|
|
61
|
+
return (_jsxs(InputContainer, __assign({ className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth }, { children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(InputComponent, __assign({}, props)), endLabel && _jsx("span", { children: endLabel }), endIcon, onClear && (_jsx(ClearButton, __assign({ type: "button", onClick: onClear, disabled: disabled, tabIndex: -1 }, { children: _jsx(CloseCircleFillIcon, {}) })))] })));
|
|
43
62
|
}
|
|
44
63
|
var InputContainer = styled.div(function (_a) {
|
|
45
64
|
var theme = _a.theme, color = _a.color, inputSize = _a.inputSize, disabled = _a.disabled, fullWidth = _a.fullWidth;
|
|
46
|
-
return css(
|
|
47
|
-
});
|
|
48
|
-
var StyledInput = styled.input(function (_a) {
|
|
49
|
-
var theme = _a.theme;
|
|
50
|
-
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "], ["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "])), theme.color.foreground.neutralBaseDisabled);
|
|
65
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "], ["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "])), COLOR_TO_INPUT_STYLES(theme, color, disabled), SIZE_TO_STYLES(inputSize, fullWidth), fullWidth && "width: inherit;");
|
|
51
66
|
});
|
|
52
67
|
var ClearButton = styled.button(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n color: currentColor;\n &:not(:disabled) {\n cursor: pointer;\n }\n display: flex;\n align-items: center;\n"], ["\n ", "\n color: currentColor;\n &:not(:disabled) {\n cursor: pointer;\n }\n display: flex;\n align-items: center;\n"])), RESET_BUTTON);
|
|
53
68
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
@@ -138,7 +138,7 @@ var PinInputWrapper = styled.span(templateObject_12 || (templateObject_12 = __ma
|
|
|
138
138
|
return SIZE_TO_FONT_STYLES(size);
|
|
139
139
|
});
|
|
140
140
|
var PinInputContainer = styled.span(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: inline-flex;\n gap: 8px;\n"], ["\n display: inline-flex;\n gap: 8px;\n"])));
|
|
141
|
-
var SqaureInput = styled(InputBase)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n padding: 0;\n input {\n text-align: center;\n }\n"], ["\n ", "\n padding: 0;\n input {\n text-align: center;\n }\n"])), function (_a) {
|
|
141
|
+
var SqaureInput = styled(InputBase)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n padding-left: 0;\n padding-right: 0;\n input {\n text-align: center;\n }\n"], ["\n ", "\n padding-left: 0;\n padding-right: 0;\n input {\n text-align: center;\n }\n"])), function (_a) {
|
|
142
142
|
var size = _a.size;
|
|
143
143
|
return SIZE_TO_STYLES(size);
|
|
144
144
|
});
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { PolymorphicProps } from "@mui/base";
|
|
2
3
|
export type SquareButtonColor = "danger" | "primary" | "secondary" | "icon";
|
|
3
4
|
export type SquareButtonSize = "large" | "medium" | "small" | "xsmall";
|
|
4
|
-
export interface
|
|
5
|
+
export interface SquareButtonOwnProps<RootComponentType extends React.ElementType> {
|
|
5
6
|
className?: string;
|
|
6
|
-
component?:
|
|
7
|
+
component?: RootComponentType;
|
|
7
8
|
/** 비활성화 여부 */
|
|
8
9
|
disabled?: boolean;
|
|
9
10
|
/** 컴포넌트 색상 */
|
|
@@ -19,8 +20,14 @@ export interface SquareButtonProps {
|
|
|
19
20
|
/** 버튼 클릭 시 호출될 콜백 함수 */
|
|
20
21
|
onClick?: () => void;
|
|
21
22
|
}
|
|
23
|
+
export type SquareButtonProps<RootComponentType extends React.ElementType = SquareButtonTypeMap["defaultComponent"]> = PolymorphicProps<SquareButtonTypeMap<RootComponentType>, RootComponentType>;
|
|
24
|
+
export interface SquareButtonTypeMap<RootComponentType extends React.ElementType = "span"> {
|
|
25
|
+
props: SquareButtonOwnProps<RootComponentType>;
|
|
26
|
+
defaultComponent: RootComponentType;
|
|
27
|
+
}
|
|
28
|
+
type SquareButtonComponent = <RootComponentType extends React.ElementType = "span">(props: SquareButtonProps<RootComponentType>) => React.ReactElement | null;
|
|
22
29
|
/**
|
|
23
30
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
|
|
24
31
|
*/
|
|
25
|
-
declare const SquareButton:
|
|
32
|
+
declare const SquareButton: SquareButtonComponent;
|
|
26
33
|
export default SquareButton;
|
|
@@ -53,7 +53,7 @@ var SIZE_TO_LABEL_STYLE = {
|
|
|
53
53
|
/**
|
|
54
54
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
|
|
55
55
|
*/
|
|
56
|
-
var SquareButton = React.forwardRef(function (props, ref) {
|
|
56
|
+
var SquareButton = React.forwardRef(function SquareButton(props, ref) {
|
|
57
57
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "span" : _a, disabled = props.disabled, color = props.color, size = props.size, icon = props.icon, label = props.label, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "label", "fullWidth", "onClick"]);
|
|
58
58
|
return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n width: ", ";\n "], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n width: ", ";\n "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ type: "button", color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
|
|
59
59
|
});
|