@edu-tosel/design 1.0.5 → 1.0.7

package/board/template/ManageBoard.js

@@ -1,6 +1,5 @@
 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";
@@ -24,5 +23,5 @@ export default function ManageBoard({ header, data, widgets, }) {
                         }
                         return 0;
                     })
-                        .map((item) => renderItem(item)))) }) }), widgets?.menu && _jsx(SideMenu, {})] }));
+                        .map((item) => renderItem(item)))) }) }), widgets?.menu] }));
 }

package/board/widget/DataField.js

@@ -13,12 +13,12 @@ export default function BoardDataField({ dataField, }) {
     const dataFieldContainer = {
         displays: "flex items-center",
         sizes: "w-full h-12",
-        paddings: "px-2 xs:px-4 xl:pl-8 xl:pr-2 ",
+        paddings: "px-2 xs:px-4 xl:px-8",
         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) })] }));
+    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/card/index.d.ts

@@ -3,3 +3,4 @@ export { default as TrumpCard } from "./template/TrumpCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as TableCard } from "./template/TableCard";
 export { default as RowCard } from "./template/RowCard";
+export { default as InfoCard } from "./template/InfoCard";

package/card/index.js

@@ -3,3 +3,4 @@ export { default as TrumpCard } from "./template/TrumpCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as TableCard } from "./template/TableCard";
 export { default as RowCard } from "./template/RowCard";
+export { default as InfoCard } from "./template/InfoCard";

package/card/template/InfoCard.d.ts

@@ -0,0 +1,2 @@
+import { InfoCardProps } from "../../interface/Card";
+export default function InfoCard({ type }: InfoCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Deck } from "../..";
+import { Card } from "../widget/Card";
+export default function InfoCard({ type }) {
+    return (_jsxs(Deck, { children: [_jsx(Card, { options: { width: "xs", height: "lg" }, children: _jsxs("div", { className: "p-5", children: [_jsx("div", { children: type }), _jsx("div", {})] }) }), _jsx(Card, { options: { width: "md" }, children: _jsxs("div", { className: "p-5", children: [_jsx("div", { children: type }), _jsx("div", {})] }) })] }));
+}

package/card/template/RowCard.js

@@ -11,7 +11,7 @@ export default function RowCard({ row, fields, sizes, }) {
             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: () => {
+        }, 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" })] }) }));

package/interface/Card.d.ts

@@ -71,3 +71,6 @@ export interface TrumpCardProps {
         subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
     };
 }
+export interface InfoCardProps {
+    type: "information" | "profile" | "prpfileSmall";
+}

package/interface/HTMLElement.d.ts

@@ -1,10 +1,20 @@
 import { Dispatch } from "react";
 import { Size } from "./Property";
+export type HTMLElementType = "text" | "input" | "select";
 export interface HTMLElement {
     title: string;
     onChange: Dispatch<string>;
     width?: Size;
 }
+export interface HTMLElementSetting {
+    [key: string]: {
+        label: string;
+        type: HTMLElementType;
+        placeholder?: string;
+        options?: [string, string][];
+        onChnage?: Dispatch<string>;
+    };
+}
 export interface HTMLSelectElement extends HTMLElement {
     selectOptions?: [string | number, string][];
 }

package/interface/Menu.d.ts

@@ -0,0 +1,5 @@
+import { Log, HTMLElementSetting } from "../interface";
+export interface SideMenuProps<K extends string, T extends string | number> {
+    log: Log<K, T>;
+    setting: HTMLElementSetting;
+}

package/interface/Menu.js

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

package/interface/Property.d.ts

@@ -32,3 +32,9 @@ export type Titles = {
     subTitle?: string[];
     color?: string;
 };
+export interface Log<K extends string, T extends string | number> {
+    prints: K[];
+    logs: {
+        [p in K]: T;
+    }[] | undefined;
+}

package/interface/index.d.ts

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

package/interface/index.js

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

package/menu/SideMenu.d.ts

@@ -1 +1,2 @@
-export default function SideMenu(): import("react/jsx-runtime").JSX.Element;
+import { SideMenuProps } from "../interface/Menu";
+export default function SideMenu<K extends string, T extends string | number>({ log, setting, }: SideMenuProps<K, T>): import("react/jsx-runtime").JSX.Element;

package/menu/SideMenu.js

@@ -1,14 +1,27 @@
 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();
+export default function SideMenu({ log, setting, }) {
+    const { tempData, setTempData, 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: () => {
+    const paddings = "pt-8";
+    const sizes = `${isOpen ? "w-160" : "w-0"} h-full`;
+    const styles = `${isOpen ? "opacity-100 z-30" : "opacity-0 z-0"} bg-gray-200 duration-500`;
+    const { prints, logs } = log ?? {};
+    return (_jsx("div", { className: cn(positions, sizes, styles, paddings), children: _jsxs("div", { className: `relative w-full h-full flex flex-col items-center gap-12 ${isOpen ? "block" : "hidden"}`, children: [_jsx("div", { className: "w-9/10 border-2 border-black p-2 h-80", children: _jsx("div", { className: "grid grid-cols-2", children: Object.entries(setting).map(([key, value]) => (_jsxs("div", { className: "text-base font-bold flex gap-2", children: [_jsxs("div", { className: "w-16", children: [value["label"], ":"] }), _jsx(HTMLElement, { type: value["type"], value: tempData[key], options: value["options"], onChange: (value) => setTempData({
+                                        ...tempData,
+                                        [key]: value,
+                                    }) })] }, key))) }) }), _jsx("div", { className: "border-2 border-black w-9/10 p-2 h-48 overflow-y-scroll", children: logs?.map((log, i) => (_jsx("div", { className: "text-base flex gap-2", children: prints?.map((print) => (_jsx("div", { className: "", children: log[print] }, print))) }, i))) }), _jsx("button", { onClick: () => {
                         clearTempData();
                         return removeView("sideMenu");
                     }, className: "absolute left-0 top-2/5 text-3xl font-bold", children: ">" })] }) }));
 }
+function HTMLElement({ type, value, options, onChange, }) {
+    if (type === "text")
+        return _jsx("div", { children: value });
+    if (type === "input")
+        return (_jsx("input", { className: "w-32", value: value, onChange: (e) => onChange?.(e.target.value) }));
+    if (type === "select")
+        return (_jsx("select", { value: value, onChange: (e) => onChange?.(e.target.value), children: options?.map(([value, label]) => (_jsx("option", { value: value, children: label }, value))) }));
+}

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.5
+1.0.7