@edu-tosel/design 1.0.5 → 1.0.6

package/src/layout/dashboard/index.tsx

@@ -0,0 +1,38 @@
+import { Fragment } from "react";
+import { NavigationContainer } from "../../navigation";
+import { Header } from "./Header";
+import { cn } from "../../util";
+
+export function DashboardLayout({
+  subject,
+  colors,
+  navigations,
+  children,
+}: {
+  subject: [string, string, string];
+  colors?: [string, string];
+  navigations: React.ReactNode[];
+  children: React.ReactNode;
+}) {
+  const [title, image, imageUrl] = subject ?? ["", "", ""];
+  const [bgColor, textColor] = colors ?? ["white", "black"];
+  return (
+    <div
+      className={cn(
+        `bg-${bgColor}`,
+        `text-${textColor}`,
+        `min-h-screen h-screen xl:h-auto font-pretendard-medium`
+      )}
+    >
+      <Header title={title} image={[image, imageUrl]} />
+      <div className="h-full flex gap-12 pt-20 xl:gap-8 xl:pl-2 2xl:px-9 xl:pt-10 xl:m-0 ">
+        <NavigationContainer>
+          {navigations.map((nav, index) => (
+            <Fragment key={index}>{nav}</Fragment>
+          ))}
+        </NavigationContainer>
+        {children}
+      </div>
+    </div>
+  );
+}

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

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

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./globals.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/menu/SideMenu.tsx

