From 4f0161b0fab583a07c440e2e821ad771993f855d Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Thu, 23 Feb 2023 17:49:04 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20SelectBox=20Component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/filter.tsx                | 265 ------------------
 .../ui/components/selectBox/SelectBox.tsx     |  86 ++++++
 packages/ui/components/selectBox/index.ts     |   1 +
 packages/ui/index.ts                          |   1 +
 4 files changed, 88 insertions(+), 265 deletions(-)
 delete mode 100644 apps/web/components/filter.tsx
 create mode 100644 packages/ui/components/selectBox/SelectBox.tsx
 create mode 100644 packages/ui/components/selectBox/index.ts

diff --git a/apps/web/components/filter.tsx b/apps/web/components/filter.tsx
deleted file mode 100644
index bed25decb..000000000
--- a/apps/web/components/filter.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import { Fragment, useState } from "react";
-import {
-  Dialog,
-  Disclosure,
-  Menu,
-  Popover,
-  Transition,
-} from "@headlessui/react";
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { classNames } from "@documenso/lib";
-
-const sortOptions = [
-  { name: "Most Popular", href: "#" },
-  { name: "Best Rating", href: "#" },
-  { name: "Newest", href: "#" },
-];
-const filters = [
-  {
-    id: "status",
-    name: "Status",
-    options: [
-      { value: "draft", label: "Draft" },
-      { value: "pending", label: "Pending" },
-      { value: "comppleted", label: "Comppleted" },
-    ],
-  },
-];
-
-export default function Example() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="bg-gray-50">
-      {/* Mobile filter dialog */}
-      <Transition.Root show={open} as={Fragment}>
-        <Dialog as="div" className="relative z-40 sm:hidden" onClose={setOpen}>
-          <Transition.Child
-            as={Fragment}
-            enter="transition-opacity ease-linear duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="transition-opacity ease-linear duration-300"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-40 flex">
-            <Transition.Child
-              as={Fragment}
-              enter="transition ease-in-out duration-300 transform"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transition ease-in-out duration-300 transform"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-6 shadow-xl">
-                <div className="flex items-center justify-between px-4">
-                  <h2 className="text-lg font-medium text-gray-900">Filters</h2>
-                  <button
-                    type="button"
-                    className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                    onClick={() => setOpen(false)}
-                  >
-                    <span className="sr-only">Close menu</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-
-                {/* Filters */}
-                <form className="mt-4">
-                  {filters.map((section) => (
-                    <Disclosure
-                      as="div"
-                      key={section.name}
-                      className="border-t border-gray-200 px-4 py-6"
-                    >
-                      {({ open }) => (
-                        <>
-                          <h3 className="-mx-2 -my-3 flow-root">
-                            <Disclosure.Button className="flex w-full items-center justify-between bg-white px-2 py-3 text-sm text-gray-400">
-                              <span className="font-medium text-gray-900">
-                                {section.name}
-                              </span>
-                              <span className="ml-6 flex items-center">
-                                <ChevronDownIcon
-                                  className={classNames(
-                                    open ? "-rotate-180" : "rotate-0",
-                                    "h-5 w-5 transform"
-                                  )}
-                                  aria-hidden="true"
-                                />
-                              </span>
-                            </Disclosure.Button>
-                          </h3>
-                          <Disclosure.Panel className="pt-6">
-                            <div className="space-y-6">
-                              {section.options.map((option, optionIdx) => (
-                                <div
-                                  key={option.value}
-                                  className="flex items-center"
-                                >
-                                  <input
-                                    id={`filter-mobile-${section.id}-${optionIdx}`}
-                                    name={`${section.id}[]`}
-                                    defaultValue={option.value}
-                                    type="checkbox"
-                                    className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-                                  />
-                                  <label
-                                    htmlFor={`filter-mobile-${section.id}-${optionIdx}`}
-                                    className="ml-3 text-sm text-gray-500"
-                                  >
-                                    {option.label}
-                                  </label>
-                                </div>
-                              ))}
-                            </div>
-                          </Disclosure.Panel>
-                        </>
-                      )}
-                    </Disclosure>
-                  ))}
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
-
-      <div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:max-w-7xl lg:px-8">
-        <div className="py-24">
-          <h1 className="text-4xl font-bold tracking-tight text-gray-900">
-            New Arrivals
-          </h1>
-          <p className="mx-auto mt-4 max-w-3xl text-base text-gray-500">
-            Thoughtfully designed objects for the workspace, home, and travel.
-          </p>
-        </div>
-
-        <section
-          aria-labelledby="filter-heading"
-          className="border-t border-gray-200 py-6"
-        >
-          <h2 id="filter-heading" className="sr-only">
-            Product filters
-          </h2>
-
-          <div className="flex items-center justify-between">
-            <Menu as="div" className="relative inline-block text-left">
-              <div>
-                <Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
-                  Sort
-                  <ChevronDownIcon
-                    className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                    aria-hidden="true"
-                  />
-                </Menu.Button>
-              </div>
-
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                <Menu.Items className="absolute left-0 z-10 mt-2 w-40 origin-top-left rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <div className="py-1">
-                    {sortOptions.map((option) => (
-                      <Menu.Item key={option}>
-                        {({ active }) => (
-                          <a
-                            href={option.href}
-                            className={classNames(
-                              active ? "bg-gray-100" : "",
-                              "block px-4 py-2 text-sm font-medium text-gray-900"
-                            )}
-                          >
-                            {option.name}
-                          </a>
-                        )}
-                      </Menu.Item>
-                    ))}
-                  </div>
-                </Menu.Items>
-              </Transition>
-            </Menu>
-
-            <button
-              type="button"
-              className="inline-block text-sm font-medium text-gray-700 hover:text-gray-900 sm:hidden"
-              onClick={() => setOpen(true)}
-            >
-              Filters
-            </button>
-
-            <Popover.Group className="hidden sm:flex sm:items-baseline sm:space-x-8">
-              {filters.map((section, sectionIdx) => (
-                <Popover
-                  as="div"
-                  key={section.name}
-                  id={`desktop-menu-${sectionIdx}`}
-                  className="relative inline-block text-left"
-                >
-                  <div>
-                    <Popover.Button className="group inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
-                      <span>{section.name}</span>
-                      {sectionIdx === 0 ? (
-                        <span className="ml-1.5 rounded bg-gray-200 py-0.5 px-1.5 text-xs font-semibold tabular-nums text-gray-700">
-                          1
-                        </span>
-                      ) : null}
-                      <ChevronDownIcon
-                        className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                        aria-hidden="true"
-                      />
-                    </Popover.Button>
-                  </div>
-
-                  <Transition
-                    as={Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Popover.Panel className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      <form className="space-y-4">
-                        {section.options.map((option, optionIdx) => (
-                          <div key={option.value} className="flex items-center">
-                            <input
-                              id={`filter-${section.id}-${optionIdx}`}
-                              name={`${section.id}[]`}
-                              defaultValue={option.value}
-                              type="checkbox"
-                              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-                            />
-                            <label
-                              htmlFor={`filter-${section.id}-${optionIdx}`}
-                              className="ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900"
-                            >
-                              {option.label}
-                            </label>
-                          </div>
-                        ))}
-                      </form>
-                    </Popover.Panel>
-                  </Transition>
-                </Popover>
-              ))}
-            </Popover.Group>
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/ui/components/selectBox/SelectBox.tsx b/packages/ui/components/selectBox/SelectBox.tsx
new file mode 100644
index 000000000..91f5e3b13
--- /dev/null
+++ b/packages/ui/components/selectBox/SelectBox.tsx
@@ -0,0 +1,86 @@
+import { classNames } from "@documenso/lib";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import React, { Fragment, useState } from "react";
+
+export function SelectBox(props: any) {
+  return (
+    <div className={props.className}>
+      <Listbox
+        value={props.value}
+        onChange={(e) => {
+          props.onChange(e);
+        }}
+      >
+        {({ open }) => (
+          <>
+            <Listbox.Label className="block text-sm font-medium text-gray-700">
+              {props.label}
+            </Listbox.Label>
+            <div className="relative mt-1">
+              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
+                <span className="block truncate">{props?.value?.label}</span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronUpDownIcon
+                    className="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </Listbox.Button>
+
+              <Transition
+                show={open}
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                  {props.options.map((option: any) => (
+                    <Listbox.Option
+                      key={option.value}
+                      className={({ active }) =>
+                        classNames(
+                          active ? "text-white bg-neon" : "text-gray-900",
+                          "relative cursor-default select-none py-2 pl-3 pr-9"
+                        )
+                      }
+                      value={option}
+                    >
+                      {({ selected, active }) => (
+                        <>
+                          <span
+                            className={classNames(
+                              selected ? "font-semibold" : "font-normal",
+                              "block truncate"
+                            )}
+                          >
+                            {option.label}
+                          </span>
+
+                          {option.value === props.value.value ? (
+                            <span
+                              className={classNames(
+                                active ? "text-white" : "text-neon",
+                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                              )}
+                            >
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          ) : null}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </>
+        )}
+      </Listbox>
+    </div>
+  );
+}
diff --git a/packages/ui/components/selectBox/index.ts b/packages/ui/components/selectBox/index.ts
new file mode 100644
index 000000000..0b9a0cc57
--- /dev/null
+++ b/packages/ui/components/selectBox/index.ts
@@ -0,0 +1 @@
+export { SelectBox } from "./SelectBox";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 22983b785..24d9cef03 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,2 +1,3 @@
 export { Button, IconButton } from "./components/button/index";
+export { SelectBox } from "./components/selectBox/index";
 export { Breadcrumb } from "./components/breadcrumb/index";