@edu-tosel/design 1.0.17 → 1.0.19

package/layout/template/dashboard/Header.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { cn, gradient } from "../../../util";
+import { cn } from "../../../util";
 import { useWidgetStore } from "../../../store";
-export function Header({ title, image, }) {
+export function Header({ title, logo, options }) {
+    const { text, background, className } = options ?? {};
     const { isDark, setDark } = useWidgetStore();
     const [isOpen, setIsOpen] = useState(false);
-    const [src, href] = image ?? [];
     const container = {
         positions: "fixed xl:static top-0 left-0 z-40",
         displays: "flex items-center justify-between ",
         sizes: "h-15 w-full",
-        background: !isDark ? `${gradient.bg.greenToRed}` : "bg-black",
+        background: `${background ?? "bg-white"} dark:bg-black`,
+        text: `${text ?? "text-black"} dark:text-white`,
         styles: "px-5 xl:px-8 2xl:px-16 ",
+        className,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-22", children: [src && href ? (_jsx("a", { href: href, children: _jsx("img", { src: src, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold text-white ", children: title })] }), _jsx("button", { onClick: setDark, className: "text-white", children: "DARK" })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? (_jsx("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold", children: title })] }), _jsx("button", { onClick: setDark, children: "DARK" })] }));
 }

package/layout/template/dashboard/index.d.ts

