@team-monolith/cds 0.25.1 → 1.0.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.
Files changed (11) hide show
  1. package/@types/emotion.d.ts +0 -6
  2. package/dist/CodleDesignSystemProvider.d.ts +0 -4
  3. package/dist/CodleDesignSystemProvider.js +1 -6
  4. package/dist/components/AlertDialog/AlertDialogTitle.js +1 -1
  5. package/dist/components/Banner.js +2 -8
  6. package/dist/components/Button.js +2 -2
  7. package/dist/components/Tooltip.js +1 -1
  8. package/dist/icons/Custom.d.ts +18 -19
  9. package/package.json +5 -5
  10. package/dist/foundation/font.d.ts +0 -5
  11. package/dist/foundation/font.js +0 -5
package/@types/emotion.d.ts CHANGED
@@ -1,10 +1,5 @@
1
1
  import "@emotion/react";
2
2
 
3
- interface CodleFontFamilies {
4
- ui: string;
5
- title: string;
6
- }
7
-
8
3
  interface CodleColors {
9
4
  background: {
10
5
  neutralBase: string;
@@ -74,6 +69,5 @@ interface CodleColors {
74
69
  declare module "@emotion/react" {
75
70
  export interface Theme {
76
71
  color: CodleColors;
77
- fontFamily: CodleFontFamilies;
78
72
  }
79
73
  }
package/dist/CodleDesignSystemProvider.d.ts CHANGED
@@ -1,9 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  export declare const light: {
3
- fontFamily: {
4
- ui: string;
5
- title: string;
6
- };
7
3
  color: {
8
4
  background: {
9
5
  neutralBase: string;
package/dist/CodleDesignSystemProvider.js CHANGED
@@ -17,13 +17,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
17
17
  import { Global, ThemeProvider, css } from "@emotion/react";
18
18
  import { ThemeProvider as MuiThemeProvider } from "@mui/material";
19
19
  import COLOR from "./foundation/color";
20
- import FONT from "./foundation/font";
21
20
  import { createTheme } from "@mui/material";
22
21
  export var light = {
23
- fontFamily: {
24
- ui: FONT.pretendard,
25
- title: FONT.naumSquareNeo,
26
- },
27
22
  color: {
28
23
  background: {
29
24
  neutralBase: COLOR.white,
@@ -104,6 +99,6 @@ export default function (props) {
104
99
  },
105
100
  },
106
101
  });
107
- return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n body {\n font-family: ", ";\n }\n "], ["\n body {\n font-family: ", ";\n }\n "])), FONT.pretendard) }), _jsx(MuiThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, __assign({ theme: light }, { children: props.children })) }))] }));
102
+ return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n body {\n font-family: Pretendard;\n }\n "], ["\n body {\n font-family: Pretendard;\n }\n "]))) }), _jsx(MuiThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, __assign({ theme: light }, { children: props.children })) }))] }));
108
103
  }
109
104
  var templateObject_1;
package/dist/components/AlertDialog/AlertDialogTitle.js CHANGED
@@ -36,6 +36,6 @@ export var AlertDialogTitle = React.forwardRef(function (props, ref) {
36
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
37
  var icon = React.useContext(AlertDialogContext).icon;
38
38
  var theme = useTheme();
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: ", ";\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: ", ";\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.fontFamily.ui, 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 }))] })) }));
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 }))] })) }));
40
40
  });
