@edu-tosel/design 1.0.10 → 1.0.12

package/board/template/CanvasBoard.js

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

package/board/template/ManageBoard.js

@@ -13,7 +13,7 @@ export default function ManageBoard({ header, data, widgets, }) {
     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, 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
+    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) {

package/board/template/PaperBoard.js

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

package/board/widget/Board.js

@@ -25,7 +25,7 @@ const heightSize = {
 export function Board({ children, widgets, options, debug }) {
     const { events } = useWidgetStore();
     const { components, tabs } = widgets ?? {};
-    const { width, height } = options ?? {};
+    const { width, height, isRounded } = options ?? {};
     const container = {
         positions: "relative",
         width: widthSize[width ?? "full"],
@@ -34,7 +34,8 @@ export function Board({ children, widgets, options, debug }) {
     const body = {
         positions: "relative z-10 ",
         sizes: `w-full ${heightSize[height ?? "lg"]} overflow-hidden `,
-        styles: "xl:rounded-xl bg-white",
+        styles: "bg-white",
+        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")

package/card/template/ChartCard.d.ts

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

package/card/template/ChartCard.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, Bar, ComposedChart, Legend, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
 import { Card } from "../widget/Card";
-export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, }) {
+export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, average, }) {
     const { width, height } = options ?? {};
-    return (_jsx(Card, { options: {
+    return (_jsxs(Card, { options: {
+            classNames: "pt-4 pr-4",
             width: width ?? "xl",
             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, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey)))] }) }) }));
+        }, 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/ReportCard.d.ts

@@ -1,9 +1,13 @@
 import { Titles } from "../../interface";
 export default function ReportCard({ titles, type, dataSets, dataField, }: {
     titles: Titles;
-    type: "table" | "chart";
+    type: "text" | "table" | "chart";
     dataSets: {
         items: Record<string, string | number>[];
+        average?: {
+            x: string;
+            score: number;
+        };
     };
     dataField: {
         fields: Record<string, string>;
@@ -15,6 +19,15 @@ export default function ReportCard({ titles, type, dataSets, dataField, }: {
             dataKey: string;
             stroke: string;
         }[];
+        bars?: {
+            name: string;
+            dataKey: string;
+            fill: string;
+        }[];
+        areas?: {
+            dataKey: string;
+            fill: string;
+        }[];
         sizes?: Record<string, string>;
     };
 }): import("react/jsx-runtime").JSX.Element;

package/card/template/ReportCard.js

@@ -5,7 +5,7 @@ import ChartCard from "./ChartCard";
 import TableCard from "./TableCard";
 export default function ReportCard({ titles, type, dataSets, dataField, }) {
     const { title, subtitle } = titles;
-    const { axis, fields, lines, sizes } = dataField;
+    const { axis, fields, lines, bars, areas, sizes } = dataField;
     const container = {
         displays: "flex flex-col gap-4",
     };
@@ -14,10 +14,10 @@ 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 === "table" && sizes ? (_jsx(TableCard, { sizes: sizes, fields: fields, data: dataSets.items, options: {
+    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, options: {
+                } })) : 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] }));
 }

package/card/template/TableCard.js

@@ -13,5 +13,5 @@ export default function TableCard({ data, fields, sizes, options, }) {
         `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]}`, 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] ?? "auto"}`, children: row[key] }, key))) }, index)))] }) }));
+    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] ?? "auto"}`, children: row[key] }, key))) }, index)))] }) }));
 }

package/card/widget/Card.js

@@ -21,7 +21,7 @@ const heightSize = {
     auto: "h-auto min-h-80",
 };
 export function Card({ children, options, debug }) {
-    const { boundary, rounded, height, width, text, background, onClick, overflow, } = options ?? {};
+    const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, } = options ?? {};
     const { size: textSize, color: textColor } = text ?? {};
     const { color: bgColor } = background ?? {};
     const setBoundary = () => {
@@ -44,5 +44,5 @@ export function Card({ children, options, debug }) {
         styles: "duration-500  overflow-hidden",
         debug: debug && import.meta.env.MODE && `border-2  border-${debug}`,
     };
-    return (_jsx("div", { onClick: onClick, className: cn(container), children: children }));
+    return (_jsx("div", { onClick: onClick, className: cn(container, `${classNames}`), children: children }));
 }

package/deck/Deck.js

@@ -11,7 +11,8 @@ export function Deck({ children, titles, options, debug, }) {
             `border-2 border-${debug}`,
     };
     const body = {
-        displays: `flex flex-col sm:flex-${flex ?? "row"} gap-y-${gapY ?? 5}`,
+        displays: `flex flex-col flex-wrap gap-y-${gapY ?? 5}`,
+        flex: flex === "col" ? "sm:flex-col" : "sm:flex-row",
         justify: `justify-${justify ?? "start"}`,
         gapX: `${`gap-x-${gapX ?? 7.5}`}`,
         sizes: "sm:w-full ",

package/interaction/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Exception } from "./template/Exception";
 export { default as LoadingSpinner } from "./widget/LoadingSpinner";
 export { default as LoadingJumper } from "./widget/LoadingJumper";
