gwan-design-system 0.1.13 → 0.1.14

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "gwan-design-system",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "✨ A reusable component library for Next.js projects.",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "scripts": {

package/src/app/components-library/page.tsx

@@ -0,0 +1,8 @@
+export const dynamic = "force-dynamic";
+import LibraryTemplate from "@/templates/component-library";
+
+const ComponentsLibrary = () => {
+  return <LibraryTemplate />;
+};
+
+export default ComponentsLibrary;

package/src/app/globals.css

@@ -0,0 +1,116 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme {
+  /* Existing CSS variables */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  /* Primary */
+  --color-primary-50: #f2f3ee;
+  --color-primary-100: #e1e3da;
+  --color-primary-200: #d0d3c6;
+  --color-primary-300: #bec3b2;
+  --color-primary-400: #adb39e;
+  --color-primary-500: #9ea593;
+  --color-primary-600: #8c9382;
+  --color-primary-700: #787d6e;
+  --color-primary-800: #64675a;
+  --color-primary-900: #505146;
+
+  /* Green */
+  --color-green-50: #e6f7e6;
+  --color-green-100: #c0eac0;
+  --color-green-200: #99dc99;
+  --color-green-300: #73cf73;
+  --color-green-400: #4cc14c;
+  --color-green-500: #0ba803;
+  --color-green-600: #0a9602;
+  --color-green-700: #087f02;
+  --color-green-800: #066602;
+  --color-green-900: #044c01;
+
+  /* Red */
+  --color-red-50: #fde7e7;
+  --color-red-100: #fbc0c0;
+  --color-red-200: #f89999;
+  --color-red-300: #f47373;
+  --color-red-400: #f04c4c;
+  --color-red-500: #df0303;
+  --color-red-600: #c90202;
+  --color-red-700: #a50202;
+  --color-red-800: #800202;
+  --color-red-900: #5c0101;
+
+  /* Blue */
+  --color-blue-50: #e6f3fa;
+  --color-blue-100: #bfe1f3;
+  --color-blue-200: #99ceeb;
+  --color-blue-300: #73bce4;
+  --color-blue-400: #4caadc;
+  --color-blue-500: #0369a8;
+  --color-blue-600: #025e97;
+  --color-blue-700: #024d7c;
+  --color-blue-800: #013c61;
+  --color-blue-900: #012b46;
+
+  /* Yellow */
+  --color-yellow-50: #f9f7e6;
+  --color-yellow-100: #f0efc0;
+  --color-yellow-200: #e6e699;
+  --color-yellow-300: #dcdc73;
+  --color-yellow-400: #d1d14c;
+  --color-yellow-500: #a8a203;
+  --color-yellow-600: #969002;
+  --color-yellow-700: #7c7602;
+  --color-yellow-800: #615c01;
+  --color-yellow-900: #464301;
+
+  /* Neutral */
+  --color-neutral-50: #f8f8f8;
+  --color-neutral-100: #f0f0f0;
+  --color-neutral-200: #e7e7e7;
+  --color-neutral-300: #dedede;
+  --color-neutral-400: #d9d9d9;
+  --color-neutral-500: #bfbfbf;
+  --color-neutral-600: #a6a6a6;
+  --color-neutral-700: #8c8c8c;
+  --color-neutral-800: #737373;
+  --color-neutral-900: #595959;
+}
+
+@layer utilities {
+  .custom-bg {
+    background-image: linear-gradient(
+      135deg,
+      #9ea593,
+      #93a594,
+      #93a59c,
+      #939fa5,
+      #9394a5,
+      #9c93a5,
+      #a593a4,
+      #a59393
+    );
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: "Roboto Flex", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}

package/src/app/layout.tsx

@@ -0,0 +1,38 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { Analytics } from "@vercel/analytics/next";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "GWAN Design System",
+  description: "A design system for Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <SpeedInsights />
+        <Analytics />
+        {children}
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/components-library");
+}

package/src/components/avatar/index.tsx

@@ -0,0 +1,133 @@
+import Image from "next/image";
+import { FC, useEffect, useState } from "react";
+import Tooltip, { TOOLTIP_POSITION } from "../tooltip";
+
+export enum AVATAR_VARIANT {
+  IMAGE_WITH_FULL = "image_with_full",
+  INITIALS_WITH_FULL = "initials_with_full",
+  IMAGE_ONLY = "image-only",
+  INITIALS_ONLY = "initials-only",
+}
+
+export interface IAvatar {
+  name: string;
+  email: string;
+  image?: string;
+  variant: string;
+  className?: string;
+  isLoading?: boolean;
+}
+
+const generatePastelColor = () => {
+  const hue = Math.floor(Math.random() * 360);
+  const saturation = 60 + Math.random() * 20;
+  const lightness = 75 + Math.random() * 10;
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+};
+
+const Avatar: FC<IAvatar> = ({
+  name,
+  email,
+  image,
+  variant,
+  className = "",
+  isLoading = false,
+}: IAvatar) => {
+  const [bgColor, setBgColor] = useState<string>("transparent");
+  const [isTooltipInitialVisible, setIsTooltipInitialVisible] = useState(false);
+  const [isTooltipImageVisible, setIsTooltipImageVisible] = useState(false);
+
+  useEffect(() => {
+    setBgColor(generatePastelColor());
+  }, []);
+
+  const generateInitials = (name: string) => {
+    const nameArray = name.split(" ");
+    return nameArray.length > 1
+      ? `${nameArray[0].charAt(0)}${nameArray[1].charAt(0)}`
+      : nameArray[0].charAt(0);
+  };
+
+  const renderTooltip = (name: string, email: string, isVisible: boolean) => {
+    return (
+      <Tooltip
+        position={TOOLTIP_POSITION.RIGHT}
+        label={
+          <div className="flex flex-col">
+            {name}
+            <p className="text-neutral-300 text-xs">{email}</p>
+          </div>
+        }
+        isVisible={isVisible}
+        toolTipWidth="w-36"
+      />
+    );
+  };
+
+  const renderAvatarImage = () => {
+    if (image) {
+      return (
+        <div
+          className="relative"
+          onMouseEnter={() => setIsTooltipImageVisible(true)}
+          onMouseLeave={() => setIsTooltipImageVisible(false)}
+        >
+          <Image
+            className="rounded-full border border-neutral-400"
+            src={image}
+            alt="profile"
+            width={55}
+            height={55}
+          />
+          {variant === AVATAR_VARIANT.IMAGE_ONLY &&
+            renderTooltip(name, email, isTooltipImageVisible)}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className="size-[55px] flex items-center justify-center rounded-full font-semibold cursor-default relative"
+        style={{ backgroundColor: bgColor }}
+        onMouseEnter={() => setIsTooltipInitialVisible(true)}
+        onMouseLeave={() => setIsTooltipInitialVisible(false)}
+      >
+        {generateInitials(name)}
+        {variant === AVATAR_VARIANT.INITIALS_ONLY &&
+          renderTooltip(name, email, isTooltipInitialVisible)}
+      </div>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-row items-center gap-2 pl-[5px] animate-pulse">
+        <div className="w-[55px] h-[55px] rounded-full bg-neutral-400"></div>
+        {(variant === AVATAR_VARIANT.IMAGE_WITH_FULL ||
+          variant === AVATAR_VARIANT.INITIALS_WITH_FULL) && (
+          <div className="flex flex-col gap-2 flex-1">
+            <div className="w-full h-6 bg-neutral-400 rounded-lg"></div>
+            <div className="w-[70%] h-4 bg-neutral-400 rounded-lg"></div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-row items-center gap-2 pl-[5px] ${className}`}>
+      {renderAvatarImage()}
+
+      {(variant === AVATAR_VARIANT.IMAGE_WITH_FULL ||
+        variant === AVATAR_VARIANT.INITIALS_WITH_FULL) && (
+        <div className="flex flex-col">
+          <p className="text-base font-semibold">{name}</p>
+          <p className="text-sm text-neutral-700">{email}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Avatar;

package/src/components/banner/index.tsx

@@ -0,0 +1,62 @@
+import { FC } from "react";
+
+export interface IBanner {
+  title?: string;
+  titleClassName?: string;
+  subTitle?: string;
+  subTitleClassName?: string;
+  contentPlacement?: "left" | "right";
+  backgroundImage?: string;
+  backgroundColor?: string;
+  className?: string;
+}
+
+const Banner: FC<IBanner> = ({
+  title = "",
+  subTitle = "",
+  contentPlacement = "left",
+  backgroundImage = "",
+  backgroundColor = "",
+  titleClassName = "",
+  subTitleClassName = "",
+  className = "",
+}: IBanner) => {
+  const handleContentPlacement = () => {
+    if (contentPlacement === "left") {
+      return (
+        <>
+          <div className="flex flex-col gap-2">
+            <p className={titleClassName}>{title}</p>
+            <p className={subTitleClassName}>{subTitle}</p>
+          </div>
+          <div></div>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <div></div>
+        <div className="flex flex-col gap-2">
+          <p className={titleClassName}>{title}</p>
+          <p className={subTitleClassName}>{subTitle}</p>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div
+      className={`w-full h-[484px] grid grid-cols-2 items-center px-16 ${backgroundColor} bg-no-repeat bg-cover bg-center ${className}`}
+      style={
+        backgroundImage !== ""
+          ? { backgroundImage: `url(${backgroundImage})` }
+          : {}
+      }
+    >
+      {handleContentPlacement()}
+    </div>
+  );
+};
+
+export default Banner;

package/src/components/button/index.tsx

@@ -0,0 +1,63 @@
+import { FC, ReactNode } from "react";
+
+export enum BUTTON_VARIANTS {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  TERTIARY = "tertiary",
+}
+
+export interface IButton {
+  variant?: BUTTON_VARIANTS;
+  label?: string;
+  onClick: () => void;
+  icon?: ReactNode;
+  type?: "button" | "submit";
+  disabled?: boolean;
+  className?: string;
+}
+
+const Button: FC<IButton> = ({
+  variant = BUTTON_VARIANTS.PRIMARY,
+  label,
+  onClick,
+  icon,
+  type = "button",
+  disabled = false,
+  className = "",
+}: IButton) => {
+  const getButtonVariant = (variant: BUTTON_VARIANTS) => {
+    switch (variant) {
+      case BUTTON_VARIANTS.PRIMARY:
+        return disabled
+          ? "bg-neutral-300 text-neutral-800 cursor-not-allowed"
+          : "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700";
+
+      case BUTTON_VARIANTS.SECONDARY:
+        return disabled
+          ? "bg-neutral-100 text-neutral-800 cursor-not-allowed"
+          : "bg-neutral-50 text-primary-700 hover:bg-primary-50 active:bg-primary-100";
+      case BUTTON_VARIANTS.TERTIARY:
+        return disabled
+          ? "text-neutral-300 border border-neutral-300 cursor-not-allowed"
+          : "bg-transparent text-primary-500 border border-primary-500 hover:bg-neutral-50 active:bg-neutral-100";
+    }
+  };
+
+  return (
+    <button
+      className={`${getButtonVariant(variant)} px-4 ${
+        label ? "py-2" : "py-4"
+      } rounded-lg ${className}`}
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <div className="flex flex-row gap-2 items-center">
+        {icon && <div className="size-5">{icon}</div>}
+        {label && <p>{label}</p>}
+      </div>
+    </button>
+  );
+};
+
+export default Button;

package/src/components/carousel/index.tsx

@@ -0,0 +1,63 @@
+import { FC, useEffect, useState } from "react";
+import Banner, { IBanner } from "../banner";
+
+export interface ICarousel {
+  slides: IBanner[];
+  interval?: number;
+  className?: string;
+}
+
+const Carousel: FC<ICarousel> = ({
+  slides,
+  interval = 3000,
+  className = "",
+}: ICarousel) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % slides.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [slides.length, interval]);
+
+  return (
+    <div className={`relative w-full h-[484px] overflow-hidden ${className}`}>
+      {slides.map(
+        (
+          {
+            title,
+            titleClassName,
+            subTitle,
+            subTitleClassName,
+            backgroundImage,
+            backgroundColor,
+            contentPlacement,
+          },
+          index
+        ) => {
+          return (
+            <div
+              key={index}
+              className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
+                index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
+              }`}
+            >
+              <Banner
+                title={title}
+                titleClassName={titleClassName}
+                subTitle={subTitle}
+                subTitleClassName={subTitleClassName}
+                contentPlacement={contentPlacement}
+                backgroundImage={backgroundImage}
+                backgroundColor={backgroundColor}
+              />
+            </div>
+          );
+        }
+      )}
+    </div>
+  );
+};
+
+export default Carousel;

