@edu-tosel/design 1.0.4 → 1.0.6

package/src/card/template/RowCard.tsx

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

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

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

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

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

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

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

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

package/src/interaction/Exception.tsx

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

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

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

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

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

package/src/interface/Board.ts

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

package/src/interface/Card.ts

@@ -0,0 +1,66 @@
+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/HTMLElement.ts

@@ -0,0 +1,27 @@
+import { Dispatch } from "react";
+import { Size } from "./Property";
+
+export type HTMLElementType = "text" | "input" | "select";
+
+export interface HTMLElement {
+  title: string;
+  onChange: Dispatch<string>;
+  width?: Size;
+}
+
+export interface HTMLElementSetting {
+  [key: string]: {
+    label: string;
+    type: HTMLElementType;
+    placeholder?: string;
+    options?: [string, string][];
+    onChnage?: Dispatch<string>;
+  };
+}
+
+export interface HTMLSelectElement extends HTMLElement {
+  selectOptions?: [string | number, string][];
+}
+export interface HTMLInputElement extends HTMLElement {
+  placeholder?: string;
+}

package/src/interface/Interaction.ts

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

package/src/interface/Menu.ts

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

@@ -0,0 +1,19 @@
+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/{interface/Property.d.ts → src/interface/Property.ts}

@@ -1,34 +1,46 @@
-/**
- * Size type
- * @enum {string}
- * @readonly
- * @description - Size type for the component
- * @property {"xs"} xs - Extra small size
- * @property {"sm"} sm - Small size
- * @property {"md"} md - Medium size
- * @property {"lg"} lg - Large size
- * @property {"xl"} xl - Extra large size
- * @property {"2xl"} 2xl - Double extra large size
- * @property {"full"} full - Full size
- */
-export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-/**
- * Image size type
- * @enum {string}
- * @readonly
- * @description - Size type for the image
- * @property {"sub"} sub - Sub size
- * @property {"full"} full - Full size
- */
-export type ImageSize = "sub" | "full";
-export type OnClick = () => unknown | Promise<unknown>;
-export type Button = [string, OnClick];
-export type Scripts = {
-    script: string;
-    subScript?: string;
-};
-export type Titles = {
-    title: string;
-    subTitle?: string[];
-    color?: string;
-};
+/**
+ * Size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the component
+ * @property {"xs"} xs - Extra small size
+ * @property {"sm"} sm - Small size
+ * @property {"md"} md - Medium size
+ * @property {"lg"} lg - Large size
+ * @property {"xl"} xl - Extra large size
+ * @property {"2xl"} 2xl - Double extra large size
+ * @property {"full"} full - Full size
+ */
+
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+
+/**
+ * Image size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the image
+ * @property {"sub"} sub - Sub size
+ * @property {"full"} full - Full size
+ */
+
+export type ImageSize = "sub" | "full";
+
+export type OnClick = () => unknown | Promise<unknown>;
+
+export type Button = [string, OnClick];
+
+export type Scripts = {
+  script: string;
+  subScript?: string;
+};
+
+export type Titles = {
+  title: string;
+  subTitle?: string[];
+  color?: string;
+};
+
+export interface Log<K extends string, T extends string | number> {
+  prints: K[];
+  logs: { [p in K]: T }[] | undefined;
+}

package/src/interface/Widget.ts

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

package/{interface/index.d.ts → src/interface/index.ts}

@@ -1,2 +1,3 @@
-export * from "./Property";
-export * from "./Widget";
+export * from "./HTMLElement";
+export * from "./Property";
+export * from "./Widget";

package/src/layout/dashboard/Header.tsx

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