+export { default as LoadingWorm } from "./widget/LoadingWorm";
 export { default as NoData } from "./widget/NoData";

package/interaction/index.js

@@ -1,4 +1,5 @@
 export { default as Exception } from "./template/Exception";
 export { default as LoadingSpinner } from "./widget/LoadingSpinner";
 export { default as LoadingJumper } from "./widget/LoadingJumper";
+export { default as LoadingWorm } from "./widget/LoadingWorm";
 export { default as NoData } from "./widget/NoData";

package/interaction/widget/LoadingSpinner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // NOTE: This is Prototype code and should be replaced with a proper loading spinner
 export default function LoadingSpinner() {
-    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("div", { className: "w-30 h-30", children: _jsxs("svg", { "aria-hidden": "true", className: "inline w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }) }) }));
+    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("div", { className: "w-30 h-30", children: _jsxs("svg", { "aria-hidden": "true", className: "inline w-20 h-20 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }) }) }));
 }

package/interaction/widget/LoadingWorm.js

@@ -3,21 +3,21 @@ import { cn, gradient, useEase } from "../../util";
 export default function LoadingWorm() {
     const numbers = [-2, -1, 0, 1, 2];
     const ease = useEase(1000, 500);
-    return (_jsx("div", { className: "w-full h-full flex justify-center items-center", children: _jsx("div", { className: "relative  w-25 h-22 ", children: numbers.map((number) => (_jsx(SubComponent, { index: number, ease: ease }, number))) }) }));
+    return (_jsx("div", { className: "w-full h-full flex justify-center items-center", children: _jsx("div", { className: "relative  w-25 h-20 ", children: numbers.map((number) => (_jsx(SubComponent, { index: number, ease: ease }, number))) }) }));
 }
 function SubComponent({ index, ease, }) {
     const [flag, timer] = ease;
     const positions = [
         `absolute`,
         index < 0
-            ? `-left-${flag ? Math.abs(index) * 4 : 0}`
-            : `left-${flag ? Math.abs(index) * 4 : 0}`,
+            ? `-right-${flag ? Math.abs(index) * 4 : 0}`
+            : `right-${flag ? Math.abs(index) * 4 : 0}`,
         index < 0
             ? `-top-${flag ? Math.abs(index) * 4 : 0}`
             : `top-${flag ? Math.abs(index) * 4 : 0}`,
         `z-${50 - index}`,
     ].join(" ");
-    const sizes = "w-25 h-22";
-    const styles = `duration-${timer} rounded-lg bg-${gradient.lab}`;
+    const sizes = "w-25 h-20";
+    const styles = `duration-${timer} rounded-lg bg-${gradient.lab} opacity-40`;
     return (_jsxs("div", { className: cn(positions, sizes, styles), children: [_jsxs("div", { children: ["Index is ", index] }), _jsxs("div", { className: "text-xs", children: [timer, "ms \uB3D9\uC548 ", flag.toString()] })] }));
 }

package/interface/Board.d.ts

@@ -4,6 +4,7 @@ interface OptionsProps {
     width?: Size;
     height?: Size;
     color?: string;
+    isRounded?: boolean;
 }
 interface WidgetsProps {
     exceptions?: [boolean, React.ReactNode][];

package/interface/Card.d.ts

@@ -14,6 +14,7 @@ import { ImageSize, Size } from "./Property";
 export interface CardProps {
     children: React.ReactNode;
     options?: {
+        classNames?: string;
         boundary?: "shadow" | "border" | "none";
         rounded?: string;
         height?: Size;
@@ -46,6 +47,10 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
         dataKey: string;
         fill: string;
     }[];
+    average?: {
+        x: string;
+        score: number;
+    };
 }
 export interface TableCardProps extends Omit<CardProps, "children"> {
     data: Record<string, string | number>[];

package/layout/report/Header.d.ts

@@ -0,0 +1,4 @@
+export default function Header({ groupName, examName, }: {
+    groupName: string;
+    examName: string;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/report/Header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function Header({ groupName, examName, }) {
+    const container = {
+        positions: "relative z-20",
+        displays: "flex flex-col items-center ",
+        sizes: "w-full max-w-280",
+        styles: "py-8 bg-white shadow-md",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex justify-between w-full items-center pr-2", children: [_jsx("img", { src: "/images/logos/itc.png", alt: "itc", width: 100 }), _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "text-5xl font-bold", children: examName }) }), _jsx("img", { src: "/images/logos/badge-tosel-lab.png", alt: "tosel-lab", width: 80 })] }), _jsxs("div", { className: "", children: ["\uC9C0\uC815\uAD50\uC721\uAE30\uAD00: ", groupName] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,6 +14,7 @@
   "type": "module",
   "scripts": {},
   "dependencies": {
+    "@edu-tosel/design": "^1.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-lottie-player": "^1.5.6",

package/version.txt

@@ -1 +1 @@
-1.0.10
+1.0.12