@edu-tosel/design 1.0.13 → 1.0.14

package/board/template/CanvasBoard.d.ts

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

package/board/template/CanvasBoard.js

@@ -1,10 +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 }) {
+export default function CanvasBoard({ children, options, widgets, }) {
     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, isRounded: true }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
+    return (_jsx(Board, { widgets: widgets, options: { ...options, isRounded: true }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
 }

package/board/template/ManageBoard.d.ts

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

package/board/template/ManageBoard.js

@@ -1,27 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Deck } from "../../deck";
-import { cn } from "../../util";
+import { Events, Shelf } from "../..";
 import { Board } from "../widget/Board";
 import BoardHeader from "../widget/Header";
 import BoardDataField from "../widget/DataField";
+import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
-import { Exception } from "../../interaction";
-export default function ManageBoard({ header, data, widgets, }) {
-    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:px-8";
-    const styles = "overflow-y-scroll";
-    return (_jsxs(Board, { widgets: widgets, options: { isRounded: true }, children: [_jsx(BoardHeader, { ...header }), dataField && _jsx(BoardDataField, { dataField: dataField }), _jsx("div", { className: cn(positions, sizes, paddings, styles), children: _jsx(Exception, { exceptions: widgets?.exceptions, 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)))) }) }), widgets?.menu] }));
+import { useId } from "react";
+export default function ManageBoard({ header, data, widgets, options }) {
+    const { classNames, noPadding } = options ?? {};
+    const { dataSets, dataField } = data;
+    const { order } = useWidgetStore();
+    const id = useId();
+    const orders = order[id] ?? [];
+    const container = {
+        displays: "flex flex-col gap-8",
+        sizes: `h-full ${header ? (dataField ? "xl:h-135" : "xl:h-158") : "xl:h-full"}`,
+        paddings: `${!noPadding ? "pt-8 pb-60 px-2 xs:px-4 xl:px-8 xl:pb-6 " : ""}`,
+        styles: "overflow-y-scroll",
+    };
+    return (_jsxs(Board, { widgets: widgets, options: { isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(BoardDataField, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: dataSets.map(({ title, subtitle, items, renderItem, interaction }) => (_jsxs(Shelf.Wrap, { titles: { title: title ?? "", subtitle: subtitle }, classNames: classNames, children: [items &&
+                                sortByOrder(items, orders)?.map((item) => renderItem(item)), interaction] }, id + title))) }) })] }));
 }

package/board/template/PaperBoard.d.ts

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

package/board/template/PaperBoard.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Board } from "../widget/Board";
-export default function PaperBoard({ children, debug }) {
+export default function PaperBoard({ children, debug, options, }) {
+    const { classNames } = options ?? {};
     const container = {
-        displays: "flex flex-col items-center gap-7.5",
-        paddings: "px-4 pt-5 pb-16",
+        displays: "flex flex-col gap-7.5",
     };
-    return (_jsx(Board, { options: { width: "lg", height: "full", isRounded: false }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
+    return (_jsx(Board, { options: { width: "lg", height: "full", isRounded: false, classNames }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
 }

package/board/widget/Board.js

@@ -1,7 +1,6 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useWidgetStore } from "../../store";
-import Tab from "./Tab";
-import { cn } from "../../util";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, isDebug } from "../../util";
+import { Events } from "../../layout";
 const widthSize = {
     xs: "w-20",
     sm: "w-24",
@@ -23,23 +22,18 @@ const heightSize = {
     auto: "h-auto",
 };
 export function Board({ children, widgets, options, debug }) {
-    const { events } = useWidgetStore();
-    const { components, tabs } = widgets ?? {};
-    const { width, height, isRounded } = options ?? {};
+    const { shows } = widgets ?? {};
+    const { width, height, isRounded, classNames } = options ?? {};
     const container = {
         positions: "relative",
         width: widthSize[width ?? "full"],
-        debug: debug && import.meta.env.MODE && `border-2  border-${debug}`,
+        debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const body = {
         positions: "relative z-10 ",
         sizes: `w-full ${heightSize[height ?? "lg"]} overflow-hidden `,
-        styles: "bg-white",
+        styles: "bg-white text-black",
         rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(body), children: [children, components?.map(([flag, Component]) => {
-                        if (typeof flag === "boolean")
-                            return flag ? _jsx(_Fragment, { children: Component }) : null;
-                        return events?.some(({ event }) => event === flag) ? (_jsx(_Fragment, { children: Component })) : null;
-                    })] }), tabs && _jsx(Tab, { tabs: tabs })] }));
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), children: _jsx(Events.Show, { widgets: shows, children: _jsx("div", { className: "h-full " + classNames, children: children }) }) }) }));
 }

