gwan-design-system 0.1.14 → 0.1.15

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "gwan-design-system",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "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

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

package/src/app/globals.css

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

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

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

package/src/components/avatar/index.tsx

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

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

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

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

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

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

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

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