41
41
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/Banner.js CHANGED
@@ -55,14 +55,8 @@ var Banner = React.forwardRef(function (props, ref) {
55
55
  ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx(ContentDiv, { children: content })] }), buttonLabel && (_jsx(BannerButton, __assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(SquareButton, { css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n > button,\n > button:hover {\n color: currentColor;\n }\n "], ["\n > button,\n > button:hover {\n color: currentColor;\n }\n "]))), color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
56
56
  });
57
57
  var IconDiv = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 16px 0px 16px 16px;\n"], ["\n display: flex;\n align-items: center;\n padding: 16px 0px 16px 16px;\n"])));
58
- var HeadlineDiv = styled.div(function (_a) {
59
- var theme = _a.theme;
60
- return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px; /* 125% */\n "], ["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px; /* 125% */\n "])), theme.fontFamily.ui);
61
- });
62
- var ContentDiv = styled.div(function (_a) {
63
- var theme = _a.theme;
64
- return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n "], ["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n "])), theme.fontFamily.ui);
65
- });
58
+ var HeadlineDiv = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-family: Pretendard;\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px; /* 125% */\n"], ["\n font-family: Pretendard;\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px; /* 125% */\n"])));
59
+ var ContentDiv = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-family: Pretendard;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n"], ["\n font-family: Pretendard;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n"])));
66
60
  var TextContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n flex: 1;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 16px;\n gap: 4px;\n"], ["\n flex: 1;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 16px;\n gap: 4px;\n"])));
67
61
  var BannerButton = styled.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px 12px;\n cursor: pointer;\n color: currentColor;\n"], ["\n ", "\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px 12px;\n cursor: pointer;\n color: currentColor;\n"])), RESET_BUTTON);
68
62
  export default Banner;
package/dist/components/Button.js CHANGED
@@ -67,8 +67,8 @@ var Button = React.forwardRef(function Button(props, ref) {
67
67
  var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, fullWidth = props.fullWidth, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth"]);
68
68
  var theme = useTheme();
69
69
  return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
70
- css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n ", "\n\n font-family: ", ";\n text-decoration: none;\n\n width: ", ";\n "], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n ", "\n\n font-family: ", ";\n text-decoration: none;\n\n width: ", ";\n "])), disabled
71
- ? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n cursor: default;\n pointer-events: none;\n "], ["\n cursor: default;\n pointer-events: none;\n "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))), theme.fontFamily.ui, fullWidth ? "100%" : "auto"),
70
+ css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n ", "\n\n font-family: Pretendard;\n text-decoration: none;\n\n width: ", ";\n "], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n ", "\n\n font-family: Pretendard;\n text-decoration: none;\n\n width: ", ";\n "])), disabled
71
+ ? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n cursor: default;\n pointer-events: none;\n "], ["\n cursor: default;\n pointer-events: none;\n "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))), fullWidth ? "100%" : "auto"),
72
72
  COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
73
73
  SIZE_TO_BUTTON_STYLE[size],
74
74
  ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
package/dist/components/Tooltip.js CHANGED
@@ -43,7 +43,7 @@ var StyledTooltip = styled(function (_a) {
43
43
  return (_jsx(MuiTooltip, __assign({}, props, { classes: { popper: className } })));
44
44
  })(function (_a) {
45
45
  var theme = _a.theme;
46
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiTooltip-tooltip {\n background: ", ";\n border-radius: 8px;\n padding: 6px 10px;\n\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n }\n "], ["\n .MuiTooltip-tooltip {\n background: ", ";\n border-radius: 8px;\n padding: 6px 10px;\n\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n }\n "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase, theme.fontFamily.ui);
46
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiTooltip-tooltip {\n background: ", ";\n border-radius: 8px;\n padding: 6px 10px;\n\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n color: ", ";\n font-family: Pretendard;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n }\n "], ["\n .MuiTooltip-tooltip {\n background: ", ";\n border-radius: 8px;\n padding: 6px 10px;\n\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n color: ", ";\n font-family: Pretendard;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n }\n "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase);
47
47
  });
48
48
  var TitleDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 700;\n"], ["\n font-weight: 700;\n"])));
49
49
  export default Tooltip;
package/dist/icons/Custom.d.ts CHANGED
@@ -1,73 +1,72 @@
1
- /// <reference types="react" />
2
1
  export declare const customClassSvg: string;
3
2
  export declare const CustomClassIcon: (props: {
4
3
  className?: string;
5
- }) => JSX.Element;
4
+ }) => import("react/jsx-runtime").JSX.Element;
6
5
  export declare const customMaterialSvg: string;
7
6
  export declare const CustomMaterialIcon: (props: {
8
7
  className?: string;
9
- }) => JSX.Element;
8
+ }) => import("react/jsx-runtime").JSX.Element;
10
9
  export declare const customProblemSvg: string;
11
10
  export declare const CustomProblemIcon: (props: {
12
11
  className?: string;
13
- }) => JSX.Element;
12
+ }) => import("react/jsx-runtime").JSX.Element;
14
13
  export declare const customSymbolSvg: string;
15
14
  export declare const CustomSymbolIcon: (props: {
16
15
  className?: string;
17
- }) => JSX.Element;
16
+ }) => import("react/jsx-runtime").JSX.Element;
18
17
  export declare const customGoogleSvg: string;
19
18
  export declare const CustomGoogleIcon: (props: {
20
19
  className?: string;
21
- }) => JSX.Element;
20
+ }) => import("react/jsx-runtime").JSX.Element;
22
21
  export declare const customWhaleSvg: string;