package/board/widget/DataField.d.ts

@@ -1,6 +1,9 @@
-export default function BoardDataField({ dataField, }: {
-    dataField: {
-        fields: Record<string, string>;
-        sizes: Record<string, string>;
+import { DataField } from "../../interface";
+export default function BoardDataField<K extends string, T extends {
+    [p in K]: any;
+}>({ id, dataField, }: {
+    id: string;
+    dataField?: {
+        [p in keyof T]: DataField;
     };
 }): import("react/jsx-runtime").JSX.Element;

package/board/widget/DataField.js

@@ -1,11 +1,11 @@
 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;
+export default function BoardDataField({ id, dataField, }) {
+    const { order, setOrder } = useWidgetStore();
+    const orders = order[id] ?? [];
     const container = {
-        positions: "fixed top-40 left-0  xl:static",
+        positions: "fixed top-35 left-0 xl:static z-20",
         displays: "flex items-center",
         styles: `bg-gray-200`,
         sizes: "w-full h-23",
@@ -20,5 +20,15 @@ export default function BoardDataField({ dataField, }) {
         displays: "xl:hidden block ",
         sizes: container.sizes,
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(dataFieldContainer), 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) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(dataFieldContainer), children: dataField &&
+                        Object.entries(dataField).map(([key, { title, size }]) => (_jsx("div", { className: `w-${size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center gap-1", children: [_jsx("div", { children: title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
+                                            if (orderBy === key) {
+                                                if (orderHow === "asc")
+                                                    return "▲";
+                                                else if (orderHow === "desc")
+                                                    return "▼";
+                                                else
+                                                    return "";
+                                            }
+                                        }) })] }) }, id + key))) }) }), _jsx("div", { className: cn(block) })] }));
 }

package/board/widget/Header.js

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

package/board/widget/Tags.d.ts

@@ -1,3 +1,14 @@
-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;
+import { Dispatch } from "react";
+import { Size } from "../../interface";
+export declare function Select({ title, width, onChange, selectOptions, }: {
+    title: string;
+    width?: Size;
+    onChange: Dispatch<string>;
+    selectOptions?: [string | number, string][];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ title, onChange, placeholder, width, }: {
+    title: string;
+    onChange: Dispatch<string>;
+    placeholder?: string;
+    width?: Size;
+}): import("react/jsx-runtime").JSX.Element;

package/card/index.d.ts

@@ -1,3 +1,4 @@
+export { default as AddCard } from "./template/AddCard";
 export { default as ProfileCard } from "./template/ProfileCard";
 export { default as TrumpCard } from "./template/TrumpCard";
 export { default as ChartCard } from "./template/ChartCard";

package/card/index.js

@@ -1,3 +1,4 @@
+export { default as AddCard } from "./template/AddCard";
 export { default as ProfileCard } from "./template/ProfileCard";
 export { default as TrumpCard } from "./template/TrumpCard";
 export { default as ChartCard } from "./template/ChartCard";

package/card/template/AddCard.d.ts

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

package/card/template/AddCard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Card } from "../widget/Card";
+export default function AddCard({ onClick, options }) {
+    const { width } = options ?? {};
+    const container = {
+        displays: "flex justify-center items-center",
+        text: "text-3xl",
+    };
+    return _jsx(Card, { options: { width, classNames: cn(container), onClick }, children: "+" });
+}

package/card/template/ChartCard.js

@@ -5,7 +5,7 @@ export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, opti
     const { width, height } = options ?? {};
     return (_jsxs(Card, { options: {
             classNames: "pt-4 pr-4",
-            width: width ?? "xl",
+            width: width ?? "full",
             height: 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, {}), _jsx(Legend, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey))), average && (_jsx(_Fragment, { children: _jsx(ReferenceLine, { x: average.x, stroke: "#ff0000" }) }))] }) }), average && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center text-3xl text-gray-300 font-bold", children: ["\uD3C9\uADE0: ", average?.score, "\uC810"] }))] }));

package/card/template/InfoCard.d.ts

@@ -1,2 +1,32 @@
-import { InfoCardProps } from "../../interface/Card";
-export default function InfoCard({ type, titles, button }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+import { InfoCardProps, Button } from "../../interface";
+declare function Exam({ titles, data, }: Omit<InfoCardProps, "children"> & {
+    data: {
+        status: string;
+        examDate: string;
+        endDate: string;
+        manager: string;
+        isPublic: boolean;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+declare function Product({ titles, data, }: Omit<InfoCardProps, "children"> & {
+    data: {
+        date?: string;
+        status?: string;
+        receiver?: string | null;
+        requester?: string | null;
+        button?: Button;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+declare function Item({ titles, data, }: Omit<InfoCardProps, "children"> & {
+    data: {
+        item: string;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+declare function Profile(props: Partial<InfoCardProps>): import("react/jsx-runtime").JSX.Element;
+declare const InfoCard: {
+    Exam: typeof Exam;
+    Product: typeof Product;
+    Item: typeof Item;
+    Profile: typeof Profile;
+};
+export default InfoCard;

package/card/template/InfoCard.design.d.ts

@@ -0,0 +1,2 @@
+import { InfoCardProps } from "../../interface/Card";
+export declare function InfoCardDesign({ titles: { title, subtitle }, debug, options, children, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard.design.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Card } from "../widget/Card";
+export function InfoCardDesign({ titles: { title, subtitle }, debug, options, children, }) {
+    const { titleBorderColor, rightTextColor } = options ?? {};
+    const container = {
+        paddings: "pt-5 px-5",
+    };
+    const topBox = {
+        container: {
+            displays: "flex justify-between",
+            sizes: "w-full h-13.25",
+            styles: `border-${titleBorderColor} border-b-2 pb-2.5`,
+        },
+        titleText: "h-6 font-bold text-lg ",
+        subtitleText: "h-5 text-sm font-extralight",
+        right: {
+            fontColor: `text-${rightTextColor ?? "black"}`,
+            displays: "flex flex-col-reverse",
+        },
+    };
+    return (_jsxs(Card, { options: { ...options, classNames: cn(container) }, debug: debug, children: [_jsx("div", { className: cn(topBox.container), children: _jsxs("div", { children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "No Data" })] }) }), children] }));
+}

package/card/template/InfoCard.js

@@ -1,9 +1,73 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from "../widget/Card";
-import { sizeBySetting, bgColorBySetting, lineColorBySetting, fontColorBySetting, btnSizeBySetting, } from "./InfoCardCssCase";
-export default function InfoCard({ type, titles, button }) {
-    return (_jsx(Card, { options: {
-            width: sizeBySetting.widthSize[type],
-            height: sizeBySetting.heightSize[type],
-        }, children: _jsxs("div", { className: "relative w-full h-full p-5 bg-" + `${bgColorBySetting[type]}`, children: [_jsxs("div", { className: `h-18 w-full border-b-2 border-[${lineColorBySetting[type]}] flex justify-between`, children: [_jsxs("div", { className: "w-auto", children: [_jsx("div", { className: "h-9 font-bold text-xl text-" + `${titles.color}`, children: titles.title }), _jsx("div", { className: "h-8 text-md font-thin ", children: titles.subTitle })] }), _jsx("div", { className: `w-auto flex flex-col-reverse text-${fontColorBySetting} p-2`, children: _jsx("span", { className: `text-xs font-thin font-semibold inline-block align-bottom `, children: "\uC218\uC815\uD558\uAE30" }) })] }), _jsx("div", {}), _jsx("div", { className: `absolute bottom-4 right-4 ${button.display}`, children: _jsx("button", { className: `text-white rounded-md bg-${button.color} ${btnSizeBySetting[type]} flex justify-center items-center`, children: button.title }) })] }) }));
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../util";
+import { InfoCardDesign } from "./InfoCard.design";
+function Exam({ titles, data, }) {
+    const { status, isPublic, manager, examDate, endDate } = data;
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col gap-6.5 pt-2.5",
+        sizes: "h-25 w-full",
+    };
+    const style = {
+        positions: "absolute bottom-0 right-0",
+        sizes: "w-22 h-6",
+        displays: "flex justify-center items-center",
+        styles: "text-black rounded-md text-sm",
+        background: `bg-gray-light`,
+    };
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorderColor: "red-crimson",
+            rightTextColor: "red-crimson",
+            width: "sm",
+            height: "sm",
+            buttonBackgroundColor: "gray-light",
+        }, children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-bold", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-sm", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-sm", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] }), _jsx("div", { className: cn(style), children: status })] }) }));
 }
+function Product({ titles, data, }) {
+    const { date, status, receiver, requester, button } = data;
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col pt-2.5",
+        sizes: "h-25 w-full",
+    };
+    const style = {
+        positions: "absolute bottom-0 right-0",
+        sizes: "w-22 h-6",
+        displays: "flex justify-center items-center",
+        styles: "rounded-md text-sm",
+        animation: "text-black bg-gray-light hover:bg-blue-sky hover:text-white duration-500",
+    };
+    const [hover, setHover] = useState(false);
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorderColor: "jr-blue",
+            rightTextColor: "red-crimson",
+            width: "sm",
+            height: "sm",
+            buttonBackgroundColor: "gray-light",
+        }, children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { children: ["\uC77C\uC2DC: ", date] }), _jsxs("div", { children: ["\uC694\uCCAD\uC790: ", requester ?? "No Data"] }), _jsxs("div", { children: ["\uC218\uC2E0\uC790: ", receiver ?? "No Data"] }), _jsx("button", { className: cn(style), onClick: () => button?.[1](), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: !hover ? status : button?.[0] ?? "완료" })] }) }));
+}
+function Item({ titles, data, }) {
+    const { item } = data;
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorderColor: "blue-navy",
+            rightTextColor: "blue-navy",
+            width: "xs",
+            height: "md",
+        }, children: _jsx("div", { children: item }) }));
+}
+function Profile(props) {
+    return (_jsx(InfoCardDesign, { titles: { title: "ㅎㅇ" }, options: {
+            titleBorderColor: "blue-navy",
+            rightTextColor: "blue-navy",
+            width: "sm",
+            height: "md",
+        }, ...props, children: _jsx(_Fragment, {}) }));
+}
+const InfoCard = {
+    Exam,
+    Product,
+    Item,
+    Profile,
+};
+export default InfoCard;

package/card/template/ReportCard.d.ts

@@ -1,5 +1,5 @@
 import { Titles } from "../../interface";
-export default function ReportCard({ titles, type, dataSets, dataField, }: {
+export default function ReportCard({ titles, dataField, }: {
     titles: Titles;
     type: "text" | "table" | "chart";
     dataSets: {

package/card/template/ReportCard.js

@@ -1,9 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LineBreaks } from "../../text";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-import ChartCard from "./ChartCard";
-import TableCard from "./TableCard";
-export default function ReportCard({ titles, type, dataSets, dataField, }) {
+export default function ReportCard({ titles, dataField, }) {
     const { title, subtitle } = titles;
     const { axis, fields, lines, bars, areas, sizes } = dataField;
     const container = {
@@ -14,10 +11,5 @@ export default function ReportCard({ titles, type, dataSets, dataField, }) {
         title: "text-lg font-bold",
         subtitle: "text-sm",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: subtitle })] }), type === "text" ? (_jsx("div", { children: "text" })) : type === "table" && sizes ? (_jsx(TableCard, { sizes: sizes, fields: fields, data: dataSets.items, options: {
-                    width: "full",
-                    height: "auto",
-                } })) : axis && type === "chart" ? (_jsx(ChartCard, { data: dataSets.items, xAxis: axis.x, yAxis: axis.y, lines: lines, bars: bars, areas: areas, average: dataSets.average, options: {
-                    width: "full",
-                } })) : null] }));
+    return (_jsx("div", { className: cn(container) }));
 }

package/card/template/RowCard.js

@@ -1,20 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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 id = useId();
     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)) }, key))), _jsx("button", { onClick: () => {
-                        setTempData(row);
-                        setView("sideMenu");
-                    }, children: "click" })] }) }));
+        }, children: _jsx("div", { className: "flex items-center h-full px-2 xs:px-4 xl:px-8", 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)) }, id + key))) }) }));
 }
 function Select({ type, entry, row, setRow, }) {
     const id = useId();

package/card/template/TableCard.d.ts

@@ -1,2 +1,4 @@
-import { TableCardProps } from "../../interface/Card";
-export default function TableCard({ data, fields, sizes, options, }: TableCardProps): import("react/jsx-runtime").JSX.Element;
+import { TableCardProps } from "../../interface";
+export default function TableCard<K extends string, T extends {
+    [p in K]: any;
+}>({ dataSets, dataField, options }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/template/TableCard.js

@@ -1,17 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../util";
+import { useId } from "react";
+import { useWidgetStore } from "../../store";
+import { cn, sortByOrder } from "../../util";
 import { Card } from "../widget/Card";
-export default function TableCard({ data, fields, sizes, options, }) {
-    const { width, height, background, text, overflow } = options ?? {};
+export default function TableCard({ dataSets, dataField, options }) {
+    const { width, height, background, text } = options ?? {};
     const { color: bgColor } = background ?? {};
     const { color: textColor } = text ?? {};
-    const keys = Object.keys(fields);
+    const { order, setOrder } = useWidgetStore();
+    const id = useId();
+    const orders = order[id] ?? [];
     const container = {
         text: "text-xs xs:text-sm sm:text-base",
     };
-    const fieldsClassNames = [
-        `flex h-11 items-center  font-bold pl-4`,
-        `bg-${bgColor ?? "gray-300"} text-${textColor ?? "black"}`,
-    ].join(" ");
-    return (_jsx(Card, { options: { width: width ?? "lg", height: height ?? "lg", overflow }, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: fieldsClassNames, children: keys.map((key) => (_jsx("div", { className: `w-${sizes[key]}/100`, children: fields[key] }, key))) }), data.map((row, index) => (_jsx("div", { className: "flex items-center pl-4 h-11 ", children: keys.map((key) => (_jsx("div", { className: `truncate w-${`${sizes[key]}/100` ?? "auto"}`, children: row[key] }, key))) }, index)))] }) }));
+    return (_jsx(Card, { header: Object.entries(dataField).map(([key, { title, size }]) => (_jsx("div", { className: `w-${size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center gap-1", children: [_jsx("div", { children: title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
+                            if (orderBy === key) {
+                                if (orderHow === "asc")
+                                    return "▲";
+                                else if (orderHow === "desc")
+                                    return "▼";
+                                else
+                                    return "";
+                            }
+                        }) })] }) }, id + key))), options: {
+            width: width ?? "full",
+            height: height ?? "lg",
+            overflow: "y-scroll",
+        }, children: _jsx("div", { className: cn(container), children: sortByOrder(dataSets, orders).map((data, index) => (_jsx("div", { className: "flex items-center pl-4 h-11 ", children: Object.entries(data).map(([key, value]) => (_jsx("div", { className: `w-${dataField[key].size}/100`, children: String(value) }, id + key))) }, id + index))) }) }));
 }

package/card/template/TrumpCard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineBreaks } from "../../text";
 import { Card } from "../widget/Card";
 export default function TrumpCard({ titles, options }) {
-    const { title, subTitle, color: titleColor } = titles;
+    const { title, subtitle, color: titleColor } = titles;
     const { onClick, width, image, subButton } = options ?? {};
     const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
         null,
@@ -15,5 +15,5 @@ export default function TrumpCard({ titles, options }) {
             return "w-full h-full object-cover";
         return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
     };
-    return (_jsxs(Card, { options: { width: width ?? "xs", onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { texts: subTitle ?? [""] }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+    return (_jsxs(Card, { options: { width: width ?? "xs", onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { texts: subtitle ?? "" }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
 }

package/card/widget/Card.d.ts

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