@@ -0,0 +1,104 @@
+import { Dispatch, useEffect } from "react";
+import { useWidgetStore } from "../store";
+import { cn } from "../util";
+import { HTMLElementType } from "../interface";
+import { SideMenuProps } from "../interface/Menu";
+
+export default function SideMenu<K extends string, T extends string | number>({
+  log,
+  setting,
+}: SideMenuProps<K, T>) {
+  const { tempData, setTempData, clearTempData, events, removeView } =
+    useWidgetStore();
+  const isOpen = events.some(({ event }) => event === "sideMenu");
+  const positions = "absolute top-20 right-0";
+  const paddings = "pt-8";
+  const sizes = `${isOpen ? "w-160" : "w-0"} h-full`;
+  const styles = `${
+    isOpen ? "opacity-100 z-30" : "opacity-0 z-0"
+  } bg-gray-200 duration-500`;
+  const { prints, logs } = log ?? {};
+
+  return (
+    <div className={cn(positions, sizes, styles, paddings)}>
+      <div
+        className={`relative w-full h-full flex flex-col items-center gap-12 ${
+          isOpen ? "block" : "hidden"
+        }`}
+      >
+        <div className="w-9/10 border-2 border-black p-2 h-80">
+          <div className="grid grid-cols-2">
+            {Object.entries(setting).map(([key, value]) => (
+              <div key={key} className="text-base font-bold flex gap-2">
+                <div className="w-16">{value["label"]}:</div>
+                <HTMLElement
+                  type={value["type"]}
+                  value={tempData[key]}
+                  options={value["options"]}
+                  onChange={(value) =>
+                    setTempData({
+                      ...tempData,
+                      [key]: value,
+                    })
+                  }
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="border-2 border-black w-9/10 p-2 h-48 overflow-y-scroll">
+          {logs?.map((log, i) => (
+            <div key={i} className="text-base flex gap-2">
+              {prints?.map((print) => (
+                <div key={print} className="">
+                  {log[print]}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={() => {
+            clearTempData();
+            return removeView("sideMenu");
+          }}
+          className="absolute left-0 top-2/5 text-3xl font-bold"
+        >
+          {">"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function HTMLElement({
+  type,
+  value,
+  options,
+  onChange,
+}: {
+  type: HTMLElementType;
+  value: string | number;
+  options?: [string, string][];
+  onChange?: Dispatch<string>;
+}) {
+  if (type === "text") return <div>{value}</div>;
+  if (type === "input")
+    return (
+      <input
+        className="w-32"
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    );
+  if (type === "select")
+    return (
+      <select value={value} onChange={(e) => onChange?.(e.target.value)}>
+        {options?.map(([value, label]) => (
+          <option key={value} value={value}>
+            {label}
+          </option>
+        ))}
+      </select>
+    );
+}

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

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

package/src/modal/AlertModal.tsx

@@ -0,0 +1,24 @@
+import { AlertModalProps } from "../interface/Modal";
+import { col } from "../util";
+import { Modal } from "./Modal";
+
+export default function AlertModal({
+  title,
+  scripts,
+  options,
+}: AlertModalProps) {
+  const { script, subScript } = scripts ?? {};
+  const { buttons } = options ?? {};
+
+  return (
+    <Modal options={{ buttons }}>
+      <div className={col(3) + "pl-25 pt-18 h-full pb-12"}>
+        <div className={col(6)}>
+          <div className="text-3xl font-bold">{title}</div>
+          <div className="h-2 w-14 rounded-full bg-pale-lavender" />
+          <div className="text-xl font-bold">{script}</div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/modal/ControllerModal.tsx

@@ -0,0 +1,17 @@
+import { Button } from "../interface";
+import { Modal } from "./Modal";
+
+export default function ControllerModal({
+  options,
+}: {
+  options?: {
+    buttons?: Button[];
+  };
+}) {
+  const { buttons } = options ?? {};
+  return (
+    <Modal options={{ width: "lg", height: "xl", buttons }}>
+      <div className="w-full h-120 border-2 "></div>
+    </Modal>
+  );
+}

package/src/modal/Modal.tsx

@@ -0,0 +1,66 @@
+import { ModalProps } from "../interface/Modal";
+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 }: ModalProps) {
+  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 (
+    <div className={background}>
+      <div className={cn(sizes, styles, paddings)}>
+        {children}
+        <>
+          {buttons ? (
+            <div className={`${absolute.br(8, 10)} flex justify-end gap-4`}>
+              {buttons.map(([text, onClick]) => (
+                <button
+                  key={text}
+                  className="rounded-2xl bg-black px-8 py-2 text-2xl font-bold text-white"
+                  onClick={onClick}
+                >
+                  {text}
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </>
+        <button
+          className={
+            absolute.tl(5, 7) +
+            "bg-black rounded-full h-9 w-9 flex justify-center items-center"
+          }
+          onClick={clearModal}
+        >
+          <div className="x-shape" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/modal/TestModal.tsx

@@ -0,0 +1,19 @@
+import { Button } from "../interface";
+import { Modal } from "./Modal";
+
+export default function TestModal({
+  children,
+  options,
+}: {
+  children: React.ReactNode;
+  options?: {
+    buttons?: Button[];
+  };
+}) {
+  const { buttons } = options ?? {};
+  return (
+    <Modal options={{ width: "lg", height: "xl", buttons }}>
+      <div className="pt-18 pl-25">{children}</div>
+    </Modal>
+  );
+}

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

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

package/src/navigation/Navigation.tsx

@@ -0,0 +1,37 @@
+import { center, cn } from "../util";
+
+export const buttonClassNames = (
+  href: string,
+  nowPath: string,
+  color?: [string, string]
+) => {
+  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: string, nowPath: string) => {
+    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,
+}: {
+  children: React.ReactNode;
+}) {
+  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 (
+    <div className={cn(displays, positions, sizes, styles)}>{children}</div>
+  );
+}

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

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

package/src/shelf/Shelf.tsx

@@ -0,0 +1,3 @@
+export default function Shelf({ children }: { children: React.ReactNode }) {
+  return <div className="inline-flex flex-col gap-8 xl:w-auto">{children}</div>;
+}

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

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

package/src/store/index.ts

@@ -0,0 +1,66 @@
+import { create } from "zustand";
+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 for widgets
+  order: [string, "asc" | "desc"];
+  setOrder: (prop: string) => void;
+
+  // Temporary data for widgets
+  tempData: Record<string, string | number>;
+  setTempData: (prop: Record<string, string | number>) => void;
+  clearTempData: () => void;
+}
+
+export const useWidgetStore = create<WidgetProps>((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/src/text/LineBreaks.tsx

@@ -0,0 +1,13 @@
+import { col } from "../util";
+
+export function LineBreaks({ texts, gap }: { texts: string[]; gap?: number }) {
+  return (
+    <div className={col(gap)}>
+      {texts.map((text, index) => (
+        <div key={index} className="leading-tight">
+          {text}
+        </div>
+      ))}
+    </div>
+  );
+}

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

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

package/src/util/classNames.ts

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

package/src/util/colors.ts

@@ -0,0 +1,11 @@
+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/src/util/display.ts

@@ -0,0 +1,31 @@
+export const row = (gap = 8) => `flex flex-row gap-${gap} `;
+export const col = (gap = 8, width?: number | string) =>
+  `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: number, gap = 12) => `grid grid-cols-${col} gap-${gap} `,
+  row: (row: number, gap = 12) => `grid grid-rows-${row}  gap-${gap}`,
+};
+
+export const box = {
+  row: (height: number, gap?: number) => `h-${height} gap-${gap} flex flex-row `,
+  col: (width: number, gap?: number) => `w-${width} gap-${gap} flex flex-col `,
+};

package/src/util/displayResponsive.ts

@@ -0,0 +1,17 @@
+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: number) => {
+  const df = `grid grid-cols-${gridCell}`;
+  const md = "md:flex md:flex-col";
+  return [df, md].join(" ");
+};

package/{util/index.d.ts → src/util/index.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/src/util/pattern.ts

@@ -0,0 +1,18 @@
+type Color = [string, string];
+export const buttonStyle = {
+  default: (colorSet: [Color, Color] | [Color], size?: { width: number }) => {
+    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/src/util/position.ts

@@ -0,0 +1,43 @@
+export const fixed = {
+  tl: (top: number | string, left: number | string) => `fixed top-${top} left-${left} z-50 `,
+  br: (bottom: number | string, right: number | string) =>
+    `fixed bottom-${bottom} right-${right} z-50 `,
+};
+
+export const absolute = {
+  tl: (top?: number | string, left?: number | string) => {
+    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?: number | string, right?: number | string) => {
+    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?: number | string, left?: number | string) => {
+      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?: number | string, left?: number | string) =>
+      `absolute bottom-${bottom ?? 0} left-${left ?? 0} w-full `,
+  },
+};

package/src/util/shape.ts

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

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.build.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Build */
+    "outDir": "./dist"
+  },
+  "include": ["src", "./eslintrc.json"],
+  "exclude": [
+    "src/app/**/*",
+    "src/_components/**/*",
+    "__test__/**/*",
+    "build/**/*",
+    "src/App.tsx",
+    "src/vite-env.d.ts",
+    "src/main.tsx",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/setupPackage.js",
+    "src/setupTests.ts",
+    "src/reportWebVitals.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    
+		/* Build */
+    "outDir": "./build",
+  },
+  "include": ["src", "./eslintrc.json", "tailwind.config.ts", "setupPackage.js"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}