package/src/components/checkbox/index.tsx

@@ -0,0 +1,62 @@
+import { FC, useState } from "react";
+import { CheckSVG } from "../icons";
+
+export interface ICheckbox {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+  disabled?:boolean;
+}
+
+const Checkbox: FC<ICheckbox> = ({
+  label,
+  checked = false,
+  onChange,
+  className = "",
+  disabled = false,
+}: ICheckbox) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const handleToggle = () => {
+    if (disabled) return;
+
+    setIsChecked(!isChecked);
+    if (onChange) {
+      onChange(!isChecked);
+    }
+  };
+
+  return (
+    <label className={`flex items-center gap-2 cursor-pointer ${className} ${
+        disabled ? "cursor-not-allowed opacity-50" : ""
+      }`}>
+      <input
+        type="checkbox"
+        checked={isChecked}
+        onChange={handleToggle}
+        disabled={disabled}
+        className="hidden"
+      />
+      <div
+        className={`w-5 h-5 flex items-center justify-center border-2 rounded-md transition-all 
+          ${
+            isChecked
+              ? "bg-primary-300 border-primary-400"
+              : "bg-white border-neutral-500"
+          }
+          ${disabled ? "bg-neutral-200 border-neutral-400" : ""}
+        `}
+      >
+        {isChecked && (
+          <div className="size-4 text-black">
+            <CheckSVG />
+          </div>
+        )}
+      </div>
+      {label && <span className="text-black">{label}</span>}
+    </label>
+  );
+};
+
+export default Checkbox;

