@team-monolith/cds 0.3.0 → 0.3.2

package/dist/patterns/Table/TableCell.js

@@ -0,0 +1,78 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import React, { useContext } from "react";
+import TableVariantContext from "./TableVariantContext";
+import TablePropsContext from "./TablePropsContext";
+import { ArrowDownFillIcon, ArrowUpFillIcon, ExpandUpDownIcon, } from "../../icons/arrows";
+import styled from "@emotion/styled";
+import { RESET_BUTTON } from "../../utils/reset";
+import { FilterFillIcon } from "../../icons/system";
+var SIZE_TO_STYLES = function (size) {
+    return ({
+        small: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 8px 8px;\n    "], ["\n      padding: 8px 8px;\n    "]))),
+        medium: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: 12px 8px;\n    "], ["\n      padding: 12px 8px;\n    "]))),
+        large: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding: 16px 8px;\n    "], ["\n      padding: 16px 8px;\n    "]))),
+    }[size]);
+};
+export default function TableCell(props) {
+    var className = props.className, Component = props.component, children = props.children, sort = props.sort, colSpan = props.colSpan, isFilterActive = props.isFilterActive, onFilterClick = props.onFilterClick, onClick = props.onClick, onSortClick = props.onSortClick, filterButttonRef = props.filterButttonRef;
+    // variant 값에 따라 th 태그로 그릴지, td 태그로 그릴지를 결정합니다.
+    var variant = useContext(TableVariantContext).variant;
+    var Element = (Component !== null && Component !== void 0 ? Component : variant === "head") ? "th" : "td";
+    var _a = useContext(TablePropsContext), size = _a.size, disabled = _a.disabled;
+    var theme = useTheme();
+    if (variant === "body") {
+        return (_jsx(Element, __assign({ colSpan: colSpan, className: className, onClick: onClick, css: [
+                SIZE_TO_STYLES(size !== null && size !== void 0 ? size : "medium"),
+                css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            font-style: normal;\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 24px;\n          "], ["\n            font-style: normal;\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 24px;\n          "]))),
+                css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            display: table-cell;\n            text-align: initial;\n\n            &:first-of-type {\n              padding-left: 16px;\n            }\n\n            &:last-of-type {\n              padding-right: 16px;\n            }\n          "], ["\n            display: table-cell;\n            text-align: initial;\n\n            &:first-of-type {\n              padding-left: 16px;\n            }\n\n            &:last-of-type {\n              padding-right: 16px;\n            }\n          "]))),
+            ] }, { children: children })));
+    }
+    return (_jsx(Element, __assign({ colSpan: colSpan, className: className, onClick: onClick, css: [
+            SIZE_TO_STYLES(size !== null && size !== void 0 ? size : "medium"),
+            Element === "th"
+                ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              background: ", ";\n              font-style: normal;\n              font-weight: 500;\n              font-size: 14px;\n              line-height: 16px;\n            "], ["\n              background: ", ";\n              font-style: normal;\n              font-weight: 500;\n              font-size: 14px;\n              line-height: 16px;\n            "])), theme.color.background.neutralAlt) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n              font-style: normal;\n              font-weight: 400;\n              font-size: 16px;\n              line-height: 24px;\n            "], ["\n              font-style: normal;\n              font-weight: 400;\n              font-size: 16px;\n              line-height: 24px;\n            "]))),
+            css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          display: table-cell;\n          text-align: initial;\n\n          &:first-of-type {\n            padding-left: 16px;\n          }\n\n          &:last-of-type {\n            padding-right: 16px;\n          }\n        "], ["\n          display: table-cell;\n          text-align: initial;\n\n          &:first-of-type {\n            padding-left: 16px;\n          }\n\n          &:last-of-type {\n            padding-right: 16px;\n          }\n        "]))),
+        ] }, { children: _jsxs(Cell, { children: [children, _jsxs(Buttons, { children: [sort && (_jsx(SortButton, { sort: sort, onSortClick: onSortClick, disabled: disabled })), isFilterActive !== undefined && (_jsx(FilterButton, { isFilterActive: isFilterActive !== null && isFilterActive !== void 0 ? isFilterActive : false, onFilterClick: onFilterClick, ref: filterButttonRef, disabled: disabled }))] })] }) })));
+}
+var Cell = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Buttons = styled.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n"], ["\n  display: flex;\n  gap: 4px;\n"])));
+var SortButton = function (props) {
+    var sortIcon = _jsx(_Fragment, {});
+    switch (props.sort) {
+        case "asc":
+            sortIcon = _jsx(ArrowDownFillIcon, {});
+            break;
+        case "desc":
+            sortIcon = _jsx(ArrowUpFillIcon, {});
+            break;
+        case "none":
+            sortIcon = _jsx(ExpandUpDownIcon, {});
+            break;
+    }
+    return (_jsx("button", __assign({ disabled: props.disabled, onClick: props.onSortClick, css: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "], ["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "])), RESET_BUTTON) }, { children: sortIcon })));
+};
+var FilterButton = React.forwardRef(function (props, ref) {
+    var theme = useTheme();
+    return (_jsx("button", __assign({ ref: ref, disabled: props.disabled, onClick: props.onFilterClick, css: [
+            css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 6px;\n\n          cursor: pointer;\n\n          svg {\n            width: 12px;\n            height: 12px;\n          }\n        "], ["\n          ", "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 6px;\n\n          cursor: pointer;\n\n          svg {\n            width: 12px;\n            height: 12px;\n          }\n        "])), RESET_BUTTON),
+            props.isFilterActive && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            color: ", ";\n          "], ["\n            color: ", ";\n          "])), theme.color.foreground.primary),
+        ] }, { children: _jsx(FilterFillIcon, {}) })));
+});
+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, templateObject_13;

package/dist/patterns/Table/TableHead.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface TableHeadProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Table의 내용입니다. 일반적으로 TableRow로 구성됩니다. */
+    children?: React.ReactNode;
+}
+export default function TableHead(props: TableHeadProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/TableHead.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import TableVariantContext from "./TableVariantContext";
+export default function TableHead(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "thead" : _a, children = props.children;
+    return (_jsx(Component, __assign({ className: className, css: [
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: table-header-group;\n        "], ["\n          display: table-header-group;\n        "]))),
+        ] }, { children: _jsx(TableVariantContext.Provider, __assign({ value: { variant: "head" } }, { children: children })) })));
+}
+var templateObject_1;

package/dist/patterns/Table/TablePropsContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { TableSize } from "./Table";
+declare const TablePropsContext: React.Context<{
+    size?: TableSize | undefined;
+    disabled?: boolean | undefined;
+}>;
+export default TablePropsContext;

package/dist/patterns/Table/TablePropsContext.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+var TablePropsContext = React.createContext({});
+export default TablePropsContext;

package/dist/patterns/Table/TableRow.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface TableRowProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Table의 내용입니다. 일반적으로 TableCell로 구성됩니다. */
+    children?: React.ReactNode;
+    /** `true`일 때 기본적으로 적용되는 hover 배경색이 비활성화됩니다.  */
+    disableHover?: boolean;
+    /** 이 행이 선택되었음을 결정하는 속성. `true`일때 배경색이 활성화됩니다. */
+    isSelected?: boolean;
+    /** 행을 클릭할 때 호출되는 함수 */
+    onClick?: (event: any) => void;
+}
+export default function TableRow(props: TableRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/TableRow.js

@@ -0,0 +1,34 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { useContext } from "react";
+import { HOVER } from "../../utils/hover";
+import TablePropsContext from "./TablePropsContext";
+export default function TableRow(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "tr" : _a, isSelected = props.isSelected, disableHover = props.disableHover, children = props.children, onClick = props.onClick;
+    var theme = useTheme();
+    var disabled = useContext(TablePropsContext).disabled;
+    return (_jsx(Component, __assign({ className: className, onClick: disabled ? undefined : onClick, css: [
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: table-row;\n          &:not(:first-of-type) {\n            td {\n              border-top: 1px solid ", ";\n            }\n          }\n        "], ["\n          display: table-row;\n          &:not(:first-of-type) {\n            td {\n              border-top: 1px solid ", ";\n            }\n          }\n        "])), theme.color.background.neutralAlt),
+            isSelected && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            background: ", ";\n          "], ["\n            background: ", ";\n          "])), theme.color.container.primaryContainer),
+            disabled
+                ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              color: ", ";\n            "], ["\n              color: ", ";\n            "])), theme.color.foreground.neutralBaseDisabled) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              ", "\n              ", "\n            "], ["\n              ", "\n              ", "\n            "])), !disableHover &&
+                HOVER(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  background: ", ";\n                "], ["\n                  background: ", ";\n                "])), theme.color.container.primaryContainer)), onClick && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "])))),
+        ] }, { children: children })));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/patterns/Table/TableVariantContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface TableVariantContextProps {
+    variant?: "head" | "body";
+}
+declare const TableVariantContext: React.Context<TableVariantContextProps>;
+export default TableVariantContext;

