@edu-tosel/design 1.0.3 → 1.0.5

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, subWidget, options, }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function ManageBoard<T extends Item>({ header, data, widgets, }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/board/template/ManageBoard.js

@@ -6,22 +6,23 @@ 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, }) {
+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:pl-8";
+    const paddings = "pb-60 xl:pb-0 px-2 xs:px-4 xl:px-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, {})] }));
+    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
+                        ?.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 && _jsx(SideMenu, {})] }));
 }

package/board/widget/Board.d.ts

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

package/board/widget/Board.js

@@ -1,29 +1,16 @@
 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 }) {
+import Tab from "./Tab";
+export function Board({ children, widgets }) {
     const { events } = useWidgetStore();
-    const { widgets, tabs } = options ?? {};
+    const { components, tabs } = widgets ?? {};
     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))) }));
+    return (_jsxs("div", { className: "h-full xl:min-h-0 xl:h-178 w-full relative ", children: [_jsxs("div", { className: classNames, 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 })] }));
 }

package/board/widget/Tab.d.ts

@@ -0,0 +1,4 @@
+import { Button } from "../../interface";
+export default function Tab({ tabs }: {
+    tabs: Button[];
+}): import("react/jsx-runtime").JSX.Element;

package/board/widget/Tab.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../util";
+export default function Tab({ 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/card/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./template/ProfileCard";
-export * from "./template/TrumpCard";
-export * from "./template/ChartCard";
-export * from "./template/TableCard";
-export * from "./template/RowCard";
+export { default as ProfileCard } from "./template/ProfileCard";
+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";

package/card/index.js

@@ -1,5 +1,5 @@
-export * from "./template/ProfileCard";
-export * from "./template/TrumpCard";
-export * from "./template/ChartCard";
-export * from "./template/TableCard";
-export * from "./template/RowCard";
+export { default as ProfileCard } from "./template/ProfileCard";
+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";

package/card/template/ChartCard.d.ts

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

package/card/template/ChartCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
 import { Card } from "../widget/Card";
-export function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }) {
+export default 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/template/ProfileCard.d.ts

@@ -1,5 +1,5 @@
 type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
-export declare function ProfileCard({ info, gradeData, }: {
+export default function ProfileCard({ info, gradeData, }: {
     info: {
         name: string;
         birthday: string;

package/card/template/ProfileCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from "../widget/Card";
 import { colorsByLevel } from "../../util";
-export function ProfileCard({ info, gradeData, }) {
+export default function ProfileCard({ info, gradeData, }) {
     const { name, birthday, image } = info;
     const { level, score, grade } = gradeData ?? {};
     return (_jsx(Card, { options: { width: "sm" }, children: _jsxs("div", { className: "flex", children: [_jsx("img", { src: image, alt: "profile", className: "h-20 w-20 overflow-hidden rounded-full object-cover " }), _jsxs("div", { className: "ml-auto flex flex-col gap-4", children: [_jsxs("div", { className: "flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2", children: [_jsx("div", { className: "text-xl font-bold", children: name }), _jsx("div", { children: birthday })] }), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] })] }) }));

package/card/template/TableCard.d.ts

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

package/card/template/TableCard.js

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

package/card/template/TrumpCard.d.ts

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

package/card/template/TrumpCard.js

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

package/index.d.ts

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

package/index.js

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

package/interaction/Exception.d.ts

@@ -0,0 +1,2 @@
+import { ExceptionProps } from "../interface/Interaction";
+export default function Exception({ exceptions, children }: ExceptionProps): import("react/jsx-runtime").JSX.Element;

package/interaction/Exception.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export default function Exception({ exceptions, children }) {
+    if (!exceptions)
+        return _jsx(_Fragment, { children: children });
+    const trueComponents = exceptions
+        .filter(([exception]) => exception)
+        .map(([, component]) => component);
+    return _jsx(_Fragment, { children: trueComponents.length > 0 ? trueComponents : children });
+}

package/interaction/LoadingSpinner.d.ts

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

package/interaction/LoadingSpinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } 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: "h-16 w-16 animate-spin rounded-full border-6 border-black border-r-transparent flex justify-center items-center", children: _jsx("div", { className: "h-12 w-12 animate-spin rounded-full border-6 border-red-500 border-r-transparent " }) }) }));
+}

package/interaction/NoData.d.ts

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

package/interaction/NoData.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function NoData() {
+    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: "NoData" }));
+}

package/interaction/index.d.ts

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

package/interaction/index.js

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

package/interface/Board.d.ts

@@ -1,5 +1,18 @@
 import { Dispatch } from "react";
 import { Button, Size } from "./Property";
+interface OptionsProps {
+    color?: string;
+}
+interface WidgetsProps {
+    exceptions?: [boolean, React.ReactNode][];
+    components?: [boolean | string, React.ReactNode][];
+    tabs?: Button[];
+}
+export interface BoardProps {
+    children?: React.ReactNode;
+    widgets?: WidgetsProps;
+    options?: OptionsProps;
+}
 export interface BoardHeaderProps {
     title?: string;
     tags?: {
@@ -23,19 +36,11 @@ export interface BoardHeaderProps {
         };
     };
 }
-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[];
+            items: T[] | undefined;
             renderItem: (items: T) => React.ReactNode;
         }[];
         dataField?: {
@@ -45,5 +50,8 @@ export interface ManageBoardProps<T> extends BoardProps {
         gap?: number;
     };
     header?: BoardHeaderProps;
-    subWidget?: React.ReactNode;
+    widgets?: {
+        menu?: React.ReactNode;
+    } & WidgetsProps;
 }
+export {};

package/interface/Interaction.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface ExceptionProps {
+    exceptions?: [boolean, React.ReactNode][];
+    children: React.ReactNode;
+}

package/interface/Interaction.js

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

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
+    "tsx",
     "tailwindcss",
-    "ui"
+    "ui",
+    "design system"
   ],
   "author": "International TOSEL Committee",
   "license": "MIT",

package/tailwind.config.ts

@@ -214,6 +214,16 @@ export default {
         60000: "60000ms",
         300000: "300000ms",
       },
+      borderWidth: {
+        1: "1px",
+        2: "2px",
+        3: "3px",
+        4: "4px",
+        5: "5px",
+        6: "6px",
+        7: "7px",
+        8: "8px",
+      },
       opacity: {
         32: ".32",
       },

package/version.txt

@@ -1 +1 @@
-1.0.3
+1.0.5