package/src/components/chip/index.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { CrossSVG } from "../icons";
+
+export interface IChip {
+  label: string;
+  onClear: () => void;
+  className?: string;
+}
+
+const Chip: FC<IChip> = ({ label, onClear, className = "" }: IChip) => {
+  return (
+    <div
+      className={`flex flex-row gap-2 items-center bg-neutral-700 w-fit px-4 py-2 rounded-full ${className}`}
+    >
+      <div
+        className="size-3 cursor-pointer text-neutral-200 hover:text-white"
+        onClick={onClear}
+      >
+        <CrossSVG />
+      </div>
+      <p className="text-neutral-200 text-base font-semibold">{label}</p>
+    </div>
+  );
+};
+
+export default Chip;

package/src/components/ellipsis/index.tsx

@@ -0,0 +1,38 @@
+import { FC, useState } from "react";
+import Tooltip, { TOOLTIP_POSITION } from "../tooltip";
+
+export interface IEllipsis {
+  label: string;
+  tooltipPosition?: TOOLTIP_POSITION;
+  tooltipWidth?: string;
+  className?: string;
+}
+
+const Ellipsis: FC<IEllipsis> = ({
+  label,
+  tooltipPosition = TOOLTIP_POSITION.RIGHT,
+  tooltipWidth = "w-40",
+  className = "",
+}: IEllipsis) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  return (
+    <div
+      className={`relative ${className}`}
+      onMouseEnter={() => setIsTooltipVisible(true)}
+      onMouseLeave={() => setIsTooltipVisible(false)}
+    >
+      <p className="text-ellipsis w-32 overflow-hidden whitespace-nowrap">
+        {label}
+      </p>
+      <Tooltip
+        label={label}
+        position={tooltipPosition}
+        isVisible={isTooltipVisible}
+        toolTipWidth={tooltipWidth}
+      />
+    </div>
+  );
+};
+
+export default Ellipsis;

