@edu-tosel/design 1.0.13 → 1.0.15

package/interface/Board.d.ts

@@ -1,35 +1,35 @@
-import { Dispatch } from "react";
-import { Button, Size } from "./Property";
+import React from "react";
+import { DataField, Size, State, Titles } from "./Property";
+import { EventsProps } from "./Widget";
 interface OptionsProps {
+    classNames?: string;
     width?: Size;
     height?: Size;
     color?: string;
     isRounded?: boolean;
-}
-interface WidgetsProps {
-    exceptions?: [boolean, React.ReactNode][];
-    components?: [boolean | string, React.ReactNode][];
-    tabs?: Button[];
+    noPadding?: boolean;
 }
 export interface BoardProps {
     children?: React.ReactNode;
-    widgets?: WidgetsProps;
+    widgets?: EventsProps;
     options?: OptionsProps;
     debug?: string;
 }
 export interface BoardHeaderProps {
-    title?: string;
+    titles?: Titles & {
+        icon?: string;
+    };
     tags?: {
         selects?: {
             title: string;
-            onChange: Dispatch<string>;
+            state: State<string>;
             options: [string | number, string][];
             width?: Size;
         }[];
         inputs?: {
-            title: string;
-            onChange: Dispatch<string>;
-            placeholder: string;
+            state: State<string>;
+            placeholder?: string;
+            title?: string;
             width?: Size;
         }[];
     };
@@ -43,20 +43,17 @@ export interface BoardHeaderProps {
 export interface ManageBoardProps<T> extends BoardProps {
     data: {
         dataSets: {
-            title?: string;
             items: T[] | undefined;
             renderItem: (item: T) => React.ReactNode;
+            titles?: Titles;
+            interaction?: React.ReactNode;
         }[];
         dataField?: {
-            fields: Record<string, string>;
-            sizes: Record<string, string>;
+            [p in keyof T]?: Partial<DataField>;
         };
         gap?: number;
     };
     header?: BoardHeaderProps;
-    widgets?: {
-        menu?: React.ReactNode;
-    } & WidgetsProps;
 }
 export interface PaperBoardProps extends BoardProps {
 }

package/interface/Card.d.ts

@@ -1,4 +1,23 @@
-import { ImageSize, Size } from "./Property";
+import { Button, DataField, ImageSize, OnClick, Size, Titles } from "./Property";
+interface CardOptions {
+    classNames?: string;
+    boundary?: "shadow" | "border" | "none";
+    rounded?: string;
+    height?: Size;
+    width?: Size;
+    background?: {
+        color?: string;
+    };
+    text?: {
+        size?: string;
+        color?: string;
+    };
+    border?: {
+        color?: string;
+    };
+    onClick?: () => unknown | (() => Promise<unknown>);
+    overflow?: "hiden" | "y-scroll" | "auto";
+}
 /**
  * CardProps is an interface.
  * @interface CardProps
@@ -13,22 +32,8 @@ import { ImageSize, Size } from "./Property";
  */
 export interface CardProps {
     children: React.ReactNode;
-    options?: {
-        classNames?: string;
-        boundary?: "shadow" | "border" | "none";
-        rounded?: string;
-        height?: Size;
-        width?: Size;
-        background?: {
-            color?: string;
-        };
-        text?: {
-            size?: string;
-            color?: string;
-        };
-        onClick?: () => unknown | (() => Promise<unknown>);
-        overflow?: "hiden" | "auto";
-    };
+    header?: React.ReactNode;
+    options?: CardOptions;
     debug?: string;
 }
 export interface ChartCardProps extends Omit<CardProps, "children"> {
@@ -52,17 +57,15 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
         score: number;
     };
 }
-export interface TableCardProps extends Omit<CardProps, "children"> {
-    data: Record<string, string | number>[];
-    fields: Record<string, string>;
-    sizes: Record<string, string>;
+export interface TableCardProps<T> extends Omit<CardProps, "children"> {
+    dataSets: T[];
+    dataField: {
+        [p in keyof T]: Partial<DataField>;
+    };
+    options?: CardOptions;
 }
 export interface TrumpCardProps {
-    titles: {
-        title: string;
-        subTitle?: string[];
-        color?: string;
-    };
+    titles: Titles;
     options?: {
         width?: Size;
         image?: {
@@ -73,16 +76,23 @@ export interface TrumpCardProps {
         subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
     };
 }
-export interface InfoCardProps {
-    type: "information" | "profile" | "profileSmall";
-    titles: {
-        title: string;
-        subTitle?: string[];
-        color?: string;
-    };
-    button: {
-        title: string;
-        display: "inline-block" | "none";
-        color?: string;
+export interface InfoCardProps extends CardProps {
+    titles: Titles;
+    button?: Button;
+    options?: {
+        titleBorderColor?: string;
+        rightTextColor?: string;
+        buttonBackgroundColor?: string;
+    } & CardOptions;
+}
+export interface AddCardProps extends Omit<CardProps, "children"> {
+    onClick: OnClick;
+}
+export interface RowCardProps<T> {
+    onClick?: OnClick;
+    dataSet: T;
+    dataField?: {
+        [p in keyof T]?: Partial<DataField>;
     };
 }
+export {};

package/{deck → interface}/Deck.d.ts

@@ -1,10 +1,7 @@
-export declare function Deck<T extends string | number>({ children, titles, options, debug, }: {
+import { Titles } from "./Property";
+export interface DeckProps<T> {
     children: React.ReactNode;
-    titles?: {
-        title: string;
-        subtitle?: string;
-        gapTitle?: number;
-    };
+    titles?: Titles;
     options?: {
         flex?: "col" | "row";
         justify?: "between";
@@ -15,4 +12,4 @@ export declare function Deck<T extends string | number>({ children, titles, opti
         gapY?: number;
     };
     debug?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}

package/interface/HTMLElement.d.ts

@@ -1,23 +1,31 @@
-import { Dispatch } from "react";
-import { Size } from "./Property";
-export type HTMLElementType = "text" | "input" | "select";
+import { OnClick, Size, State } from "./Property";
+export declare const HTMLElementType: {
+    readonly TEXT: "text";
+    readonly BUTTON: "button";
+    readonly INPUT: "input";
+    readonly SELECT: "select";
+    readonly TOGGLE: "toggle";
+};
+export type HTMLElementType = (typeof HTMLElementType)[keyof typeof HTMLElementType];
 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>;
+    options?: {
+        width?: Size;
     };
 }
+export interface HTMLButtonElement extends HTMLElement {
+    title: string;
+    onClick: OnClick;
+}
 export interface HTMLSelectElement extends HTMLElement {
+    state: State<string>;
     selectOptions?: [string | number, string][];
 }
 export interface HTMLInputElement extends HTMLElement {
+    state: State<string>;
     placeholder?: string;
 }
+export interface HTMLToggleElement extends HTMLElement {
+    state: State<boolean>;
+    labels: [[true, string], [false, string]];
+    isDisabled?: boolean;
+}

package/interface/HTMLElement.js

@@ -1 +1,7 @@
-export {};
+export const HTMLElementType = {
+    TEXT: "text",
+    BUTTON: "button",
+    INPUT: "input",
+    SELECT: "select",
+    TOGGLE: "toggle",
+};

package/interface/Modal.d.ts

@@ -1,14 +1,19 @@
 import { Button, Scripts, Size } from "./Property";
 export interface ModalProps {
+    isVisible?: boolean;
     children: React.ReactNode;
+    classNames?: string;
     options?: {
         width?: Size;
         height?: Size;
         padding?: boolean;
         buttons?: Button[];
+        isCloseButton?: boolean;
+        closeButtonColor?: string;
     };
+    debug?: string;
 }
-export interface AlertModalProps {
+export interface AlertModalProps extends Omit<ModalProps, "children"> {
     title: string;
     scripts: Scripts;
     options?: {

package/interface/Overlay.d.ts

@@ -0,0 +1,20 @@
+import { HTMLElementType } from "./HTMLElement";
+import { State, Titles } from "./Property";
+export interface OverlayProps {
+    titles: Titles;
+    isVisible?: boolean;
+    event?: string;
+    children?: React.ReactNode;
+}
+export interface InfoOverlayProps extends OverlayProps {
+}
+export interface ManageOverlayProps extends InfoOverlayProps {
+    elements?: {
+        title: string;
+        state: State<string> | State<boolean>;
+        type: HTMLElementType;
+        selectOptions?: [string | number, string][];
+        labels?: [string | boolean, string][];
+        isDisabled?: boolean;
+    }[];
+}

package/interface/Overlay.js

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

package/interface/Property.d.ts

@@ -9,7 +9,8 @@ import { Dispatch, SetStateAction } from "react";
  * const [state, setState] = useState<T>(initialState);
  * @typedef {Array<T, Dispatch<SetStateAction<T>>>} State
  */
-export type State<T> = [T, Dispatch<SetStateAction<T>>];
+export type StateAction<T> = Dispatch<SetStateAction<T>>;
+export type State<T> = [T, StateAction<T>];
 /**
  * Size type
  * @enum {string}
@@ -42,11 +43,21 @@ export type Scripts = {
 export type Titles = {
     title: string;
     subtitle?: string | string[];
+    isSub?: boolean;
     color?: string;
 };
+export type DataField = {
+    title: string | number;
+    type: string;
+    size: string | number;
+};
 export interface Log<K extends string, T extends string | number> {
     prints: K[];
     logs: {
         [p in K]: T;
     }[] | undefined;
 }
+export interface Order {
+    orderBy: string;
+    orderHow: "asc" | "desc" | "";
+}

package/interface/Shelf.d.ts

@@ -0,0 +1,22 @@
+import { Button, Titles } from "./Property";
+import { EventsProps } from "./Widget";
+interface Options<T> {
+    titleSize?: string;
+    subtitleSize?: string;
+    overflowScroll?: boolean;
+    width?: T;
+    height?: number;
+    gapX?: number;
+    gapY?: number;
+}
+export interface ShelfProps<T> {
+    children: React.ReactNode;
+    widgets?: EventsProps & {
+        tabs?: Button[];
+    };
+    titles?: Titles;
+    debug?: string;
+    classNames?: string;
+    options?: Options<T>;
+}
+export {};

package/interface/Shelf.js

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

package/interface/Widget.d.ts

@@ -2,3 +2,22 @@ export interface WidgetEvent {
     event: string;
     type: "view" | "modal";
 }
+type Event<T extends boolean | string | null | undefined> = [
+    T,
+    React.ReactNode
+];
+export type Show = Event<boolean | string>;
+export type Replace = Event<boolean | string | null | undefined>;
+export interface ShowProps {
+    widgets?: Show[];
+    children: React.ReactNode;
+}
+export interface ReplaceProps {
+    widgets?: Replace[];
+    children: React.ReactNode;
+}
+export interface EventsProps {
+    replaces?: Event<boolean | string | null | undefined>[];
+    shows?: Event<boolean | string>[];
+}
+export {};

package/interface/index.d.ts

@@ -1,3 +1,6 @@
+export * from "./Card";
 export * from "./HTMLElement";
+export * from "./Overlay";
 export * from "./Property";
+export * from "./Shelf";
 export * from "./Widget";

package/interface/index.js

@@ -1,3 +1,6 @@
+export * from "./Card";
 export * from "./HTMLElement";
+export * from "./Overlay";
 export * from "./Property";
+export * from "./Shelf";
 export * from "./Widget";

package/layout/index.d.ts

@@ -1 +1,4 @@
-export * from "./dashboard";
+export { default as Events } from "./widget/Events";
+export { default as Dashboard } from "./template/dashboard";
+export { default as Gallery } from "./template/Gallery";
+export { default as Shelf } from "./template/Shelf";

package/layout/index.js

@@ -1 +1,4 @@
-export * from "./dashboard";
+export { default as Events } from "./widget/Events";
+export { default as Dashboard } from "./template/dashboard";
+export { default as Gallery } from "./template/Gallery";
+export { default as Shelf } from "./template/Shelf";

package/layout/template/Gallery.d.ts

@@ -0,0 +1,7 @@
+import { Button, EventsProps } from "../../interface";
+export default function Gallery({ widgets, children, }: {
+    widgets?: EventsProps & {
+        tabs?: Button[];
+    };
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Gallery.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Events from "../widget/Events";
+import Tab from "../widget/Tab";
+export default function Gallery({ widgets, children, }) {
+    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx(Events.Show, { widgets: widgets?.shows, children: children }) }), widgets?.tabs && _jsx(Tab, { tabs: widgets?.tabs })] }));
+}

package/layout/template/Shelf.d.ts

@@ -0,0 +1,8 @@
+import { ShelfProps } from "../../interface/Shelf";
+declare function Shelf({ titles, debug, children }: ShelfProps<string | number>): import("react/jsx-runtime").JSX.Element;
+declare namespace Shelf {
+    var Wrap: ({ classNames, titles, children, debug, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Row: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Col: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+}
+export default Shelf;

package/layout/template/Shelf.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+import ShelfDesign from "../widget/Shelf";
+function Shelf({ titles, debug, children }) {
+    const container = {
+        displays: "inline-flex flex-col gap-12 w-full",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), debug: debug, children: children }));
+}
+function Wrap({ classNames, titles, children, debug, }) {
+    const container = {
+        displays: "flex flex-row flex-wrap gap-x-7.5",
+        classNames,
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+        }, debug: debug, children: children }));
+}
+function Row({ titles, children, debug }) {
+    const container = {
+        displays: "flex flex-row gap-7.5",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+        }, debug: debug, children: children }));
+}
+function Col({ titles, children, debug }) {
+    const container = {
+        displays: "flex flex-col flex-wrap gap-y-5",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+        }, debug: debug, children: children }));
+}
+Shelf.Wrap = Wrap;
+Shelf.Row = Row;
+Shelf.Col = Col;
+export default Shelf;

package/layout/{dashboard → template/dashboard}/Header.d.ts

@@ -1,4 +1,3 @@
-import "../../globals.css";
 export declare function Header({ title, image, }: {
     title: string;
     image?: [string, string];

package/layout/template/dashboard/Header.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn, gradient } from "../../../util";
+import { useWidgetStore } from "../../../store";
+export function Header({ title, image, }) {
+    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 ? `bg-${gradient.greenToRed}` : "bg-black",
+        styles: "px-5 xl:px-8 2xl:px-16 ",
+    };
+    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" })] }));
+}

package/layout/{dashboard → template/dashboard}/index.d.ts

@@ -1,6 +1,10 @@
-export declare function DashboardLayout({ subject, colors, navigations, children, }: {
+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;
+declare const Dashboard: {
+    Layout: typeof Layout;
+};
+export default Dashboard;

package/layout/template/dashboard/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect } from "react";
+import { NavigationContainer } from "../../../navigation";
+import { Header } from "./Header";
+import { cn } from "../../../util";
+import { useWidgetStore } from "../../../store";
+function Layout({ subject, colors, navigations, children, }) {
+    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
+    const [title, image, imageUrl] = subject ?? ["", "", ""];
+    const [bgColor, textColor] = colors ?? ["white", "black"];
+    useEffect(() => {
+        if (isOwn) {
+            return setIsOwn(false);
+        }
+        return clearView();
+    }, [flag]);
+    const container = {
+        sizes: "min-h-screen h-screen xl:h-auto",
+        background: !isDark ? `bg-${bgColor}` : "bg-black/80",
+        styles: `text-${textColor} font-pretendard-medium`,
+        dark: isDark && "dark",
+    };
+    const body = {
+        sizes: "h-full ",
+        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] })] }));
+}
+const Dashboard = {
+    Layout,
+};
+export default Dashboard;

package/layout/template/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 px-2", children: [_jsx("img", { src: "/images/logos/itc.png", alt: "itc", width: 80 }), _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/layout/widget/Events.d.ts

@@ -0,0 +1,8 @@
+import { ReplaceProps, ShowProps } from "./../../interface/Widget";
+declare function Show({ widgets, children }: ShowProps): import("react/jsx-runtime").JSX.Element;
+declare function Replace({ widgets, children }: ReplaceProps): import("react/jsx-runtime").JSX.Element;
+declare const Events: {
+    Show: typeof Show;
+    Replace: typeof Replace;
+};
+export default Events;

package/layout/widget/Events.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Fragment } from "react";
+import { useWidgetStore } from "../../store";
+function Show({ widgets, children }) {
+    const { events } = useWidgetStore();
+    return (_jsxs(_Fragment, { children: [children, widgets?.map(([flag, Component], index) => {
+                const isVisible = typeof flag === "boolean"
+                    ? flag
+                    : events?.some(({ event }) => event === flag);
+                const event = () => {
+                    if (typeof flag === "string") {
+                        return flag;
+                    }
+                };
+                if (React.isValidElement(Component)) {
+                    const ComponentWithVisibility = React.cloneElement(Component, {
+                        event: event(),
+                        isVisible,
+                    });
+                    return _jsx(Fragment, { children: ComponentWithVisibility }, index);
+                }
+                return null;
+            })] }));
+}
+function Replace({ widgets, children }) {
+    const { events } = useWidgetStore();
+    if (!widgets)
+        return _jsx(_Fragment, { children: children });
+    const trueComponents = widgets
+        .filter(([widget]) => widget)
+        .map(([flag, Component], index) => {
+        if (typeof flag === "string") {
+            return events?.some(({ event }) => event === flag) ? (_jsx(_Fragment, { children: Component })) : null;
+        }
+        return _jsx(Fragment, { children: Component }, index);
+    })
+        .filter((component) => component !== null);
+    return _jsx(_Fragment, { children: trueComponents.length > 0 ? trueComponents : children });
+}
+const Events = {
+    Show,
+    Replace,
+};
+export default Events;

package/layout/widget/Shelf.d.ts

@@ -0,0 +1,2 @@
+import { ShelfProps } from "../../interface";
+export default function Shelf<T extends string | number>({ children, classNames, options, titles, debug, }: ShelfProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/widget/Shelf.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { cn, isDebug } from "../../util";
+export default function Shelf({ children, classNames, options, titles, debug, }) {
+    const { titleSize, subtitleSize } = options ?? {};
+    const container = {
+        displays: "flex flex-col gap-4",
+        debug: debug && isDebug(`border-2  border-${debug}`),
+    };
+    const titleBox = {
+        container: "flex flex-col text-gray-dim",
+        title: {
+            text: titleSize ?? "text-xl xl:text-3xl",
+            font: "font-bold",
+        },
+        subtitle: {
+            text: subtitleSize ?? "text-base xl:text-lg",
+        },
+    };
+    const childrenBox = {
+        sizes: "w-full",
+        classNames,
+    };
+    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: titles?.title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));
+}