@edu-tosel/design 1.0.26 → 1.0.28

package/html/index.d.ts

@@ -1,5 +1,5 @@
-export { default as DatePicker } from "./widget/DatePicker";
 export { default as Input } from "./widget/Input";
+export { default as Select } from "./template/Select";
+export { default as DatePicker } from "./widget/DatePicker";
 export { default as Label } from "./template/Label";
-export { default as Select } from "./widget/Select";
 export { default as Toggle } from "./widget/Toggle";

package/html/index.js

@@ -1,5 +1,5 @@
-export { default as DatePicker } from "./widget/DatePicker";
 export { default as Input } from "./widget/Input";
+export { default as Select } from "./template/Select";
+export { default as DatePicker } from "./widget/DatePicker";
 export { default as Label } from "./template/Label";
-export { default as Select } from "./widget/Select";
 export { default as Toggle } from "./widget/Toggle";

package/html/template/Select.d.ts

@@ -0,0 +1,3 @@
+import { HTMLSelectElement } from "../../interface";
+declare function Select<T extends string>(props: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/html/template/Select.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SelectDesign from "../widget/Select.design";
+function Select(props) {
+    return _jsx(SelectDesign, { ...props });
+}
+export default Select;

package/html/widget/Label.design.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../util";
+import Obstacle from "./Obstacle";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -29,10 +30,5 @@ export default function LabelDesign({ title, onClick, options, }) {
         fonts: "font-pretendard-light",
         styles: height !== "xs" ? "rounded-xl" : "rounded-md text-xs",
     };
-    const obstacle = {
-        positions: "absolute",
-        sizes: "w-full h-full",
-        background: "bg-white/80 ",
-    };
-    return (_jsx("div", { className: className, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) }))] }) }));
+    return (_jsx("div", { className: className, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled })] }) }));
 }

package/html/widget/Select.design.d.ts

@@ -0,0 +1,2 @@
+import { HTMLSelectElement } from "../../interface";
+export default function SelectDesign<T extends string>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;

package/html/widget/Select.design.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { cn } from "../../util";
+import { useTransition, animated } from "react-spring";
+const widthSize = {
+    xs: "w-10",
+    sm: "w-22.5",
+    md: "w-40",
+    lg: "w-50",
+};
+const heightSize = {
+    xs: "h-6.5",
+};
+export default function SelectDesign({ state, selectOptions, placeholder, options, }) {
+    const id = useId();
+    const [value, setValue] = state;
+    const [text, setText] = useState("");
+    const [search, setSearch] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [filteredOptions, setFilterdOptions] = useState([]);
+    const [index, setIndex] = useState();
+    const onKeyDown = (e) => {
+        if (!filteredOptions)
+            return;
+        if (typeof index === "undefined")
+            return setIndex(0);
+        if (e.key === "Enter") {
+            setText(filteredOptions[index][1]);
+            return setValue(filteredOptions[index][0]);
+        }
+        if (e.key === "ArrowDown")
+            return setIndex((index + 1) % filteredOptions.length);
+        if (e.key === "ArrowUp")
+            return setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
+    };
+    useEffect(() => {
+        setFilterdOptions(selectOptions?.filter(([_, text]) => text.includes(search)));
+    }, [search, selectOptions]);
+    const isLong = selectOptions && selectOptions.length >= 4;
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col",
+    };
+    const button = {
+        displays: "flex items-center",
+        sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "xs"]}`,
+        styles: "pl-1 rounded-md box-shadow focus:outline-none",
+    };
+    const input = {
+        positions: "absolute",
+        layouts: cn(button),
+        styles: "focus:outline-none text-xs pl-1.5",
+    };
+    const body = {
+        positions: "absolute",
+        displays: "flex flex-col gap-1",
+        sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-23.75`,
+        paddings: "pl-1 py-1",
+        styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
+    };
+    const label = {
+        displays: "flex",
+        sizes: "h-4.5 hover:w-full",
+        paddings: "px-1",
+        styles: "rounded-sm duration-500",
+        fonts: "text-xs text-gray-dim bg-gray-light",
+    };
+    const inputTransition = useTransition(isOpen, {
+        from: {
+            opacity: 0,
+            top: 0,
+        },
+        enter: {
+            opacity: 1,
+            top: 32,
+            config: { duration: 150 },
+        },
+        leave: {
+            opacity: 0,
+            top: 0,
+            config: { duration: 0 },
+        },
+    });
+    const bodyTransitions = useTransition(isOpen, {
+        from: {
+            opacity: 0,
+            top: 0,
+        },
+        enter: {
+            opacity: 1,
+            top: isLong ? 64 : 32,
+            config: { duration: 150 },
+        },
+        leave: {
+            opacity: 0,
+            top: 0,
+            config: { duration: 0 },
+        },
+    });
+    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+                item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
+                return (item && (_jsx(animated.div, { style: styles, className: cn(body), children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { onClick: () => {
+                                setValue(value);
+                                setText(text);
+                                return setIsOpen(false);
+                            }, className: cn(label, order === index ? "w-full" : "w-auto"), children: text }) }, id + value))) })));
+            })] }));
+}

package/interface/Board.d.ts

@@ -1,6 +1,6 @@
 import { DataField, Size, State, Titles } from "./Property";
 import { EventsProps } from "./Widget";
-import { HTMLInputElement, HTMLLabelElement } from "./HTMLElement";
+import { HTMLInputElement, HTMLLabelElement, SelectOption } from "./HTMLElement";
 interface OptionsProps {
     classNames?: string;
     width?: Size;
@@ -25,7 +25,7 @@ export interface BoardHeaderProps {
         selects?: {
             title: string;
             state: State<string>;
-            options: [string | number, string][];
+            options: SelectOption<string>[];
             width?: Size;
         }[];
         inputs?: HTMLInputElement[];

package/interface/HTMLElement.d.ts

@@ -21,9 +21,11 @@ export interface HTMLLabelElement extends HTMLElement {
     title: string;
     onClick?: OnClick;
 }
-export interface HTMLSelectElement extends HTMLElement {
-    state: State<string>;
-    selectOptions?: [string | number, string][];
+export type SelectOption<T> = [T, string];
+export interface HTMLSelectElement<T> extends HTMLElement {
+    state: State<T>;
+    selectOptions?: SelectOption<T>[];
+    placeholder?: string;
 }
 export interface HTMLInputElement extends HTMLElement {
     state: State<string> | State<string | undefined>;
@@ -34,3 +36,12 @@ export interface HTMLToggleElement extends HTMLElement {
     state: State<boolean>;
     labels: [[true, string], [false, string]];
 }
+export interface HTMLElementFrame {
+    title: string;
+    type: HTMLElementType;
+    state: State<any>;
+    selectOptions?: SelectOption<string | number>[];
+    labels?: [string | boolean, string][];
+    disabled?: Disabled;
+    onClick?: OnClick;
+}

package/interface/Overlay.d.ts

@@ -1,20 +1,11 @@
-import { HTMLElementType, HTMLLabelElement } from "./HTMLElement";
-import { Disabled, OnClick, State, Titles } from "./Property";
+import { HTMLElementFrame, HTMLLabelElement } from "./HTMLElement";
+import { Titles } from "./Property";
 export interface OverlayProps {
     titles: Titles;
     isVisible?: boolean;
     event?: string;
     children?: React.ReactNode;
 }
-export interface HTMLElementFrame {
-    title: string;
-    type: HTMLElementType;
-    state: State<any>;
-    selectOptions?: [string | number, string][];
-    labels?: [string | boolean, string][];
-    disabled?: Disabled;
-    onClick?: OnClick;
-}
 export interface InfoOverlayProps extends OverlayProps {
 }
 export interface ManageOverlayProps extends OverlayProps {

package/overlay/template/Manage.js

@@ -7,7 +7,7 @@ import { cn } from "../../util";
 export default function Manage({ titles, isVisible, event, elements, buttons, }) {
     const id = useId();
     const body = {
-        sizes: "w-full xl:h-120 ",
+        sizes: "w-full min-h-160 xl:h-120 ",
         styles: "overflow-y-scroll",
     };
     return (_jsxs(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: [_jsx("div", { className: cn(body), children: elements?.map(({ title, type, labels, state, selectOptions, disabled }) => {

package/package.json

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

package/tailwind.config.ts

@@ -87,11 +87,13 @@ export default {
       },
       spacing: {
         "sun-calc": "calc(50% - 6rem)",
+        0.5: "0.125rem",
         1: "0.25rem",
         2.5: "0.625rem",
         3.5: "0.875rem",
         3.75: "0.9375rem",
         4.25: "1.0625rem",
+        4.5: "1.125rem",
         4.75: "1.1875rem",
         5.25: "1.3125rem",
         5.75: "1.4375rem",
@@ -103,6 +105,7 @@ export default {
         8: "2rem",
         9: "2.25rem",
         9.25: "2.3125rem",
+        9.5: "2.375rem",
         10.25: "2.5625rem",
         11: "2.75rem",
         11.25: "2.8125rem",
@@ -129,6 +132,7 @@ export default {
         22: "5.5rem",
         22.5: "5.625rem",
         23: "5.75rem",
+        23.75: "5.9375rem",
         25: "6.25rem",
         26: "6.5rem",
         27: "6.75rem",

package/version.txt

@@ -1 +1 @@
-1.0.26
+1.0.28

package/html/widget/Select.d.ts

@@ -1,2 +0,0 @@
-import { HTMLSelectElement } from "../../interface";
-export default function Select({ state, selectOptions, options, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Select.js

@@ -1,170 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { BiChevronDown } from "react-icons/bi";
-import { useWidgetStore } from "../../store";
-import { cn } from "../../util";
-const widthSize = {
-    xs: "w-32",
-    sm: "w-48",
-    md: "w-64",
-    lg: "w-96",
-    xl: "w-128",
-    "2xl": "w-144",
-    full: "w-full",
-};
-export default function Select({ state, selectOptions, options, }) {
-    const [value, setValue] = state;
-    // isActive 드롭다운 이벤트 통제
-    const { flag } = useWidgetStore();
-    useEffect(() => {
-        if (!isButton)
-            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",
-        "Pre-Starter",
-        "Starter",
-        "Basic",
-        "Junior",
-        "High Junior",
-    ];
-    const colorMap = {
-        CoCoon: "bg-cocoon-green",
-        "Pre-Starter": "bg-ps-pink",
-        Starter: "bg-st-orange",
-        Basic: "bg-ba-yellow",
-        Junior: "bg-jr-blue",
-        "High Junior": "bg-hj-blue",
-    };
-    const isActiveCss = () => {
-        if (isActive)
-            return `shadow-md border-inner rounded-md`;
-    };
-    const tagCss = `bg-slate-200 p-1 pl-2 pr-2 rounded-md`;
-    const dropdownTop = selectOptions && selectOptions.length > 6 ? "top-24" : "top-12";
-    const { width } = options ?? {};
-    const dropdown = {
-        size: `w-40 h-6`,
-        styles: "cursor-pointer pt-4 pb-4 pl-2 pr-4 font-pretendard-bold text-xs bg-white",
-        display: `flex items-center`,
-        hover: `hover:rounded-md`,
-        effect: `transition-all`,
-        function: `${isActiveCss()}`,
-        etc: "box-inner-shadow",
-    };
-    const dropdownInput = {
-        size: `w-40 h-6 `,
-        styles: "shadow-md text-xs pt-4 pb-4 pl-2 pr-4 font-pretendard-bold bg-white text-left cursor-text border-1 rounded-md ",
-        display: "absolute top-12 flex items-center z-10 ",
-        focus: "focus:outline-none focus:border-[#44C5F3] focus:border-1 ",
-    };
-    const dropdownContent = {
-        size: `w-40 min-h-6 max-h-48 overflow-y-auto `,
-        styles: `text-xs mt-1 border-1 rounded-md shadow-md`,
-        display: `absolute z-40`,
-        function: `${dropdownTop}`,
-    };
-    const dropdownItem = {
-        size: `${widthSize[width ?? "full"]} h-6 `,
-        styles: `text-xs text-left pt-4 pb-4 pl-2 pr-4 font-pretendard-bold cursor-pointer `,
-        display: `flex items-center z-40`,
-        hover: `hover:bg-slate-200 `,
-        effect: `transition-all `,
-    };
-    // input
-    const [searchTerm, setSearchTerm] = useState("");
-    const filteredOptions = selectOptions?.filter(([_, title]) => title.toLowerCase().includes(searchTerm.toLowerCase())) || [];
-    // Keyboard event handling
-    const [selectedIndex, setSelectedIndex] = useState(-1);
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (!isActive)
-                return;
-            // Arrow Up
-            if (event.key === "ArrowUp") {
-                event.preventDefault();
-                const currentIndex = filteredOptions.findIndex(([_, title]) => title === selectedItem);
-                const newIndex = currentIndex === -1
-                    ? 0
-                    : (currentIndex - 1 + filteredOptions.length) %
-                        filteredOptions.length;
-                setSelectedItem(filteredOptions[newIndex][1]);
-                setSelectedIndex(newIndex);
-            }
-            // Arrow Down
-            if (event.key === "ArrowDown") {
-                event.preventDefault();
-                const currentIndex = filteredOptions.findIndex(([_, title]) => title === selectedItem);
-                const newIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % filteredOptions.length;
-                setSelectedItem(filteredOptions[newIndex][1]);
-                setSelectedIndex(newIndex);
-            }
-            // Enter
-            if (event.key === "Enter") {
-                if (selectedItem) {
-                    setIsActive(false);
-                    setValue(selectedItem);
-                }
-            }
-            // Esc
-            if (event.key === "Escape") {
-                setIsActive(false);
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        // 선택된 항목 스크롤을 조정하는 함수
-        const scrollIntoView = () => {
-            if (selectedIndex === -1)
-                return;
-            const dropdownContent = document.querySelector(".dropdown-content");
-            if (!dropdownContent)
-                return;
-            const selectedItemElement = dropdownContent.children[selectedIndex];
-            if (!selectedItemElement)
-                return;
-            const dropdownRect = dropdownContent.getBoundingClientRect();
-            const selectedItemRect = selectedItemElement.getBoundingClientRect();
-            if (selectedItemRect.top < dropdownRect.top) {
-                dropdownContent.scrollTop -= dropdownRect.top - selectedItemRect.top;
-            }
-            else if (selectedItemRect.bottom > dropdownRect.bottom) {
-                dropdownContent.scrollTop +=
-                    selectedItemRect.bottom - dropdownRect.bottom;
-            }
-        };
-        scrollIntoView();
-        window.addEventListener("resize", scrollIntoView);
-        return () => {
-            window.removeEventListener("keydown", handleKeyDown);
-            window.removeEventListener("resize", scrollIntoView);
-        };
-    }, [isActive, selectedIndex, filteredOptions, selectedItem, setValue]);
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: cn(dropdown), onClick: () => {
-                    setIsActive(!isActive);
-                    setIsButton(true);
-                }, children: [_jsx("div", { className: `w-4 h-4 mr-2 ${selectedItem && colorMap[selectedItem]
-                            ? colorMap[selectedItem]
-                            : "hidden"}` }), _jsx("div", { className: `${!selectedItem || levels.includes(selectedItem) ? "" : tagCss}`, children: selectedItem || (_jsx("span", { className: "text-zinc-400", children: "\uC635\uC158\uC744 \uC120\uD0DD\uD558\uC138\uC694" })) }), isActive && _jsx(BiChevronDown, { className: "ml-auto" })] }), isActive && selectOptions && selectOptions.length > 6 && (_jsx("input", { type: "text", placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(dropdownInput), value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })), isActive && filteredOptions && (_jsx("div", { className: "dropdown-content " + cn(dropdownContent), children: filteredOptions.map(([id, title], index) => (_jsxs("div", { className: cn(dropdownItem) +
-                        (selectedIndex === index ? "bg-slate-200" : "bg-white"), onClick: () => handleItemClick(title), children: [_jsx("div", { className: `w-4 h-4 mr-2 ${colorMap[title] && levels.includes(title)
-                                ? colorMap[title]
-                                : "hidden"}` }), _jsx("div", { className: `${levels.includes(title) ? "" : tagCss}`, children: title })] }, id))) }))] }));
-}