gwan-design-system 0.1.2 → 0.1.3

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

@@ -1,179 +0,0 @@
-"use client";
-
-import { useSearchParams, usePathname, useRouter } from "next/navigation";
-import Icons from "./icons";
-import Tags from "./tags";
-import Buttons from "./buttons";
-import Chips from "./chips";
-import TimeLines from "./timeLines";
-import Tables from "./tables";
-import Paginations from "./pagination";
-import FilterDropdowns from "./filterDropdown";
-import SelectDropdowns from "./selectDropdown";
-import Inputs from "./input";
-import Modals from "./modals";
-import Avatars from "./avatars";
-import Tooltips from "./tooltips";
-import EllipsisTemplate from "./ellipsis";
-import NavBars from "./navBars";
-import FileUploaders from "./fileUploaders";
-import Checkboxes from "./checkboxes";
-import RadioButtons from "./radioButtons";
-import Banners from "./banners";
-import Carousels from "./carousels";
-import SnackBars from "./snackBars";
-import States from "./states";
-
-const menuItems = [
-  {
-    name: "Icons",
-    template: <Icons />,
-  },
-  {
-    name: "Tags",
-    template: <Tags />,
-  },
-  {
-    name: "Buttons",
-    template: <Buttons />,
-  },
-  {
-    name: "Chips",
-    template: <Chips />,
-  },
-  {
-    name: "Timeline",
-    template: <TimeLines />,
-  },
-  {
-    name: "Table",
-    template: <Tables />,
-  },
-  {
-    name: "Pagination",
-    template: <Paginations />,
-  },
-  {
-    name: "Filter Dropdown",
-    template: <FilterDropdowns />,
-  },
-  {
-    name: "Select Dropdown",
-    template: <SelectDropdowns />,
-  },
-  {
-    name: "Input",
-    template: <Inputs />,
-  },
-  {
-    name: "Modal",
-    template: <Modals />,
-  },
-  {
-    name: "Avatar",
-    template: <Avatars />,
-  },
-  {
-    name: "Tooltip",
-    template: <Tooltips />,
-  },
-  {
-    name: "Ellipsis",
-    template: <EllipsisTemplate />,
-  },
-  {
-    name: "Navigation",
-    template: <NavBars />,
-  },
-  {
-    name: "File Uploader",
-    template: <FileUploaders />,
-  },
-  {
-    name: "Checkbox",
-    template: <Checkboxes />,
-  },
-  {
-    name: "Radio Button",
-    template: <RadioButtons />,
-  },
-  {
-    name: "Banner",
-    template: <Banners />,
-  },
-  {
-    name: "Carousel",
-    template: <Carousels />,
-  },
-  {
-    name: "Snackbar",
-    template: <SnackBars />,
-  },
-  {
-    name: "State",
-    template: <States />,
-  },
-];
-
-const LibraryTemplate = () => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const activeMenuItem = searchParams.get("tab") || menuItems[0].name;
-
-  const handleTabChange = (tab: string) => {
-    const newParams = new URLSearchParams(searchParams);
-    newParams.set("tab", tab);
-    router.push(`${pathname}?${newParams.toString()}`, { scroll: false });
-  };
-
-  return (
-    <div className="custom-bg h-[100vh] overflow-hidden">
-      <div className="bg-[#FFFFFF4D] h-[100vh]">
-        <div className="flex flex-row gap-8 justify-start items-start">
-          <div className="flex flex-col gap-4 bg-[#0000004D] h-[100vh] py-4 px-8 overflow-y-auto w-[350px]">
-            <p className="text-white text-2xl font-medium">
-              Components Library{" "}
-              <span className="text-sm text-neutrola-500">
-                v{process.env.NEXT_PUBLIC_APP_VERSION}
-              </span>
-            </p>
-            <hr className="opacity-50 border-2" />
-            {menuItems.map((menuItem, index) => {
-              const menuItemClass =
-                activeMenuItem === menuItem.name
-                  ? "bg-[rgba(0,0,0,0.2)]"
-                  : "bg-transparent border-2 border-[rgba(255,255,255,0.2)]";
-
-              return (
-                <div
-                  key={`menu_${menuItem.name}_${index}`}
-                  className={`p-4 rounded-lg w-full cursor-pointer hover:bg-[rgba(0,0,0,0.3)] ${menuItemClass}`}
-                  onClick={() => handleTabChange(menuItem.name)}
-                >
-                  <p className="text-white text-lg font-semibold">
-                    {menuItem.name}
-                  </p>
-                </div>
-              );
-            })}
-          </div>
-          <div className="py-4 pr-8 flex flex-1 overflow-y-auto">
-            <div className="bg-white rounded-lg p-6 w-full h-[95vh] overflow-y-auto flex flex-col gap-12">
-              <p className="text-black text-xl font-medium">{activeMenuItem}</p>
-              <div>
-                {
-                  menuItems.find(({ name }) => name === activeMenuItem)
-                    ?.template
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LibraryTemplate;

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

@@ -1,35 +0,0 @@
-import Input from "@/components/input";
-import { useState } from "react";
-
-const Inputs = () => {
-  const [inputValue, setInputValue] = useState<string>("");
-  const [inputValueRequired, setInputValueRequired] = useState<string>("");
-  const [inputValueDisabled, setInputValueDisabled] = useState<string>("");
-
-  return (
-    <div className="flex flex-col gap-4">
-      <Input
-        label="Input"
-        placeholder="This is an input"
-        value={inputValue}
-        onChange={(val) => setInputValue(val)}
-      />
-      <Input
-        label="Required Input"
-        placeholder="This is a required input"
-        value={inputValueRequired}
-        onChange={(val) => setInputValueRequired(val)}
-        required
-      />
-      <Input
-        label="Disabled Input"
-        placeholder="This is a disabled input"
-        value={inputValueDisabled}
-        onChange={(val) => setInputValueDisabled(val)}
-        disabled
-      />
-    </div>
-  );
-};
-
-export default Inputs;

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

@@ -1,113 +0,0 @@
-import Button, { BUTTON_VARIANTS } from "@/components/button";
-import Modal, { MODAL_SIZE } from "@/components/modal";
-import Image from "next/image";
-import { useState } from "react";
-
-const Modals = () => {
-  const [isSmallModalOpen, setIsSmallModalOpen] = useState<boolean>(false);
-  const [isMediumModalOpen, setIsMediumModalOpen] = useState<boolean>(false);
-  const [isLargeModalOpen, setIsLargeModalOpen] = useState<boolean>(false);
-  const [isFullModalOpen, setIsFullModalOpen] = useState<boolean>(false);
-  const modalImage = "/images/empty_state.png";
-
-  return (
-    <div className="flex flex-row gap-4 items-center justify-center">
-      <Button
-        label="Small modal"
-        onClick={() => setIsSmallModalOpen(true)}
-        variant={BUTTON_VARIANTS.PRIMARY}
-      />
-      <Button
-        label="Medium modal"
-        onClick={() => setIsMediumModalOpen(true)}
-        variant={BUTTON_VARIANTS.PRIMARY}
-      />
-      <Button
-        label="Large modal"
-        onClick={() => setIsLargeModalOpen(true)}
-        variant={BUTTON_VARIANTS.PRIMARY}
-      />
-      <Button
-        label="Full screen modal"
-        onClick={() => setIsFullModalOpen(true)}
-        variant={BUTTON_VARIANTS.PRIMARY}
-      />
-
-      {isSmallModalOpen && (
-        <Modal
-          title="Small Modal"
-          onClear={() => setIsSmallModalOpen(false)}
-          size={MODAL_SIZE.SMALL}
-        >
-          <div className="flex flex-col gap-4 items-center justify-center">
-            <Image
-              src={modalImage}
-              alt="modal_image"
-              width={150}
-              height={100}
-            />
-            <p className="text-base font-semibold">This is a small modal</p>
-          </div>
-        </Modal>
-      )}
-
-      {isMediumModalOpen && (
-        <Modal
-          title="Medium Modal"
-          onClear={() => setIsMediumModalOpen(false)}
-          size={MODAL_SIZE.MEDIUM}
-        >
-          <div className="flex flex-col gap-4 items-center justify-center">
-            <Image
-              src={modalImage}
-              alt="modal_image"
-              width={300}
-              height={200}
-            />
-            <p className="text-base font-semibold">This is a medium modal</p>
-          </div>
-        </Modal>
-      )}
-
-      {isLargeModalOpen && (
-        <Modal
-          title="Large Modal"
-          onClear={() => setIsLargeModalOpen(false)}
-          size={MODAL_SIZE.LARGE}
-        >
-          <div className="flex flex-col gap-4 items-center">
-            <Image
-              src={modalImage}
-              alt="modal_image"
-              width={450}
-              height={300}
-            />
-            <p className="text-base font-semibold">This is a large modal</p>
-          </div>
-        </Modal>
-      )}
-
-      {isFullModalOpen && (
-        <Modal
-          title="Full Screen Modal"
-          onClear={() => setIsFullModalOpen(false)}
-          size={MODAL_SIZE.FULL}
-        >
-          <div className="flex flex-col gap-4 items-center">
-            <Image
-              src={modalImage}
-              alt="modal_image"
-              width={600}
-              height={400}
-            />
-            <p className="text-base font-semibold">
-              This is a full screen modal
-            </p>
-          </div>
-        </Modal>
-      )}
-    </div>
-  );
-};
-
-export default Modals;

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

@@ -1,91 +0,0 @@
-import { AVATAR_VARIANT } from "@/components/avatar";
-import {
-  ColorsSVG,
-  CoversSVG,
-  DashboardSVG,
-  OrdersSVG,
-  ProductsSVG,
-  SignOutSVG,
-  TemplatesSVG,
-} from "@/components/icons";
-import NavBar from "@/components/navBar";
-
-const menuItems = [
-  {
-    title: "Dashboard",
-    icon: <DashboardSVG />,
-    route: "",
-    isActive: true,
-    isDivider: false,
-  },
-  {
-    title: "Manage orders",
-    icon: <OrdersSVG />,
-    route: "",
-    isActive: false,
-    isDivider: false,
-  },
-  {
-    title: "Manage products",
-    icon: <ProductsSVG />,
-    route: "",
-    isActive: false,
-    isDivider: false,
-  },
-  {
-    title: "Manage templates",
-    icon: <TemplatesSVG />,
-    route: "",
-    isActive: false,
-    isDivider: false,
-  },
-  {
-    title: "Manage covers",
-    icon: <CoversSVG />,
-    route: "",
-    isActive: false,
-    isDivider: false,
-  },
-  {
-    title: "Manage colors",
-    icon: <ColorsSVG />,
-    route: "",
-    isActive: false,
-    isDivider: false,
-  },
-  {
-    title: "",
-    route: "",
-    isActive: false,
-    isDivider: true,
-  },
-  {
-    title: "Sign out",
-    icon: <SignOutSVG />,
-    route: "",
-    isActive: false,
-    isDivider: false,
-  },
-];
-
-const NavBars = () => {
-  return (
-    <div className="flex flex-row items-start border border-neutral-200">
-      <NavBar
-        menuItems={menuItems}
-        logoShort="/images/logo_short.png"
-        logoLong="/images/logo.png"
-        avatarName="John Doe"
-        avatarEmail="john.doe@email.com"
-        avatarImage="/images/profile_picture.png"
-        avatarType={AVATAR_VARIANT.IMAGE_WITH_FULL}
-        menuWidthClass="w-[20rem]"
-        menuHeightClass="h-[80vh]"
-        menuBackgroundColor="bg-primary-100"
-      />
-      <div className="flex-1 p-4">Rest of the content</div>
-    </div>
-  );
-};
-
-export default NavBars;

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

@@ -1,28 +0,0 @@
-import Pagination, { IPaging } from "@/components/pagination";
-import { useState } from "react";
-
-const numbers = [
-  { label: "10" },
-  { label: "25" },
-  { label: "50" },
-  { label: "100" },
-  { label: "200" },
-];
-
-const Paginations = () => {
-  const [paging, setPaging] = useState<IPaging>({
-    total: 112,
-    page: 1,
-    size: 10,
-  });
-
-  return (
-    <Pagination
-      {...paging}
-      options={numbers}
-      onChange={(paging: IPaging) => setPaging(paging)}
-    />
-  );
-};
-
-export default Paginations;

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

@@ -1,33 +0,0 @@
-import RadioButton from "@/components/radioButton";
-import { useState } from "react";
-
-const RadioButtons = () => {
-  const [selectedOption, setSelectedOption] = useState("option1");
-
-  return (
-    <div className="flex flex-col gap-4 items-center">
-      <RadioButton
-        label="Option 1"
-        value="option1"
-        selectedValue={selectedOption}
-        onChange={setSelectedOption}
-      />
-      <RadioButton
-        label="Option 2"
-        value="option2"
-        selectedValue={selectedOption}
-        onChange={setSelectedOption}
-      />
-      <RadioButton
-        label="Option 3"
-        value="option3"
-        selectedValue={selectedOption}
-        onChange={setSelectedOption}
-      />
-
-      <p>Selected option: {selectedOption}</p>
-    </div>
-  );
-};
-
-export default RadioButtons;

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

@@ -1,90 +0,0 @@
-import SelectDropdown, {
-  type ISelectDropdownOption,
-} from "@/components/selectDropdown";
-import { useState } from "react";
-
-const options: ISelectDropdownOption[] = [
-  { value: "1", label: "Option 1" },
-  { value: "2", label: "Option 2" },
-  { value: "3", label: "Option 3" },
-  { value: "4", label: "Option 4" },
-  { value: "5", label: "Option 5" },
-  { value: "6", label: "Option 6" },
-  { value: "7", label: "Option 7" },
-  { value: "8", label: "Option 8" },
-  { value: "9", label: "Option 9" },
-  { value: "10", label: "Option 10" },
-  { value: "11", label: "Option 11" },
-  { value: "12", label: "Option 12" },
-  { value: "13", label: "Option 13" },
-  { value: "14", label: "Option 14" },
-  { value: "15", label: "Option 15" },
-  { value: "16", label: "Option 16" },
-  { value: "17", label: "Option 17" },
-  { value: "18", label: "Option 18" },
-  { value: "19", label: "Option 19" },
-  { value: "20", label: "Option 20" },
-  { value: "21", label: "Option 21" },
-  { value: "22", label: "Option 22" },
-  { value: "23", label: "Option 23" },
-  { value: "24", label: "Option 24" },
-  { value: "25", label: "Option 25" },
-  { value: "26", label: "Option 26" },
-  { value: "27", label: "Option 27" },
-  { value: "28", label: "Option 28" },
-  { value: "29", label: "Option 29" },
-  { value: "30", label: "Option 30" },
-  { value: "31", label: "Option 31" },
-  { value: "32", label: "Option 32" },
-  { value: "33", label: "Option 33" },
-  { value: "34", label: "Option 34" },
-];
-
-const numbers = [
-  { label: "1" },
-  { label: "2" },
-  { label: "3" },
-  { label: "4" },
-  { label: "5" },
-  { label: "6" },
-];
-
-const SelectDropdowns = () => {
-  const [selectedOption, setSelectedOption] = useState<string>("");
-  const [disabledDropdown, setDisabledDropdown] = useState<string>("");
-  const [customDropdown, setCustomDropdown] = useState<string>("1");
-
-  return (
-    <div className="flex flex-col gap-4">
-      <SelectDropdown
-        options={options}
-        label="Select dropdown"
-        placeholder="This is a placeholder"
-        value={selectedOption}
-        onChange={(option) => setSelectedOption(option)}
-      />
-      <SelectDropdown
-        options={options}
-        label="Disabled Select dropdown"
-        placeholder="This is a placeholder"
-        value={disabledDropdown}
-        onChange={(option) => setDisabledDropdown(option)}
-        disabled
-      />
-      <div className="flex flex-col gap-2">
-        <label className="text-sm text-neutrola-600 mb-2">
-          Pagination dropdown
-        </label>
-        <div className="w-20">
-          <SelectDropdown
-            options={numbers}
-            value={customDropdown}
-            onChange={(option) => setCustomDropdown(option)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SelectDropdowns;

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

@@ -1,34 +0,0 @@
-import { CircleSVG } from "@/components/icons";
-import Snackbar, { SNACK_BAR_TYPE } from "@/components/snackBar";
-
-const SnackBars = () => {
-  return (
-    <div className="flex flex-col items-center">
-      <div className="w-[50%] flex flex-col gap-4">
-        <Snackbar message="Some text here" icon={<CircleSVG />} />
-        <Snackbar
-          message="Some text here"
-          type={SNACK_BAR_TYPE.INFO}
-          icon={<CircleSVG />}
-        />
-        <Snackbar
-          message="Some text here"
-          type={SNACK_BAR_TYPE.SUCCESS}
-          icon={<CircleSVG />}
-        />
-        <Snackbar
-          message="Some text here"
-          type={SNACK_BAR_TYPE.WARNING}
-          icon={<CircleSVG />}
-        />
-        <Snackbar
-          message="Some text here"
-          type={SNACK_BAR_TYPE.DANGER}
-          icon={<CircleSVG />}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default SnackBars;

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

@@ -1,24 +0,0 @@
-import State, { STATE_TYPE } from "@/components/state";
-
-const States = () => {
-  return (
-    <div className="flex flex-col gap-8">
-      <div className="border border-neutrola-200 rounded-lg h-[860px]">
-        <State
-          type={STATE_TYPE.EMPTY}
-          title="Uhh.. ehh.. it's empty !!!"
-          subTitle="Looks like you haven't add any items to your shopping cart."
-        />
-      </div>
-      <div className="border border-neutrola-200 rounded-lg h-[860px]">
-        <State
-          stateImage="/images/success.png"
-          title="Your planner is printing !!!"
-          subTitle="You have successfully placed the order and we are getting your order ready."
-        />
-      </div>
-    </div>
-  );
-};
-
-export default States;