@edu-tosel/design 1.0.16 → 1.0.17

package/board/widget/Header.js

@@ -12,7 +12,7 @@ export default function BoardHeader({ titles, tags, options, }) {
     const container = {
         positions: "fixed top-15 xl:top-0 left-0 z-20 xl:relative flex items-center",
         paddings: "px-7.5",
-        styles: `bg-${bgColor} text-${textColor}`,
+        styles: `${bgColor} ${textColor}`,
         sizes: "w-full h-19",
         border: "border-b-2 border-green-dark",
     };

package/interaction/widget/LoadingWorm.js

@@ -18,6 +18,6 @@ function SubComponent({ index, ease, }) {
         `z-${50 - index}`,
     ].join(" ");
     const sizes = "w-25 h-20";
-    const styles = `duration-${timer} rounded-lg bg-${gradient.lab} opacity-40`;
+    const styles = `duration-${timer} rounded-lg bg-${gradient.bg.lab} opacity-40`;
     return (_jsxs("div", { className: cn(positions, sizes, styles), children: [_jsxs("div", { children: ["Index is ", index] }), _jsxs("div", { className: "text-xs", children: [timer, "ms \uB3D9\uC548 ", flag.toString()] })] }));
 }

package/layout/template/dashboard/Header.js

@@ -10,7 +10,7 @@ export function Header({ title, image, }) {
         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",
+        background: !isDark ? `${gradient.bg.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/template/dashboard/index.js

@@ -16,8 +16,8 @@ function Layout({ subject, colors, navigations, children, }) {
     }, [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`,
+        background: !isDark ? bgColor : "bg-black/80",
+        styles: `${textColor} font-pretendard-medium`,
         dark: isDark && "dark",
     };
     const body = {

package/modal/template/Alert.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { col } from "../../util";
 import ModalDesign from "../widget/Modal.design";
 export default function Alert({ isVisible, title, scripts, options, }) {
     const { script, subScript } = scripts ?? {};
     const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: col(3), 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 })] }) }) }));
+    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-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/navigation/Navigation.js

@@ -12,10 +12,10 @@ export const buttonClassNames = (href, nowPath, color) => {
     };
     const toggle = checkPathMatch(href, nowPath)
         ? !isDark
-            ? `bg-${bg} text-${selectedText}`
+            ? `${bg} ${selectedText}`
             : "bg-white text-black"
         : (!isDark ? "bg-white " : "bg-black ") +
-            `xl:bg-transparent xl:hover:bg-white/50 hover:text-green-dark text-${text} dark:text-white`;
+            `xl:bg-transparent xl:hover:bg-white/50 hover:text-green-dark ${text} dark:text-white`;
     return [cn(container), toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {

package/package.json

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

package/tailwind.config.ts

@@ -492,54 +492,7 @@ export default {
     },
   },
   safelist: [
-    {
-      pattern: /font-.*/,
-    },
-    {
-      pattern: /animate-.*/,
-    },
-    {
-      pattern: /shadow-.*/,
-    },
-
-    {
-      pattern: /flex-.*/,
-    },
-    {
-      pattern: /overflow-*./,
-    },
-    {
-      pattern: /col-.*/,
-    },
-    {
-      pattern: /row-.*/,
-    },
-    {
-      pattern: /flex-.*/,
-    },
-    {
-      pattern: /justify-.*/,
-    },
-    {
-      pattern: /items-.*/,
-    },
-    {
-      pattern: /grid-.*/,
-    },
-    {
-      pattern: /gap-.*/,
-    },
-    {
-      pattern: /border-.*/,
-    },
-    {
-      pattern: /min-.*/,
-    },
-    {
-      pattern: /max-.*/,
-    },
     { pattern: /w-.*/ },
-    { pattern: /h-.*/ },
     {
       pattern: /top-.*/,
     },
@@ -558,50 +511,9 @@ export default {
     {
       pattern: /right*.*/,
     },
-    { pattern: /bg-.*/ },
-    { pattern: /text-.*/ },
-    {
-      pattern: /p-.*/,
-    },
-    {
-      pattern: /px-.*/,
-    },
-    {
-      pattern: /pl-.*/,
-    },
-    {
-      pattern: /py-.*/,
-    },
-    {
-      pattern: /pb-.*/,
-    },
-    {
-      pattern: /m-.*/,
-    },
-    {
-      pattern: /mx-.*/,
-    },
-    {
-      pattern: /my-.*/,
-    },
-    {
-      pattern: /z-.*/,
-    },
-    {
-      pattern: /from-.*/,
-    },
-    {
-      pattern: /to-.*/,
-    },
-    {
-      pattern: /via-.*/,
-    },
     {
       pattern: /delay-.*/,
     },
-    {
-      pattern: /overflow-.*/,
-    },
     {
       pattern: /duration-.*/,
     },

package/text/Formatter.d.ts

@@ -1,3 +1,3 @@
-export declare function Formatter({ script }: {
+export default function Formatter({ script }: {
     script: string;
 }): import("react/jsx-runtime").JSX.Element;

package/text/Formatter.js

@@ -1,18 +1,81 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export function Formatter({ script }) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useId } from "react";
+export default function Formatter({ script }) {
+    const parses = parseType(script);
+    const results = parses.map(([type, content], index) => {
+        if (type === "code")
+            return (_jsx("div", { className: "bg-gray-500 p-2", children: parseCodeLines(content) }, index));
+        else
+            return _jsx("div", { children: parseTextLines(content) }, index);
+    });
+    return _jsx("div", { className: "flex flex-col", children: results });
+}
+function parseType(script) {
+    const segments = script.split("```");
+    return segments.reduce((acc, segment, index) => {
+        if (index % 2 === 0) {
+            acc.push(["text", segment]);
+        }
+        else {
+            acc.push(["code", segment]);
+        }
+        return acc;
+    }, []);
+}
+function parseCodeLines(script) {
+    const lines = script.split("\n");
+    return lines.map((line, index) => _jsx("div", { children: line }, index));
+}
+function parseTextLines(script) {
     const lines = script.split("\n");
-    const htmlRegex = /<div.*?>.*?<\/div>/gs;
-    const result = lines.map((line, index) => {
-        const htmlMatch = line.match(htmlRegex);
-        if (htmlMatch)
-            return (_jsx("div", { dangerouslySetInnerHTML: { __html: htmlMatch[0] } }, index));
-        if (line.startsWith("# "))
+    return lines.map((line, index) => {
+        if (line === "") {
+            return _jsx("br", {}, index);
+        }
+        else if (line.startsWith("# ")) {
             return (_jsx("div", { className: "text-3xl", children: line.replace("# ", "") }, index));
-        if (line.startsWith("## "))
+        }
+        else if (line.startsWith("## ")) {
             return (_jsx("div", { className: "text-2xl", children: line.replace("## ", "") }, index));
-        if (line.startsWith("```"))
-            return (_jsx("div", { className: "bg-gray-200 p-2", children: line.replace(/^```|```$/g, "") }, index));
-        return _jsx("div", { children: line }, index);
+        }
+        else if (line.startsWith("### ")) {
+            return (_jsx("div", { className: "text-xl", children: line.replace("### ", "") }, index));
+        }
+        else {
+            return (_jsx("div", { children: _jsx(Parse, { script: line }) }, index));
+        }
+    });
+}
+function Parse({ script }) {
+    const id = useId();
+    const arrs = [[[], script]];
+    const arrs2 = parseStyles("**", "bold", arrs);
+    const arrs3 = parseStyles("*", "italic", arrs2);
+    const parseFontType = (types) => {
+        if (types.length === 0)
+            return "";
+        const classNames = types.map((type) => {
+            if (type === "bold")
+                return "font-bold";
+            if (type === "italic")
+                return "italic";
+            return "";
+        });
+        return classNames.join(" ");
+    };
+    return (_jsx(Fragment, { children: arrs3.map(([types, script], index) => (_jsx("span", { className: parseFontType(types), children: script }, id + index))) }, id));
+}
+function parseStyles(trigger, type, props) {
+    const result = props.flatMap(([types, script]) => {
+        const segments = script.split(trigger);
+        return segments.map((segment, index) => {
+            if (index % 2 !== 0) {
+                return [[...types, type], segment];
+            }
+            else {
+                return [[...types], segment];
+            }
+        });
     });
-    return _jsx(_Fragment, { children: result });
+    return result;
 }

package/util/colors.d.ts

@@ -5,8 +5,15 @@ export declare const colorsByLevel: {
     JR: string;
     HJ: string;
 };
-export declare const gradient: {
+export declare const gradientBackground: {
     lab: string;
     greenToRed: string;
     greenToRedSoft: string;
 };
+export declare const gradient: {
+    bg: {
+        lab: string;
+        greenToRed: string;
+        greenToRedSoft: string;
+    };
+};

package/util/colors.js

@@ -5,8 +5,11 @@ export const colorsByLevel = {
     JR: "jr-blue",
     HJ: "hj-blue",
 };
+export const gradientBackground = {
+    lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
+    greenToRed: "bg-gradient-to-r from-green-dark to-red-crimson",
+    greenToRedSoft: "bg-gradient-to-r from-green-dark/20 to-red-crimson/20",
+};
 export const gradient = {
-    lab: "gradient-to-br from-violet-light/20 to-blue-sky/40 ",
-    greenToRed: "gradient-to-r from-green-dark to-red-crimson",
-    greenToRedSoft: "gradient-to-r from-green-dark/20 to-red-crimson/20",
+    bg: gradientBackground,
 };

package/util/index.d.ts

@@ -4,10 +4,7 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
-export * from "./display";
-export * from "./displayResponsive";
 export * from "./hooks";
 export * from "./pattern";
-export * from "./position";
 export * from "./shape";
 export * from "./hooks";

package/util/index.js

@@ -4,10 +4,7 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
-export * from "./display";
-export * from "./displayResponsive";
 export * from "./hooks";
 export * from "./pattern";
-export * from "./position";
 export * from "./shape";
 export * from "./hooks";

package/version.txt

@@ -1 +1 @@
-1.0.16
+1.0.17

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/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 `,
-    },
-};