gwan-design-system 0.1.1

package/src/components/input/index.tsx

@@ -0,0 +1,40 @@
+export interface IInput {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  inputClassName?: string;
+  required?: boolean;
+}
+
+const Input = ({
+  label,
+  value,
+  onChange,
+  disabled,
+  placeholder,
+  inputClassName = "",
+  required = false,
+}: IInput) => {
+  return (
+    <div className="flex flex-col gap-1 relative">
+      <label htmlFor={label} className="text-sm text-neutrola-600 mb-2">
+        {`${label}${required ? " *" : ""}`}
+      </label>
+      <input
+        id={label}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        className={`border border-neutrola-300 outline-none p-4 rounded-lg ${
+          disabled ? "cursor-not-allowed" : "cursor-text"
+        } text-sm w-full ${inputClassName}`}
+        required={required}
+      />
+    </div>
+  );
+};
+
+export default Input;

package/src/components/modal/index.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from "react";
+import { CrossSVG } from "../icons";
+
+export enum MODAL_SIZE {
+  SMALL = "w-[600px] h-60",
+  MEDIUM = "w-[800px] h-96",
+  LARGE = "w-[950px] h-[600px]",
+  FULL = "w-full h-full",
+}
+
+interface IModal {
+  title: string;
+  children: React.ReactNode;
+  onClear: () => void;
+  size?: MODAL_SIZE;
+}
+
+const Modal = ({
+  title,
+  children,
+  onClear,
+  size = MODAL_SIZE.MEDIUM,
+}: IModal) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    modalRef.current?.focus();
+  }, []);
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.3)]">
+      <div
+        ref={modalRef}
+        tabIndex={-1}
+        className={`bg-white p-4 ${
+          size !== MODAL_SIZE.FULL && "rounded-lg"
+        } absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col gap-4 ${size}`}
+        onBlur={() => onClear()}
+      >
+        <div className="flex flex-row gap-4 items-center">
+          <div className="flex-1 text-3xl">{title}</div>
+          <div className="size-4 cursor-pointer" onClick={() => onClear()}>
+            <CrossSVG />
+          </div>
+        </div>
+        <div className="flex-1 flex justify-center items-center">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/components/navBar/index.tsx