package/dist/patterns/Table/TableVariantContext.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+var TableVariantContext = React.createContext({});
+export default TableVariantContext;

package/dist/patterns/Table/index.d.ts

@@ -0,0 +1,7 @@
+import Table, { TableSize, TableProps } from "./Table";
+import TableHead, { TableHeadProps } from "./TableHead";
+import TableBody, { TableBodyProps } from "./TableBody";
+import TableRow, { TableRowProps } from "./TableRow";
+import TableCell, { TableCellProps } from "./TableCell";
+export { Table, TableHead, TableBody, TableRow, TableCell };
+export type { TableSize, TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableCellProps, };

package/dist/patterns/Table/index.js

@@ -0,0 +1,6 @@
+import Table from "./Table";
+import TableHead from "./TableHead";
+import TableBody from "./TableBody";
+import TableRow from "./TableRow";
+import TableCell from "./TableCell";
+export { Table, TableHead, TableBody, TableRow, TableCell };

package/dist/utils/hover.d.ts

@@ -0,0 +1,3 @@
+import { CSSInterpolation } from "@emotion/serialize";
+export declare function HOVER(style: CSSInterpolation): import("@emotion/utils").SerializedStyles;
+export declare function FOCUS(style: CSSInterpolation): import("@emotion/utils").SerializedStyles;

