@edu-tosel/design 1.0.2 → 1.0.4

package/interface/Board.d.ts

@@ -1,10 +1,57 @@
-/// <reference types="react" />
+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;
-    widget?: {
-        widgets: [[string, React.ReactNode]];
+    children?: React.ReactNode;
+    widgets?: WidgetsProps;
+    options?: OptionsProps;
+}
+export interface BoardHeaderProps {
+    title?: string;
+    tags?: {
+        selects?: {
+            title: string;
+            onChange: Dispatch<string>;
+            options: [string | number, string][];
+            width?: Size;
+        }[];
+        inputs?: {
+            title: string;
+            onChange: Dispatch<string>;
+            placeholder: string;
+            width?: Size;
+        }[];
     };
     options?: {
-        height?: number;
+        colors?: {
+            bgColor?: string;
+            textColor?: string;
+        };
+    };
+}
+export interface ManageBoardProps<T> extends BoardProps {
+    data: {
+        dataSets: {
+            title?: string;
+            items: T[];
+            renderItem: (items: T) => React.ReactNode;
+        }[];
+        dataField?: {
+            fields: Record<string, string>;
+            sizes: Record<string, string>;
+        };
+        gap?: number;
     };
+    header?: BoardHeaderProps;
+    widgets?: {
+        menu?: React.ReactNode;
+    } & WidgetsProps;
 }
+export {};

package/interface/Card.d.ts

@@ -15,6 +15,8 @@ import { ImageSize, Size } from "./Property";
 export interface CardProps {
     children: React.ReactNode;
     options?: {
+        boundary?: "shadow" | "border" | "none";
+        rounded?: string;
         height?: Size;
         width?: Size;
         text?: {
@@ -22,6 +24,7 @@ export interface CardProps {
             color?: string;
         };
         onClick?: () => unknown | (() => Promise<unknown>);
+        overflow?: "hiden" | "auto";
     };
 }
 export interface ChartCardProps {

package/interface/HTMLElement.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch } from "react";
+import { Size } from "./Property";
+export interface HTMLElement {
+    title: string;
+    onChange: Dispatch<string>;
+    width?: Size;
+}
+export interface HTMLSelectElement extends HTMLElement {
+    selectOptions?: [string | number, string][];
+}
+export interface HTMLInputElement extends HTMLElement {
+    placeholder?: string;
+}

package/interface/HTMLElement.js

@@ -0,0 +1 @@
+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/interface/Property.d.ts

@@ -8,8 +8,10 @@
  * @property {"md"} md - Medium size
  * @property {"lg"} lg - Large size
  * @property {"xl"} xl - Extra large size
+ * @property {"2xl"} 2xl - Double extra large size
+ * @property {"full"} full - Full size
  */
-export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 /**
  * Image size type
  * @enum {string}

package/interface/Property.js

@@ -8,5 +8,7 @@
  * @property {"md"} md - Medium size
  * @property {"lg"} lg - Large size
  * @property {"xl"} xl - Extra large size
+ * @property {"2xl"} 2xl - Double extra large size
+ * @property {"full"} full - Full size
  */
 export {};

package/interface/index.d.ts

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

package/interface/index.js

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

package/layout/dashboard/index.js

@@ -6,5 +6,5 @@ import { cn } from "../../util";
 export function DashboardLayout({ subject, colors, navigations, children, }) {
     const [title, image, imageUrl] = subject ?? ["", "", ""];
     const [bgColor, textColor] = colors ?? ["white", "black"];
-    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "flex gap-12 xl:gap-8 xl:pl-2 2xl:px-9 xl:pt-12 mt-20 xl:m-0", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen h-screen xl:h-auto font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "h-full flex gap-12 pt-20 xl:gap-8 xl:pl-2 2xl:px-9 xl:pt-10 xl:m-0 ", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/menu/SideMenu.d.ts

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

package/menu/SideMenu.js

@@ -0,0 +1,14 @@
+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();
+    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: () => {
+                        clearTempData();
+                        return removeView("sideMenu");
+                    }, className: "absolute left-0 top-2/5 text-3xl font-bold", children: ">" })] }) }));
+}

package/menu/index.d.ts

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

package/menu/index.js

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

package/modal/Modal.js

