@team-monolith/cds 0.13.0 → 0.14.0

package/dist/index.d.ts

@@ -29,3 +29,4 @@ export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvide
 export { light } from "./CodleDesignSystemProvider";
 export * from "./icons";
 export * from "./icons/Custom";
+export * from "./patterns/SegmentedControl";

package/dist/index.js

@@ -29,3 +29,4 @@ export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvide
 export { light } from "./CodleDesignSystemProvider";
 export * from "./icons";
 export * from "./icons/Custom";
+export * from "./patterns/SegmentedControl";

package/dist/patterns/SegmentedControl/SegmentedControlButton.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "../..";
+export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
+    value: string;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export declare function SegmentedControlButton(props: SegmentedControlButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -0,0 +1,49 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { useContext } from "react";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import { Button, shadows } from "../..";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlButton(props) {
+    var onClick = props.onClick, other = __rest(props, ["onClick"]);
+    var context = useContext(SegmentedControlGroupPropsContext);
+    var handleClick = function (e) {
+        var _a;
+        (_a = context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, props.value);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    var isActive = context.multiSelect
+        ? context.value.includes(props.value)
+        : context.value === props.value;
+    return (_jsx(Button, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        justify-content: center;\n        flex-grow: 1;\n        ", "\n      "], ["\n        display: flex;\n        justify-content: center;\n        flex-grow: 1;\n        ", "\n      "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, other, { color: isActive ? "primary" : "textNeutral", size: context.size, onClick: handleClick })));
+}
+var templateObject_1;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ButtonSize, SquareButtonSize } from "../..";
+export type SegmentedControlGroupProps = {
+    className?: string;
+    component?: React.ElementType;
+    children?: React.ReactNode;
+    /** 컴포넌트 크기 */
+    size: ButtonSize | SquareButtonSize;
+    /** 전체 너비 유무 */
+    fullWidth?: boolean;
+} & ({
+    /** 중복 선택 가능 유무 */
+    multiSelect?: false;
+    /** 선택된 값 */
+    value: string | undefined;
+    onChange?: (newValue: string) => void;
+} | {
+    multiSelect: true;
+    value: string[];
+    onChange?: (newValue: string[]) => void;
+});
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export declare function SegmentedControlGroup(props: SegmentedControlGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -0,0 +1,50 @@
+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);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlGroup(props) {
+    var _a = props.component, Component = _a === void 0 ? "div" : _a, className = props.className, children = props.children, fullWidth = props.fullWidth, multiSelect = props.multiSelect;
+    var theme = useTheme();
+    return (_jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "], ["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "])), fullWidth ? "100%" : "fit-content", theme.color.background.neutralAlt, theme.color.background.neutralAltActive) }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, __assign({ value: __assign(__assign({}, props), { onClick: function (newValue) {
+                    var _a, _b, _c;
+                    if (multiSelect) {
+                        if (props.value.includes(newValue)) {
+                            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.value.filter(function (value) { return value !== newValue; }));
+                        }
+                        else {
+                            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __spreadArray(__spreadArray([], props.value, true), [newValue], false));
+                        }
+                    }
+                    else {
+                        (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, newValue);
+                    }
+                } }) }, { children: children })) })));
+}
+var templateObject_1;

package/dist/patterns/SegmentedControl/SegmentedControlGroupPropsContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SegmentedControlGroupProps } from "./SegmentedControlGroup";
+export declare const SegmentedControlGroupPropsContext: import("react").Context<SegmentedControlGroupProps & {
+    onClick?: ((newValue: string) => void) | undefined;
+}>;

package/dist/patterns/SegmentedControl/SegmentedControlGroupPropsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+export var SegmentedControlGroupPropsContext = createContext({
+    value: undefined,
+    size: "medium",
+});

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.d.ts

@@ -0,0 +1,8 @@
+import { SquareButtonProps } from "../..";
+export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size"> {
+    value: string;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export declare function SegmentedControlSquareButton(props: SegmentedControlSquareButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -0,0 +1,44 @@
+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 styled from "@emotion/styled";
+import { useContext } from "react";
+import { shadows, SquareButton, } from "../..";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlSquareButton(props) {
+    var context = useContext(SegmentedControlGroupPropsContext);
+    var isActive = context.multiSelect
+        ? context.value.includes(props.value)
+        : context.value === props.value;
+    return (_jsx(StyledSquareButton, __assign({}, props, { isActive: isActive, color: isActive ? "primary" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: function () {
+            var _a;
+            if (context.onClick) {
+                context.onClick(props.value);
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+        } })));
+}
+var StyledSquareButton = styled(SquareButton, {
+    shouldForwardProp: function (prop) { return prop !== "isActive"; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  button {\n    ", "\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  button {\n    ", "\n  }\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return isActive && "box-shadow: ".concat(shadows.shadow04, ";");
+});
+var templateObject_1;

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

@@ -0,0 +1,3 @@
+export * from './SegmentedControlGroup';
+export * from './SegmentedControlButton';
+export * from './SegmentedControlSquareButton';

package/dist/patterns/SegmentedControl/index.js

@@ -0,0 +1,3 @@
+export * from './SegmentedControlGroup';
+export * from './SegmentedControlButton';
+export * from './SegmentedControlSquareButton';

package/dist/utils/zIndex.d.ts

@@ -1,3 +1,9 @@
 export declare const ZINDEX: {
+    FAB: number;
+    GUIDE: number;
+    ALERT: number;
+    DIALOG: number;
+    NAV: number;
+    MOBILE_NAV_MODAL: number;
     inputBase: number;
 };

package/dist/utils/zIndex.js

@@ -1,3 +1,13 @@
+// ZINDEX의 내용이 CDS에 적합하지 의문이 있다.
+// 이 곳의 정보가 직접 사용되는 컴포넌트가 많지 않고
+// 사용하는 주체 (코들, 주피터)에서 결정해야하는 경우가 많기 때문이다.
+// https://www.figma.com/file/2p3WzTRpZQ97A37HVXM1Sc/master?type=design&node-id=402-48963&mode=design&t=YFltSOZZy7PAYK3x-0
 export var ZINDEX = {
+    FAB: 900,
+    GUIDE: 800,
+    ALERT: 700,
+    DIALOG: 600,
+    NAV: 500,
+    MOBILE_NAV_MODAL: 490,
     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.13.0",
+  "version": "0.14.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,