@edu-tosel/design 1.0.6 → 1.0.8

package/src/board/widget/Header.tsx

@@ -1,63 +0,0 @@
-import { cn } from "../../util";
-import { Input, Select } from "./Tags";
-import { BoardHeaderProps } from "./../../interface/Board";
-export default function BoardHeader({
-  title,
-  tags,
-  options,
-}: BoardHeaderProps) {
-  const { selects, inputs } = tags ?? {};
-  const { colors } = options ?? {};
-  const { bgColor, textColor } = colors ?? {
-    bgColor: "gray-200",
-    textColor: "black",
-  };
-
-  const container = {
-    positions: "fixed top-20 left-0 xl:static flex items-center",
-    paddings: "px-12",
-    styles: `bg-${bgColor} text-${textColor} pl-12 pr-9`,
-    sizes: "w-full h-20",
-  };
-
-  const block = {
-    displays: "xl:hidden block ",
-    sizes: container.sizes,
-  };
-
-  return (
-    <>
-      <div
-        className={cn(
-          container.positions,
-          container.paddings,
-          container.sizes,
-          container.styles
-        )}
-      >
-        <div className="text-xl font-bold">{title}</div>
-        <div className="flex items-center ml-auto gap-4">
-          {selects?.map(({ width, title, options, onChange }) => (
-            <Select
-              key={title}
-              width={width}
-              title={title}
-              selectOptions={options}
-              onChange={onChange}
-            />
-          ))}
-          {inputs?.map(({ width, title, placeholder, onChange }) => (
-            <Input
-              key={title + placeholder}
-              width={width}
-              title={title}
-              placeholder={placeholder}
-              onChange={onChange}
-            />
-          ))}
-        </div>
-      </div>
-      <div className={cn(block.sizes, block.displays)} />
-    </>
-  );
-}

package/src/board/widget/Tab.tsx

@@ -1,36 +0,0 @@
-import { useState } from "react";
-import { Button } from "../../interface";
-import { cn } from "../../util";
-
-export default function Tab({ tabs }: { tabs: Button[] }) {
-  const [tabsSelection, setTabsSelection] = useState(
-    tabs.map((_, i) => i === 0)
-  );
-
-  const positions = "xl:absolute xl:-bottom-14 xl:left-0 z-5";
-  const displays = "hidden xl:flex xl:items-end xl:gap-4";
-  const sizes = "xl:h-16";
-  const paddings = "xl:px-8 xl:pb-2 ";
-  const styles = "bg-white/50 rounded-b-xl ";
-
-  return (
-    <div className={cn(displays, positions, sizes, paddings, styles)}>
-      {tabs.map(([title, onClick], index) => (
-        <button
-          key={title}
-          onClick={() => {
-            setTabsSelection(tabsSelection.map((_, i) => i === index));
-            return onClick();
-          }}
-          className={`h-9 w-32 rounded-md ${
-            tabsSelection[index]
-              ? "border-4 border-blue-500"
-              : "border-4 border-red-500"
-          }`}
-        >
-          {title}
-        </button>
-      ))}
-    </div>
-  );
-}

package/src/board/widget/Tags.tsx

