@edu-tosel/design 1.0.6 → 1.0.8

package/package.json

@@ -1,49 +1,28 @@
-{
-  "name": "@edu-tosel/design",
-  "version": "1.0.6",
-  "description": "UI components for International TOSEL Committee",
-  "keywords": [
-    "jsx",
-    "tsx",
-    "tailwindcss",
-    "ui",
-    "design system"
-  ],
-  "author": "International TOSEL Committee",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "build-publish": "rimraf ./dist && tsc -p tsconfig.build.json --noEmit false",
-    "publish": "npm run build-publish && node setupPackage.js && cd dist && npm publish"
-  },
-  "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",
-    "zustand": "^4.5.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "postcss": "^8.4.33",
-    "rimraf": "^5.0.5",
-    "tailwindcss": "^3.4.1",
-    "vite": "^5.0.8"
-  }
-}
+{
+  "name": "@edu-tosel/design",
+  "version": "1.0.8",
+  "description": "UI components for International TOSEL Committee",
+  "keywords": [
+    "jsx",
+    "tsx",
+    "tailwindcss",
+    "ui",
+    "design system"
+  ],
+  "author": "International TOSEL Committee",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {},
+  "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",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {}
+}

package/shelf/Shelf.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default 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 default function Shelf({ children }) {
+    return _jsx("div", { className: "inline-flex flex-col gap-8 xl:w-auto", children: children });
+}

package/{src/shelf/index.tsx → shelf/index.d.ts}

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

package/shelf/index.js

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

package/store/index.d.ts

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

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

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

package/text/LineBreaks.js

@@ -0,0 +1,5 @@
+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/{src/text/index.tsx → text/index.d.ts}

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

package/text/index.js

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

package/util/classNames.d.ts

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

package/util/classNames.js

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

package/util/colors.d.ts

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

package/util/colors.js

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

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

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

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

package/util/displayResponsive.js

@@ -0,0 +1,15 @@
+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/{src/util/index.ts → util/index.d.ts}

@@ -1,7 +1,7 @@
-export { default as cn } from "./classNames";
-export * from "./colors";
-export * from "./display";
-export * from "./displayResponsive";
-export * from "./pattern";
-export * from "./position";
-export * from "./shape";
+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/index.js

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

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

package/util/pattern.js

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

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

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

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

package/util/shape.js

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

package/version.txt

@@ -0,0 +1 @@
+1.0.8

package/.eslintrc.cjs

@@ -1,17 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-  ],
-  ignorePatterns: ["dist", ".eslintrc.cjs", "tailwind.config.ts"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
-  rules: {
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-    "@typescript-eslint/no-explicit-any": "off",
-    "react-refresh/only-export-components": "off",
-  },
-};

package/Dockerfile

@@ -1,16 +0,0 @@
-FROM node:18-alpine
-
-RUN mkdir -p /usr/app
-WORKDIR /usr/app
-
-# Install dependencies based on the preferred package manager
-COPY ./ ./
-
-RUN npm ci
-
-RUN npm run build
-RUN rm -rf src
-
-EXPOSE 12345
-
-CMD ["npx", "serve", "-s", "build", "-l", "12345"]

package/LICENCE

@@ -1,19 +0,0 @@
-Copyright (c) 2024 International TOSEL Committee
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/docs/README.md

@@ -1,47 +0,0 @@
-# TOSEL Design Library
-
-TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
-
-## Component
-
-컴포넌트들은 기본적으로 기능 단위로만 구성한다.
-
-도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.
-
-### Board
-
-Board 컴포넌트는 가장 큰 단위의 컨테이너이다.
-
-일반적으로
-
-### Card
-
-Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
-
-일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
-
-### Deck
-
-Deck 컴포넌트는 여러가지 Card 컴포넌트를 담고 있는 컨테이너이다.
-
-Deck 컴포넌트는 담고있는 Card 컴포넌트들을 수평 정렬한다.
-
-### Layout
-
-Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.
-
-Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.
-
-### Navigation
-
-Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.
-
-각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.
-
-(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)
-
-### Shelf
-
-Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.
-
-Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DESIGN SPACE</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>