@edu-tosel/design 1.0.4 → 1.0.6

package/interface/Interaction.d.ts

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

package/interface/Interaction.js

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

package/interface/Modal.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { Button, Scripts, Size } from "./Property";
-export interface ModalProps {
-    children: React.ReactNode;
-    options?: {
-        width?: Size;
-        height?: Size;
-        padding?: boolean;
-        buttons?: Button[];
-    };
-}
-export interface AlertModalProps {
-    title: string;
-    scripts: Scripts;
-    options?: {
-        buttons?: Button[];
-    };
-}

package/interface/Modal.js

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

package/interface/Property.js

@@ -1,14 +0,0 @@
-/**
- * Size type
- * @enum {string}
- * @readonly
- * @description - Size type for the component
- * @property {"xs"} xs - Extra small size
- * @property {"sm"} sm - Small size
- * @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/Widget.d.ts

@@ -1,4 +0,0 @@
-export interface WidgetEvent {
-    event: string;
-    type: "view" | "modal";
-}

package/interface/Widget.js

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

package/interface/index.js

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

package/layout/dashboard/Header.d.ts

@@ -1,5 +0,0 @@
-import "../../globals.css";
-export declare function Header({ title, image, }: {
-    title: string;
-    image?: [string, string];
-}): import("react/jsx-runtime").JSX.Element;

package/layout/dashboard/Header.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../../globals.css";
-import { useState } from "react";
-import { cn } from "../../util";
-export function Header({ title, image, }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [src, href] = image ?? [];
-    return (_jsx("div", { className: "fixed top-0 left-0 xl:relative flex h-20 w-full items-center justify-between bg-white px-9 shadow-black/10 shadow-b-md z-40", children: _jsxs("div", { className: "flex h-12 items-center gap-12", children: [src && href ? (_jsx("a", { href: href, children: _jsx("img", { src: src, alt: "logo", className: "h-12 w-50" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold ", children: title })] }) }));
-}
-function Menu({ flag }) {
-    const positions = "absolute right-0 z-40 ";
-    const layouts = "w-48 overflow-hidden";
-    const styles = "shadow-md bg-white";
-    const animations = () => {
-        const height = flag ? "h-80" : "h-0";
-        return [height, "duration-500"].join(" ");
-    };
-    return (_jsxs("div", { className: cn(positions, layouts, styles, animations()), children: [_jsx("div", { children: "\u314E\u3147" }), _jsx("div", { children: "\u314E\u3147" })] }));
-}

package/layout/dashboard/index.d.ts

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

package/layout/dashboard/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { NavigationContainer } from "../../navigation";
-import { Header } from "./Header";
-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 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/layout/index.js

@@ -1 +0,0 @@
-export * from "./dashboard";

package/menu/SideMenu.d.ts

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

package/menu/SideMenu.js

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

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

package/modal/AlertModal.d.ts

@@ -1,2 +0,0 @@
-import { AlertModalProps } from "../interface/Modal";
-export default function AlertModal({ title, scripts, options, }: AlertModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/AlertModal.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { col } from "../util";
-import { Modal } from "./Modal";
-export default function AlertModal({ title, scripts, options, }) {
-    const { script, subScript } = scripts ?? {};
-    const { buttons } = options ?? {};
-    return (_jsx(Modal, { options: { buttons }, children: _jsx("div", { className: col(3) + "pl-25 pt-18 h-full pb-12", children: _jsxs("div", { className: col(6), children: [_jsx("div", { className: "text-3xl font-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-bold", children: script })] }) }) }));
-}

package/modal/ControllerModal.d.ts

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

package/modal/ControllerModal.js

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

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

package/modal/Modal.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useWidgetStore } from "../store";
-import { absolute, cn } from "../util";
-const background = "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm fixed top-0 left-0";
-const widthSize = {
-    xs: "w-2/3 min-w-76 max-w-176",
-    sm: "w-2/3 min-w-76 max-w-176",
-    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: "",
-    sm: "h-100",
-    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 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/TestModal.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { Button } from "../interface";
-export default function TestModal({ children, options, }: {
-    children: React.ReactNode;
-    options?: {
-        buttons?: Button[];
-    };
-}): import("react/jsx-runtime").JSX.Element;

package/modal/TestModal.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Modal } from "./Modal";
-export default function TestModal({ children, options, }) {
-    const { buttons } = options ?? {};
-    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons }, children: _jsx("div", { className: "pt-18 pl-25", children: children }) }));
-}

package/modal/index.js

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

package/navigation/Navigation.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const buttonClassNames: (href: string, nowPath: string, color?: [string, string]) => string;
-export declare function NavigationContainer({ children, }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;

package/navigation/Navigation.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { center, cn } from "../util";
-export const buttonClassNames = (href, nowPath, color) => {
-    const [bg, text] = color ?? ["white", "black"];
-    const classNames = [
-        center.row(6),
-        `text-${text}`,
-        "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) => {
-        return href.split("/").pop() === nowPath.split("/").pop();
-    };
-    const toggle = checkPathMatch(href, nowPath)
-        ? `bg-${bg}`
-        : "bg-gray-500 xl:bg-transparent";
-    return [classNames, toggle].join(" ");
-};
-export function NavigationContainer({ children, }) {
-    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(displays, positions, sizes, styles), children: children }));
-}

package/navigation/index.js

@@ -1 +0,0 @@
-export * from "./Navigation";

package/shelf/Shelf.d.ts

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

package/shelf/Shelf.js

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

package/shelf/index.js

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

package/store/index.d.ts

@@ -1,16 +0,0 @@
-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

@@ -1,39 +0,0 @@
-import { create } from "zustand";
-export const useWidgetStore = create((set) => ({
-    events: [],
-    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" }],
-    })),
-    removeModal: (prop) => {
-        set((state) => ({
-            events: state.events.filter(({ event }) => event !== prop),
-        }));
-    },
-    clearModal: () => set((state) => ({
-        events: state.events.filter(({ type }) => type !== "modal"),
-    })),
-    tempData: {},
-    setTempData: (prop) => set((state) => ({ tempData: { ...state.tempData, ...prop } })),
-    clearTempData: () => set({ tempData: {} }),
-}));

package/text/LineBreaks.d.ts

@@ -1,4 +0,0 @@
-export declare function LineBreaks({ texts, gap }: {
-    texts: string[];
-    gap?: number;
-}): import("react/jsx-runtime").JSX.Element;

package/text/LineBreaks.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { col } from "../util";
-export function LineBreaks({ texts, gap }) {
-    return (_jsx("div", { className: col(gap), children: texts.map((text, index) => (_jsx("div", { className: "leading-tight", children: text }, index))) }));
-}

package/text/index.js

@@ -1 +0,0 @@
-export * from "./LineBreaks";

package/util/classNames.d.ts

@@ -1 +0,0 @@
-export default function classNames(...props: string[]): string;

package/util/classNames.js

@@ -1,4 +0,0 @@
-export default function classNames(...props) {
-    const array = props.map((prop) => prop.split(" "));
-    return array.flat().join(" ");
-}

package/util/colors.d.ts

@@ -1,10 +0,0 @@
-export declare const colorsByLevel: {
-    PS: string;
-    ST: string;
-    BA: string;
-    JR: string;
-    HJ: string;
-};
-export declare const gradient: {
-    lab: string;
-};

package/util/colors.js

@@ -1,10 +0,0 @@
-export const colorsByLevel = {
-    PS: "ps-pink",
-    ST: "st-orange",
-    BA: "ba-yellow",
-    JR: "jr-blue",
-    HJ: "hj-blue",
-};
-export const gradient = {
-    lab: "gradient-to-br from-violet-light/20 to-blue-sky/40 ",
-};

package/util/display.d.ts

@@ -1,25 +0,0 @@
-export declare const row: (gap?: number) => string;
-export declare const col: (gap?: number, width?: number | string) => string;
-export declare const between: {
-    row: string;
-    col: string;
-};
-export declare const center: {
-    col: (gap?: number) => string;
-    row: (gap?: number) => string;
-    colO: (gap?: number) => string;
-    rowO: (gap?: number) => string;
-    screen: {
-        default: string;
-        col: (gap?: number) => string;
-        row: (gap?: number) => string;
-    };
-};
-export declare const grid: {
-    col: (col: number, gap?: number) => string;
-    row: (row: number, gap?: number) => string;
-};
-export declare const box: {
-    row: (height: number, gap?: number) => string;
-    col: (width: number, gap?: number) => string;
-};

package/util/display.js

@@ -1,25 +0,0 @@
-export const row = (gap = 8) => `flex flex-row gap-${gap} `;
-export const col = (gap = 8, width) => `flex flex-col gap-${gap} ${width ? `w-${width}` : "w-full"} `;
-export const between = {
-    row: "flex flex-row justify-between items-center ",
-    col: "flex flex-col justify-between items-center ",
-};
-export const center = {
-    col: (gap = 0) => `gap-${gap} flex flex-col items-center `,
-    row: (gap = 0) => `gap-${gap} flex flex-row items-center `,
-    colO: (gap = 0) => `gap-${gap} flex flex-col justify-center items-center `,
-    rowO: (gap = 0) => `gap-${gap} flex flex-row justify-center items-center `,
-    screen: {
-        default: "flex justify-center items-center min-h-screen w-full overflow-hidden min-h-screen relative ",
-        col: (gap = 0) => `gap-${gap} flex flex-col justify-center items-center min-h-screen w-full `,
-        row: (gap = 0) => `gap-${gap} flex flex-row justify-center items-center min-h-screen w-full `,
-    },
-};
-export const grid = {
-    col: (col, gap = 12) => `grid grid-cols-${col} gap-${gap} `,
-    row: (row, gap = 12) => `grid grid-rows-${row}  gap-${gap}`,
-};
-export const box = {
-    row: (height, gap) => `h-${height} gap-${gap} flex flex-row `,
-    col: (width, gap) => `w-${width} gap-${gap} flex flex-col `,
-};

package/util/displayResponsive.d.ts

@@ -1,3 +0,0 @@
-export declare const responsiveColToRow: () => string;
-export declare const responsiveRowToCol: () => string;
-export declare const responsiveGridToCol: (gridCell: number) => string;

package/util/displayResponsive.js

@@ -1,15 +0,0 @@
-export const responsiveColToRow = () => {
-    const df = "flex flex-col";
-    const mark = "md:flex-row";
-    return [df, mark].join(" ");
-};
-export const responsiveRowToCol = () => {
-    const df = "flex flex-row";
-    const md = "md:flex-col";
-    return [df, md].join(" ");
-};
-export const responsiveGridToCol = (gridCell) => {
-    const df = `grid grid-cols-${gridCell}`;
-    const md = "md:flex md:flex-col";
-    return [df, md].join(" ");
-};

package/util/index.js

@@ -1,7 +0,0 @@
-export { default as cn } from "./classNames";
-export * from "./colors";
-export * from "./display";
-export * from "./displayResponsive";
-export * from "./pattern";
-export * from "./position";
-export * from "./shape";

package/util/pattern.d.ts

@@ -1,7 +0,0 @@
-type Color = [string, string];
-export declare const buttonStyle: {
-    default: (colorSet: [Color, Color] | [Color], size?: {
-        width: number;
-    }) => string;
-};
-export {};

package/util/pattern.js

@@ -1,15 +0,0 @@
-export const buttonStyle = {
-    default: (colorSet, size) => {
-        const [colors, hoverColors] = colorSet;
-        const [bgColor, textColor] = colors;
-        const [bgHoverColor, textHoverColor] = hoverColors || ["", ""];
-        const { width } = size || { width: 32 };
-        const classNames = [
-            `w-${width}`,
-            `bg-${bgColor} ${bgHoverColor ? `hover:bg-${bgHoverColor}` : ""}`,
-            `text-${textColor} ${textHoverColor ? `hover:text-${textHoverColor}` : ""}`,
-            "font-bold py-2 px-4 rounded",
-        ];
-        return classNames.join(" ");
-    },
-};

package/util/position.d.ts

@@ -1,14 +0,0 @@
-export declare const fixed: {
-    tl: (top: number | string, left: number | string) => string;
-    br: (bottom: number | string, right: number | string) => string;
-};
-export declare const absolute: {
-    tl: (top?: number | string, left?: number | string) => string;
-    tr: (top?: number | string, right?: number | string) => string;
-    br: (bottom?: number, right?: number) => string;
-    bl: (bottom?: number, left?: number) => string;
-    full: {
-        tl: (top?: number | string, left?: number | string) => string;
-        bl: (bottom?: number | string, left?: number | string) => string;
-    };
-};

package/util/position.js

@@ -1,44 +0,0 @@
-export const fixed = {
-    tl: (top, left) => `fixed top-${top} left-${left} z-50 `,
-    br: (bottom, right) => `fixed bottom-${bottom} right-${right} z-50 `,
-};
-export const absolute = {
-    tl: (top, left) => {
-        const topClass = () => {
-            if (typeof top === "number" && top < 0)
-                return `-top-${Math.abs(top)}`;
-            return `top-${top}`;
-        };
-        const leftClass = () => {
-            if (typeof left === "number" && left < 0)
-                return `-left-${Math.abs(left)}`;
-            return `left-${left}`;
-        };
-        return `absolute ${topClass()} ${leftClass()} `;
-    },
-    tr: (top, right) => {
-        const topClass = () => {
-            if (typeof top === "number" && top < 0)
-                return `-top-${Math.abs(top)} `;
-            return `top-${top}`;
-        };
-        const rightClass = () => {
-            if (typeof right === "number" && right < 0)
-                return `-right-${Math.abs(right)} `;
-            return `right-${right}`;
-        };
-        return `absolute ${topClass()} ${rightClass()} `;
-    },
-    br: (bottom = 0, right = 0) => `absolute bottom-${bottom} right-${right} `,
-    bl: (bottom = 0, left = 0) => `absolute bottom-${bottom} left-${left} `,
-    full: {
-        tl: (top, left) => {
-            if (!(typeof top === "number") || !(typeof left === "number"))
-                return `absolute top-${top} left-${left} w-full `;
-            const topClass = top >= 0 ? `top-${top}` : `-top-${Math.abs(top)}`;
-            const leftClass = left >= 0 ? `left-${left}` : `-left-${Math.abs(left)}`;
-            return `absolute w-full ${topClass} ${leftClass} `;
-        },
-        bl: (bottom, left) => `absolute bottom-${bottom ?? 0} left-${left ?? 0} w-full `,
-    },
-};

package/util/shape.d.ts

@@ -1 +0,0 @@
-export declare const circle: (radius: number) => string;

package/util/shape.js

@@ -1,3 +0,0 @@
-export const circle = (radius) => {
-    return `rounded-full w-${radius} h-${radius} overflow-hidden `;
-};

package/version.txt

@@ -1 +0,0 @@
-1.0.4