@@ -1,81 +0,0 @@
-import { useId } from "react";
-import {
-  HTMLInputElement,
-  HTMLSelectElement,
-} from "../../interface/HTMLElement";
-
-export function Select({
-  title,
-  width,
-  onChange,
-  selectOptions,
-}: HTMLSelectElement) {
-  const id = useId();
-
-  const widthSize = {
-    xs: "w-32",
-    sm: "w-48",
-    md: "w-64",
-    lg: "w-96",
-    xl: "w-128",
-    "2xl": "w-144",
-    full: "w-full",
-  };
-
-  const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
-
-  return (
-    <div className="flex justify-center items-center gap-4">
-      <label htmlFor={id} className="font-bold">
-        {title}
-      </label>
-      <select
-        id={id}
-        onChange={(e) => onChange(e.target.value)}
-        className={classNames}
-      >
-        {selectOptions?.map(([id, title]) => (
-          <option key={id} value={id}>
-            {title}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-}
-
-export function Input({
-  title,
-  onChange,
-  placeholder,
-  width,
-}: HTMLInputElement) {
-  const id = useId();
-
-  const widthSize = {
-    xs: "w-28",
-    sm: "w-48",
-    md: "w-64",
-    lg: "w-96",
-    xl: "w-128",
-    "2xl": "w-144",
-    full: "w-full",
-  };
-
-  const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
-
-  return (
-    <div className="flex justify-center items-center gap-4">
-      <label htmlFor={id} className="font-bold">
-        {title}
-      </label>
-      <input
-        className={classNames}
-        id={id}
-        type="text"
-        placeholder={placeholder ?? ""}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  );
-}

package/src/card/template/ChartCard.tsx

@@ -1,42 +0,0 @@
-import {
-  Area,
-  Bar,
-  ComposedChart,
-  Line,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { Card } from "../widget/Card";
-import { ChartCardProps } from "../../interface/Card";
-
-export default function ChartCard({
-  data,
-  xAxis,
-  yAxis,
-  lines,
-  bars,
-  areas,
-}: ChartCardProps) {
-  return (
-    <Card options={{ width: "xl", height: "lg", text: { size: "xs" } }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart data={data}>
-          <XAxis dataKey={xAxis} />
-          <YAxis dataKey={yAxis} />
-          <Tooltip />
-          {lines?.map((line) => (
-            <Line key={line.dataKey} {...line} />
-          ))}
-          {bars?.map((bar) => (
-            <Bar key={bar.dataKey} {...bar} />
-          ))}
-          {areas?.map((area) => (
-            <Area key={area.dataKey} {...area} />
-          ))}
-        </ComposedChart>
-      </ResponsiveContainer>
-    </Card>
-  );
-}

package/src/card/template/InfoCard.tsx

@@ -1,22 +0,0 @@
-import { Deck } from "../..";
-import { InfoCardProps } from "../../interface/Card";
-import { Card } from "../widget/Card";
-
-export default function InfoCard({ type }: InfoCardProps) {
-  return (
-    <Deck>
-      <Card options={{ width: "xs", height: "lg" }}>
-        <div className="p-5">
-          <div>{type}</div>
-          <div>{}</div>
-        </div>
-      </Card>
-      <Card options={{ width: "md" }}>
-        <div className="p-5">
-          <div>{type}</div>
-          <div>{}</div>
-        </div>
-      </Card>
-    </Deck>
-  );
-}

package/src/card/template/ProfileCard.tsx

@@ -1,36 +0,0 @@
-import { Card } from "../widget/Card";
-import { center, between, colorsByLevel } from "../../util";
-type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
-
-export default function ProfileCard({
-  info,
-  gradeData,
-}: {
-  info: { name: string; birthday: string; image?: string };
-  gradeData?: { level?: Level; score?: number; grade?: number };
-}) {
-  const { name, birthday, image } = info;
-  const { level, score, grade } = gradeData ?? {};
-
-  return (
-    <Card options={{ width: "sm" }}>
-      <div className="flex">
-        <img
-          src={image}
-          alt="profile"
-          className="h-20 w-20 overflow-hidden rounded-full object-cover "
-        />
-        <div className="ml-auto flex flex-col gap-4">
-          <div className="flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2">
-            <div className="text-xl font-bold">{name}</div>
-            <div>{birthday}</div>
-          </div>
-          <div>
-            <div>학원생</div>
-            <div>{level ? colorsByLevel[level] : ""}</div>
-          </div>
-        </div>
-      </div>
-    </Card>
-  );
-}

package/src/card/template/RowCard.tsx

@@ -1,91 +0,0 @@
-import { Card } from "../widget/Card";
-import { useWidgetStore } from "../../store";
-import { Dispatch, useId, useState } from "react";
-
-export default function RowCard<T extends Record<string, any>>({
-  row,
-  fields,
-  sizes,
-}: {
-  row: T;
-  fields: Partial<Record<keyof T, "text" | ["select", [string, string][]]>>;
-  sizes: Partial<Record<keyof T, string>>;
-}) {
-  const [rowState, setRowState] = useState<T>(row);
-  const { setView, setTempData } = useWidgetStore();
-  const entries = Object.entries(fields).map(
-    ([key, type]) => [type, key, rowState[key]] as const
-  );
-
-  return (
-    <Card
-      options={{
-        width: "full",
-        height: "xs",
-        boundary: "none",
-        rounded: "none",
-      }}
-    >
-      <div className="flex items-center h-full">
-        {entries.map(([type, key, value]) => (
-          <div key={key} className={`w-${`${sizes[key]}/100` ?? "auto"}`}>
-            {Array.isArray(type) && type[0] === "select" ? (
-              <Select
-                key={key + type + value.toString()}
-                type={type}
-                entry={[key, value]}
-                row={rowState}
-                setRow={setRowState}
-              />
-            ) : (
-              <div key={key + value.toString()} className="w-full truncate">
-                {value ?? "No Data"}
-              </div>
-            )}
-          </div>
-        ))}
-        <button
-          onClick={() => {
-            setTempData(row);
-            setView("sideMenu");
-          }}
-        >
-          click
-        </button>
-      </div>
-    </Card>
-  );
-}
-
-function Select<T>({
-  type,
-  entry,
-  row,
-  setRow,
-}: {
-  type: ["select", [string, string][]];
-  entry: [string, string];
-  row: T;
-  setRow: Dispatch<T>;
-}) {
-  const id = useId();
-  const [key, value] = entry;
-  return (
-    <select
-      key={id}
-      value={value}
-      onChange={(e) =>
-        setRow({
-          ...row,
-          [key]: e.target.value,
-        })
-      }
-    >
-      {type[1].map(([value, title]) => (
-        <option key={id + value} value={value}>
-          {title}
-        </option>
-      ))}
-    </select>
-  );
-}

package/src/card/template/TableCard.tsx

@@ -1,41 +0,0 @@
-import { TableCardProps } from "../../interface/Card";
-import { Card } from "../widget/Card";
-
-export default function TableCard({
-  data,
-  fields,
-  sizes,
-  options,
-}: TableCardProps) {
-  const { color } = options ?? {};
-  const { background: bgColor, text: textColor } = color ?? {};
-  const keys = Object.keys(fields);
-
-  const fieldsClassNames = [
-    `flex h-11 items-center  font-bold pl-4`,
-    `bg-${bgColor ?? "gray-300"} text-${textColor ?? "black"}`,
-  ].join(" ");
-
-  return (
-    <Card options={{ width: "lg", height: "lg" }}>
-      <div className="overflow-hidden text-xs xs:text-sm sm:text-base">
-        <div className={fieldsClassNames}>
-          {keys.map((key) => (
-            <div key={key} className={`w-${sizes[key]}`}>
-              {fields[key]}
-            </div>
-          ))}
-        </div>
-        {data.map((row, index) => (
-          <div key={index} className="flex items-center pl-4 h-11 ">
-            {keys.map((key) => (
-              <div key={key} className={`truncate w-${sizes[key] ?? "auto"}`}>
-                {row[key]}
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-    </Card>
-  );
-}

package/src/card/template/TrumpCard.tsx

@@ -1,46 +0,0 @@
-import { TrumpCardProps } from "../../interface/Card";
-import { LineBreaks } from "../../text";
-import { Card } from "../widget/Card";
-
-export default function TrumpCard({ titles, options }: TrumpCardProps) {
-  const { title, subTitle, color: titleColor } = titles;
-  const { onClick, width, image, subButton } = options ?? {};
-  const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
-    null,
-    "red-crimson",
-    () => {},
-  ];
-  const { path, size } = image ?? { size: "sub" };
-
-  const imageClassNames = () => {
-    if (size === "full") return "w-full h-full object-cover";
-    return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
-  };
-
-  return (
-    <Card options={{ width: width ?? "xs", onClick: onClick }}>
-      <div
-        className={`absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`}
-      >
-        <div className="text-xl font-bold">{title}</div>
-        <LineBreaks gap={0} texts={subTitle ?? [""]} />
-        {subButton ? (
-          <button
-            className={`text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`}
-            onClick={buttonAction}
-          >
-            {buttonText}
-          </button>
-        ) : null}
-      </div>
-      {path ? (
-        <img
-          src={path}
-          alt="trump-image"
-          loading="lazy"
-          className={imageClassNames()}
-        />
-      ) : null}
-    </Card>
-  );
-}

package/src/card/widget/Card.tsx

@@ -1,53 +0,0 @@
-import { cn } from "../../util";
-import { CardProps } from "../../interface/Card";
-
-const widthSize = {
-  xs: "w-full md:w-60",
-  sm: "w-full md:w-90",
-  md: "w-full md:w-112.5",
-  lg: "w-full md:w-127.5",
-  xl: "w-full lg:w-187.5",
-  "2xl": "w-full lg:w-247.5",
-  full: "w-full",
-};
-
-const heightSize: Record<string, string> = {
-  xs: "min-h-16",
-  sm: "h-72 sm:h-48",
-  md: "h-72 sm:h-48",
-  lg: "h-80",
-  xl: "h-125",
-  "2xl": "",
-};
-
-export function Card({ children, options }: CardProps) {
-  const { boundary, rounded, height, width, text, onClick } = options ?? {};
-  const { size: textSize, color: textColor } = text ?? {};
-
-  const setBoundary = () => {
-    if (boundary === "shadow") return "box-shadow";
-    if (boundary === "border") return "border-2";
-    if (boundary === "none") return "";
-    return "box-shadow";
-  };
-
-  const sizes = [
-    `${heightSize[height ?? "sm"]}`,
-    `${widthSize[width ?? "sm"]}`,
-  ].join(" ");
-
-  const positions = "relative";
-  const styles = [
-    `${onClick ? "cursor-pointer" : ""}`,
-    `text-${textSize ?? "base"}`,
-    setBoundary(),
-    `rounded-${rounded ?? "xl"}`,
-    `bg-white/80 duration-500  overflow-hidden`,
-  ].join(" ");
-
-  return (
-    <div onClick={onClick} className={cn(sizes, positions, styles)}>
-      {children}
-    </div>
-  );
-}

package/src/deck/Deck.tsx

@@ -1,46 +0,0 @@
-import { cn } from "../util";
-
-export function Deck<T extends string | number>({
-  children,
-  titles,
-  options,
-}: {
-  children: React.ReactNode;
-  titles?: {
-    title: string;
-    subTitle?: string;
-    gapTitle?: number;
-  };
-  options?: {
-    overflowScroll?: boolean;
-    width?: T;
-    height?: number;
-    gapX?: number;
-    gapY?: number;
-  };
-}) {
-  const { title, subTitle, gapTitle } = titles ?? {};
-  const { height, gapX, gapY, overflowScroll } = options ?? {};
-
-  const container = {
-    positions: `flex flex-col gap-${gapTitle ?? 4}`,
-    sizes: `sm:w-full  h-${height ?? "auto"} `,
-  };
-
-  const body = {
-    positions: `flex flex-col sm:flex-row sm:w-full gap-x-${
-      gapX ?? 7.5
-    } gap-y-${gapY ?? 5}`,
-    styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
-  };
-
-  return (
-    <div className={cn(container.positions, container.sizes)}>
-      <div className="pl-1">
-        <div className="text-xl xl:text-2xl font-bold">{title}</div>
-        <div className="">{subTitle}</div>
-      </div>
-      <div className={cn(body.positions, body.styles)}>{children}</div>
-    </div>
-  );
-}

package/src/interaction/Exception.tsx

@@ -1,10 +0,0 @@
-import { ExceptionProps } from "../interface/Interaction";
-
-export default function Exception({ exceptions, children }: ExceptionProps) {
-  if (!exceptions) return <>{children}</>;
-  const trueComponents = exceptions
-    .filter(([exception]) => exception)
-    .map(([, component]) => component);
-
-  return <>{trueComponents.length > 0 ? trueComponents : children}</>;
-}

package/src/interaction/LoadingSpinner.tsx

@@ -1,10 +0,0 @@
-// NOTE: This is Prototype code and should be replaced with a proper loading spinner
-export default function LoadingSpinner() {
-  return (
-    <div className="w-full h-full flex items-center justify-center">
-      <div className="h-16 w-16 animate-spin rounded-full border-6 border-black border-r-transparent flex justify-center items-center">
-        <div className="h-12 w-12 animate-spin rounded-full border-6 border-red-500 border-r-transparent " />
-      </div>
-    </div>
-  );
-}

package/src/interaction/NoData.tsx

@@ -1,5 +0,0 @@
-export default function NoData() {
-  return (
-    <div className="w-full h-full flex items-center justify-center">NoData</div>
-  );
-}

package/src/interaction/index.tsx

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

package/src/interface/Board.ts

@@ -1,55 +0,0 @@
-import { Dispatch } from "react";
-import { Button, Size } from "./Property";
-
-interface OptionsProps {
-  color?: string;
-}
-
-interface WidgetsProps {
-  exceptions?: [boolean, React.ReactNode][];
-  components?: [boolean | string, React.ReactNode][];
-  tabs?: Button[];
-}
-
-export interface BoardProps {
-  children?: React.ReactNode;
-  widgets?: WidgetsProps;
-  options?: OptionsProps;
-}
-export interface BoardHeaderProps {
-  title?: string;
-  tags?: {
-    selects?: {
-      title: string;
-      onChange: Dispatch<string>;
-      options: [string | number, string][];
-      width?: Size;
-    }[];
-    inputs?: {
-      title: string;
-      onChange: Dispatch<string>;
-      placeholder: string;
-      width?: Size;
-    }[];
-  };
-  options?: {
-    colors?: { bgColor?: string; textColor?: string };
-  };
-}
-
-export interface ManageBoardProps<T> extends BoardProps {
-  data: {
-    dataSets: {
-      title?: string;
-      items: T[] | undefined;
-      renderItem: (items: T) => React.ReactNode;
-    }[];
-    dataField?: {
-      fields: Record<string, string>;
-      sizes: Record<string, string>;
-    };
-    gap?: number;
-  };
-  header?: BoardHeaderProps;
-  widgets?: { menu?: React.ReactNode } & WidgetsProps;
-}