@edu-tosel/design 1.0.1 → 1.0.3

package/index.d.ts

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

package/index.js

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

package/interface/Board.d.ts

@@ -1,10 +1,49 @@
-/// <reference types="react" />
-export interface BoardProps {
-    children: React.ReactNode;
-    widget?: {
-        widgets: [[string, React.ReactNode]];
+import { Dispatch } from "react";
+import { Button, Size } from "./Property";
+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 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[];
+            renderItem: (items: T) => React.ReactNode;
+        }[];
+        dataField?: {
+            fields: Record<string, string>;
+            sizes: Record<string, string>;
+        };
+        gap?: number;
     };
+    header?: BoardHeaderProps;
+    subWidget?: React.ReactNode;
 }

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/Modal.d.ts

@@ -5,7 +5,7 @@ export interface ModalProps {
     options?: {
         width?: Size;
         height?: Size;
-        padding?: Record<string, number>;
+        padding?: boolean;
         buttons?: Button[];
     };
 }

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";
+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: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/ControllerModal.d.ts

@@ -0,0 +1,6 @@
+import { Button } from "../interface";
+export default function ControllerModal({ options, }: {
+    options?: {
+        buttons?: Button[];
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/modal/ControllerModal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "./Modal";
+export default function ControllerModal({ options, }) {
+    const { buttons } = options ?? {};
+    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons }, children: _jsx("div", { className: "w-full h-120 border-2 " }) }));
+}

package/modal/Modal.js

@@ -8,6 +8,8 @@ const widthSize = {
     md: "w-2/3 min-w-76 max-w-176",
     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: "",
@@ -15,12 +17,15 @@ const heightSize = {
     md: "h-72 sm:h-48",
     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 ?? {};
     const { clearModal } = useWidgetStore();
     const sizes = `${heightSize[height ?? "sm"]} ${widthSize[width ?? "md"]}`;
-    const styles = "rounded-xl bg-white relative";
-    return (_jsx("div", { className: background, children: _jsxs("div", { className: cn(sizes, styles), children: [children, _jsx(_Fragment, { children: buttons ? (_jsx("div", { className: `${absolute.br(5, 7)} flex justify-end gap-4`, children: buttons.map(([text, onClick]) => (_jsx("button", { className: "rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white", onClick: onClick, children: text }, text))) })) : null }), _jsx("button", { className: absolute.tl(5, 7) +
+    const paddings = "pt-18 px-25";
+    const styles = "rounded-xl bg-white relative overflow-hidden";
+    return (_jsx("div", { className: background, children: _jsxs("div", { className: cn(sizes, styles, paddings), children: [children, _jsx(_Fragment, { children: buttons ? (_jsx("div", { className: `${absolute.br(8, 10)} flex justify-end gap-4`, children: buttons.map(([text, onClick]) => (_jsx("button", { className: "rounded-2xl bg-black px-8 py-2 text-2xl font-bold text-white", onClick: onClick, children: text }, text))) })) : null }), _jsx("button", { className: absolute.tl(5, 7) +
                         "bg-black rounded-full h-9 w-9 flex justify-center items-center", onClick: clearModal, children: _jsx("div", { className: "x-shape" }) })] }) }));
 }

package/modal/index.d.ts

@@ -1,2 +1,3 @@
 export { default as TestModal } from "./TestModal";
 export { default as AlertModal } from "./AlertModal";
+export { default as ControllerModal } from "./ControllerModal";

package/modal/index.js

@@ -1,2 +1,3 @@
 export { default as TestModal } from "./TestModal";
 export { default as AlertModal } from "./AlertModal";
+export { default as ControllerModal } from "./ControllerModal";

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,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,11 +14,13 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-lottie-player": "^1.5.6",
     "react-router-dom": "^6.21.3",
     "recharts": "^2.11.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {}
 }

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 w-full 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: {} }),
 }));