package/src/components/fileUploader/index.tsx

@@ -0,0 +1,58 @@
+import { FC, useRef } from "react";
+import { UploadSVG } from "../icons";
+
+export interface IFileUploader {
+  title: string;
+  subTitle1?: string;
+  subTitle2?: string;
+  handleAttachment: (file: File) => void;
+  accept?: string;
+  className?: string;
+}
+
+const FileUploader: FC<IFileUploader> = ({
+  title,
+  subTitle1 = "",
+  subTitle2 = "",
+  handleAttachment,
+  accept = ".jpg,.jpeg,.png",
+  className = "",
+}: IFileUploader) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      handleAttachment(files[0]);
+    }
+  };
+
+  return (
+    <div
+      className={`flex flex-row gap-4 items-start border border-dashed border-neutral-200 p-4 rounded-lg ${className}`}
+    >
+      <div
+        className="bg-primary-500 hover:bg-primary-600 text-white px-6 py-8 rounded-lg cursor-pointer"
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <div className="size-10">
+          <UploadSVG />
+        </div>
+      </div>
+      <input
+        type="file"
+        ref={fileInputRef}
+        accept={accept}
+        className="hidden"
+        onChange={handleFileUpload}
+      />
+      <div className="flex-1 flex flex-col">
+        <p className="text-lg">{title}</p>
+        <p className="text-sm text-neutral-400">{subTitle1}</p>
+        <p className="text-sm text-neutral-400">{subTitle2}</p>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploader;