@edu-tosel/design 0.1.4 → 0.1.6

package/{style.css → globals.css}

@@ -1,41 +1,40 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "Pretendard-Medium";
-  src: url("../public/fonts/Pretendard-Medium.otf") format("opentype");
-}
-
-@font-face{
-  font-family: "Kostar";
-  src: url("../public/fonts/Kostar.ttf") format("truetype");  
-}
-
-@font-face{
-  font-family: "NicoMoji";
-  src: url("../public/fonts/NicoMoji.ttf") format("truetype");
-}
-
-@font-face{
-  font-family: "Megrim";
-  src: url("../public/fonts/Megrim.ttf") format("trueType");
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #173a8b;
-  opacity: 0.5;
-  border-radius: 10px;
-}
-
-
-.box-shadow {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Pretendard-Medium";
+  src: url("/fonts/Pretendard-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Kostar";
+  src: url("/fonts/Kostar.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "NicoMoji";
+  src: url("/fonts/NicoMoji.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Megrim";
+  src: url("/fonts/Megrim.ttf") format("trueType");
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #173a8b;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
+}

package/index.d.ts

@@ -0,0 +1,9 @@
+import "./globals.css";
+export * from "./board";
+export * from "./card";
+export * from "./deck";
+export * from "./layout";
+export * from "./modal";
+export * from "./navigation";
+export * from "./shelf";
+export * from "./text";

package/index.js

@@ -0,0 +1,9 @@
+import "./globals.css";
+export * from "./board";
+export * from "./card";
+export * from "./deck";
+export * from "./layout";
+export * from "./modal";
+export * from "./navigation";
+export * from "./shelf";
+export * from "./text";

package/{header/index.d.ts → layout/dashboard/Header.d.ts}

@@ -1,5 +1,5 @@
-import "../style.css";
-export declare function DashboardHeader({ title, image }: {
-    title: string;
-    image?: [string, string];
-}): import("react/jsx-runtime").JSX.Element;
+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

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

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

@@ -0,0 +1,10 @@
+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 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] })] }));
+}

package/layout/index.d.ts

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

package/layout/index.js

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

package/modal/Modal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function NoticeModal({ titles, children, buttons, close, }: {
+    titles?: string[];
+    children: React.ReactNode;
+    buttons?: [string, () => unknown | (() => Promise<unknown>)][];
+    close: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AlertModal(): import("react/jsx-runtime").JSX.Element;

package/modal/Modal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { col, absolute } from "../util";
+function Modal({ children }) {
+    const classNames = [
+        "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm fixed top-0 left-0",
+    ].join(" ");
+    const modalClassNames = [
+        "h-100 w-2/3 min-w-76 max-w-176 rounded-xl bg-white relative",
+    ].join(" ");
+    return (_jsx("div", { className: classNames, children: _jsx("div", { className: modalClassNames, children: children }) }));
+}
+export function NoticeModal({ titles, children, buttons, close, }) {
+    const [title, subTitle] = titles || ["", ""];
+    const buttonClassNames = [
+        "rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white",
+    ].join(" ");
+    return (_jsxs(Modal, { children: [_jsxs("div", { className: col(3) + "px-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: subTitle })] }), _jsx("div", { children: children }), buttons ? (_jsx("div", { className: "mt-auto flex justify-end gap-4", children: buttons.map(([text, onClick]) => (_jsx("button", { className: buttonClassNames, onClick: onClick, children: text }, text))) })) : null] }), _jsx("button", { className: absolute.tl(5, 7) + "bg-black rounded-full h-9 w-9", onClick: close })] }));
+}
+export function AlertModal() {
+    return (_jsx("div", { children: _jsx("div", {}) }));
+}

package/modal/index.d.ts

@@ -1,9 +1 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function NoticeModal({ titles, children, buttons, close, }: {
-    titles?: string[];
-    children: React.ReactNode;
-    buttons?: [string, () => unknown | (() => Promise<unknown>)][];
-    close?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function AlertModal(): import("react/jsx-runtime").JSX.Element;
+export * from "./Modal";

package/modal/index.js

@@ -1,35 +1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { col, absolute } from "../util";
-function Modal(_a) {
-    var children = _a.children;
-    var classNames = [
-        absolute.tl() +
-            "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm",
-    ].join(" ");
-    var modalClassNames = ["h-100 w-2/3 min-w-76 max-w-176 rounded-xl bg-white relative"].join(" ");
-    return (_jsx("div", __assign({ className: classNames }, { children: _jsx("div", __assign({ className: modalClassNames }, { children: children })) })));
-}
-export function NoticeModal(_a) {
-    var titles = _a.titles, children = _a.children, buttons = _a.buttons, close = _a.close;
-    var _b = titles || ["", ""], title = _b[0], subTitle = _b[1];
-    var buttonClassNames = ["rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white"].join(" ");
-    return (_jsxs(Modal, { children: [_jsxs("div", __assign({ className: col(3) + "px-25 pt-18 h-full pb-12" }, { children: [_jsxs("div", __assign({ className: col(6) }, { children: [_jsx("div", __assign({ className: "text-3xl font-bold" }, { children: title })), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", __assign({ className: "text-xl font-bold" }, { children: subTitle }))] })), _jsx("div", { children: children }), buttons ? (_jsx("div", __assign({ className: "mt-auto flex justify-end gap-4" }, { children: buttons.map(function (_a) {
-                            var text = _a[0], onClick = _a[1];
-                            return (_jsx("button", __assign({ className: buttonClassNames, onClick: onClick }, { children: text }), text));
-                        }) }))) : null] })), _jsx("button", { className: absolute.tl(5, 7) + "bg-black rounded-full h-9 w-9", onClick: close })] }));
-}
-export function AlertModal() {
-    return (_jsx("div", { children: _jsx("div", {}) }));
-}
+export * from "./Modal";

package/navigation/Navigation.d.ts

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

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

package/navigation/index.d.ts

@@ -1,6 +1 @@
-/// <reference types="react" />
-import "../style.css";
-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;
+export * from "./Navigation";

package/navigation/index.js

@@ -1,24 +1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import "../style.css";
-import { center } from "../util";
-export var buttonClassNames = function (href, nowPath, color) {
-    var _a = color !== null && color !== void 0 ? color : ["black", "white"], text = _a[0], bg = _a[1];
-    var classNames = [center.row(6), "text-".concat(text), "font-bold w-50 h-11 rounded-2xl pl-5"].join(" ");
-    var toggle = nowPath === href ? "bg-".concat(bg) : "bg-transparent";
-    return [classNames, toggle].join(" ");
-};
-export function NavigationContainer(_a) {
-    var children = _a.children;
-    return _jsx("div", __assign({ className: center.col() + "w-54" }, { children: children }));
-}
+export * from "./Navigation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -9,40 +9,16 @@
   ],
   "author": "International TOSEL Committee",
   "license": "MIT",
+  "type": "module",
+  "scripts": {},
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.1",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.21.3",
+    "recharts": "^2.11.0",
     "tailwind-scrollbar-hide": "^1.1.7",
-    "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-directional-shadows": "^0.0.6",
-    "tw-elements": "^1.1.0",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {},
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "typescript": "^5.2.2"
   },
   "devDependencies": {}
 }

package/shelf/Shelf.d.ts

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

package/shelf/Shelf.js

@@ -0,0 +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 }));
+}

package/shelf/index.d.ts

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

package/shelf/index.js

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