@team-monolith/cds 0.8.3 → 0.8.4
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/README.md +17 -37
- package/dist/components/AlertDialog/AlertDialog.js +9 -8
- package/dist/components/AlertDialog/AlertDialogContext.d.ts +5 -0
- package/dist/components/AlertDialog/AlertDialogContext.js +2 -0
- package/dist/components/AlertDialog/AlertDialogTitle.js +5 -2
- package/dist/icons/Custom.d.ts +4 -0
- package/dist/icons/Custom.js +3 -0
- package/dist/icons/custom/symbol.svg +5 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,46 +1,26 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Codle Design System
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
코들 디자인 시스템을 구현합니다.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### src/cds/components
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
컴포넌트를 구현합니다.
|
|
8
|
+
컴포넌트는 반드시 `className`과 `component` 인자를 가집니다.
|
|
9
|
+
컴포넌트는 모두 스토리북에 등록해야 합니다.
|
|
8
10
|
|
|
9
|
-
###
|
|
11
|
+
### src/cds/foundation
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
|
13
|
+
색상, 그림자 등을 제공합니다.
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
You will also see any lint errors in the console.
|
|
15
|
+
### src/cds/icons
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
아이콘을 제공합니다.
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
|
19
|
+
아이콘은 [피그마](https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-23307&t=ASkFT82aJsgxrxvr-0)에 정의된대로 24px X 24px 크기의 svg로 정의됩니다. 색상이나 크기를 변경하기 위해 Styled Component를 활용할 수 있으므로 `className` 인자를 받아야합니다.
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Your app is ready to be deployed!
|
|
29
|
-
|
|
30
|
-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
|
31
|
-
|
|
32
|
-
### `npm run eject`
|
|
33
|
-
|
|
34
|
-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
|
35
|
-
|
|
36
|
-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
|
37
|
-
|
|
38
|
-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
|
39
|
-
|
|
40
|
-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
|
41
|
-
|
|
42
|
-
## Learn More
|
|
43
|
-
|
|
44
|
-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
|
45
|
-
|
|
46
|
-
To learn React, check out the [React documentation](https://reactjs.org/).
|
|
21
|
+
아이콘은 컴파일 과정에서, remixicon 라이브러리의 svg 파일을 읽어와서 string 형태와 React JSX 형태로 export 되는 코드가 `src/cds/icons` 폴더 안에 자동 생성됩니다.
|
|
22
|
+
생성되는 규칙은 다음과 같습니다.
|
|
23
|
+
- 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
|
|
24
|
+
- string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: `arrowDownCircleFillSvg`)
|
|
25
|
+
- React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
|
|
26
|
+
- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
|
|
@@ -24,22 +24,23 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
24
24
|
}
|
|
25
25
|
return t;
|
|
26
26
|
};
|
|
27
|
-
import { jsx as _jsx,
|
|
27
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
28
28
|
/** @jsxImportSource @emotion/react */
|
|
29
29
|
import { Modal as MuiModal } from "@mui/material";
|
|
30
30
|
import { css, useTheme } from "@emotion/react";
|
|
31
31
|
import React from "react";
|
|
32
32
|
import shadows from "../../foundation/shadows";
|
|
33
33
|
import styled from "@emotion/styled";
|
|
34
|
+
import { MOBILE } from "../../foundation/breakpoints";
|
|
35
|
+
import AlertDialogContext from "./AlertDialogContext";
|
|
34
36
|
export var AlertDialog = React.forwardRef(function (props, ref) {
|
|
35
37
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children, icon = props.icon, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon"]);
|
|
36
38
|
var theme = useTheme();
|
|
37
|
-
return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref }, other, { children: _jsxs(Component, __assign({ className: className, css: css(
|
|
38
|
-
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-template-areas:\n \"icon title\"\n \"iconPadding content\"\n \"actions actions\";\n "], ["\n grid-template-areas:\n \"icon title\"\n \"iconPadding content\"\n \"actions actions\";\n "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "], ["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "])))
|
|
39
|
+
return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref }, other, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "], ["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "])), theme.color.background.neutralBase, shadows.shadow04, icon
|
|
40
|
+
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-template-areas:\n \"icon title\"\n \"iconPadding content\"\n \"actions actions\";\n "], ["\n grid-template-areas:\n \"icon title\"\n \"iconPadding content\"\n \"actions actions\";\n "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "], ["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "]))), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: calc(100% - 24px);\n\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "], ["\n width: calc(100% - 24px);\n\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "]))))) }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, __assign({ value: { icon: icon } }, { children: children }))] })) })));
|
|
39
41
|
});
|
|
40
|
-
var IconDiv = styled.div(
|
|
42
|
+
var IconDiv = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n grid-area: icon;\n ", "\n svg {\n width: 32px;\n height: 32px;\n }\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n grid-area: icon;\n ", "\n svg {\n width: 32px;\n height: 32px;\n }\n\n ", "\n"])), function (_a) {
|
|
41
43
|
var theme = _a.theme;
|
|
42
|
-
return css(
|
|
43
|
-
});
|
|
44
|
-
var
|
|
45
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
44
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.background.infoActive);
|
|
45
|
+
}, MOBILE(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: none;\n "], ["\n display: none;\n "])))));
|
|
46
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -30,9 +30,12 @@ import { css, useTheme } from "@emotion/react";
|
|
|
30
30
|
import React from "react";
|
|
31
31
|
import SquareButton from "../SquareButton";
|
|
32
32
|
import { CloseFillIcon } from "../../icons";
|
|
33
|
+
import AlertDialogContext from "./AlertDialogContext";
|
|
34
|
+
import { MOBILE } from "../../foundation/breakpoints";
|
|
33
35
|
export var AlertDialogTitle = React.forwardRef(function (props, ref) {
|
|
34
36
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, onClose = props.onClose, children = props.children, other = __rest(props, ["className", "component", "onClose", "children"]);
|
|
37
|
+
var icon = React.useContext(AlertDialogContext).icon;
|
|
35
38
|
var theme = useTheme();
|
|
36
|
-
return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-area: title;\n font-family: \"Pretendard\";\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 36px;\n color: ", ";\n\n display: flex;\n justify-content: space-between;\n "], ["\n grid-area: title;\n font-family: \"Pretendard\";\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 36px;\n color: ", ";\n\n display: flex;\n justify-content: space-between;\n "])), theme.color.foreground.neutralBase) }, { children: [children, onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
|
|
39
|
+
return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-area: title;\n font-family: \"Pretendard\";\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 36px;\n color: ", ";\n\n display: flex;\n justify-content: space-between;\n "], ["\n grid-area: title;\n font-family: \"Pretendard\";\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 36px;\n color: ", ";\n\n display: flex;\n justify-content: space-between;\n "])), theme.color.foreground.neutralBase) }, { children: [_jsxs("div", __assign({ css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 16px;\n "], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 16px;\n "]))) }, { children: [icon && (_jsx("div", __assign({ css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\n ", "\n "], ["\n display: none;\n ", "\n "])), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n\n svg {\n width: 32px;\n height: 32px;\n }\n "], ["\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n\n svg {\n width: 32px;\n height: 32px;\n }\n "])), theme.color.background.infoActive))) }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
|
|
37
40
|
});
|
|
38
|
-
var templateObject_1;
|
|
41
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/dist/icons/Custom.d.ts
CHANGED
|
@@ -11,3 +11,7 @@ export declare const customProblemSvg: string;
|
|
|
11
11
|
export declare const CustomProblemIcon: (props: {
|
|
12
12
|
className?: string;
|
|
13
13
|
}) => JSX.Element;
|
|
14
|
+
export declare const customSymbolSvg: string;
|
|
15
|
+
export declare const CustomSymbolIcon: (props: {
|
|
16
|
+
className?: string;
|
|
17
|
+
}) => JSX.Element;
|
package/dist/icons/Custom.js
CHANGED
|
@@ -19,3 +19,6 @@ export var CustomMaterialIcon = function (props) { return (_jsxs("svg", __assign
|
|
|
19
19
|
import customProblemSvgImport from "./custom/problem.svg";
|
|
20
20
|
export var customProblemSvg = customProblemSvgImport;
|
|
21
21
|
export var CustomProblemIcon = function (props) { return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { x: "1.5", y: "1.5", width: "21", height: "21", rx: "10", fill: "#F4FAE8" }), _jsx("path", { d: "M17.6719 8.48577V18.9031C17.6719 19.2326 17.4052 19.5 17.0766 19.5H7.33644C7.0079 19.5 6.74121 19.2326 6.74121 18.9031V5.34721C6.74121 5.01771 7.0079 4.75024 7.33644 4.75024H13.9472C14.1053 4.75024 14.2565 4.81297 14.3685 4.92534L17.4973 8.06321C17.6086 8.17488 17.6719 8.32722 17.6719 8.48577Z", fill: "#B3ECCD" }), _jsx("path", { d: "M13.9912 4.94874V8.28721C13.9912 8.39681 14.0799 8.48505 14.1885 8.48505H17.4732C17.6485 8.48505 17.7372 8.27273 17.6141 8.14796L14.3294 4.80949C14.205 4.68334 13.9912 4.77158 13.9912 4.94874Z", fill: "#43C422" }), _jsx("path", { d: "M8.74482 13.1685C8.87885 13.1086 8.97439 13.0148 9.03212 12.888C9.08986 12.7611 9.11873 12.5922 9.11873 12.382V11.7064C9.11873 11.2356 9.20258 10.8785 9.37029 10.6345C9.538 10.3905 9.76138 10.2278 10.0398 10.1465C10.3181 10.0651 10.6962 10.0251 11.1732 10.0251V10.9682C10.9415 10.9682 10.7642 10.9985 10.6419 11.0585C10.5195 11.1184 10.435 11.2101 10.3889 11.3335C10.3429 11.4569 10.3202 11.6223 10.3202 11.8305V12.7198C10.3202 12.9479 10.2624 13.1437 10.1477 13.3071C10.0329 13.4705 9.81981 13.6028 9.50845 13.7035C9.19708 13.8048 8.762 13.8551 8.20251 13.8551V13.2602C8.43002 13.2602 8.61079 13.2299 8.74482 13.1699V13.1685ZM8.20251 13.2588H9.25963V14.3942H8.20251V13.2588ZM10.0398 17.5121C9.76138 17.4321 9.538 17.2694 9.37029 17.0254C9.20258 16.7814 9.11873 16.4236 9.11873 15.9535V15.2745C9.11873 15.0642 9.08986 14.8953 9.03212 14.7671C8.97439 14.6389 8.87816 14.5451 8.74482 14.4845C8.61079 14.4245 8.43002 14.3942 8.20251 14.3942V13.8027C8.76132 13.8027 9.19708 13.8524 9.50845 13.9516C9.81981 14.0509 10.0329 14.1832 10.1477 14.348C10.2624 14.5134 10.3202 14.7099 10.3202 14.9381V15.8273C10.3202 16.0355 10.3429 16.2009 10.3889 16.3243C10.435 16.4477 10.5188 16.5394 10.6419 16.5994C10.7649 16.6593 10.9415 16.6897 11.1732 16.6897V17.6327C10.6962 17.6327 10.3181 17.5927 10.0398 17.5127V17.5121Z", fill: "#1FBB26" }), _jsx("path", { d: "M14.3733 10.1443C14.6516 10.2243 14.875 10.3863 15.0427 10.631C15.2104 10.875 15.2943 11.2328 15.2943 11.7029V12.3819C15.2943 12.5922 15.3232 12.7617 15.3809 12.8893C15.4386 13.0175 15.5349 13.1112 15.6682 13.1719C15.8016 13.2326 15.983 13.2622 16.2105 13.2622V13.8536C15.6517 13.8536 15.2159 13.804 14.9046 13.7048C14.5932 13.6055 14.3802 13.4731 14.2654 13.3084C14.1506 13.1429 14.0935 12.9465 14.0935 12.7183V11.8291C14.0935 11.6209 14.0709 11.4554 14.0248 11.332C13.9788 11.2087 13.8942 11.117 13.7719 11.057C13.6495 10.997 13.4722 10.9667 13.2406 10.9667V10.0237C13.7176 10.0237 14.0956 10.0637 14.374 10.1436L14.3733 10.1443ZM15.6682 14.4872C15.5342 14.5471 15.4386 14.6409 15.3809 14.7677C15.3232 14.8952 15.2943 15.0634 15.2943 15.2737V15.9492C15.2943 16.4201 15.2104 16.7771 15.0427 17.0212C14.875 17.2652 14.6516 17.4279 14.3733 17.5092C14.0949 17.5906 13.7169 17.6305 13.2399 17.6305V16.6875C13.4715 16.6875 13.6488 16.6572 13.7712 16.5972C13.8935 16.5372 13.9781 16.4456 14.0241 16.3222C14.0702 16.1988 14.0928 16.0333 14.0928 15.8252V14.9359C14.0928 14.7077 14.1499 14.512 14.2647 14.3486C14.3795 14.1852 14.5925 14.0536 14.9039 13.9522C15.2153 13.8509 15.6503 13.8006 16.2098 13.8006V14.3955C15.9823 14.3955 15.8016 14.4258 15.6675 14.4858L15.6682 14.4872ZM16.2105 14.3968H15.1534V13.2615H16.2105V14.3968Z", fill: "#1FBB26" })] }))); };
|
|
22
|
+
import customSymbolSvgImport from "./custom/symbol.svg";
|
|
23
|
+
export var customSymbolSvg = customSymbolSvgImport;
|
|
24
|
+
export var CustomSymbolIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "currentColor", d: "M11.8927 2C6.98164 2 3 5.80096 3 10.4903C3 14.0308 5.26988 17.0622 8.4957 18.336C9.05262 18.5557 9.36122 19.1512 9.19366 19.7238L8.83323 20.9592C8.66206 21.5427 9.17196 22.1009 9.76987 21.9845C11.478 21.6495 14.564 20.7587 17.0701 18.4644C19.9898 15.7908 20.7854 12.9527 20.7854 10.4915C20.7854 5.80337 16.8037 2.0012 11.8927 2.0012V2Z" }) }))); };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path
|
|
3
|
+
fill="currentColor"
|
|
4
|
+
d="M11.8927 2C6.98164 2 3 5.80096 3 10.4903C3 14.0308 5.26988 17.0622 8.4957 18.336C9.05262 18.5557 9.36122 19.1512 9.19366 19.7238L8.83323 20.9592C8.66206 21.5427 9.17196 22.1009 9.76987 21.9845C11.478 21.6495 14.564 20.7587 17.0701 18.4644C19.9898 15.7908 20.7854 12.9527 20.7854 10.4915C20.7854 5.80337 16.8037 2.0012 11.8927 2.0012V2Z" />
|
|
5
|
+
</svg>
|