@@ -0,0 +1,161 @@
+import Image from "next/image";
+import Avatar, { AVATAR_VARIANT } from "../avatar";
+import { ReactNode, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ChevLeftSVG, ChevRightSVG } from "../icons";
+import Tooltip, { TOOLTIP_POSITION } from "../tooltip";
+
+export interface IMenuItem {
+  title: string;
+  icon?: ReactNode;
+  route: string;
+  isActive: boolean;
+  isDivider: boolean;
+}
+
+export interface INavBar {
+  menuItems: IMenuItem[];
+  logoShort: string;
+  logoLong: string;
+  avatarName: string;
+  avatarEmail: string;
+  avatarImage: string;
+  avatarType: AVATAR_VARIANT;
+  menuWidthClass?: string;
+  menuHeightClass?: string;
+  isCollapsed?: boolean;
+  menuBackgroundColor?: string;
+}
+
+const NavBar = ({
+  menuItems,
+  logoShort,
+  logoLong,
+  avatarName,
+  avatarEmail,
+  avatarImage,
+  avatarType,
+  menuWidthClass = "w-[20rem]",
+  menuHeightClass = "h-[100vh]",
+  isCollapsed = false,
+  menuBackgroundColor = "bg-primary-100",
+}: INavBar) => {
+  const router = useRouter();
+  const [isActiveMenuItem, setIsActiveMenuItem] = useState<string>("");
+  const [isMenuCollapsed, setIsMenuCollapsed] = useState<boolean>(isCollapsed);
+  const [isMenuItemsCollapsed, setIsMenuITemsCollapsed] =
+    useState<boolean>(false);
+  const [showTooltip, setShowTooltip] = useState<number | null>(null);
+  const activeClass = "rounded-lg bg-white bg-opacity-35";
+  const collapsedClass = "w-[6rem]";
+
+  useEffect(() => {
+    if (menuItems.length > 0) {
+      const active = menuItems.find((item) => item.isActive === true);
+      setIsActiveMenuItem(active?.title ?? menuItems[0].title);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isMenuCollapsed) {
+      setTimeout(() => {
+        setIsMenuITemsCollapsed(false);
+      }, 200);
+    } else {
+      setIsMenuITemsCollapsed(true);
+    }
+  }, [isMenuCollapsed]);
+
+  const handleClick = (menu: IMenuItem) => {
+    setIsActiveMenuItem(menu.title);
+    router.push(menu.route);
+  };
+
+  return (
+    <div
+      className={`transition-[width] duration-300 ease-in-out ${
+        isMenuCollapsed ? collapsedClass : menuWidthClass
+      } ${menuHeightClass}`}
+    >
+      <div
+        className={`w-full h-full flex flex-col gap-4 p-4 ${menuBackgroundColor}`}
+      >
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-row gap-2 items-center">
+            <Image src={logoShort} alt="logo_short" width={60} height={60} />
+            {!isMenuItemsCollapsed && (
+              <Image
+                src={logoLong}
+                alt="logo_long"
+                width={200}
+                height={48}
+                className="transition-opacity duration-300"
+              />
+            )}
+          </div>
+          <div className="relative">
+            <Avatar
+              name={avatarName}
+              email={avatarEmail}
+              variant={
+                isMenuItemsCollapsed ? AVATAR_VARIANT.IMAGE_ONLY : avatarType
+              }
+              image={avatarImage}
+            />
+            <span
+              onClick={() => setIsMenuCollapsed(!isMenuCollapsed)}
+              className={`cursor-pointer w-8 h-8 rounded-full ${menuBackgroundColor} border border-neutral-300 absolute -right-8 flex items-center justify-center text-black`}
+            >
+              <div className="size-5">
+                {isMenuCollapsed ? <ChevRightSVG /> : <ChevLeftSVG />}
+              </div>
+            </span>
+          </div>
+        </div>
+        <div className="border-neutral-300 border-b"></div>
+        <div className="flex flex-col gap-1">
+          {menuItems.map((item, index) => {
+            if (!item.isDivider) {
+              return (
+                <div
+                  key={`menu_item_${index + 1}`}
+                  className={`flex flex-row gap-4 items-center p-4 rounded-lg hover:cursor-pointer hover:bg-white hover:bg-opacity-35 hover:rounded-lg ${
+                    isActiveMenuItem === item.title ? activeClass : ""
+                  }`}
+                  onClick={() => handleClick(item)}
+                  onMouseEnter={() => setShowTooltip(index)}
+                  onMouseLeave={() => setShowTooltip(null)}
+                >
+                  <div className="w-6 h-6 ml-1 relative">
+                    {item.icon}
+                    {isMenuCollapsed && (
+                      <Tooltip
+                        position={TOOLTIP_POSITION.RIGHT}
+                        label={item.title}
+                        isVisible={showTooltip === index}
+                        toolTipWidth="w-fit"
+                        toolTipClass="text-nowrap"
+                      />
+                    )}
+                  </div>
+                  {!isMenuItemsCollapsed && (
+                    <span className="text-nowrap">{item.title}</span>
+                  )}
+                </div>
+              );
+            }
+
+            return (
+              <div
+                key={`menu_item_${index + 1}`}
+                className="border-neutral-300 border-b my-3"
+              ></div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NavBar;

package/src/components/pagination/index.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import Button, { BUTTON_VARIANTS } from "../button";
+import { ChevLeft } from "../icons/chevLeftSVG";
+import { ChevRight } from "../icons/chevRightSVG";
+import SelectDropdown, { ISelectDropdownOption } from "../selectDropdown";
+
+export interface IPaging {
+  total: number;
+  page: number;
+  size: number;
+}
+
+export interface IPagination extends IPaging {
+  options: ISelectDropdownOption[];
+  onChange: (paging: IPaging) => void;
+}
+
+const Pagination = ({ total, page, size, options, onChange }: IPagination) => {
+  const [optionDropdown, setOptionDropdown] = useState<string>(size.toString());
+
+  const onLeft = () => {
+    if (page > 1) {
+      onChange({ total, page: page - 1, size });
+    }
+  };
+
+  const onRight = () => {
+    if (page < Math.ceil(total / size)) {
+      onChange({ total, page: page + 1, size });
+    }
+  };
+
+  const handlePageSize = (size: string) => {
+    setOptionDropdown(size);
+    onChange({ total, page: 1, size: parseInt(size) });
+  };
+
+  return (
+    <div className="bg-neutrola-50 flex flex-row gap-4 items-center px-4 py-2 rounded-lg">
+      <div className="flex-1">
+        {page} of {Math.ceil(total / size)} pages
+      </div>
+      <div className="w-20">
+        <SelectDropdown
+          options={options}
+          value={optionDropdown}
+          onChange={(option) => handlePageSize(option)}
+        />
+      </div>
+      <div>items per page</div>
+      <div className="flex flex-row gap-4 items-center">
+        <Button
+          onClick={onLeft}
+          icon={<ChevLeft />}
+          variant={BUTTON_VARIANTS.TERTIARY}
+          disabled={page === 1}
+        />
+        <Button
+          onClick={onRight}
+          icon={<ChevRight />}
+          variant={BUTTON_VARIANTS.TERTIARY}
+          disabled={page === Math.ceil(total / size)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

package/src/components/radioButton/index.tsx

@@ -0,0 +1,44 @@
+export interface IRadioButton {
+  label: string;
+  value: string;
+  selectedValue?: string;
+  onChange?: (value: string) => void;
+}
+
+const RadioButton = ({
+  label,
+  value,
+  selectedValue,
+  onChange,
+}: IRadioButton) => {
+  const isChecked = selectedValue === value;
+
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <div
+        className={`w-5 h-5 flex items-center justify-center border-2 rounded-full transition-all
+            ${
+              isChecked
+                ? "border-primary-500 bg-primary-500"
+                : "border-gray-400 bg-white"
+            }
+          `}
+        onClick={() => onChange && onChange(value)}
+      >
+        {isChecked && <div className="w-2.5 h-2.5 bg-white rounded-full"></div>}
+      </div>
+
+      <span className="text-gray-700">{label}</span>
+
+      <input
+        type="radio"
+        value={value}
+        checked={isChecked}
+        onChange={() => onChange && onChange(value)}
+        className="hidden"
+      />
+    </label>
+  );
+};
+
+export default RadioButton;

package/src/components/selectDropdown/index.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { ChevDownSVG } from "../icons";
+
+export interface ISelectDropdownOption {
+  value?: string;
+  label: string;
+}
+
+export interface ISelectDropdown {
+  options: ISelectDropdownOption[];
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  value: string;
+  onChange: (option: string) => void;
+  inputClassName?: string;
+}
+
+const SelectDropdown = ({
+  options,
+  label,
+  placeholder = "",
+  disabled = false,
+  value,
+  onChange,
+  inputClassName = "",
+}: ISelectDropdown) => {
+  const [dropdownValue, setDropdownValue] = useState<string>("");
+  const [isOptionsVisible, setIsOptionsVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    const option = options.find((opt) => opt.label === value);
+    if (option) {
+      setDropdownValue(option.label);
+      onChange(option.label);
+    } else {
+      setDropdownValue("");
+    }
+  }, []);
+
+  const handleMouseDown = (val: string) => {
+    setDropdownValue(val);
+    onChange(val);
+    setIsOptionsVisible(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-1 relative">
+      {label && (
+        <label htmlFor={label} className="text-sm text-neutrola-600 mb-2">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <div className="size-5 absolute inset-y-4 right-4 flex items-center text-neutrola-600 pointer-events-none">
+          <ChevDownSVG />
+        </div>
+        <input
+          id={label}
+          type="text"
+          className={`border border-neutrola-300 outline-none p-4 rounded-lg ${
+            disabled ? "cursor-not-allowed" : "cursor-pointer"
+          } text-sm w-full ${inputClassName}`}
+          placeholder={placeholder}
+          onClick={() => setIsOptionsVisible(!isOptionsVisible)}
+          value={dropdownValue}
+          onBlur={() => setIsOptionsVisible(false)}
+          readOnly
+          disabled={disabled}
+        ></input>
+      </div>
+
+      {isOptionsVisible && (
+        <div className="border border-neutrola-300 rounded-lg shadow-lg max-h-96 overflow-y-auto absolute min-w-full top-full bg-white z-10">
+          {options.map(({ label, value: val }, index) => (
+            <div
+              key={`${label}_${val}_${index + 1}`}
+              className="p-4 cursor-pointer hover:bg-neutrola-50 text-sm"
+              onMouseDown={() => handleMouseDown(label)}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectDropdown;

package/src/components/snackBar/index.tsx

@@ -0,0 +1,46 @@
+export enum SNACK_BAR_TYPE {
+  DEFAULT = "default",
+  SUCCESS = "success",
+  DANGER = "danger",
+  WARNING = "warning",
+  INFO = "info",
+}
+
+export interface ISnackBar {
+  type?: SNACK_BAR_TYPE;
+  message: string;
+  icon?: React.ReactNode;
+}
+
+const Snackbar = ({
+  type = SNACK_BAR_TYPE.DEFAULT,
+  message,
+  icon,
+}: ISnackBar) => {
+  const getClassName = () => {
+    switch (type) {
+      case SNACK_BAR_TYPE.SUCCESS:
+        return "bg-greenola-50 text-greenola-800 border-greenola-500";
+      case SNACK_BAR_TYPE.DANGER:
+        return "bg-redola-50 text-redola-600 border-redola-500";
+      case SNACK_BAR_TYPE.WARNING:
+        return "bg-yellowla-50 text-yellowla-800 border-yellowla-600";
+      case SNACK_BAR_TYPE.INFO:
+        return "bg-blueola-50 text-blueola-800 border-blueola-600";
+      case SNACK_BAR_TYPE.DEFAULT:
+      default:
+        return "bg-neutrola-50 text-neutrola-800 border-neutrola-500";
+    }
+  };
+
+  return (
+    <div
+      className={`${getClassName()} p-4 rounded-lg flex flex-row gap-4 items-center font-normal border`}
+    >
+      {icon && <div className="size-5">{icon}</div>}
+      <div>{message}</div>
+    </div>
+  );
+};
+
+export default Snackbar;

package/src/components/state/index.tsx

@@ -0,0 +1,69 @@
+import Image from "next/image";
+
+export enum STATE_TYPE {
+  EMPTY = "EMPTY",
+  SUCCESS = "SUCCESS",
+  ERROR = "ERROR",
+  LOADING = "LOADING",
+}
+
+export interface IStateBase {
+  title: string;
+  subTitle: string;
+  imageWidth?: number;
+  imageHeight?: number;
+}
+
+export type IState =
+  | ({ type: STATE_TYPE; stateImage?: string } & IStateBase)
+  | ({ type?: undefined; stateImage: string } & IStateBase);
+
+const State = ({
+  type,
+  stateImage,
+  title,
+  subTitle,
+  imageWidth = 526,
+  imageHeight = 526,
+}: IState) => {
+  const typeImage = () => {
+    switch (type) {
+      case STATE_TYPE.EMPTY:
+        return "/images/empty.png";
+      case STATE_TYPE.SUCCESS:
+        return "/images/success.png";
+      case STATE_TYPE.ERROR:
+        return "/images/empty.png";
+      case STATE_TYPE.LOADING:
+        return "/images/empty.png";
+      default:
+        return "/images/empty.png";
+    }
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col gap-8 items-center justify-center">
+      {stateImage ? (
+        <Image
+          src={stateImage}
+          alt="state image"
+          width={imageWidth}
+          height={imageHeight}
+        />
+      ) : (
+        <Image
+          src={typeImage()}
+          alt="state image"
+          width={imageWidth}
+          height={imageHeight}
+        />
+      )}
+      <div className="flex flex-col gap-2">
+        <p className="text-3xl text-center font-semibold">{title}</p>
+        <p className="w-[300px] text-center">{subTitle}</p>
+      </div>
+    </div>
+  );
+};
+
+export default State;

package/src/components/table/index.tsx

@@ -0,0 +1,51 @@
+import { JSX } from "react";
+
+export interface ITableColumn {
+  header: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  render: (row?: any) => JSX.Element;
+  headerClassName?: string;
+}
+
+export interface ITable {
+  columns: ITableColumn[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any[];
+}
+
+const Table = ({ columns, data }: ITable) => {
+  return (
+    <div className="overflow-hidden rounded-lg border border-neutrola-300">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="bg-neutrola-300 border border-neutrola-300">
+            {columns.map(({ header, headerClassName }, index) => (
+              <th
+                key={`column_${index}`}
+                className={`text-left px-4 py-4 ${headerClassName}`}
+              >
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, rowIndex) => (
+            <tr
+              key={`row_${rowIndex}`}
+              className="bg-white hover:bg-neutrola-100"
+            >
+              {columns.map(({ render }, cellIndex) => (
+                <td key={`cell_${cellIndex}`} className="text-left px-4 py-4">
+                  {render(row)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;

package/src/components/tag/index.tsx

@@ -0,0 +1,33 @@
+export enum TAG_TYPE {
+  DEFAULT = "default",
+  SUCCESS = "success",
+  DANGER = "danger",
+  WARNING = "warning",
+  INFO = "info",
+}
+
+export interface ITag {
+  type: TAG_TYPE;
+  label: string;
+}
+
+const Tag = ({ type, label }: ITag) => {
+  const getTagStyle = (type: TAG_TYPE) => {
+    switch (type) {
+      case TAG_TYPE.SUCCESS:
+        return "bg-greenola-50 text-greenola-600";
+      case TAG_TYPE.DANGER:
+        return "bg-redola-50 text-redola-600";
+      case TAG_TYPE.WARNING:
+        return "bg-yellowla-50 text-yellowla-600";
+      case TAG_TYPE.INFO:
+        return "bg-blueola-50 text-blueola-600";
+      default:
+        return "bg-neutrola-50 text-neutrola-600";
+    }
+  };
+
+  return <div className={`w-fit px-4 py-2 rounded-lg text-sm ${getTagStyle(type)}`}>{label}</div>;
+};
+
+export default Tag;