@edu-tosel/design 1.0.6 → 1.0.8

package/src/interface/Card.ts

@@ -1,66 +0,0 @@
-import { ImageSize, Size } from "./Property";
-
-/**
- * CardProps is an interface.
- * @interface CardProps
- * @property {React.ReactNode} children
- * @property {object} options
- * @property {Size} options.height
- * @property {Size} options.width
- * @property {object} options.text
- * @property {string} options.text.size
- * @property {string} options.text.color
- * @property {() => unknown | (() => Promise<unknown>)} options.onClick
- */
-
-export interface CardProps {
-  children: React.ReactNode;
-  options?: {
-    boundary?: "shadow" | "border" | "none";
-    rounded?: string;
-    height?: Size;
-    width?: Size;
-    text?: { size?: string; color?: string };
-    onClick?: () => unknown | (() => Promise<unknown>);
-    overflow?: "hiden" | "auto";
-  };
-}
-
-export interface ChartCardProps {
-  data: Record<string, string | number>[];
-  xAxis: string;
-  yAxis: string;
-  lines?: { dataKey: string; stroke: string }[];
-  bars?: { dataKey: string; fill: string }[];
-  areas?: { dataKey: string; fill: string }[];
-}
-
-export interface TableCardProps {
-  data: Record<string, string | number>[];
-  fields: Record<string, string>;
-  sizes: Record<string, string>;
-  options?: {
-    color?: {
-      background: string;
-      text: string;
-    };
-  };
-}
-
-export interface TrumpCardProps {
-  titles: {
-    title: string;
-    subTitle?: string[];
-    color?: string;
-  };
-  options?: {
-    width?: Size;
-    image?: { path: string; size?: ImageSize };
-    onClick?: () => unknown | (() => Promise<unknown>);
-    subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
-  };
-}
-
-export interface InfoCardProps {
-  type: "information" | "profile" | "prpfileSmall";
-}

package/src/interface/Interaction.ts

@@ -1,4 +0,0 @@
-export interface ExceptionProps {
-  exceptions?: [boolean, React.ReactNode][];
-  children: React.ReactNode;
-}

package/src/interface/Menu.ts

@@ -1,5 +0,0 @@
-import { Log, HTMLElementSetting } from "../interface";
-export interface SideMenuProps<K extends string, T extends string | number> {
-  log: Log<K, T>;
-  setting: HTMLElementSetting;
-}

package/src/interface/Modal.ts

@@ -1,19 +0,0 @@
-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/src/interface/Widget.ts

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

package/src/layout/dashboard/Header.tsx

@@ -1,56 +0,0 @@
-import "../../globals.css";
-import { useState } from "react";
-import { circle, cn } from "../../util";
-
-export function Header({
-  title,
-  image,
-}: {
-  title: string;
-  image?: [string, string];
-}) {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [src, href] = image ?? [];
-
-  return (
-    <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">
-      <div className="flex h-12 items-center gap-12">
-        {src && href ? (
-          <a href={href}>
-            <img src={src} alt="logo" className="h-12 w-50" />
-          </a>
-        ) : (
-          <div className="text-2xl">TOSEL</div>
-        )}
-        <div className="text-3xl font-bold ">{title}</div>
-      </div>
-      {/* <div className="relative">
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          className={circle(9) + "border-2"}
-        >
-          +
-        </button>
-        <Menu flag={isOpen} />
-      </div> */}
-    </div>
-  );
-}
-
-function Menu({ flag }: { flag: boolean }) {
-  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 (
-    <div className={cn(positions, layouts, styles, animations())}>
-      <div>ㅎㅇ</div>
-      <div>ㅎㅇ</div>
-    </div>
-  );
-}

package/src/layout/dashboard/index.tsx

@@ -1,38 +0,0 @@
-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/src/main.tsx

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

@@ -1,104 +0,0 @@
-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/src/menu/index.tsx

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

package/src/modal/AlertModal.tsx

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

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

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

@@ -1,19 +0,0 @@
-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/src/navigation/Navigation.tsx

@@ -1,37 +0,0 @@
-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/src/shelf/Shelf.tsx

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

package/src/store/index.ts

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

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

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

package/src/util/colors.ts

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

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

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

package/src/util/pattern.ts

@@ -1,18 +0,0 @@
-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(" ");
-  },
-};