gbs-add-block 0.0.1

package/source/components/select/index.tsx

@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Icon from "../icon/Icon";
+import { check, search, upDown, x } from "../icon/iconPaths";
+import { getSourceData } from "../utils";
+import type { SelectProps } from "./types";
+
+interface ItemsProps {
+  value: string;
+  label: string;
+}
+
+const Select = forwardRef<any, SelectProps>((props, ref) => {
+  const {
+    placeholder = "Select an Item...",
+    items,
+    lazy = false,
+    showSearch = true,
+    onSelect,
+    selectedItem: initialSelectedItem,
+  } = props;
+
+  const [showPopover, setShowPopover] = useState(false);
+  const [workingDataSource, setWorkingDataSource] = useState<ItemsProps[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedItem, setSelectedItem] = useState<string | undefined>(
+    initialSelectedItem
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+
+  // This will close the popup if clicked outside of the component
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    if (
+      selectRef.current &&
+      !selectRef.current.contains(event.target as Node)
+    ) {
+      setShowPopover(false);
+    }
+  }, []);
+
+  // This will close the popup if clicked outside of the component
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  // Focus to input feild when popup opens
+  useEffect(() => {
+    if (showPopover) {
+      inputRef.current?.focus();
+    }
+  }, [showPopover]);
+
+  // Handles if items is an API URL
+  const getSelectItems = useCallback(async (itemsApi: string) => {
+    const itemsData = await getSourceData(itemsApi);
+    setWorkingDataSource(itemsData.sourcedata);
+  }, []);
+
+  useEffect(() => {
+    if (Array.isArray(items)) {
+      setWorkingDataSource(items);
+    } else if (typeof items === "string") {
+      getSelectItems(items);
+    }
+  }, [items, getSelectItems]);
+
+  useEffect(() => {
+    setSelectedItem(initialSelectedItem);
+  }, [initialSelectedItem]);
+
+  //Sets if a default value is passed
+  const selectedDisplay = useMemo(() => {
+    if (selectedItem && workingDataSource.length > 0) {
+      const selected = workingDataSource.find(
+        (item) => item.value === selectedItem
+      );
+      return selected ? selected.label : "";
+    }
+    return "";
+  }, [selectedItem, workingDataSource]);
+
+  // Toggles Popover
+  const togglePopover = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowPopover((prev) => !prev);
+  }, []);
+
+  // Handles Selection of items
+  const handleSelect = useCallback(
+    (value: string) => {
+      setSelectedItem(value);
+      setShowPopover(false);
+      setSearchTerm("");
+      if (onSelect) onSelect(value);
+    },
+    [onSelect]
+  );
+
+  // Clears Selection
+  const clearSelected = useCallback(() => {
+    setSelectedItem(undefined);
+    if (onSelect) onSelect("");
+    setShowPopover(false);
+    setSearchTerm("");
+  }, [onSelect]);
+
+  // Filtering logic
+  const filteredItems = useMemo(() => {
+    if (!searchTerm || lazy) return workingDataSource;
+    return workingDataSource.filter((item) =>
+      Object.values(item).some((val) =>
+        val.toString().toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+  }, [workingDataSource, searchTerm, lazy]);
+
+  // Making Select Functions Accessible in Paren
+  useImperativeHandle(ref, () => ({
+    workingDataSource,
+    items,
+    clearSelected,
+    togglePopover,
+    getSelectItems,
+    selectedDisplay,
+    selected: selectedItem,
+  }));
+
+  return (
+    <div className="relative" ref={selectRef}>
+      <div className="w-[200px] relative">
+        <button
+          className="flex items-center border px-4 py-2 w-[200px] justify-between rounded-lg font-medium text-sm dark:bg-black dark:border-white dark:text-white"
+          onClick={togglePopover}
+        >
+          {selectedDisplay || placeholder}
+          <Icon
+            elements={upDown}
+            svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
+          />
+        </button>
+        {selectedDisplay && (
+          <button
+            className="absolute right-8 top-0 h-full flex items-center px-2 z-20"
+            onClick={clearSelected}
+          >
+            <Icon
+              elements={x}
+              svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
+            />
+          </button>
+        )}
+      </div>
+
+      {showPopover && (
+        <div className="w-[200px] absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white">
+          {showSearch && (
+            <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">
+              <Icon
+                elements={search}
+                svgClass="stroke-gray-500 fill-none dark:stroke-white"
+              />
+              <input
+                autoComplete="off"
+                type="text"
+                name="search"
+                id="search"
+                placeholder="Search a value"
+                className="w-full outline-none dark:bg-black"
+                ref={inputRef}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          )}
+          {filteredItems.length > 0 ? (
+            filteredItems.map(({ value, label }) => (
+              <button
+                key={value}
+                className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
+                onClick={() => handleSelect(value)}
+              >
+                <Icon
+                  elements={check}
+                  svgClass={`h-4 w-4 fill-none ${
+                    selectedItem === value ? "stroke-gray-500" : ""
+                  }`}
+                />
+                {label}
+              </button>
+            ))
+          ) : (
+            <div className="text-sm text-center">No Data Found</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+const MemoizedSelect = memo(Select);
+export { MemoizedSelect as Select };

package/source/components/select/types.ts

@@ -0,0 +1,13 @@
+interface ItemsProps {
+  value: string;
+  label: string;
+}
+
+export type SelectProps = {
+  placeholder?: string;
+  items?: ItemsProps[] | string;
+  lazy?: boolean;
+  showSearch?: boolean;
+  onSelect?: any;
+  selectedItem?: string;
+};

package/source/components/spinner/Stroke.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+interface StrokeProps {
+  size?: string;
+  strokeColor?: string;
+}
+
+export default function Stroke(props: StrokeProps) {
+  const { size, strokeColor } = props;
+  return (
+    <svg
+      className={`${size} animate-spin ${strokeColor}`}
+      viewBox="0 0 256 256"
+    >
+      <line
+        x1="128"
+        y1="32"
+        x2="128"
+        y2="64"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="195.9"
+        y1="60.1"
+        x2="173.3"
+        y2="82.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="224"
+        y1="128"
+        x2="192"
+        y2="128"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="195.9"
+        y1="195.9"
+        x2="173.3"
+        y2="173.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="128"
+        y1="224"
+        x2="128"
+        y2="192"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="60.1"
+        y1="195.9"
+        x2="82.7"
+        y2="173.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="32"
+        y1="128"
+        x2="64"
+        y2="128"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+      <line
+        x1="60.1"
+        y1="60.1"
+        x2="82.7"
+        y2="82.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      ></line>
+    </svg>
+  );
+}

package/source/components/spinner/index.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import Stroke from "./Stroke";
+import type { SpinnerProps } from "./types";
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = "h-10 w-10",
+  color = "border-blue-600",
+  fullCircleColor = "border-t-red-400",
+  dotColor = "bg-blue-500",
+  duration = "duration-500",
+  type = "circle",
+  strokeColor = "stroke-blue-500",
+}) => {
+  if (type === "circle") {
+    return (
+      <div
+        className={`loader ease-linear rounded-full border-4 border-t-4 ${color} ${size} ${duration} border-t-transparent animate-spin`}
+      ></div>
+    );
+  } else if (type === "circle-bg") {
+    return (
+      <div
+        className={`${size} animate-spin rounded-full border-4 ${fullCircleColor}`}
+      ></div>
+    );
+  } else if (type === "dot") {
+    return (
+      <div className="flex space-x-2 dark:invert">
+        <div
+          className={`${size} ${dotColor} rounded-full animate-bounce`}
+          style={{ animationDelay: "-0.3s" }}
+        ></div>
+        <div
+          className={`${size} ${dotColor} rounded-full animate-bounce`}
+          style={{ animationDelay: "-0.15s" }}
+        ></div>
+        <div
+          className={`${size} ${dotColor} rounded-full animate-bounce`}
+        ></div>
+      </div>
+    );
+  } else if (type === "stroke") {
+    return <Stroke size={size} strokeColor={strokeColor} />;
+  } else {
+    return null;
+  }
+};

package/source/components/spinner/types.ts

@@ -0,0 +1,9 @@
+export type SpinnerProps = {
+  size?: string;
+  color?: string;
+  fullCircleColor?: string;
+  dotColor?: string;
+  duration?: string;
+  type?: "circle" | "circle-bg" | "dot" | "stroke";
+  strokeColor?: string;
+};

package/source/components/toast/Toast.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Toast as ToastType } from "./types";
+import { useToastStore } from "./toastAtom";
+import Icon from "../icon/Icon";
+import { circleCheck, info, x, xCircle } from "../icon/iconPaths";
+
+interface ToastProps {
+  toast: ToastType;
+}
+
+const Toast: React.FC<ToastProps> = ({ toast }) => {
+  const { dismissToast } = useToastStore();
+  const icons = {
+    success: (
+      <Icon
+        elements={circleCheck}
+        svgClass="h-4 w-4 stroke-green-500 fill-none dark:stroke-white"
+      />
+    ),
+    error: (
+      <Icon
+        elements={xCircle}
+        svgClass="h-4 w-4 stroke-red-500 fill-none dark:stroke-white"
+      />
+    ),
+    info: (
+      <Icon
+        elements={info}
+        svgClass="h-4 w-4 stroke-blue-500 fill-none dark:stroke-white"
+      />
+    ),
+  };
+
+  return (
+    <div
+      className={`bg-white px-2 py-3 rounded-lg text-sm flex justify-between w-80 m-2 border shadow-lg ${
+        toast.type === "success"
+          ? "text-green-500"
+          : toast.type === "error"
+          ? "text-red-500"
+          : "text-blue-500"
+      }`}
+      role="alert"
+    >
+      <div className="flex gap-2 items-center">
+        {icons[toast.type]}
+        <div>{toast.message}</div>
+      </div>
+      {toast.dismissible && (
+        <button onClick={() => dismissToast(toast.id)}>
+          <Icon
+            elements={x}
+            svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
+          />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Toast;

package/source/components/toast/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import { useToastStore } from "./toastAtom";
+import Toast from "./Toast";
+import { ToastPosition } from "./types";
+
+interface ToastsProps {
+  position?: ToastPosition;
+}
+
+const positionClasses: Record<ToastPosition, string> = {
+  "top-left": "top-0 left-0",
+  "top-right": "top-0 right-0",
+  "bottom-left": "bottom-0 left-0",
+  "bottom-right": "bottom-0 right-0",
+};
+
+export const Toasts: React.FC<ToastsProps> = ({ position = "top-right" }) => {
+  const { toasts } = useToastStore();
+
+  return (
+    <section
+      className={`fixed flex flex-col z-50 p-4 ${positionClasses[position]}`}
+    >
+      {toasts.map((toast) => (
+        <Toast key={toast.id} toast={toast} />
+      ))}
+    </section>
+  );
+};

package/source/components/toast/toastAtom.ts

@@ -0,0 +1,23 @@
+import { atom, useAtom } from "jotai";
+import { Toast } from "./types";
+
+export const toastsAtom = atom<Toast[]>([]);
+
+export const useToastStore = () => {
+  const [toasts, setToasts] = useAtom(toastsAtom);
+
+  const addToast = (toast: Omit<Toast, "id">) => {
+    const id = Math.floor(Math.random() * 10000);
+    const newToast = { ...toast, id };
+    setToasts((prev) => [newToast, ...prev]);
+    if (toast.timeout) {
+      setTimeout(() => dismissToast(id), toast.timeout);
+    }
+  };
+
+  const dismissToast = (id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  return { toasts, addToast, dismissToast };
+};

package/source/components/toast/types.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+export type ToastType = "success" | "error" | "info";
+
+export type Toast = {
+  id: number;
+  type: ToastType;
+  message: string | ReactNode;
+  dismissible: boolean;
+  timeout: number;
+};
+
+export type ToastOptions = {
+  message: string | ReactNode;
+  type?: ToastType;
+  dismissible?: boolean;
+  timeout?: number;
+};
+
+export type ToastPosition =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";

package/source/components/toast/useToast.ts

@@ -0,0 +1,24 @@
+import { ToastOptions } from "./types";
+import { useToastStore } from "./toastAtom";
+
+const useToast = () => {
+  const { addToast, dismissToast } = useToastStore();
+
+  return {
+    addToast: ({
+      message,
+      type = "info",
+      dismissible = false,
+      timeout = 3000,
+    }: ToastOptions) =>
+      addToast({
+        message,
+        type,
+        dismissible,
+        timeout,
+      }),
+    dismissToast,
+  };
+};
+
+export default useToast;

package/source/fallback/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function Fallback(props: any) {
+  const { component } = props;
+  return (
+    <div>
+      <p>oops {component} failed!!</p>
+      <button>Raise an Issue</button>
+    </div>
+  );
+}

package/source/icon/Icon.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+type SvgElement = {
+  type: "path" | "circle";
+  key: string;
+  d?: string;
+  cx?: number;
+  cy?: number;
+  r?: number;
+};
+
+type IconProps = {
+  svgClass?: string;
+  elements?: SvgElement[];
+  dimensions?: any;
+};
+
+export default function Icon({
+  svgClass = "stroke-none fill-none",
+  elements = [
+    { type: "path", d: "m11 17-5-5 5-5", key: "13zhaf" },
+    { type: "path", d: "m18 17-5-5 5-5", key: "h8a8et" },
+    { type: "circle", cx: 12, cy: 12, r: 5, key: "circle1" },
+  ],
+  dimensions = { width: "24", height: "24" },
+}: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={dimensions.width}
+      height={dimensions.height}
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={svgClass}
+    >
+      {elements.map((element) => {
+        if (element.type === "path") {
+          return <path d={element.d} key={element.key} />;
+        } else if (element.type === "circle") {
+          return (
+            <circle
+              cx={element.cx}
+              cy={element.cy}
+              r={element.r}
+              key={element.key}
+            />
+          );
+        }
+        return null;
+      })}
+    </svg>
+  );
+}