@@ -9,6 +9,7 @@ const widthSize = {
     lg: "w-full min-w-76 max-w-360",
     xl: "w-2/3 min-w-76 max-w-176",
     "2xl": "w-2/3 min-w-76 max-w-176",
+    full: "w-full",
 };
 const heightSize = {
     xs: "",
@@ -17,6 +18,7 @@ const heightSize = {
     lg: "h-120",
     xl: "h-180",
     "2xl": "w-2/3 min-w-76 max-w-176",
+    full: "h-full",
 };
 export function Modal({ children, options }) {
     const { buttons, width, height } = options ?? {};

package/navigation/Navigation.js

@@ -8,9 +8,7 @@ export const buttonClassNames = (href, nowPath, color) => {
         "font-bold w-full xl:w-50 h-11 xl:rounded-2xl flex justify-center xl:justify-start xl:pl-5",
     ].join(" ");
     const checkPathMatch = (href, nowPath) => {
-        if (href === "")
-            return !nowPath.slice(1).includes("/");
-        return nowPath.includes(href);
+        return href.split("/").pop() === nowPath.split("/").pop();
     };
     const toggle = checkPathMatch(href, nowPath)
         ? `bg-${bg}`
@@ -18,9 +16,9 @@ export const buttonClassNames = (href, nowPath, color) => {
     return [classNames, toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {
-    const layouts = "flex flex-row xl:flex-col z-40";
+    const displays = "flex flex-row xl:flex-col z-40";
     const positions = "fixed bottom-0 left-0 xl:static";
     const sizes = "w-full xl:w-auto";
     const styles = "";
-    return (_jsx("div", { className: cn(layouts, positions, sizes, styles), children: children }));
+    return (_jsx("div", { className: cn(displays, positions, sizes, styles), children: children }));
 }

package/package.json

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

package/shelf/Shelf.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare function Shelf({ children }: {
+export default function Shelf({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/shelf/Shelf.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function Shelf({ children }) {
-    return (_jsx("div", { className: "inline-flex flex-col gap-12 xl:w-auto", children: children }));
+export default function Shelf({ children }) {
+    return _jsx("div", { className: "inline-flex flex-col gap-8 xl:w-auto", children: children });
 }

package/shelf/index.d.ts

@@ -1 +1 @@
-export * from "./Shelf";
+export { default as Shelf } from "./Shelf";

package/shelf/index.js

@@ -1 +1 @@
-export * from "./Shelf";
+export { default as Shelf } from "./Shelf";

package/store/index.d.ts

@@ -2,9 +2,15 @@ import { WidgetEvent } from "../interface/Widget";
 interface WidgetProps {
     events: WidgetEvent[];
     setView: (prop: string) => void;
+    removeView: (prop: string) => void;
     setModal: (prop: string) => void;
     removeModal: (prop: string) => void;
     clearModal: () => void;
+    order: [string, "asc" | "desc"];
+    setOrder: (prop: string) => void;
+    tempData: Record<string, string | number>;
+    setTempData: (prop: Record<string, string | number>) => void;
+    clearTempData: () => void;
 }
 export declare const useWidgetStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WidgetProps>>;
 export {};

package/store/index.js

@@ -4,6 +4,24 @@ export const useWidgetStore = create((set) => ({
     setView: (prop) => set((state) => ({
         events: [...state.events, { event: prop, type: "view" }],
     })),
+    removeView: (prop) => {
+        set((state) => ({
+            events: state.events.filter(({ event }) => event !== prop),
+        }));
+    },
+    order: ["", "asc"],
+    setOrder: (prop) => {
+        set((state) => {
+            if (state.order[0] !== prop) {
+                return {
+                    order: [prop, "asc"],
+                };
+            }
+            return {
+                order: [prop, state.order[1] === "asc" ? "desc" : "asc"],
+            };
+        });
+    },
     setModal: (prop) => set((state) => ({
         events: [...state.events, { event: prop, type: "modal" }],
     })),
@@ -15,4 +33,7 @@ export const useWidgetStore = create((set) => ({
     clearModal: () => set((state) => ({
         events: state.events.filter(({ type }) => type !== "modal"),
     })),
+    tempData: {},
+    setTempData: (prop) => set((state) => ({ tempData: { ...state.tempData, ...prop } })),
+    clearTempData: () => set({ tempData: {} }),
 }));

package/tailwind.config.ts

@@ -56,57 +56,7 @@ export default {
         "hj-blue": "#385EAB",
         "hj-blue-light": "#A8BFE5",
       },
-      inset: {
-        "1/20": "5%",
-        "1/10": "10%",
-        "2/10": "5%",
-        "1/5": "20%",
-        "2/5": "40%",
-        "1/4": "25%",
-        "1/3": "33.3333333%",
-        "5/100": "5%",
-        "10/100": "10%",
-        "15/100": "15%",
-        "43/100": "43%",
-        "46/100": "46%",
-      },
-      width: {
-        "2/3": "66.6666667%",
-        "1/7": "14.2857143%",
-        "2/7": "28.5714286%",
-        "3/7": "42.8571429%",
-        "4/7": "57.1428571%",
-        "1/8": "12.5%",
-        "3/10": "30%",
-        "1/10": "10%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-        "10/100": "10%",
-        "12/100": "12%",
-        "15/100": "15%",
-        "35/100": "35%",
-        "45/100": "45%",
-        "55/100": "55%",
-        "65/100": "65%",
-        "85/100": "85%",
-        90: "22.5rem",
-        120: "30rem",
-        176: "44rem",
-        478: "478px",
-      },
-      height: {
-        "4/7": "57.1428571%",
-        "3/7": "42.8571429%",
-        "5/12": "41.6666667%",
-        "1/10": "10%",
-        "3/10": "30%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-      },
+
       maxHeight: {
         44: "11rem",
         "9/10": "90%",
@@ -116,17 +66,23 @@ export default {
         1: "0.25rem",
         7: "1.75rem",
         7.5: "1.875rem",
+        8: "2rem",
+        9: "2.25rem",
         11: "2.75rem",
         12: "3rem",
+        14: "3.5rem",
         15: "3.75rem",
+        16: "4rem",
         18: "4.5rem",
         19: "4.75rem",
         22: "5.5rem",
+        23: "5.75rem",
         25: "6.25rem",
         26: "6.5rem",
         27: "6.75rem",
         30: "7.5rem",
         34: "8.5rem",
+        36: "9rem",
         38: "9.5rem",
         40: "10rem",
         42: "10.5rem",
@@ -175,16 +131,21 @@ export default {
         140: "35rem",
         144: "36rem",
         148: "37rem",
+        158: "39.5rem",
         160: "40rem",
         164: "41rem",
         168: "42rem",
         172: "43rem",
         176: "44rem",
+        178: "44.5rem",
         180: "45rem",
         182: "45.5rem",
+        184: "46rem",
         186: "46.5rem",
         187.5: "46.875rem",
+        188: "47rem",
         190: "47.5rem",
+        192: "48rem",
         200: "50rem",
         216: "54rem",
         220: "55rem",
@@ -248,10 +209,21 @@ export default {
       },
       transitionDuration: {
         300: "300ms",
+        1000: "1000ms",
         2000: "2000ms",
         60000: "60000ms",
         300000: "300000ms",
       },
+      borderWidth: {
+        1: "1px",
+        2: "2px",
+        3: "3px",
+        4: "4px",
+        5: "5px",
+        6: "6px",
+        7: "7px",
+        8: "8px",
+      },
       opacity: {
         32: ".32",
       },
@@ -301,6 +273,149 @@ export default {
         xl: "1280px",
         "2xl": "1536px",
       },
+      inset: {
+        "1/20": "5%",
+        "1/10": "10%",
+        "2/10": "5%",
+        "1/5": "20%",
+        "2/5": "40%",
+        "1/4": "25%",
+        "1/3": "33.3333333%",
+        "5/100": "5%",
+        "10/100": "10%",
+        "15/100": "15%",
+        "43/100": "43%",
+        "46/100": "46%",
+      },
+      width: {
+        90: "22.5rem",
+        120: "30rem",
+        176: "44rem",
+        "2/3": "66.6666667%",
+        "1/7": "14.2857143%",
+        "2/7": "28.5714286%",
+        "3/7": "42.8571429%",
+        "4/7": "57.1428571%",
+        "1/8": "12.5%",
+        "3/10": "30%",
+        "1/10": "10%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+        // percentile width
+        "1/100": "1%",
+        "2/100": "2%",
+        "3/100": "3%",
+        "4/100": "4%",
+        "5/100": "5%",
+        "6/100": "6%",
+        "7/100": "7%",
+        "8/100": "8%",
+        "9/100": "9%",
+        "10/100": "10%",
+        "11/100": "11%",
+        "12/100": "12%",
+        "13/100": "13%",
+        "14/100": "14%",
+        "15/100": "15%",
+        "16/100": "16%",
+        "17/100": "17%",
+        "18/100": "18%",
+        "19/100": "19%",
+        "20/100": "20%",
+        "21/100": "21%",
+        "22/100": "22%",
+        "23/100": "23%",
+        "24/100": "24%",
+        "25/100": "25%",
+        "26/100": "26%",
+        "27/100": "27%",
+        "28/100": "28%",
+        "29/100": "29%",
+        "30/100": "30%",
+        "31/100": "31%",
+        "32/100": "32%",
+        "33/100": "33%",
+        "34/100": "34%",
+        "35/100": "35%",
+        "36/100": "36%",
+        "37/100": "37%",
+        "38/100": "38%",
+        "39/100": "39%",
+        "40/100": "40%",
+        "41/100": "41%",
+        "42/100": "42%",
+        "43/100": "43%",
+        "44/100": "44%",
+        "45/100": "45%",
+        "46/100": "46%",
+        "47/100": "47%",
+        "48/100": "48%",
+        "49/100": "49%",
+        "50/100": "50%",
+        "51/100": "51%",
+        "52/100": "52%",
+        "53/100": "53%",
+        "54/100": "54%",
+        "55/100": "55%",
+        "56/100": "56%",
+        "57/100": "57%",
+        "58/100": "58%",
+        "59/100": "59%",
+        "60/100": "60%",
+        "61/100": "61%",
+        "62/100": "62%",
+        "63/100": "63%",
+        "64/100": "64%",
+        "65/100": "65%",
+        "66/100": "66%",
+        "67/100": "67%",
+        "68/100": "68%",
+        "69/100": "69%",
+        "70/100": "70%",
+        "71/100": "71%",
+        "72/100": "72%",
+        "73/100": "73%",
+        "74/100": "74%",
+        "75/100": "75%",
+        "76/100": "76%",
+        "77/100": "77%",
+        "78/100": "78%",
+        "79/100": "79%",
+        "80/100": "80%",
+        "81/100": "81%",
+        "82/100": "82%",
+        "83/100": "83%",
+        "84/100": "84%",
+        "85/100": "85%",
+        "86/100": "86%",
+        "87/100": "87%",
+        "88/100": "88%",
+        "89/100": "89%",
+        "90/100": "90%",
+        "91/100": "91%",
+        "92/100": "92%",
+        "93/100": "93%",
+        "94/100": "94%",
+        "95/100": "95%",
+        "96/100": "96%",
+        "97/100": "97%",
+        "98/100": "98%",
+        "99/100": "99%",
+        "100/100": "100%",
+      },
+      height: {
+        "4/7": "57.1428571%",
+        "3/7": "42.8571429%",
+        "5/12": "41.6666667%",
+        "1/10": "10%",
+        "3/10": "30%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+      },
     },
   },
   safelist: [

package/version.txt

@@ -1 +1 @@
-1.0.2
+1.0.4

package/board/Board.d.ts

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

package/board/Board.js

@@ -1,14 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useWidgetStore } from "../store";
-export function Board({ children, widget, options }) {
-    const { events } = useWidgetStore();
-    const { height } = options ?? {};
-    const { widgets } = widget ?? {};
-    const classNames = [
-        `min-h-screen xl:min-h-0 xl:h-186 `,
-        "xl:rounded-xl bg-white/80 relative w-full ",
-    ].join(" ");
-    return (_jsxs("div", { className: classNames + "", children: [children, widgets?.map(([widgetEvent, Component]) => {
-                return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
-            })] }));
-}

package/board/CanvasBoard.d.ts

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

package/board/CanvasBoard.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../util";
-import { Board } from "./Board";
-export function CanvasBoard({ children, widget, options }) {
-    const { height } = options ?? {};
-    const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
-    const sizes = "h-full ";
-    const paddings = "pb-36 xl:pb-12 px-2 xs:px-4 xl:pl-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
-    const styles = "xl:overflow-y-scroll ";
-    return (_jsx(Board, { widget: widget, options: { height }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
-}

package/board/Header.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare function Header({ title, colors, childrens, }: {
-    title: string;
-    colors?: [string, string];
-    childrens?: React.ReactNode[];
-}): import("react/jsx-runtime").JSX.Element;

package/board/Header.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { between, center } from "../util";
-export function Header({ title, colors, childrens, }) {
-    const [bgColor, textColor] = colors ?? ["bg", "text"];
-    const headerClassNames = [
-        center.row + between.row,
-        `bg-${bgColor || "white-off"}`,
-        `text-${textColor || "black"}`,
-        "w-full h-22 px-12 ",
-    ].join(" ");
-    return (_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("div", { className: "flex", children: childrens?.map((children) => children) })] }));
-}

package/board/ListBoard.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare function ListBoard({ children, options, }: {
-    children: React.ReactNode;
-    options?: {
-        height?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;