23
22
  export declare const CustomWhaleIcon: (props: {
24
23
  className?: string;
25
- }) => JSX.Element;
24
+ }) => import("react/jsx-runtime").JSX.Element;
26
25
  export declare const customJudgeColorSvg: string;
27
26
  export declare const CustomJudgeColorIcon: (props: {
28
27
  className?: string;
29
- }) => JSX.Element;
28
+ }) => import("react/jsx-runtime").JSX.Element;
30
29
  export declare const customResourceSvg: string;
31
30
  export declare const CustomResourceIcon: (props: {
32
31
  className?: string;
33
- }) => JSX.Element;
32
+ }) => import("react/jsx-runtime").JSX.Element;
34
33
  export declare const customFabSvg: string;
35
34
  export declare const CustomFabIcon: (props: {
36
35
  className?: string;
37
- }) => JSX.Element;
36
+ }) => import("react/jsx-runtime").JSX.Element;
38
37
  export declare const customJudgeSvg: string;
39
38
  export declare const CustomJudgeIcon: (props: {
40
39
  className?: string;
41
- }) => JSX.Element;
40
+ }) => import("react/jsx-runtime").JSX.Element;
42
41
  export declare const customHandLineSvg: string;
43
42
  export declare const CustomHandLineIcon: (props: {
44
43
  className?: string;
45
- }) => JSX.Element;
44
+ }) => import("react/jsx-runtime").JSX.Element;
46
45
  export declare const customHandFillSvg: string;
47
46
  export declare const CustomHandFillIcon: (props: {
48
47
  className?: string;
49
- }) => JSX.Element;
48
+ }) => import("react/jsx-runtime").JSX.Element;
50
49
  export declare const customEmptySvg: string;
51
50
  export declare const CustomEmptyIcon: (props: {
52
51
  className?: string;
53
- }) => JSX.Element;
52
+ }) => import("react/jsx-runtime").JSX.Element;
54
53
  export declare const customTypeHelperSvg: string;
55
54
  export declare const CustomTypeHelperIcon: (props: {
56
55
  className?: string;
57
- }) => JSX.Element;
56
+ }) => import("react/jsx-runtime").JSX.Element;
58
57
  export declare const customAiHelperSvg: string;
59
58
  export declare const CustomAiHelperIcon: (props: {
60
59
  className?: string;
61
- }) => JSX.Element;
60
+ }) => import("react/jsx-runtime").JSX.Element;
62
61
  export declare const customBasicSvg: string;
63
62
  export declare const CustomBasicIcon: (props: {
64
63
  className?: string;
65
- }) => JSX.Element;
64
+ }) => import("react/jsx-runtime").JSX.Element;
66
65
  export declare const customBasicPlusSvg: string;
67
66
  export declare const CustomBasicPlusIcon: (props: {
68
67
  className?: string;
69
- }) => JSX.Element;
68
+ }) => import("react/jsx-runtime").JSX.Element;
70
69
  export declare const customProSvg: string;
71
70
  export declare const CustomProIcon: (props: {
72
71
  className?: string;
73
- }) => JSX.Element;
72
+ }) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "0.25.1",
3
+ "version": "1.0.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": false,
@@ -9,10 +9,10 @@
9
9
  "@emotion/styled": "^11.8.1",
10
10
  "@mui/material": "^5.13.6",
11
11
  "@types/node": "^16.11.26",
12
- "@types/react": "^17.0.39",
13
- "@types/react-dom": "^17.0.11",
14
- "react": "^17.0.2",
15
- "react-dom": "^17.0.2",
12
+ "@types/react": "^18.2.28",
13
+ "@types/react-dom": "^18.2.13",
14
+ "react": "^18.2.0",
15
+ "react-dom": "^18.2.0",
16
16
  "remixicon": "^3.4.0",
17
17
  "typescript": "^4.5.5",
18
18
  "uid": "^2.0.2"
package/dist/foundation/font.d.ts DELETED
@@ -1,5 +0,0 @@
1
- declare const _default: {
2
- pretendard: string;
3
- naumSquareNeo: string;
4
- };
5
- export default _default;
package/dist/foundation/font.js DELETED
@@ -1,5 +0,0 @@
1
- // eslint-disable-next-line import/no-anonymous-default-export
2
- export default {
3
- pretendard: "Pretendard",
4
- naumSquareNeo: "NanumSquareNeo",
5
- };