feat: switch to custom app installation flow

2026-10-15 00:52:09 +00:00 · 2024-09-19 07:35:23 +05:30
parent e4a83ad2e2
commit 75099f159f
10 changed files with 202 additions and 266 deletions
@@ -1,113 +0,0 @@
-import React, { Fragment } from "react";
-import { faAngleDown, faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Listbox, Transition } from "@headlessui/react";
-
-interface TextProps {
-  primaryText: string;
-  secondaryText: string;
-}
-
-interface ListBoxProps<T extends TextProps> {
-  isSelected: T[];
-  onChange: (value: T[]) => void;
-  data: T[] | null;
-  text?: string;
-  buttonAction?: () => void;
-  isFull?: boolean;
-}
-
-/**
- * This is the component that we use for drop down lists.
- * @param {object} obj
- * @param {object[]} obj.isSelected - the item that is currently selected
- * @param {function} obj.onChange - what happends if you select the item inside a list
- * @param {object[]} obj.data - all the options available
- * @param {string} obj.text - the text that shows us in front of the select option
- * @param {function} obj.buttonAction - if there is a button at the bottom of the list, this is the action that happens when you click the button
- * @returns
- */
-const ListBoxMultiple = <T extends TextProps>({
-  isSelected,
-  onChange,
-  data,
-  text,
-  buttonAction,
-  isFull
-}: ListBoxProps<T>): JSX.Element => {
-  return (
-    <Listbox value={isSelected} onChange={onChange} multiple>
-      <div className="relative w-full">
-        <Listbox.Button
-          className={`relative text-gray-400 ${isFull ? "w-full" : "w-52"
-            } focus-visible:ring-offset-orange-300 cursor-default rounded-md bg-white/[0.07] py-2.5 pl-3 pr-10 text-left shadow-md duration-200 hover:bg-white/[0.11] focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 sm:text-sm`}
-        >
-          <div className="flex flex-row">
-            {text}
-            <span className="ml-1 block cursor-pointer truncate font-semibold text-gray-300">
-              {!isSelected || isSelected.length === 0 && "Select"}
-              {isSelected && isSelected.length > 0 && isSelected[0].primaryText} {isSelected.length > 1 && `(+${isSelected.length - 1})`}
-            </span>
-          </div>
-          {data && (
-            <div className="pointer-events-none absolute inset-y-0 right-0 flex cursor-pointer items-center pr-2">
-              <FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5" />
-            </div>
-          )}
-        </Listbox.Button>
-        {data && (
-          <Transition
-            as={Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Listbox.Options className="no-scrollbar::-webkit-scrollbar absolute z-[70] mt-1 max-h-60 w-full overflow-auto rounded-md border border-mineshaft-700 bg-bunker p-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 no-scrollbar focus:outline-none sm:text-sm">
-              {data.map((user, personIdx) => (
-                <Listbox.Option
-                  key={`${user}.${personIdx + 1}`}
-                  className={({ active, selected }) =>
-                    `relative my-0.5 cursor-default select-none rounded-md py-2 pl-10 pr-4 ${selected ? "bg-white/10 font-bold text-gray-400" : ""
-                    } ${active && !selected
-                      ? "cursor-pointer bg-white/5 text-mineshaft-200"
-                      : "text-gray-400"
-                    } `
-                  }
-                  value={user}
-                >
-                  {({ selected }) => (
-                    <>
-                      <span
-                        className={`block truncate text-primary${selected ? "font-medium" : "font-normal"
-                          }`}
-                      >
-                        {user.primaryText} {user.secondaryText && ` (${user.secondaryText})`}
-                      </span>
-                      {selected ? (
-                        <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 text-primary">
-                          <FontAwesomeIcon icon={faCheck} className="text-md ml-1" />
-                        </span>
-                      ) : null}
-                    </>
-                  )}
-                </Listbox.Option>
-              ))}
-              {buttonAction && (
-                <button type="button" onClick={buttonAction} className="w-full cursor-pointer">
-                  <div className="relative my-0.5 mt-2 flex cursor-pointer select-none justify-start rounded-md py-2 pl-10 pr-4 text-gray-400 duration-200 hover:bg-lime-300 hover:font-semibold hover:text-black">
-                    <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 pr-4">
-                      <FontAwesomeIcon icon={faPlus} className="text-lg" />
-                    </span>
-                    Add Project
-                  </div>
-                </button>
-              )}
-            </Listbox.Options>
-          </Transition>
-        )}
-      </div>
-    </Listbox>
-  );
-};
-
-export default ListBoxMultiple;