dev: copy shortcuts, magic login links, improved settings page

ui/CustomListbox/index.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { CheckIcon } from "@heroicons/react/20/solid";
+
+import { Props } from "./types";
+
+const CustomListbox: React.FC<Props> = ({
+  title,
+  options,
+  value,
+  onChange,
+  multiple,
+  icon,
+  width,
+  footerOption,
+  optionsFontsize,
+  className,
+  label,
+}) => {
+  return (
+    <Listbox value={value} onChange={onChange} multiple={multiple}>
+      {({ open }) => (
+        <>
+          {label && (
+            <Listbox.Label>
+              <div className="text-gray-500 mb-2">{label}</div>
+            </Listbox.Label>
+          )}
+          <div className="relative">
+            <Listbox.Button
+              className={`flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300 ${
+                width === "sm"
+                  ? "w-32"
+                  : width === "md"
+                  ? "w-48"
+                  : width === "lg"
+                  ? "w-64"
+                  : width === "xl"
+                  ? "w-80"
+                  : width === "2xl"
+                  ? "w-96"
+                  : width === "w-full"
+                  ? "w-full"
+                  : ""
+              }
+              ${className || "px-2 py-1"}`}
+            >
+              {icon ?? null}
+              <span className="block truncate">
+                {Array.isArray(value)
+                  ? value.map((v) => options?.find((o) => o.value === v)?.display).join(", ") ||
+                    `${title}`
+                  : options?.find((o) => o.value === value)?.display || `${title}`}
+              </span>
+            </Listbox.Button>
+
+            <Transition
+              show={open}
+              as={React.Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options
+                className={`absolute mt-1 bg-white shadow-lg ${
+                  width === "sm"
+                    ? "w-32"
+                    : width === "md"
+                    ? "w-48"
+                    : width === "lg"
+                    ? "w-64"
+                    : width === "xl"
+                    ? "w-80"
+                    : width === "2xl"
+                    ? "w-96"
+                    : width === "w-full"
+                    ? "w-full"
+                    : ""
+                } ${
+                  optionsFontsize === "sm"
+                    ? "text-xs"
+                    : optionsFontsize === "md"
+                    ? "text-base"
+                    : optionsFontsize === "lg"
+                    ? "text-lg"
+                    : optionsFontsize === "xl"
+                    ? "text-xl"
+                    : optionsFontsize === "2xl"
+                    ? "text-2xl"
+                    : ""
+                } ${
+                  className || ""
+                } rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none z-10`}
+              >
+                <div className="p-1">
+                  {options ? (
+                    options.length > 0 ? (
+                      options.map((option) => (
+                        <Listbox.Option
+                          key={option.value}
+                          className={({ active }) =>
+                            `${
+                              active ? "text-white bg-theme" : "text-gray-900"
+                            } cursor-pointer select-none relative p-2 rounded-md`
+                          }
+                          value={option.value}
+                        >
+                          {({ selected, active }) => (
+                            <>
+                              <span
+                                className={`${
+                                  selected ||
+                                  (Array.isArray(value)
+                                    ? value.includes(option.value)
+                                    : value === option.value)
+                                    ? "font-semibold"
+                                    : "font-normal"
+                                } block truncate`}
+                              >
+                                {option.display}
+                              </span>
+
+                              {selected ||
+                              (Array.isArray(value)
+                                ? value.includes(option.value)
+                                : value === option.value) ? (
+                                <span
+                                  className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
+                                    active ||
+                                    (Array.isArray(value)
+                                      ? value.includes(option.value)
+                                      : value === option.value)
+                                      ? "text-white"
+                                      : "text-indigo-600"
+                                  }`}
+                                >
+                                  <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                </span>
+                              ) : null}
+                            </>
+                          )}
+                        </Listbox.Option>
+                      ))
+                    ) : (
+                      <p className="text-sm text-gray-500 text-center">No options</p>
+                    )
+                  ) : (
+                    <p className="text-sm text-gray-500 text-center">Loading...</p>
+                  )}
+                </div>
+                {footerOption ?? null}
+              </Listbox.Options>
+            </Transition>
+          </div>
+        </>
+      )}
+    </Listbox>
+  );
+};
+
+export default CustomListbox;

ui/CustomListbox/types.d.ts

@@ -0,0 +1,13 @@
+export type Props = {
+  title: string;
+  label?: string;
+  options?: Array<{ display: string; value: any }>;
+  icon?: JSX.Element;
+  value: any;
+  onChange: (value: any) => void;
+  multiple?: boolean;
+  width?: "sm" | "md" | "lg" | "xl" | "2xl" | "w-full";
+  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
+  className?: string;
+  footerOption?: JSX.Element;
+};

ui/ListBox/index.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-// headless ui
-import { Listbox } from "@headlessui/react";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-// types
-type Props = {
-  value: any;
-  placeholder: string | JSX.Element;
-  className?: string;
-  theme?: "white" | "purple";
-  onChange: (value: any) => void;
-  icon?: () => React.ReactNode;
-  children: React.ReactNode;
-};
-
-const ListBox: React.FC<Props> = ({
-  value,
-  onChange,
-  placeholder,
-  icon,
-  children,
-  className,
-  theme,
-}) => {
-  return (
-    <div className="relative">
-      <Listbox value={value} onChange={onChange}>
-        <Listbox.Button
-          className={`p-2 rounded flex items-center gap-x-2 ${
-            theme === "white"
-              ? "bg-white border border-gray-200"
-              : "bg-purple-200"
-          } ${className ? className : ""}`}
-        >
-          {icon && icon()}
-          <p className="font-semibold">{placeholder}</p>
-          <div className="flex-grow flex justify-end">
-            <ChevronDownIcon width="20" height="20" />
-          </div>
-        </Listbox.Button>
-        <Listbox.Options className="absolute mt-1 w-full bg-white border border-gray-300 flex flex-col gap-y-2 py-3 z-50">
-          {children}
-        </Listbox.Options>
-      </Listbox>
-    </div>
-  );
-};
-
-export { Listbox };
-
-export default ListBox;

ui/SearchListbox/index.tsx

@@ -7,18 +7,23 @@ import { classNames } from "constants/common";
 import type { Props } from "./types";
 
 const SearchListbox: React.FC<Props> = ({
-  display,
+  title,
   options,
   onChange,
   value,
   multiple: canSelectMultiple,
+  icon,
+  width,
+  optionsFontsize,
+  buttonClassName,
+  optionsClassName,
 }) => {
   const [query, setQuery] = useState("");
 
   const filteredOptions =
     query === ""
       ? options
-      : options.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
+      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
 
   const props: any = {
     value,
@@ -34,66 +39,112 @@ const SearchListbox: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex flex-nowrap justify-end space-x-2 py-2 px-2 sm:px-3">
-      <Combobox as="div" {...props} className="flex-shrink-0">
-        {({ open }: any) => (
-          <>
-            <Combobox.Label className="sr-only"> {display} </Combobox.Label>
-            <div className="relative">
-              <Combobox.Button className="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3">
-                <span
-                  className={classNames(
-                    value === null || value === undefined ? "" : "text-gray-900",
-                    "hidden truncate sm:ml-2 sm:block"
-                  )}
-                >
-                  {value
-                    ? options.find((option) => option.value === value)?.name ?? "None"
-                    : `Select ${display}`}
-                </span>
-              </Combobox.Button>
-
-              <Transition
-                show={open}
-                as={React.Fragment}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
+    <Combobox as="div" {...props} className="flex-shrink-0">
+      {({ open }: any) => (
+        <>
+          <Combobox.Label className="sr-only"> {title} </Combobox.Label>
+          <div className="relative">
+            <Combobox.Button
+              className={`flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300 ${
+                width === "sm"
+                  ? "w-32"
+                  : width === "md"
+                  ? "w-48"
+                  : width === "lg"
+                  ? "w-64"
+                  : width === "xl"
+                  ? "w-80"
+                  : width === "2xl"
+                  ? "w-96"
+                  : ""
+              } ${buttonClassName || ""}`}
+            >
+              {icon ?? null}
+              <span
+                className={classNames(
+                  value === null || value === undefined ? "" : "text-gray-900",
+                  "hidden truncate sm:ml-2 sm:block"
+                )}
               >
-                <Combobox.Options className="absolute right-0 z-10 mt-1 max-h-56 w-52 px-1 py-1 overflow-auto rounded-lg bg-white text-base shadow ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                  <Combobox.Input
-                    className="w-full bg-transparent border-b py-2 pl-3 mb-1 focus:outline-none sm:text-sm"
-                    onChange={(event) => setQuery(event.target.value)}
-                    placeholder="Search"
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
-                  {filteredOptions.length > 0 ? (
+                {Array.isArray(value)
+                  ? value
+                      .map((v) => options?.find((option) => option.value === v)?.display)
+                      .join(", ") || title
+                  : options?.find((option) => option.value === value)?.display || title}
+              </span>
+            </Combobox.Button>
+
+            <Transition
+              show={open}
+              as={React.Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Combobox.Options
+                className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none z-10 ${
+                  width === "sm"
+                    ? "w-32"
+                    : width === "md"
+                    ? "w-48"
+                    : width === "lg"
+                    ? "w-64"
+                    : width === "xl"
+                    ? "w-80"
+                    : width === "2xl"
+                    ? "w-96"
+                    : ""
+                }} ${
+                  optionsFontsize === "sm"
+                    ? "text-xs"
+                    : optionsFontsize === "md"
+                    ? "text-base"
+                    : optionsFontsize === "lg"
+                    ? "text-lg"
+                    : optionsFontsize === "xl"
+                    ? "text-xl"
+                    : optionsFontsize === "2xl"
+                    ? "text-2xl"
+                    : ""
+                } ${optionsClassName || ""}`}
+              >
+                <Combobox.Input
+                  className="w-full bg-transparent border-b py-2 pl-3 mb-1 focus:outline-none sm:text-sm"
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Search"
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+                {filteredOptions ? (
+                  filteredOptions.length > 0 ? (
                     filteredOptions.map((option) => (
                       <Combobox.Option
                         key={option.value}
                         className={({ active }) =>
-                          classNames(
-                            active ? "bg-gray-50" : "bg-white",
-                            "relative rounded cursor-default select-none py-2 px-3"
-                          )
+                          `${
+                            active ? "text-white bg-theme" : "text-gray-900"
+                          } cursor-pointer select-none relative p-2 rounded-md`
                         }
                         value={option.value}
                       >
                         <div className="flex items-center">
-                          <span className="ml-3 block truncate font-medium">{option.name}</span>
+                          <span className="ml-3 block truncate font-medium">
+                            {option.element ?? option.display}
+                          </span>
                         </div>
                       </Combobox.Option>
                     ))
                   ) : (
-                    <div className="text-center text-gray-400 m-1 mt-0">No results found</div>
-                  )}
-                </Combobox.Options>
-              </Transition>
-            </div>
-          </>
-        )}
-      </Combobox>
-    </div>
+                    <p className="text-sm text-gray-500">No {title.toLowerCase()} found</p>
+                  )
+                ) : (
+                  <p className="text-sm text-gray-500">Loading...</p>
+                )}
+              </Combobox.Options>
+            </Transition>
+          </div>
+        </>
+      )}
+    </Combobox>
   );
 };
 

ui/SearchListbox/types.d.ts

@@ -1,10 +1,14 @@
 type Value = any;
 
 export type Props = {
-  display: string;
-  name: string;
+  title: string;
   multiple?: boolean;
-  options: Array<{ name: string; value: Value }>;
+  options?: Array<{ display: string; element?: JSX.Element; value: Value }>;
   onChange: (value: Value) => void;
   value: Value;
+  icon?: JSX.Element;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  width?: "sm" | "md" | "lg" | "xl" | "2xl";
+  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
 };

ui/Tooltip/index.tsx

@@ -1,59 +1,41 @@
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 
-type TooltipProps = {
-  content: string;
-  position: string;
-  children: any;
-  className?: string;
+type Props = {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  position?: "top" | "bottom" | "left" | "right";
 };
 
-const Tooltip: React.FC<TooltipProps> = (props) => {
-  const myRef = useRef<any>();
-  const myRef2 = useRef<any>();
-
-  const [position, setPosition] = useState<any>({});
-  const [show, setShow] = useState<any>(false);
-
-  useEffect(() => {
-    const contentHeight = myRef2.current.clientHeight;
-
-    const pos = {
-      x: myRef.current.offsetLeft + myRef.current.clientWidth / 2,
-      y: myRef.current.offsetTop,
-    };
-
-    setPosition(pos);
-  }, []);
-
+const Tooltip: React.FC<Props> = ({ children, content, position = "top" }) => {
   return (
-    <>
-      <div className="inline-block z-99" ref={myRef}>
+    <div className="relative group">
+      <div
+        className={`fixed pointer-events-none transition-opacity opacity-0 group-hover:opacity-100 bg-black text-white px-3 py-1 rounded ${
+          position === "right"
+            ? "left-14"
+            : position === "left"
+            ? "right-14"
+            : position === "top"
+            ? "bottom-14"
+            : "top-14"
+        }`}
+      >
+        <p className="truncate text-sx">{content}</p>
         <span
-          className={`bg-black text-white p-2 rounded text-xs fixed ${
-            props.position === "top" || props.position === "bottom"
-              ? "translate-x-[-50%]"
-              : "translate-y-[-50%]"
-          } duration-300 ${
-            show ? "opacity-1 pointer-events-all" : "opacity-0 pointer-events-none"
-          } ${props.className}`}
-          style={{ top: `${position.y}px`, left: `${position.x}px` }}
-          ref={myRef2}
-        >
-          {props.content}
-          {/* Lorem ipsum, dolor sit amet consectetur adipisicing elit.Illo consequuntur libero placeat
-          porro facere itaque vitae, iusto quos fugiat consequatur. */}
-        </span>
-        {React.cloneElement(props.children, {
-          onMouseOver: () => setShow(true),
-          onMouseOut: () => setShow(false),
-        })}
+          className={`absolute w-2 h-2 bg-black ${
+            position === "top"
+              ? "top-full left-1/2 transform -translate-y-1/2 -translate-x-1/2 rotate-45"
+              : position === "bottom"
+              ? "bottom-full left-1/2 transform translate-y-1/2 -translate-x-1/2 rotate-45"
+              : position === "left"
+              ? "left-full top-1/2 transform translate-x-1/2 -translate-y-1/2 rotate-45"
+              : "right-full top-1/2 transform translate-x-1/2 -translate-y-1/2 rotate-45"
+          }`}
+        ></span>
       </div>
-    </>
+      {children}
+    </div>
   );
 };
 
-Tooltip.defaultProps = {
-  position: "top",
-};
-
 export default Tooltip;

ui/index.ts

@@ -2,7 +2,8 @@ export { default as Button } from "./Button";
 export { default as Input } from "./Input";
 export { default as Select } from "./Select";
 export { default as TextArea } from "./TextArea";
-export { default as ListBox } from "./ListBox";
+export { default as CustomListbox } from "./CustomListbox";
 export { default as Spinner } from "./Spinner";
 export { default as Tooltip } from "./Tooltip";
 export { default as SearchListbox } from "./SearchListbox";
+export { default as HeaderButton } from "./HeaderButton";