@edu-tosel/design 1.0.15 → 1.0.16

package/README.md

@@ -20,11 +20,6 @@ Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
 
 일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
 
-### Deck
-
-Deck 컴포넌트는 여러가지 Card 컴포넌트를 담고 있는 컨테이너이다.
-
-Deck 컴포넌트는 담고있는 Card 컴포넌트들을 수평 정렬한다.
 
 ### Layout
 

package/card/template/AddCard.d.ts

@@ -1,2 +1,2 @@
 import { AddCardProps } from "../../interface";
-export default function AddCard({ onClick, options }: AddCardProps): import("react/jsx-runtime").JSX.Element;
+export default function AddCard({ title, icon, onClick, options, }: AddCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/AddCard.js

@@ -1,11 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Card } from "../widget/Card";
-export default function AddCard({ onClick, options }) {
+export default function AddCard({ title, icon, onClick, options, }) {
     const { width } = options ?? {};
     const container = {
-        displays: "flex justify-center items-center",
-        text: "text-3xl",
+        displays: "flex flex-col justify-center items-center gap-2",
+        text: "text-xs",
+        styles: "duration-500 hover:bg-gray-light",
     };
-    return _jsx(Card, { options: { width, classNames: cn(container), onClick }, children: "+" });
+    const iconBody = {
+        displays: "flex items-center justify-center ",
+        sizes: "w-9 h-9",
+        styles: "bg-gray-light rounded-full",
+    };
+    return (_jsxs(Card, { options: { width, classNames: cn(container), onClick }, children: [icon && (_jsx("div", { className: cn(iconBody), children: _jsx("img", { src: icon }) })), title && _jsx("div", { children: title })] }));
 }

package/html/widget/Select.js

@@ -21,29 +21,39 @@ export default function Select({ state, selectOptions, options, }) {
             setIsActive(false);
         return setIsButton(false);
     }, [flag]);
