gwan-design-system 0.1.1

package/src/components/timeLine/index.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { CheckSVG, CircleSVG, CrossSVG } from "../icons";
+
+export enum ORDER_STATUS {
+  ORDER_PLACED = "Order placed",
+  PRINTING_IN_PROGRESS = "Printing in progress",
+  PACKAGING = "Packaging",
+  DISPATCHED_TO_COURIER = "Dispatched to courier",
+  DELIVERED = "Delivered",
+  ORDER_CANCELLED = "Order cancelled",
+  PENDING = "Pending",
+}
+
+export interface ILog {
+  title: ORDER_STATUS;
+  date?: string;
+  description?: string;
+}
+
+export interface ITimeLine {
+  logs: ILog[];
+}
+
+const TimeLine = ({ logs }: ITimeLine) => {
+  const [steps, setSteps] = useState<ILog[]>([]);
+
+  useEffect(() => {
+    if (
+      logs[0].title !== ORDER_STATUS.ORDER_CANCELLED &&
+      logs[0].title !== ORDER_STATUS.DELIVERED
+    ) {
+      setSteps([
+        {
+          title: ORDER_STATUS.PENDING,
+        },
+        ...logs,
+      ]);
+    } else {
+      setSteps(logs);
+    }
+  }, [logs]);
+
+  const getIcon = (status?: ORDER_STATUS) => {
+    switch (status) {
+      case ORDER_STATUS.ORDER_PLACED:
+      case ORDER_STATUS.PRINTING_IN_PROGRESS:
+      case ORDER_STATUS.PACKAGING:
+      case ORDER_STATUS.DISPATCHED_TO_COURIER:
+      case ORDER_STATUS.DELIVERED:
+        return (
+          <div className="size-5 bg-greenola-500 rounded-full p-1 text-white">
+            <CheckSVG />
+          </div>
+        );
+      case ORDER_STATUS.ORDER_CANCELLED:
+        return (
+          <div className="size-5 bg-redola-500 rounded-full p-1 text-white">
+            <CrossSVG />
+          </div>
+        );
+      default:
+        return (
+          <div className="size-5 bg-neutrola-600 text-neutrola-200 rounded-full p-1">
+            <CircleSVG />
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div>
+      {steps.map(({ title, date, description }, index) => (
+        <div key={`log_${index}`} className="flex flex-row gap-4">
+          <div className="flex flex-col items-center">
+            {getIcon(title)}
+            <div className="w-0.5 h-full bg-neutrola-500"></div>
+          </div>
+          <div className="flex flex-col flex-1">
+            <p
+              className={`text-base font-semibold relative top-[-2px] ${
+                title === ORDER_STATUS.PENDING ? "pb-8" : ""
+              }`}
+            >
+              {title}
+            </p>
+            {title && <p className="text-xs text-neutrola-700">{date}</p>}
+            {description && (
+              <p className="p-4 text-xs bg-neutrola-50 text-neutral-800 rounded-lg my-2">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TimeLine;

package/src/components/tooltip/index.tsx

@@ -0,0 +1,70 @@
+export enum TOOLTIP_POSITION {
+  TOP = "top",
+  BOTTOM = "bottom",
+  LEFT = "left",
+  RIGHT = "right",
+}
+
+export interface ITooltip {
+  position: TOOLTIP_POSITION;
+  label: React.ReactNode;
+  isVisible: boolean;
+  toolTipWidth?: string;
+  toolTipClass?: string;
+}
+
+const Tooltip = ({
+  position,
+  label,
+  isVisible = false,
+  toolTipWidth = "w-60",
+  toolTipClass = "",
+}: ITooltip) => {
+  const getTooltipPosition = (position: TOOLTIP_POSITION) => {
+    switch (position) {
+      case TOOLTIP_POSITION.TOP:
+        return "mb-2 bottom-full left-1/2 -translate-x-1/2";
+      case TOOLTIP_POSITION.BOTTOM:
+        return "mt-2 top-full left-1/2 -translate-x-1/2";
+      case TOOLTIP_POSITION.LEFT:
+        return "mr-2 right-full top-1/2 -translate-y-1/2";
+      case TOOLTIP_POSITION.RIGHT:
+        return "ml-2 left-full top-1/2 -translate-y-1/2";
+      default:
+        return "";
+    }
+  };
+
+  const tipPosition = (position: TOOLTIP_POSITION) => {
+    switch (position) {
+      case TOOLTIP_POSITION.TOP:
+        return "bottom-[-4px] left-1/2 -translate-x-1/2";
+      case TOOLTIP_POSITION.BOTTOM:
+        return "top-[-4px] left-1/2 -translate-x-1/2";
+      case TOOLTIP_POSITION.LEFT:
+        return "right-[-4px] top-1/2 -translate-y-1/2";
+      case TOOLTIP_POSITION.RIGHT:
+        return "left-[-4px] top-1/2 -translate-y-1/2";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <div
+      className={`bg-neutrola-800 text-white text-sm py-1 px-2 rounded-lg absolute z-50 
+        ${isVisible ? "block" : "hidden"} ${getTooltipPosition(
+        position
+      )} ${toolTipWidth} ${toolTipClass}`}
+    >
+      <div>{label}</div>
+      <div
+        className={`absolute w-2 h-2 bg-neutrola-800 rotate-45 ${tipPosition(
+          position
+        )}`}
+      ></div>
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/index.ts

@@ -0,0 +1,22 @@
+export { default as Avatar } from "./components/avatar";
+export { default as Banner } from "./components/banner";
+export { default as Button } from "./components/button";
+export { default as Carousel } from "./components/carousel";
+export { default as Checkbox } from "./components/checkbox";
+export { default as Chip } from "./components/chip";
+export { default as Ellipsis } from "./components/ellipsis";
+export { default as FileUploader } from "./components/fileUploader";
+export { default as FilterDropdown } from "./components/filterDropdown";
+export { default as Input } from "./components/input";
+export { default as Modal } from "./components/modal";
+export { default as NavBar } from "./components/navBar";
+export { default as Pagination } from "./components/pagination";
+export { default as RadioButton } from "./components/radioButton";
+export { default as SelectDropdown } from "./components/selectDropdown";
+export { default as Snackbar } from "./components/snackBar";
+export { default as States } from "./components/state";
+export { default as Table } from "./components/table";
+export { default as Tag } from "./components/tag";
+export { default as TimeLine } from "./components/timeLine";
+export { default as Tooltip } from "./components/tooltip";
+export * as Icons from "./components/icons";

package/src/templates/component-library/avatars/index.tsx

@@ -0,0 +1,45 @@
+import Avatar, { AVATAR_VARIANT } from "@/components/avatar";
+
+const Avatars = () => {
+  const profilePicture = "/images/profile_picture.png";
+  return (
+    <div className="w-[600px] mx-auto my-0">
+      <div className="grid grid-cols-2 gap-8 items-center">
+        <p className="text-base font-semibold text-right">
+          Avatar image with details
+        </p>
+        <Avatar
+          name="John Doe"
+          email="john.doe@email.com"
+          variant={AVATAR_VARIANT.IMAGE_WITH_FULL}
+          image={profilePicture}
+        />
+        <p className="text-base font-semibold text-right">Avatar image only</p>
+        <Avatar
+          name="John Doe"
+          email="john.doe@email.com"
+          variant={AVATAR_VARIANT.IMAGE_ONLY}
+          image={profilePicture}
+        />
+        <p className="text-base font-semibold text-right">
+          Avatar initials with details
+        </p>
+        <Avatar
+          name="John Doe"
+          email="john.doe@email.com"
+          variant={AVATAR_VARIANT.INITIALS_WITH_FULL}
+        />
+        <p className="text-base font-semibold text-right">
+          Avatar initials only
+        </p>
+        <Avatar
+          name="John Doe"
+          email="john.doe@email.com"
+          variant={AVATAR_VARIANT.INITIALS_ONLY}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Avatars;

package/src/templates/component-library/banners/index.tsx

@@ -0,0 +1,35 @@
+import Banner from "@/components/banner";
+
+const Banners = () => {
+  return (
+    <div className="flex flex-col gap-8">
+      <Banner
+        title="This is a title"
+        titleClassName="text-6xl font-semibold text-white"
+        subTitle="Below of the title is the sub title"
+        subTitleClassName="text-4xl font-normal text-white"
+        contentPlacement="left"
+        backgroundImage="/images/hero.png"
+      />
+      <Banner backgroundImage="/images/hero2.png" />
+      <Banner
+        title="This is a title"
+        titleClassName="text-6xl font-semibold text-white"
+        subTitle="Below of the title is the sub title"
+        subTitleClassName="text-4xl font-normal text-white"
+        contentPlacement="right"
+        backgroundColor="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500"
+      />
+      <Banner
+        title="This is a title"
+        titleClassName="text-6xl font-semibold text-white"
+        subTitle="Below of the title is the sub title"
+        subTitleClassName="text-4xl font-normal text-white"
+        contentPlacement="left"
+        backgroundColor="bg-redola-500"
+      />
+    </div>
+  );
+};
+
+export default Banners;

package/src/templates/component-library/buttons/index.tsx

@@ -0,0 +1,122 @@
+import Button, { BUTTON_VARIANTS } from "@/components/button";
+import { ProductsSVG } from "@/components/icons";
+
+const Buttons = () => {
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-row gap-4 items-center justify-center">
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          label="Primary"
+          onClick={() => {}}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          label="Primary with icon"
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.SECONDARY}
+          label="Secondary"
+          onClick={() => {}}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.SECONDARY}
+          label="Secondary with icon"
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.TERTIARY}
+          label="Tertiary"
+          onClick={() => {}}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.TERTIARY}
+          label="Tertiary with icon"
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+        />
+      </div>
+      <div className="flex flex-row gap-4 items-center justify-center">
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          label=" Disabled primary"
+          onClick={() => {}}
+          disabled
+        />
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          label=" Disabled primary with icon"
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+          disabled
+        />
+        <Button
+          variant={BUTTON_VARIANTS.SECONDARY}
+          label=" Disabled secondary"
+          onClick={() => {}}
+          disabled
+        />
+        <Button
+          variant={BUTTON_VARIANTS.SECONDARY}
+          label=" Disabled secondary with icon"
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+          disabled
+        />
+        <Button
+          variant={BUTTON_VARIANTS.TERTIARY}
+          label=" Disabled tertiary"
+          onClick={() => {}}
+          disabled
+        />
+        <Button
+          variant={BUTTON_VARIANTS.TERTIARY}
+          label=" Disabled tertiary with icon"
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+          disabled
+        />
+      </div>
+      <div className="flex flex-row gap-4 items-center justify-center">
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.SECONDARY}
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.TERTIARY}
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+        />
+        <Button
+          variant={BUTTON_VARIANTS.PRIMARY}
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+          disabled
+        />
+        <Button
+          variant={BUTTON_VARIANTS.SECONDARY}
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+          disabled
+        />
+        <Button
+          variant={BUTTON_VARIANTS.TERTIARY}
+          onClick={() => {}}
+          icon={<ProductsSVG />}
+          disabled
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Buttons;

package/src/templates/component-library/carousels/index.tsx

@@ -0,0 +1,38 @@
+import { IBanner } from "@/components/banner";
+import Carousel from "@/components/carousel";
+
+const Carousels = () => {
+  const slides = [
+    {
+      title: "This is a title",
+      titleClassName: "text-6xl font-semibold text-white",
+      subTitle: "Below of the title is the sub title",
+      subTitleClassName: "text-4xl font-normal text-white",
+      contentPlacement: "left",
+      backgroundImage: "/images/hero.png",
+    },
+    {
+      backgroundImage: "/images/hero2.png",
+    },
+    {
+      title: "This is a title",
+      titleClassName: "text-6xl font-semibold text-white",
+      subTitle: "Below of the title is the sub title",
+      subTitleClassName: "text-4xl font-normal text-white",
+      contentPlacement: "right",
+      backgroundColor:
+        "bg-gradient-to-r from-purple-500 via-pink-500 to-red-500",
+    },
+    {
+      title: "This is a title",
+      titleClassName: "text-6xl font-semibold text-white",
+      subTitle: "Below of the title is the sub title",
+      subTitleClassName: "text-4xl font-normal text-white",
+      contentPlacement: "left",
+      backgroundColor: "bg-redola-500",
+    },
+  ];
+  return <Carousel slides={slides as IBanner[]} />;
+};
+
+export default Carousels;

package/src/templates/component-library/checkboxes/index.tsx

@@ -0,0 +1,19 @@
+import Checkbox from "@/components/checkbox";
+import { useState } from "react";
+
+const Checkboxes = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <Checkbox
+        label="Accept Terms & Conditions"
+        checked={isChecked}
+        onChange={(checked) => setIsChecked(checked)}
+      />
+      <p>Checkbox is {isChecked ? "Checked" : "Unchecked"}</p>
+    </div>
+  );
+};
+
+export default Checkboxes;

package/src/templates/component-library/chips/index.tsx

@@ -0,0 +1,49 @@
+import Button from "@/components/button";
+import Chip from "@/components/chip";
+import { useState } from "react";
+
+const chipsArray = [
+  { label: "Chip 1" },
+  { label: "Chip 2" },
+  { label: "Chip 3" },
+  { label: "Chip 4" },
+  { label: "Chip 5" },
+  { label: "Chip 6" },
+  { label: "Chip 7" },
+  { label: "Chip 8" },
+  { label: "Chip 9" },
+  { label: "Chip 10" },
+];
+
+const Chips = () => {
+  const [chipList, setChipList] = useState<{ label: string }[]>([
+    chipsArray[0],
+  ]);
+
+  const handleAddChip = () => {
+    const nextChip = chipsArray.filter((chip) => !chipList.includes(chip))[0];
+    setChipList([...chipList, nextChip]);
+  };
+
+  const onClear = (chip: { label: string }) => {
+    const newChipList = chipList.filter((c) => c.label !== chip.label);
+    setChipList(newChipList);
+  };
+
+  return (
+    <div className="flex flex-row gap-2 items-center justify-center">
+      <Button
+        label="Add a chip"
+        onClick={handleAddChip}
+        disabled={chipList.length === chipsArray.length}
+      />
+      {chipList.map((chip) => (
+        <div key={`${chip.label}`}>
+          <Chip label={chip.label} onClear={() => onClear(chip)} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Chips;

package/src/templates/component-library/ellipsis/index.tsx

@@ -0,0 +1,20 @@
+import Ellipsis from "@/components/ellipsis";
+
+const EllipsisTemplate = () => {
+  return (
+    <div className="flex flex-row gap-10 items-center justify-center">
+      <div className="flex flex-col gap-2">
+        <p className="text-xs font-semibold text-neutrola-500">
+          Without Ellipsis
+        </p>
+        <p>Anton Nimesh Fonseka</p>
+      </div>
+      <div className="flex flex-col gap-2">
+        <p className="text-xs font-semibold text-neutrola-500">With Ellipsis</p>
+        <Ellipsis label="Anton Nimesh Fonseka" />
+      </div>
+    </div>
+  );
+};
+
+export default EllipsisTemplate;

package/src/templates/component-library/fileUploaders/index.tsx

@@ -0,0 +1,21 @@
+import FileUploader from "@/components/fileUploader";
+import { useState } from "react";
+
+const FileUploaders = () => {
+  const [, setFile] = useState<File | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <div className="w-[600px]">
+        <FileUploader
+          title="Upload your documents here"
+          subTitle1="Please make sure the image is in better quality"
+          subTitle2="Max file size 2 MB and we accept .jpg .jpeg .png files"
+          handleAttachment={setFile}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FileUploaders;

package/src/templates/component-library/filterDropdown/index.tsx

@@ -0,0 +1,48 @@
+import FilterDropdown from "@/components/filterDropdown";
+
+const FilterDropdowns = () => {
+  return (
+    <FilterDropdown>
+      {(closeDropdown) => <FilterPanel dismissPanel={closeDropdown} />}
+    </FilterDropdown>
+  );
+};
+
+const FilterPanel = ({ dismissPanel }: { dismissPanel: () => void }) => {
+  return (
+    <div className="w-96 h-80 p-4">
+      <div className="flex flex-col gap-4">
+        <h2 className="text-lg font-bold">Filter</h2>
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Category</label>
+          <select
+            className="border border-neutrola-300 rounded-lg p-2"
+            onChange={dismissPanel}
+          >
+            <option value="">Select a category</option>
+            <option value="category1">Category 1</option>
+            <option value="category2">Category 2</option>
+          </select>
+        </div>
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">Price Range</label>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            className="w-full"
+            onChange={dismissPanel}
+          />
+        </div>
+        <button
+          className="bg-blue-500 text-white rounded-lg p-2"
+          onClick={dismissPanel}
+        >
+          Apply Filters
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FilterDropdowns;

package/src/templates/component-library/icons/index.tsx

@@ -0,0 +1,23 @@
+import * as svgList from "@/components/icons";
+
+const Icons = () => {
+  const list = Object.keys(svgList);
+
+  return (
+    <div className="grid grid-cols-8 gap-x-8 gap-y-12">
+      {list.map((svg: string, index) => (
+        <div
+          className="flex flex-col items-center gap-4 border border-white bg-neutrola-50 size-32 p-2 rounded-lg justify-center"
+          key={`svg_${index}`}
+        >
+          <div className="size-[40px]">
+            {svgList[svg as keyof typeof svgList]()}
+          </div>
+          <span className="text-sm font-medium">{svg}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Icons;