@edu-tosel/design 1.0.2 → 1.0.3

package/README.md

@@ -1,33 +1,47 @@
 # TOSEL Design Library
+
 TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
 
-## Tech Stack
-- tailwindcss 3.4.1
-- React 18
-- Vite 5
-
-## Getting Start
-```bash
-# 설치
-npm install @edu-tosel/ui@latest
-
-# 개발환경
-npm install # 의존성 설치
-npm run dev # 개발자 환경에서 실행
-npm run test # jest 실행
-npm run build # 빌드
-npm run publish # npm 배포
-```
-
-## Folder Structure
-### asset
-tailwindcss를 조합한 커스텀 클래스 보관
-
-### board
-### card
-### deck
-### header
-### modal
-### navigation
-### text
-문자열 조작 컴포넌트 보관
+## Component
+
+컴포넌트들은 기본적으로 기능 단위로만 구성한다.
+
+도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.
+
+### Board
+
+Board 컴포넌트는 가장 큰 단위의 컨테이너이다.
+
+일반적으로
+
+### Card
+
+Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
+
+일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
+
+### Deck
+
+Deck 컴포넌트는 여러가지 Card 컴포넌트를 담고 있는 컨테이너이다.
+
+Deck 컴포넌트는 담고있는 Card 컴포넌트들을 수평 정렬한다.
+
+### Layout
+
+Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.
+
+Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.
+
+### Navigation
+
+Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.
+
+각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.
+
+(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)
+
+### Shelf
+
+Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.
+
+Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.

package/board/index.d.ts

@@ -1,3 +1,3 @@
 import "../globals.css";
-export * from "./CanvasBoard";
-export * from "./ListBoard";
+export { default as CanvasBoard } from "./template/CanvasBoard";
+export { default as ManageBoard } from "./template/ManageBoard";

package/board/index.js

@@ -1,3 +1,3 @@
 import "../globals.css";
-export * from "./CanvasBoard";
-export * from "./ListBoard";
+export { default as CanvasBoard } from "./template/CanvasBoard";
+export { default as ManageBoard } from "./template/ManageBoard";

package/board/template/CanvasBoard.d.ts

@@ -0,0 +1,2 @@
+import { BoardProps } from "../../interface/Board";
+export default function CanvasBoard({ children, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/template/CanvasBoard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Board } from "../widget/Board";
+export default function CanvasBoard({ children, options }) {
+    const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
+    const sizes = "h-full ";
+    const paddings = "pb-36 xl:pb-0 px-2 xs:px-4 xl:pl-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
+    const styles = "overflow-y-scroll ";
+    return (_jsx(Board, { options: options, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
+}

package/board/template/ManageBoard.d.ts

@@ -0,0 +1,4 @@
+import { ManageBoardProps } from "../../interface/Board";
+type Item = Record<string, any>;
+export default function ManageBoard<T extends Item>({ header, data, subWidget, options, }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/board/template/ManageBoard.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Deck } from "../../deck";
+import { SideMenu } from "../../menu";
+import { cn } from "../../util";
+import { Board } from "../widget/Board";
+import BoardHeader from "../widget/Header";
+import BoardDataField from "../widget/DataField";
+import { useWidgetStore } from "../../store";
+export default function ManageBoard({ header, data, subWidget, options, }) {
+    const { order: [orderBy, orderHow], } = useWidgetStore();
+    const { dataSets, dataField, gap } = data;
+    const positions = `flex flex-col gap-${gap ?? 0}`;
+    const sizes = `h-full ${dataField ? "xl:h-135" : "xl:h-158"}`;
+    const paddings = "pb-60 xl:pb-0 px-2 xs:px-4 xl:pl-8";
+    const styles = "overflow-y-scroll";
+    return (_jsxs(Board, { options: options, children: [_jsx(BoardHeader, { ...header }), dataField && _jsx(BoardDataField, { dataField: dataField }), _jsx("div", { className: cn(positions, sizes, paddings, styles), children: dataSets.map(({ title: deckTitle, items, renderItem }) => deckTitle ? (_jsx("div", { className: "pt-4", children: _jsx(Deck, { titles: { title: deckTitle ?? "" }, children: items.map((item) => renderItem(item)) }) }, deckTitle)) : (items
+                    .slice()
+                    .sort((a, b) => {
+                    if (orderBy) {
+                        if (orderHow === "asc")
+                            return a[orderBy] > b[orderBy] ? 1 : -1;
+                        return a[orderBy] < b[orderBy] ? 1 : -1;
+                    }
+                    return 0;
+                })
+                    .map((item) => renderItem(item)))) }), subWidget && _jsx(SideMenu, {})] }));
+}

package/board/widget/Board.d.ts

@@ -0,0 +1,2 @@
+import { BoardProps } from "../../interface/Board";
+export declare function Board({ children, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Board.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidgetStore } from "../../store";
+import { cn } from "../../util";
+import { useState } from "react";
+export function Board({ children, options }) {
+    const { events } = useWidgetStore();
+    const { widgets, tabs } = options ?? {};
+    const classNames = [
+        `h-full xl:min-h-0 `,
+        "xl:rounded-xl bg-white relative w-full z-10 overflow-hidden",
+    ].join(" ");
+    return (_jsxs("div", { className: "h-full xl:min-h-0 xl:h-178 w-full relative ", children: [_jsxs("div", { className: classNames, children: [children, widgets?.map(([widgetEvent, Component]) => {
+                        return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
+                    })] }), tabs && _jsx(BottomTab, { tabs: tabs })] }));
+}
+function BottomTab({ tabs }) {
+    const [tabsSelection, setTabsSelection] = useState(tabs.map((_, i) => i === 0));
+    const positions = "xl:absolute xl:-bottom-14 xl:left-0 z-5";
+    const displays = "hidden xl:flex xl:items-end xl:gap-4";
+    const sizes = "xl:h-16";
+    const paddings = "xl:px-8 xl:pb-2 ";
+    const styles = "bg-white/50 rounded-b-xl ";
+    return (_jsx("div", { className: cn(displays, positions, sizes, paddings, styles), children: tabs.map(([title, onClick], index) => (_jsx("button", { onClick: () => {
+                setTabsSelection(tabsSelection.map((_, i) => i === index));
+                return onClick();
+            }, className: `h-9 w-32 rounded-md ${tabsSelection[index]
+                ? "border-4 border-blue-500"
+                : "border-4 border-red-500"}`, children: title }, title))) }));
+}

package/board/widget/DataField.d.ts

@@ -0,0 +1,6 @@
+export default function BoardDataField({ dataField, }: {
+    dataField: {
+        fields: Record<string, string>;
+        sizes: Record<string, string>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/widget/DataField.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { useWidgetStore } from "./../../store";
+export default function BoardDataField({ dataField, }) {
+    const { order: [orderBy, orderHow], setOrder, } = useWidgetStore();
+    const { fields, sizes } = dataField;
+    const container = {
+        positions: "fixed top-40 left-0  xl:static",
+        displays: "flex items-center",
+        styles: `bg-gray-200`,
+        sizes: "w-full h-23",
+    };
+    const dataFieldContainer = {
+        displays: "flex items-center",
+        sizes: "w-full h-12",
+        paddings: "px-2 xs:px-4 xl:pl-8 xl:pr-2 ",
+        styles: "bg-white-off",
+    };
+    const block = {
+        displays: "xl:hidden block ",
+        sizes: container.sizes,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container.positions, container.displays, container.sizes, container.styles), children: _jsx("div", { className: cn(dataFieldContainer.displays, dataFieldContainer.sizes, dataFieldContainer.paddings, dataFieldContainer.styles), children: Object.entries(fields).map(([key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100`} ?? "auto"}`, children: _jsxs("button", { onClick: () => setOrder(key), className: "flex items-center gap-1", children: [_jsx("div", { children: value }), _jsx("div", { className: "text-xs", children: orderBy === key ? (orderHow === "asc" ? "▼" : "▲") : "" })] }) }, key))) }) }), _jsx("div", { className: cn(block.sizes, block.displays) })] }));
+}

package/board/widget/Header.d.ts

@@ -0,0 +1,2 @@
+import { BoardHeaderProps } from "./../../interface/Board";
+export default function BoardHeader({ title, tags, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Header.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Input, Select } from "./Tags";
+export default function BoardHeader({ title, tags, options, }) {
+    const { selects, inputs } = tags ?? {};
+    const { colors } = options ?? {};
+    const { bgColor, textColor } = colors ?? {
+        bgColor: "gray-200",
+        textColor: "black",
+    };
+    const container = {
+        positions: "fixed top-20 left-0 xl:static flex items-center",
+        paddings: "px-12",
+        styles: `bg-${bgColor} text-${textColor} pl-12 pr-9`,
+        sizes: "w-full h-20",
+    };
+    const block = {
+        displays: "xl:hidden block ",
+        sizes: container.sizes,
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container.positions, container.paddings, container.sizes, container.styles), children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, onChange }) => (_jsx(Select, { width: width, title: title, selectOptions: options, onChange: onChange }, title))), inputs?.map(({ width, title, placeholder, onChange }) => (_jsx(Input, { width: width, title: title, placeholder: placeholder, onChange: onChange }, title + placeholder)))] })] }), _jsx("div", { className: cn(block.sizes, block.displays) })] }));
+}

package/board/widget/Tags.d.ts

@@ -0,0 +1,3 @@
+import { HTMLInputElement, HTMLSelectElement } from "../../interface/HTMLElement";
+export declare function Select({ title, width, onChange, selectOptions, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ title, onChange, placeholder, width, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/board/widget/Tags.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function Select({ title, width, onChange, selectOptions, }) {
+    const id = useId();
+    const widthSize = {
+        xs: "w-32",
+        sm: "w-48",
+        md: "w-64",
+        lg: "w-96",
+        xl: "w-128",
+        "2xl": "w-144",
+        full: "w-full",
+    };
+    const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+    return (_jsxs("div", { className: "flex justify-center items-center gap-4", children: [_jsx("label", { htmlFor: id, className: "font-bold", children: title }), _jsx("select", { id: id, onChange: (e) => onChange(e.target.value), className: classNames, children: selectOptions?.map(([id, title]) => (_jsx("option", { value: id, children: title }, id))) })] }));
+}
+export function Input({ title, onChange, placeholder, width, }) {
+    const id = useId();
+    const widthSize = {
+        xs: "w-28",
+        sm: "w-48",
+        md: "w-64",
+        lg: "w-96",
+        xl: "w-128",
+        "2xl": "w-144",
+        full: "w-full",
+    };
+    const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+    return (_jsxs("div", { className: "flex justify-center items-center gap-4", children: [_jsx("label", { htmlFor: id, className: "font-bold", children: title }), _jsx("input", { className: classNames, id: id, type: "text", placeholder: placeholder ?? "", onChange: (e) => onChange(e.target.value) })] }));
+}

package/card/index.d.ts

@@ -1,4 +1,5 @@
-export * from "./ProfileCard";
-export * from "./TrumpCard";
-export * from "./ChartCard";
-export * from "./TableCard";
+export * from "./template/ProfileCard";
+export * from "./template/TrumpCard";
+export * from "./template/ChartCard";
+export * from "./template/TableCard";
+export * from "./template/RowCard";

package/card/index.js

@@ -1,4 +1,5 @@
-export * from "./ProfileCard";
-export * from "./TrumpCard";
-export * from "./ChartCard";
-export * from "./TableCard";
+export * from "./template/ProfileCard";
+export * from "./template/TrumpCard";
+export * from "./template/ChartCard";
+export * from "./template/TableCard";
+export * from "./template/RowCard";

package/card/{ChartCard.d.ts → template/ChartCard.d.ts}

@@ -1,3 +1,2 @@
-import "../globals.css";
-import { ChartCardProps } from "../interface/Card";
+import { ChartCardProps } from "../../interface/Card";
 export declare function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;

package/card/{ChartCard.js → template/ChartCard.js}

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../globals.css";
 import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
-import { Card } from "./Card";
+import { Card } from "../widget/Card";
 export function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }) {
     return (_jsx(Card, { options: { width: "xl", height: "lg", text: { size: "xs" } }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey)))] }) }) }));
 }

package/card/{ProfileCard.js → template/ProfileCard.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from "./Card";
-import { colorsByLevel } from "../util";
+import { Card } from "../widget/Card";
+import { colorsByLevel } from "../../util";
 export function ProfileCard({ info, gradeData, }) {
     const { name, birthday, image } = info;
     const { level, score, grade } = gradeData ?? {};

package/card/template/RowCard.d.ts

@@ -0,0 +1,5 @@
+export default function RowCard<T extends Record<string, any>>({ row, fields, sizes, }: {
+    row: T;
+    fields: Partial<Record<keyof T, "text" | ["select", [string, string][]]>>;
+    sizes: Partial<Record<keyof T, string>>;
+}): import("react/jsx-runtime").JSX.Element;

package/card/template/RowCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "../widget/Card";
+import { useWidgetStore } from "../../store";
+import { useId, useState } from "react";
+export default function RowCard({ row, fields, sizes, }) {
+    const [rowState, setRowState] = useState(row);
+    const { setView, setTempData } = useWidgetStore();
+    const entries = Object.entries(fields).map(([key, type]) => [type, key, rowState[key]]);
+    return (_jsx(Card, { options: {
+            width: "full",
+            height: "xs",
+            boundary: "none",
+            rounded: "none",
+        }, children: _jsxs("div", { className: "flex items-center h-full", children: [entries.map(([type, key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100`} ?? "auto"}`, children: Array.isArray(type) && type[0] === "select" ? (_jsx(Select, { type: type, entry: [key, value], row: rowState, setRow: setRowState }, key + type + value.toString())) : (_jsx("div", { className: "w-full truncate", children: value ?? "No Data" }, key + value.toString())) }, key))), _jsx("button", { onClick: () => {
+                        setTempData(row);
+                        setView("sideMenu");
+                    }, children: "click" })] }) }));
+}
+function Select({ type, entry, row, setRow, }) {
+    const id = useId();
+    const [key, value] = entry;
+    return (_jsx("select", { value: value, onChange: (e) => setRow({
+            ...row,
+            [key]: e.target.value,
+        }), children: type[1].map(([value, title]) => (_jsx("option", { value: value, children: title }, id + value))) }, id));
+}

package/card/{TableCard.d.ts → template/TableCard.d.ts}

@@ -1,3 +1,2 @@
-import "../globals.css";
-import { TableCardProps } from "../interface/Card";
+import { TableCardProps } from "../../interface/Card";
 export declare function TableCard({ data, fields, sizes, options }: TableCardProps): import("react/jsx-runtime").JSX.Element;

package/card/{TableCard.js → template/TableCard.js}

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../globals.css";
-import { Card } from "./Card";
+import { Card } from "../widget/Card";
 export function TableCard({ data, fields, sizes, options }) {
     const { color } = options ?? {};
     const { background: bgColor, text: textColor } = color ?? {};

package/card/{TrumpCard.d.ts → template/TrumpCard.d.ts}

@@ -1,2 +1,2 @@
-import { TrumpCardProps } from "../interface/Card";
+import { TrumpCardProps } from "../../interface/Card";
 export declare function TrumpCard({ titles, options }: TrumpCardProps): import("react/jsx-runtime").JSX.Element;

package/card/{TrumpCard.js → template/TrumpCard.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LineBreaks } from "../text";
-import { Card } from "./Card";
+import { LineBreaks } from "../../text";
+import { Card } from "../widget/Card";
 export function TrumpCard({ titles, options }) {
     const { title, subTitle, color: titleColor } = titles;
     const { onClick, width, image, subButton } = options ?? {};

package/card/{Card.d.ts → widget/Card.d.ts}

@@ -1,3 +1,2 @@
-import "../globals.css";
-import { CardProps } from "../interface/Card";
+import { CardProps } from "../../interface/Card";
 export declare function Card({ children, options }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/widget/Card.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+const widthSize = {
+    xs: "w-full md:w-60",
+    sm: "w-full md:w-90",
+    md: "w-full md:w-112.5",
+    lg: "w-full md:w-127.5",
+    xl: "w-full lg:w-187.5",
+    "2xl": "w-full lg:w-247.5",
+    full: "w-full",
+};
+const heightSize = {
+    xs: "min-h-16",
+    sm: "h-72 sm:h-48",
+    md: "h-72 sm:h-48",
+    lg: "h-80",
+    xl: "h-125",
+    "2xl": "",
+};
+export function Card({ children, options }) {
+    const { boundary, rounded, height, width, text, onClick } = options ?? {};
+    const { size: textSize, color: textColor } = text ?? {};
+    const setBoundary = () => {
+        if (boundary === "shadow")
+            return "box-shadow";
+        if (boundary === "border")
+            return "border-2";
+        if (boundary === "none")
+            return "";
+        return "box-shadow";
+    };
+    const sizes = [
+        `${heightSize[height ?? "sm"]}`,
+        `${widthSize[width ?? "sm"]}`,
+    ].join(" ");
+    const positions = "relative";
+    const styles = [
+        `${onClick ? "cursor-pointer" : ""}`,
+        `text-${textSize ?? "base"}`,
+        setBoundary(),
+        `rounded-${rounded ?? "xl"}`,
+        `bg-white/80 duration-500  overflow-hidden`,
+    ].join(" ");
+    return (_jsx("div", { onClick: onClick, className: cn(sizes, positions, styles), children: children }));
+}

package/deck/Deck.d.ts

@@ -7,6 +7,7 @@ export declare function Deck<T extends string | number>({ children, titles, opti
         gapTitle?: number;
     };
     options?: {
+        overflowScroll?: boolean;
         width?: T;
         height?: number;
         gapX?: number;

package/deck/Deck.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../util";
 export function Deck({ children, titles, options, }) {
     const { title, subTitle, gapTitle } = titles ?? {};
-    const { height, gapX, gapY } = options ?? {};
-    const containerClassNames = [
-        `flex sm:w-full flex-col h-${height ?? "auto"} gap-${gapTitle ?? 4} `,
-    ].join(" ");
-    const bodyClassNames = [
-        `flex flex-col sm:flex-row sm:w-full `,
-        `gap-x-${gapX ?? 7.5} gap-y-${gapY ?? 5}`,
-        "duration-500",
-    ].join(" ");
-    return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: bodyClassNames, children: children })] }));
+    const { height, gapX, gapY, overflowScroll } = options ?? {};
+    const container = {
+        positions: `flex flex-col gap-${gapTitle ?? 4}`,
+        sizes: `sm:w-full  h-${height ?? "auto"} `,
+    };
+    const body = {
+        positions: `flex flex-col sm:flex-row sm:w-full gap-x-${gapX ?? 7.5} gap-y-${gapY ?? 5}`,
+        styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
+    };
+    return (_jsxs("div", { className: cn(container.positions, container.sizes), children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: cn(body.positions, body.styles), children: children })] }));
 }

package/globals.css

@@ -23,14 +23,14 @@
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 3px;
 }
 
 ::-webkit-scrollbar-track {
   background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #173a8b;
+  background-color: #808080;
   opacity: 0.5;
   border-radius: 10px;
 }

package/index.d.ts

@@ -3,6 +3,7 @@ export * from "./board";
 export * from "./card";
 export * from "./deck";
 export * from "./layout";
+export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
 export * from "./shelf";

package/index.js

@@ -3,6 +3,7 @@ export * from "./board";
 export * from "./card";
 export * from "./deck";
 export * from "./layout";
+export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
 export * from "./shelf";

package/interface/Board.d.ts

@@ -1,10 +1,49 @@
-/// <reference types="react" />
-export interface BoardProps {
-    children: React.ReactNode;
-    widget?: {
-        widgets: [[string, React.ReactNode]];
+import { Dispatch } from "react";
+import { Button, Size } from "./Property";
+export interface BoardHeaderProps {
+    title?: string;
+    tags?: {
+        selects?: {
+            title: string;
+            onChange: Dispatch<string>;
+            options: [string | number, string][];
+            width?: Size;
+        }[];
+        inputs?: {
+            title: string;
+            onChange: Dispatch<string>;
+            placeholder: string;
+            width?: Size;
+        }[];
     };
     options?: {
-        height?: number;
+        colors?: {
+            bgColor?: string;
+            textColor?: string;
+        };
+    };
+}
+export interface BoardProps {
+    children?: React.ReactNode;
+    options?: {
+        widgets?: [string, React.ReactNode][];
+        tabs?: Button[];
+        color?: string;
+    };
+}
+export interface ManageBoardProps<T> extends BoardProps {
+    data: {
+        dataSets: {
+            title?: string;
+            items: T[];
+            renderItem: (items: T) => React.ReactNode;
+        }[];
+        dataField?: {
+            fields: Record<string, string>;
+            sizes: Record<string, string>;
+        };
+        gap?: number;
     };
+    header?: BoardHeaderProps;
+    subWidget?: React.ReactNode;
 }

package/interface/Card.d.ts

@@ -15,6 +15,8 @@ import { ImageSize, Size } from "./Property";
 export interface CardProps {
     children: React.ReactNode;
     options?: {
+        boundary?: "shadow" | "border" | "none";
+        rounded?: string;
         height?: Size;
         width?: Size;
         text?: {
@@ -22,6 +24,7 @@ export interface CardProps {
             color?: string;
         };
         onClick?: () => unknown | (() => Promise<unknown>);
+        overflow?: "hiden" | "auto";
     };
 }
 export interface ChartCardProps {

package/interface/HTMLElement.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch } from "react";
+import { Size } from "./Property";
+export interface HTMLElement {
+    title: string;
+    onChange: Dispatch<string>;
+    width?: Size;
+}
+export interface HTMLSelectElement extends HTMLElement {
+    selectOptions?: [string | number, string][];
+}
+export interface HTMLInputElement extends HTMLElement {
+    placeholder?: string;
+}

package/interface/HTMLElement.js

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

package/interface/Property.d.ts

@@ -8,8 +8,10 @@
  * @property {"md"} md - Medium size
  * @property {"lg"} lg - Large size
  * @property {"xl"} xl - Extra large size
+ * @property {"2xl"} 2xl - Double extra large size
+ * @property {"full"} full - Full size
  */
-export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 /**
  * Image size type
  * @enum {string}

package/interface/Property.js

@@ -8,5 +8,7 @@
  * @property {"md"} md - Medium size
  * @property {"lg"} lg - Large size
  * @property {"xl"} xl - Extra large size
+ * @property {"2xl"} 2xl - Double extra large size
+ * @property {"full"} full - Full size
  */
 export {};

package/interface/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./Property";
 export * from "./Widget";
-export * from "./Board";

package/interface/index.js

@@ -1,3 +1,2 @@
 export * from "./Property";
 export * from "./Widget";
-export * from "./Board";

package/layout/dashboard/index.js

@@ -6,5 +6,5 @@ import { cn } from "../../util";
 export function DashboardLayout({ subject, colors, navigations, children, }) {
     const [title, image, imageUrl] = subject ?? ["", "", ""];
     const [bgColor, textColor] = colors ?? ["white", "black"];
-    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "flex gap-12 xl:gap-8 xl:pl-2 2xl:px-9 xl:pt-12 mt-20 xl:m-0", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen h-screen xl:h-auto font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "h-full flex gap-12 pt-20 xl:gap-8 xl:pl-2 2xl:px-9 xl:pt-10 xl:m-0 ", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/menu/SideMenu.d.ts

@@ -0,0 +1 @@
+export default function SideMenu(): import("react/jsx-runtime").JSX.Element;

package/menu/SideMenu.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetStore } from "../store";
+import { cn } from "../util";
+export default function SideMenu() {
+    const { tempData, clearTempData, events, removeView } = useWidgetStore();
+    const isOpen = events.some(({ event }) => event === "sideMenu");
+    const positions = "absolute top-20 right-0";
+    const sizes = `${isOpen ? "w-160" : "w-0"} h-full bg-gray-200`;
+    const styles = `${isOpen ? "opacity-100 z-30" : "opacity-0 z-0"} bg-gray-200 duration-500 `;
+    return (_jsx("div", { className: cn(positions, sizes, styles), children: _jsxs("div", { className: "relative w-full h-full", children: [_jsx("div", { children: Object.entries(tempData).map(([key, value]) => (_jsxs("div", { className: "text-2xl font-bold", children: [key, ": ", value] }, key))) }), _jsx("button", { onClick: () => {
+                        clearTempData();
+                        return removeView("sideMenu");
+                    }, className: "absolute left-0 top-2/5 text-3xl font-bold", children: ">" })] }) }));
+}

package/menu/index.d.ts

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

package/menu/index.js

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

package/modal/Modal.js

@@ -9,6 +9,7 @@ const widthSize = {
     lg: "w-full min-w-76 max-w-360",
     xl: "w-2/3 min-w-76 max-w-176",
     "2xl": "w-2/3 min-w-76 max-w-176",
+    full: "w-full",
 };
 const heightSize = {
     xs: "",
@@ -17,6 +18,7 @@ const heightSize = {
     lg: "h-120",
     xl: "h-180",
     "2xl": "w-2/3 min-w-76 max-w-176",
+    full: "h-full",
 };
 export function Modal({ children, options }) {
     const { buttons, width, height } = options ?? {};

package/navigation/Navigation.js

@@ -8,9 +8,7 @@ export const buttonClassNames = (href, nowPath, color) => {
         "font-bold w-full xl:w-50 h-11 xl:rounded-2xl flex justify-center xl:justify-start xl:pl-5",
     ].join(" ");
     const checkPathMatch = (href, nowPath) => {
-        if (href === "")
-            return !nowPath.slice(1).includes("/");
-        return nowPath.includes(href);
+        return href.split("/").pop() === nowPath.split("/").pop();
     };
     const toggle = checkPathMatch(href, nowPath)
         ? `bg-${bg}`
@@ -18,9 +16,9 @@ export const buttonClassNames = (href, nowPath, color) => {
     return [classNames, toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {
-    const layouts = "flex flex-row xl:flex-col z-40";
+    const displays = "flex flex-row xl:flex-col z-40";
     const positions = "fixed bottom-0 left-0 xl:static";
     const sizes = "w-full xl:w-auto";
     const styles = "";
-    return (_jsx("div", { className: cn(layouts, positions, sizes, styles), children: children }));
+    return (_jsx("div", { className: cn(displays, positions, sizes, styles), children: children }));
 }

package/package.json

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

package/shelf/Shelf.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare function Shelf({ children }: {
+export default function Shelf({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/shelf/Shelf.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function Shelf({ children }) {
-    return (_jsx("div", { className: "inline-flex flex-col gap-12 xl:w-auto", children: children }));
+export default function Shelf({ children }) {
+    return _jsx("div", { className: "inline-flex flex-col gap-8 xl:w-auto", children: children });
 }

package/shelf/index.d.ts

@@ -1 +1 @@
-export * from "./Shelf";
+export { default as Shelf } from "./Shelf";

package/shelf/index.js

@@ -1 +1 @@
-export * from "./Shelf";
+export { default as Shelf } from "./Shelf";

package/store/index.d.ts

@@ -2,9 +2,15 @@ import { WidgetEvent } from "../interface/Widget";
 interface WidgetProps {
     events: WidgetEvent[];
     setView: (prop: string) => void;
+    removeView: (prop: string) => void;
     setModal: (prop: string) => void;
     removeModal: (prop: string) => void;
     clearModal: () => void;
+    order: [string, "asc" | "desc"];
+    setOrder: (prop: string) => void;
+    tempData: Record<string, string | number>;
+    setTempData: (prop: Record<string, string | number>) => void;
+    clearTempData: () => void;
 }
 export declare const useWidgetStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WidgetProps>>;
 export {};

package/store/index.js

@@ -4,6 +4,24 @@ export const useWidgetStore = create((set) => ({
     setView: (prop) => set((state) => ({
         events: [...state.events, { event: prop, type: "view" }],
     })),
+    removeView: (prop) => {
+        set((state) => ({
+            events: state.events.filter(({ event }) => event !== prop),
+        }));
+    },
+    order: ["", "asc"],
+    setOrder: (prop) => {
+        set((state) => {
+            if (state.order[0] !== prop) {
+                return {
+                    order: [prop, "asc"],
+                };
+            }
+            return {
+                order: [prop, state.order[1] === "asc" ? "desc" : "asc"],
+            };
+        });
+    },
     setModal: (prop) => set((state) => ({
         events: [...state.events, { event: prop, type: "modal" }],
     })),
@@ -15,4 +33,7 @@ export const useWidgetStore = create((set) => ({
     clearModal: () => set((state) => ({
         events: state.events.filter(({ type }) => type !== "modal"),
     })),
+    tempData: {},
+    setTempData: (prop) => set((state) => ({ tempData: { ...state.tempData, ...prop } })),
+    clearTempData: () => set({ tempData: {} }),
 }));

package/tailwind.config.ts

@@ -56,57 +56,7 @@ export default {
         "hj-blue": "#385EAB",
         "hj-blue-light": "#A8BFE5",
       },
-      inset: {
-        "1/20": "5%",
-        "1/10": "10%",
-        "2/10": "5%",
-        "1/5": "20%",
-        "2/5": "40%",
-        "1/4": "25%",
-        "1/3": "33.3333333%",
-        "5/100": "5%",
-        "10/100": "10%",
-        "15/100": "15%",
-        "43/100": "43%",
-        "46/100": "46%",
-      },
-      width: {
-        "2/3": "66.6666667%",
-        "1/7": "14.2857143%",
-        "2/7": "28.5714286%",
-        "3/7": "42.8571429%",
-        "4/7": "57.1428571%",
-        "1/8": "12.5%",
-        "3/10": "30%",
-        "1/10": "10%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-        "10/100": "10%",
-        "12/100": "12%",
-        "15/100": "15%",
-        "35/100": "35%",
-        "45/100": "45%",
-        "55/100": "55%",
-        "65/100": "65%",
-        "85/100": "85%",
-        90: "22.5rem",
-        120: "30rem",
-        176: "44rem",
-        478: "478px",
-      },
-      height: {
-        "4/7": "57.1428571%",
-        "3/7": "42.8571429%",
-        "5/12": "41.6666667%",
-        "1/10": "10%",
-        "3/10": "30%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-      },
+
       maxHeight: {
         44: "11rem",
         "9/10": "90%",
@@ -116,17 +66,23 @@ export default {
         1: "0.25rem",
         7: "1.75rem",
         7.5: "1.875rem",
+        8: "2rem",
+        9: "2.25rem",
         11: "2.75rem",
         12: "3rem",
+        14: "3.5rem",
         15: "3.75rem",
+        16: "4rem",
         18: "4.5rem",
         19: "4.75rem",
         22: "5.5rem",
+        23: "5.75rem",
         25: "6.25rem",
         26: "6.5rem",
         27: "6.75rem",
         30: "7.5rem",
         34: "8.5rem",
+        36: "9rem",
         38: "9.5rem",
         40: "10rem",
         42: "10.5rem",
@@ -175,16 +131,21 @@ export default {
         140: "35rem",
         144: "36rem",
         148: "37rem",
+        158: "39.5rem",
         160: "40rem",
         164: "41rem",
         168: "42rem",
         172: "43rem",
         176: "44rem",
+        178: "44.5rem",
         180: "45rem",
         182: "45.5rem",
+        184: "46rem",
         186: "46.5rem",
         187.5: "46.875rem",
+        188: "47rem",
         190: "47.5rem",
+        192: "48rem",
         200: "50rem",
         216: "54rem",
         220: "55rem",
@@ -248,6 +209,7 @@ export default {
       },
       transitionDuration: {
         300: "300ms",
+        1000: "1000ms",
         2000: "2000ms",
         60000: "60000ms",
         300000: "300000ms",
@@ -301,6 +263,149 @@ export default {
         xl: "1280px",
         "2xl": "1536px",
       },
+      inset: {
+        "1/20": "5%",
+        "1/10": "10%",
+        "2/10": "5%",
+        "1/5": "20%",
+        "2/5": "40%",
+        "1/4": "25%",
+        "1/3": "33.3333333%",
+        "5/100": "5%",
+        "10/100": "10%",
+        "15/100": "15%",
+        "43/100": "43%",
+        "46/100": "46%",
+      },
+      width: {
+        90: "22.5rem",
+        120: "30rem",
+        176: "44rem",
+        "2/3": "66.6666667%",
+        "1/7": "14.2857143%",
+        "2/7": "28.5714286%",
+        "3/7": "42.8571429%",
+        "4/7": "57.1428571%",
+        "1/8": "12.5%",
+        "3/10": "30%",
+        "1/10": "10%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+        // percentile width
+        "1/100": "1%",
+        "2/100": "2%",
+        "3/100": "3%",
+        "4/100": "4%",
+        "5/100": "5%",
+        "6/100": "6%",
+        "7/100": "7%",
+        "8/100": "8%",
+        "9/100": "9%",
+        "10/100": "10%",
+        "11/100": "11%",
+        "12/100": "12%",
+        "13/100": "13%",
+        "14/100": "14%",
+        "15/100": "15%",
+        "16/100": "16%",
+        "17/100": "17%",
+        "18/100": "18%",
+        "19/100": "19%",
+        "20/100": "20%",
+        "21/100": "21%",
+        "22/100": "22%",
+        "23/100": "23%",
+        "24/100": "24%",
+        "25/100": "25%",
+        "26/100": "26%",
+        "27/100": "27%",
+        "28/100": "28%",
+        "29/100": "29%",
+        "30/100": "30%",
+        "31/100": "31%",
+        "32/100": "32%",
+        "33/100": "33%",
+        "34/100": "34%",
+        "35/100": "35%",
+        "36/100": "36%",
+        "37/100": "37%",
+        "38/100": "38%",
+        "39/100": "39%",
+        "40/100": "40%",
+        "41/100": "41%",
+        "42/100": "42%",
+        "43/100": "43%",
+        "44/100": "44%",
+        "45/100": "45%",
+        "46/100": "46%",
+        "47/100": "47%",
+        "48/100": "48%",
+        "49/100": "49%",
+        "50/100": "50%",
+        "51/100": "51%",
+        "52/100": "52%",
+        "53/100": "53%",
+        "54/100": "54%",
+        "55/100": "55%",
+        "56/100": "56%",
+        "57/100": "57%",
+        "58/100": "58%",
+        "59/100": "59%",
+        "60/100": "60%",
+        "61/100": "61%",
+        "62/100": "62%",
+        "63/100": "63%",
+        "64/100": "64%",
+        "65/100": "65%",
+        "66/100": "66%",
+        "67/100": "67%",
+        "68/100": "68%",
+        "69/100": "69%",
+        "70/100": "70%",
+        "71/100": "71%",
+        "72/100": "72%",
+        "73/100": "73%",
+        "74/100": "74%",
+        "75/100": "75%",
+        "76/100": "76%",
+        "77/100": "77%",
+        "78/100": "78%",
+        "79/100": "79%",
+        "80/100": "80%",
+        "81/100": "81%",
+        "82/100": "82%",
+        "83/100": "83%",
+        "84/100": "84%",
+        "85/100": "85%",
+        "86/100": "86%",
+        "87/100": "87%",
+        "88/100": "88%",
+        "89/100": "89%",
+        "90/100": "90%",
+        "91/100": "91%",
+        "92/100": "92%",
+        "93/100": "93%",
+        "94/100": "94%",
+        "95/100": "95%",
+        "96/100": "96%",
+        "97/100": "97%",
+        "98/100": "98%",
+        "99/100": "99%",
+        "100/100": "100%",
+      },
+      height: {
+        "4/7": "57.1428571%",
+        "3/7": "42.8571429%",
+        "5/12": "41.6666667%",
+        "1/10": "10%",
+        "3/10": "30%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+      },
     },
   },
   safelist: [

package/version.txt

@@ -1 +1 @@
-1.0.2
+1.0.3

package/board/Board.d.ts

@@ -1,2 +0,0 @@
-import { BoardProps } from "../interface/Board";
-export declare function Board({ children, widget, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/Board.js

@@ -1,14 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useWidgetStore } from "../store";
-export function Board({ children, widget, options }) {
-    const { events } = useWidgetStore();
-    const { height } = options ?? {};
-    const { widgets } = widget ?? {};
-    const classNames = [
-        `min-h-screen xl:min-h-0 xl:h-186 `,
-        "xl:rounded-xl bg-white/80 relative w-full ",
-    ].join(" ");
-    return (_jsxs("div", { className: classNames + "", children: [children, widgets?.map(([widgetEvent, Component]) => {
-                return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
-            })] }));
-}

package/board/CanvasBoard.d.ts

@@ -1,2 +0,0 @@
-import { BoardProps } from "../interface/Board";
-export declare function CanvasBoard({ children, widget, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/CanvasBoard.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../util";
-import { Board } from "./Board";
-export function CanvasBoard({ children, widget, options }) {
-    const { height } = options ?? {};
-    const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
-    const sizes = "h-full ";
-    const paddings = "pb-36 xl:pb-12 px-2 xs:px-4 xl:pl-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
-    const styles = "xl:overflow-y-scroll ";
-    return (_jsx(Board, { widget: widget, options: { height }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
-}

package/board/Header.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare function Header({ title, colors, childrens, }: {
-    title: string;
-    colors?: [string, string];
-    childrens?: React.ReactNode[];
-}): import("react/jsx-runtime").JSX.Element;

package/board/Header.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { between, center } from "../util";
-export function Header({ title, colors, childrens, }) {
-    const [bgColor, textColor] = colors ?? ["bg", "text"];
-    const headerClassNames = [
-        center.row + between.row,
-        `bg-${bgColor || "white-off"}`,
-        `text-${textColor || "black"}`,
-        "w-full h-22 px-12 ",
-    ].join(" ");
-    return (_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("div", { className: "flex", children: childrens?.map((children) => children) })] }));
-}

package/board/ListBoard.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare function ListBoard({ children, options, }: {
-    children: React.ReactNode;
-    options?: {
-        height?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;

package/board/ListBoard.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Board } from "./Board";
-export function ListBoard({ children, options, }) {
-    const { height } = options ?? {};
-    const classNames = ["pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
-    return (_jsx(Board, { options: { height }, children: _jsx("div", { className: classNames, children: children }) }));
-}

package/card/Card.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "../globals.css";
-import { cn } from "../util";
-const widthSize = {
-    xs: "md:w-60",
-    sm: "md:w-90",
-    md: "md:w-112.5",
-    lg: "md:w-127.5",
-    xl: "lg:w-187.5",
-    "2xl": "lg:w-247.5",
-};
-const heightSize = {
-    xs: "",
-    sm: "h-72 sm:h-48",
-    md: "h-72 sm:h-48",
-    lg: "h-80",
-    xl: "h-125",
-    "2xl": "",
-};
-export function Card({ children, options }) {
-    const { height, width, text, onClick } = options ?? {};
-    const { size: textSize, color: textColor } = text ?? {};
-    const sizes = [
-        `${heightSize[height ?? "sm"]}`,
-        `w-full ${widthSize[width ?? "sm"]}`,
-    ].join(" ");
-    const positions = "relative";
-    const styles = [
-        `${onClick ? "cursor-pointer" : ""}`,
-        `text-${textSize ?? "base"}`,
-        `rounded-xl bg-white/80 overflow-hidden box-shadow duration-500`,
-    ].join(" ");
-    return (_jsx("div", { onClick: onClick, className: cn(sizes, positions, styles), children: children }));
-}