@@ -1,9 +1,5 @@
-declare function Layout({ subject, colors, navigations, children, }: {
-    subject: [string, string, string];
-    colors?: [string, string];
-    navigations: React.ReactNode[];
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+import { DashboardProps } from "../../../interface";
+declare function Layout({ header, navigations, children, options }: DashboardProps): import("react/jsx-runtime").JSX.Element;
 declare const Dashboard: {
     Layout: typeof Layout;
 };

package/layout/template/dashboard/index.js

@@ -4,10 +4,10 @@ import { NavigationContainer } from "../../../navigation";
 import { Header } from "./Header";
 import { cn } from "../../../util";
 import { useWidgetStore } from "../../../store";
-function Layout({ subject, colors, navigations, children, }) {
+function Layout({ header, navigations, children, options }) {
     const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
-    const [title, image, imageUrl] = subject ?? ["", "", ""];
-    const [bgColor, textColor] = colors ?? ["white", "black"];
+    const { title, options: headerOptions, logo } = header;
+    const { background } = options ?? {};
     useEffect(() => {
         if (isOwn) {
             return setIsOwn(false);
@@ -16,8 +16,8 @@ function Layout({ subject, colors, navigations, children, }) {
     }, [flag]);
     const container = {
         sizes: "min-h-screen h-screen xl:h-auto",
-        background: !isDark ? bgColor : "bg-black/80",
-        styles: `${textColor} font-pretendard-medium`,
+        background: `${background ?? "bg-gray-light"} dark:bg-black/80`,
+        styles: "font-pretendard-medium",
         dark: isDark && "dark",
     };
     const body = {
@@ -25,7 +25,7 @@ function Layout({ subject, colors, navigations, children, }) {
         displays: "flex gap-12 xl:gap-7.5 ",
         paddings: "pt-15 xl:pl-2 2xl:px-12 xl:pt-7.5",
     };
-    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }
 const Dashboard = {
     Layout,

package/layout/widget/DataField.design.d.ts

@@ -0,0 +1,2 @@
+import { DataFieldProps } from "../../interface";
+export default function DataFieldDesign<T extends Record<string, any>>({ id, dataField, options, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;

package/{board/widget/DataField.js → layout/widget/DataField.design.js}

@@ -1,23 +1,23 @@
 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({ id, dataField, }) {
+import { useWidgetStore } from "../../store";
+export default function DataFieldDesign({ id, dataField, options, }) {
     const { order, setOrder } = useWidgetStore();
+    const { padding, position } = options ?? {};
     const orders = order[id] ?? [];
     const container = {
-        positions: "fixed top-34 xl:top-0 left-0 xl:relative z-20",
+        positions: position && position,
         displays: "flex items-center",
         sizes: "w-full h-13.75",
-        paddings: "px-2 xs:px-4 xl:px-7.5",
-        styles: "bg-white",
-        test: "box-shadow-sm",
+        paddings: padding && padding,
+        styles: "bg-white box-shadow-sm font-bold",
     };
     const block = {
         displays: "xl:hidden block ",
         sizes: container.sizes,
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: dataField &&
-                    Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 `, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
+                    Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
                                         if (orderBy === key) {
                                             if (orderHow === "asc")
                                                 return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }));
@@ -26,5 +26,5 @@ export default function BoardDataField({ id, dataField, }) {
                                             else
                                                 return "";
                                         }
-                                    }) })] }) }, id + key))) }), _jsx("div", { className: cn(block) })] }));
+                                    }) })] }) }, id + key))) }), position && _jsx("div", { className: cn(block) })] }));
 }

package/layout/widget/Row.design.d.ts

@@ -0,0 +1,2 @@
+import { RowProps } from "../../interface";
+export default function RowDesign<T extends Record<string, any>>({ dataSet, dataField, options, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/widget/Row.design.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../util";
+export default function RowDesign({ dataSet, dataField, options, onClick, }) {
+    const { size, padding, text } = options ?? {};
+    const id = useId();
+    const container = {
+        displays: "flex items-center ",
+        sizes: size,
+        paddings: padding,
+        text: text,
+        styles: "hover:bg-gray-100 duration-100",
+    };
+    return (_jsx("div", { className: cn(container), onClick: onClick, children: dataField &&
+            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: dataSet[key] }, id + key))) }));
+}

package/overlay/template/Manage.js

@@ -8,7 +8,7 @@ export default function Manage({ titles, isVisible, event, elements, }) {
             if (type === "select")
                 return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
             if (type === "toggle")
-                return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, isDisabled: isDisabled }) }, id + title));
+                return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, options: { disabled: isDisabled } }) }, id + title));
             return null;
         }) }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -48,6 +48,8 @@ export default {
       colors: {
         "white-off": "#F5F5F5",
         "red-burgundy": "#933652",
+        "crimson-burgundy": "#910023",
+        "crimson-dark": "#760023",
         "red-crimson": "#760023",
         "red-velvet": "#AC647A",
         "green-dark": "#105652",
@@ -86,18 +88,25 @@ export default {
         2.5: "0.625rem",
         3.5: "0.875rem",
         3.75: "0.9375rem",
+        4.25: "1.0625rem",
         4.75: "1.1875rem",
+        5.25: "1.3125rem",
         6.25: "1.5625rem",
+        6.4: "1.6rem",
         6.5: "1.625rem",
         7: "1.75rem",
         7.5: "1.875rem",
         8: "2rem",
         9: "2.25rem",
+        9.25: "2.3125rem",
+        10.25: "2.5625rem",
         11: "2.75rem",
+        11.25: "2.8125rem",
         12: "3rem",
         13.25: "3.3125rem",
         13.75: "3.4375rem",
         14: "3.5rem",
+        14.125: "3.53125rem",
         14.5: "3.625rem",
         15: "3.75rem",
         16: "4rem",
@@ -105,9 +114,14 @@ export default {
         18.75: "4.6875rem",
         19: "4.75rem",
         19.25: "4.8125rem",
+        19.5: "4.875rem",
+        20: "5rem",
+        20.5: "5.125rem",
         21: "5.25rem",
+        21.5: "5.375rem",
         21.75: "5.4375rem",
         22: "5.5rem",
+        22.5: "5.625rem",
         23: "5.75rem",
         25: "6.25rem",
         26: "6.5rem",
@@ -121,6 +135,7 @@ export default {
         40: "10rem",
         41: "10.25rem",
         42: "10.5rem",
+        43: "10.75rem",
         44: "11rem",
         45: "11.25rem",
         48: "12rem",
@@ -514,9 +529,6 @@ export default {
     {
       pattern: /delay-.*/,
     },
-    {
-      pattern: /duration-.*/,
-    },
   ],
   plugins: [tailwindcssAnimate],
   darkMode: "selector",

package/version.txt

@@ -1 +1 @@
-1.0.17
+1.0.19

package/board/widget/DataField.d.ts

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

package/board/widget/Tags.d.ts

@@ -1,14 +0,0 @@
-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/board/widget/Tags.js

@@ -1,30 +0,0 @@
-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/template/ProfileCard.d.ts

@@ -1,14 +0,0 @@
-type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
-export default function ProfileCard({ info, gradeData, }: {
-    info: {
-        name: string;
-        birthday: string;
-        image?: string;
-    };
-    gradeData?: {
-        level?: Level;
-        score?: number;
-        grade?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export {};

package/card/template/ProfileCard.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from "../widget/Card";
-import { colorsByLevel } from "../../util";
-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/ReportCard.d.ts

@@ -1,33 +0,0 @@
-import { Titles } from "../../interface";
-export default function ReportCard({ titles, dataField, }: {
-    titles: Titles;
-    type: "text" | "table" | "chart";
-    dataSets: {
-        items: Record<string, string | number>[];
-        average?: {
-            x: string;
-            score: number;
-        };
-    };
-    dataField: {
-        fields: Record<string, string>;
-        axis?: {
-            x: string;
-            y: string;
-        };
-        lines?: {
-            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

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
-export default function ReportCard({ titles, dataField, }) {
-    const { title, subtitle } = titles;
-    const { axis, fields, lines, bars, areas, sizes } = dataField;
-    const container = {
-        displays: "flex flex-col gap-4",
-    };
-    const titleBox = {
-        container: "flex flex-col gap-1",
-        title: "text-lg font-bold",
-        subtitle: "text-sm",
-    };
-    return (_jsx("div", { className: cn(container) }));
-}

package/card/template/RowCard.d.ts

@@ -1,2 +0,0 @@
-import { RowCardProps } from "../../interface";
-export default function RowCard<T extends Record<string, any>>({ onClick, dataSet, dataField, }: RowCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/template/RowCard.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { cn } from "../../util";
-import { Card } from "../widget/Card";
-import { useWidgetStore } from "../../store";
-export default function RowCard({ onClick, dataSet, dataField, }) {
-    const id = useId();
-    const { flag, setIsOwn } = useWidgetStore();
-    const container = {
-        displays: "flex items-center ",
-        sizes: "h-full",
-        paddings: "px-2 xs:px-4 xl:px-7.5 ",
-        styles: "text-xl hover:bg-gray-100 duration-100",
-    };
-    return (_jsx(Card, { options: {
-            onClick,
-            classNames: cn(container),
-            width: "full",
-            height: "xs",
-            boundary: "none",
-            rounded: "none",
-        }, children: dataField &&
-            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: dataSet[key] }, id + key))) }));
-}

package/card/template/TrumpCard.d.ts

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

package/card/template/TrumpCard.js

@@ -1,19 +0,0 @@
-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 { onClick, width, image, subButton } = options ?? {};
-    const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
-        null,
-        "red-crimson",
-        () => { },
-    ];
-    const { path, size } = image ?? { size: "sub" };
-    const imageClassNames = () => {
-        if (size === "full")
-            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] }));
-}

package/html/widget/Button.d.ts

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

package/html/widget/Button.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
-const widthSize = {
-    md: "w-45",
-    lg: "w-50",
-};
-const heightSize = {
-    md: "h-11",
-};
-export default function Button({ title, onClick }) {
-    const container = {
-        sizes: "",
-    };
-    return (_jsx("button", { onClick: onClick, className: cn(container), children: title }));
-}

package/interaction/template/Exception.d.ts

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

package/interaction/template/Exception.js

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

package/interaction/widget/LoadingJumper.d.ts

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

package/interaction/widget/LoadingSpinner.d.ts

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

package/interaction/widget/LoadingWorm.d.ts

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

package/interaction/widget/NoData.d.ts

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