package/dist/utils/hover.js

@@ -0,0 +1,14 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from "@emotion/react";
+// https://choi-jinwoo.github.io/post/development/css-media-hover/
+export function HOVER(style) {
+    // -ms-high-contrast: none is for IE11 support.
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), style);
+}
+export function FOCUS(style) {
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:focus {\n        ", "\n      }\n    }\n  "], ["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:focus {\n        ", "\n      }\n    }\n  "])), style);
+}
+var templateObject_1, templateObject_2;

package/dist/utils/reset.d.ts

@@ -0,0 +1,2 @@
+export declare const RESET_BUTTON: import("@emotion/utils").SerializedStyles;
+export declare const RESET_TABLE: import("@emotion/utils").SerializedStyles;

package/dist/utils/reset.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from "@emotion/react";
+export var RESET_BUTTON = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: inherit;\n"], ["\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: inherit;\n"])));
+export var RESET_TABLE = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0;\n  border: 0;\n  border-spacing: 0px;\n  border-collapse: collapse;\n"], ["\n  padding: 0;\n  border: 0;\n  border-spacing: 0px;\n  border-collapse: collapse;\n"])));
+var templateObject_1, templateObject_2;

package/dist/utils/zIndex.d.ts

@@ -0,0 +1,3 @@
+export declare const ZINDEX: {
+    inputBase: number;
+};

package/dist/utils/zIndex.js

@@ -0,0 +1,3 @@
+export var ZINDEX = {
+    inputBase: 1, // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/internal/SwitchBase.js#L35
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -39,6 +39,7 @@
     ]
   },
   "devDependencies": {
-    "copyfiles": "^2.4.1"
+    "copyfiles": "^2.4.1",
+    "rimraf": "^5.0.1"
   }
 }

package/src/cds/index.ts

@@ -34,7 +34,7 @@ export { default as Tooltip } from "./components/Tooltip";
 export * from "./components/Tooltip";
 
 export { default as color } from "./foundation/color";
-export { default as shadow } from "./foundation/shadows";
+export { default as shadows } from "./foundation/shadows";
 
 export * from "./icons/brand";
 export * from "./icons/map";

package/src/cds/patterns/SegmentedControl/SegmentedControlButton.tsx

@@ -1,11 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import { useContext } from "react";
 import Button, { ButtonProps } from "../../components/Button";
 import shadows from "../../foundation/shadows";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import styled from "@emotion/styled";
 
-export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
+export interface SegmentedControlButtonProps
+  extends Omit<ButtonProps, "color" | "size"> {
   value: string;
 }
 
@@ -13,20 +15,32 @@ export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" |
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export function SegmentedControlButton(props: SegmentedControlButtonProps) {
+  const { onClick, ...other } = props;
+
   const context = useContext(SegmentedControlGroupPropsContext);
 
-  const isActive = context.multiSelect ? context.value.includes(props.value) : context.value === props.value;
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    context.onClick?.(props.value);
+    onClick?.(e);
+  };
+
+  const isActive = context.multiSelect
+    ? context.value.includes(props.value)
+    : context.value === props.value;
 
   return (
     <StyledButton
+      css={css`
+        display: flex;
+        justify-content: center;
+        flex-grow: 1;
+        ${isActive && `box-shadow: ${shadows.shadow04};`}
+      `}
       {...props}
       isActive={isActive}
       color={isActive ? "primary" : "textNeutral"}
       size={context.size}
-      onClick={() => {
-        context.onClick?.(props.value);
-        props.onClick?.();
-      }}
+      onClick={handleClick}
     />
   );
 }
@@ -38,4 +52,4 @@ const StyledButton = styled(Button, {
   justify-content: center;
   flex-grow: 1;
   ${({ isActive }) => isActive && `box-shadow: ${shadows.shadow04};`}
-`;
+`;