+    const levelsKey = {
+        CoCoon: "CC",
+        "Pre-Starter": "PS",
+        Starter: "ST",
+        Basic: "BA",
+        Junior: "JR",
+        "High Junior": "HJ",
+    };
     const [isActive, setIsActive] = useState(false);
     const [isButton, setIsButton] = useState(false);
     const [selectedItem, setSelectedItem] = useState(null);
     const handleItemClick = (title) => {
         setSelectedItem(title);
         setIsActive(false);
+        const selectedValue = levelsKey[title] || title;
+        setValue(selectedValue);
     };
     // css
     const levels = [
         "CoCoon",
-        "PreStarter",
+        "Pre-Starter",
         "Starter",
         "Basic",
         "Junior",
-        "HighJunior",
+        "High Junior",
     ];
     const colorMap = {
         CoCoon: "bg-cocoon-green",
-        PreStarter: "bg-ps-pink",
+        "Pre-Starter": "bg-ps-pink",
         Starter: "bg-st-orange",
         Basic: "bg-ba-yellow",
         Junior: "bg-jr-blue",
-        HighJunior: "bg-hj-blue",
+        "High Junior": "bg-hj-blue",
     };
     const isActiveCss = () => {
         if (isActive)

package/index.d.ts

@@ -1,7 +1,6 @@
 import "./globals.css";
 export * from "./board";
 export * from "./card";
-export * from "./deck";
 export * from "./layout";
 export * from "./html";
 export * from "./interaction";

package/index.js

@@ -1,7 +1,6 @@
 import "./globals.css";
 export * from "./board";
 export * from "./card";
-export * from "./deck";
 export * from "./layout";
 export * from "./html";
 export * from "./interaction";

package/interface/Card.d.ts

@@ -86,6 +86,8 @@ export interface InfoCardProps extends CardProps {
     } & CardOptions;
 }
 export interface AddCardProps extends Omit<CardProps, "children"> {
+    title?: string;
+    icon?: string;
     onClick: OnClick;
 }
 export interface RowCardProps<T> {

package/interface/Modal.d.ts

@@ -1,6 +1,7 @@
 import { Button, Scripts, Size } from "./Property";
 export interface ModalProps {
     isVisible?: boolean;
+    event?: string;
     children: React.ReactNode;
     classNames?: string;
     options?: {

package/modal/template/Input.d.ts

@@ -1,6 +1,6 @@
 import { State } from "../../interface";
 import { ModalProps } from "../../interface/Modal";
-export default function Input<T>({ isVisible, title, options, state, }: Omit<ModalProps, "children"> & {
+export default function Input<T>({ isVisible, event, title, options, state, }: Omit<ModalProps, "children"> & {
     title?: string;
     state: State<T>;
 }): import("react/jsx-runtime").JSX.Element;

package/modal/template/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ModalDesign from "../widget/Modal.design";
-export default function Input({ isVisible, title, options, state, }) {
+export default function Input({ isVisible, event, title, options, state, }) {
     const { buttons } = options ?? {};
-    return (_jsxs(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
+    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
 }

package/modal/widget/Modal.design.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from "../../interface/Modal";
-export default function ModalDesign({ isVisible, children, options, debug, }: ModalProps): import("react").ReactPortal;
+export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal;

package/modal/widget/Modal.design.js

@@ -22,9 +22,9 @@ const heightSize = {
     "2xl": "w-2/3 min-w-76 max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ isVisible, children, options, debug, }) {
+export default function ModalDesign({ isVisible, event, children, options, debug, }) {
     const { buttons, width, height, closeButtonColor, isCloseButton } = options ?? {};
-    const { clearModal } = useWidgetStore();
+    const { setIsOwn, removeModal } = useWidgetStore();
     const background = {
         positions: "z-50 fixed top-0 left-0",
         displays: "flex items-center justify-center ",
@@ -60,5 +60,5 @@ export default function ModalDesign({ isVisible, children, options, debug, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && (_jsx("button", { className: cn(closeButton), onClick: clearModal, children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body);
+    return ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && event && (_jsx("button", { className: cn(closeButton), onClick: () => removeModal(event), children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -84,6 +84,7 @@ export default {
         "sun-calc": "calc(50% - 6rem)",
         1: "0.25rem",
         2.5: "0.625rem",
+        3.5: "0.875rem",
         3.75: "0.9375rem",
         4.75: "1.1875rem",
         6.25: "1.5625rem",

package/util/index.d.ts

@@ -2,6 +2,7 @@ export { default as cn } from "./classNames";
 export { default as unixToDate } from "./convertUnixTimestampToDate";
 export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
+export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
 export * from "./display";
 export * from "./displayResponsive";

package/util/index.js

@@ -2,6 +2,7 @@ export { default as cn } from "./classNames";
 export { default as unixToDate } from "./convertUnixTimestampToDate";
 export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
+export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
 export * from "./display";
 export * from "./displayResponsive";

package/version.txt

@@ -1 +1 @@
-1.0.15
+1.0.16

package/deck/index.d.ts

@@ -1 +0,0 @@
-export { default as Deck } from "./template/Deck";

package/deck/index.js

@@ -1 +0,0 @@
-export { default as Deck } from "./template/Deck";

package/deck/template/Deck.d.ts

@@ -1,6 +0,0 @@
-import { DeckProps } from "../../interface/Deck";
-declare function Deck<T extends string | number>(props: DeckProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace Deck {
-    var Sub: <T extends string | number>({ titles, children, options, debug, }: DeckProps<T>) => import("react/jsx-runtime").JSX.Element;
-}
-export default Deck;

package/deck/template/Deck.design.d.ts

@@ -1,2 +0,0 @@
-import { DeckProps } from "../../interface/Deck";
-export default function DeckDesign<T extends string | number>({ children, titles, options, debug, }: DeckProps<T>): import("react/jsx-runtime").JSX.Element;

package/deck/template/Deck.design.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, isDebug } from "../../util";
-import { Deck } from "./../widget/Deck";
-export default function DeckDesign({ children, titles, options, debug, }) {
-    const { title, subtitle, isSub } = titles ?? {};
-    const { height } = options ?? {};
-    const container = {
-        displays: "flex flex-col gap-4",
-        sizes: `w-full h-${height ?? "auto"} `,
-        debug: debug && isDebug(`border-2 border-${debug}`),
-    };
-    const titleBox = {
-        container: "flex flex-col gap-1",
-        title: {
-            text: isSub ? "text-base xl:text-lg" : "text-xl xl:text-2xl",
-            font: "font-bold",
-        },
-        subtitle: isSub ? "text-xs xl:text-sm" : "text-sm xl:text-base",
-    };
-    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx("div", { className: cn(titleBox.subtitle), children: subtitle })] })), _jsx(Deck, { children: children })] }));
-}

package/deck/template/Deck.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import DeckDesign from "./Deck.design";
-function Deck(props) {
-    return _jsx(DeckDesign, { ...props });
-}
-function Sub({ titles, children, options, debug, }) {
-    const { title, subtitle } = titles ?? { title: "" };
-    return (_jsx(DeckDesign, { titles: { title, subtitle, isSub: true }, debug: debug, ...options, children: children }));
-}
-Deck.Sub = Sub;
-export default Deck;

package/deck/widget/Deck.d.ts

@@ -1,2 +0,0 @@
-import { DeckProps } from "../../interface/Deck";
-export declare function Deck<T extends string | number>({ children, options, }: DeckProps<T>): import("react/jsx-runtime").JSX.Element;

package/deck/widget/Deck.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
-export function Deck({ children, options, }) {
-    const { flex, justify, gapX, gapY, overflowScroll } = options ?? {};
-    const body = {
-        displays: `flex flex-col flex-wrap gap-y-${gapY ?? 5}`,
-        flex: flex === "col" ? "sm:flex-col" : "sm:flex-row",
-        justify: `justify-${justify ?? "start"}`,
-        gapX: `${`gap-x-${gapX ?? 7.5}`}`,
-        sizes: "sm:w-full ",
-        styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
-    };
-    return _jsx("div", { className: cn(body), children: children });
-}

package/interface/Deck.d.ts

@@ -1,15 +0,0 @@
-import { Titles } from "./Property";
-export interface DeckProps<T> {
-    children: React.ReactNode;
-    titles?: Titles;
-    options?: {
-        flex?: "col" | "row";
-        justify?: "between";
-        overflowScroll?: boolean;
-        width?: T;
-        height?: number;
-        gapX?: number;
-        gapY?: number;
-    };
-    debug?: string;
-}

package/interface/Deck.js

@@ -1 +0,0 @@
-export {};