chore: cleanup components

2024-08-15 23:14:21 +01:00
parent 31128119ac
commit f5a3d5089d
11 changed files with 195 additions and 192 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
    "react-icons": "^4.11.0",
    "react-lottie-player": "^1.5.5",
    "superjson": "^1.13.1",
+    "tailwind-merge": "^2.5.2",
    "zod": "^3.22.4"
  },
  "devDependencies": {
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,11 +1,25 @@
+import { twMerge } from "tailwind-merge";
+
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
  isLoading?: boolean;
 }

-const Button = ({ children, isLoading, ...props }: ButtonProps) => {
+const Button = ({
+  children,
+  isLoading,
+  variant = "primary",
+  ...props
+}: ButtonProps) => {
  return (
    <button
-      className="inline-flex items-center justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
+      className={twMerge(
+        "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none",
+        variant === "primary" &&
+          "bg-light-1000 dark:bg-dark-1000 dark:text-dark-50",
+        variant === "secondary" &&
+          "border-[1px] border-light-600 bg-light-50 dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000",
+      )}
      disabled={isLoading}
      {...props}
    >
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,17 +1,36 @@
 import React, { forwardRef } from "react";
+import ContentEditable from "react-contenteditable";

-const Input = forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ ...props }, ref) => {
-  return (
-    <input
-      ref={ref}
-      className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-      {...props}
-    />
-  );
-});
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  contentEditable?: boolean;
+  value?: string;
+  onChange?: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ contentEditable, value, onChange, ...props }, ref) => {
+    if (contentEditable) {
+      return (
+        <ContentEditable
+          placeholder={props.placeholder}
+          html={value || ""}
+          onChange={onChange}
+          className="block min-h-[70px] w-full cursor-text rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-1.5 text-light-900 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 focus-visible:outline-none dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+        />
+      );
+    }
+
+    return (
+      <input
+        ref={ref}
+        className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+        {...props}
+      />
+    );
+  },
+);

 Input.displayName = "Input";

--- a/src/components/Toggle.tsx
+++ b/src/components/Toggle.tsx
@@ -0,0 +1,37 @@
+import { Switch } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+
+const Toggle = ({
+  isChecked,
+  onChange,
+  label,
+}: {
+  isChecked: boolean;
+  onChange: () => void;
+  label: string;
+}) => (
+  <div className="mr-4 flex items-center justify-end">
+    <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
+      {label}
+    </span>
+    <Switch
+      checked={isChecked}
+      onChange={onChange}
+      className={twMerge(
+        "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-light-800 transition-colors duration-200 ease-in-out focus:outline-none dark:bg-dark-800",
+        isChecked && "bg-indigo-600 dark:bg-indigo-600",
+      )}
+    >
+      <span className="sr-only">{label}</span>
+      <span
+        aria-hidden="true"
+        className={twMerge(
+          "pointer-events-none inline-block h-3 w-3 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+          isChecked && "translate-x-2",
+        )}
+      />
+    </Switch>
+  </div>
+);
+
+export default Toggle;
--- a/src/types/router.types.ts
+++ b/src/types/router.types.ts
@@ -4,6 +4,7 @@ export type GetBoardByIdOutput = RouterOutputs["board"]["byId"];
 export type ReorderListInput = RouterInputs["list"]["reorder"];
 export type ReorderCardInput = RouterInputs["card"]["reorder"];
 export type UpdateBoardInput = RouterInputs["board"]["update"];
+export type NewLabelInput = RouterInputs["label"]["create"];
 export type NewListInput = RouterInputs["list"]["create"];
 export type NewCardInput = RouterInputs["card"]["create"];
 export type NewBoardInput = RouterInputs["board"]["create"];
--- a/src/views/board/components/DeleteBoardConfirmation.tsx
+++ b/src/views/board/components/DeleteBoardConfirmation.tsx
@@ -4,6 +4,8 @@ import { api } from "~/utils/api";
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";

+import Button from "~/components/Button";
+
 export function DeleteBoardConfirmation() {
  const router = useRouter();
  const { boardData } = useBoard();
@@ -33,19 +35,11 @@ export function DeleteBoardConfirmation() {
          {"This action can't be undone."}
        </p>
      </div>
-      <div className="mt-5 flex justify-end sm:mt-6">
-        <button
-          className="mr-4 inline-flex justify-center rounded-md border-[1px] border-light-600 bg-light-50 px-3 py-2 text-sm font-semibold text-neutral-900 shadow-sm focus-visible:outline-none dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000"
-          onClick={() => closeModal()}
-        >
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button onClick={() => closeModal()} variant="secondary">
          Cancel
-        </button>
-        <button
-          onClick={handleDeleteBoard}
-          className="inline-flex justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-        >
-          Delete
-        </button>
+        </Button>
+        <Button onClick={handleDeleteBoard}>Delete</Button>
      </div>
    </div>
  );
--- a/src/views/board/components/DeleteListConfirmation.tsx
+++ b/src/views/board/components/DeleteListConfirmation.tsx
@@ -2,6 +2,8 @@ import { api } from "~/utils/api";
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";

+import Button from "~/components/Button";
+
 interface DeleteListConfirmationProps {
  listPublicId: string;
 }
@@ -40,23 +42,13 @@ export function DeleteListConfirmation({
          {"This action can't be undone."}
        </p>
      </div>
-      <div className="mt-5 flex justify-end sm:mt-6">
-        <button
-          className="mr-4 inline-flex justify-center rounded-md border-[1px] border-light-600 bg-light-50 px-3 py-2 text-sm font-semibold text-neutral-900 shadow-sm focus-visible:outline-none dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000"
-          onClick={() => closeModal()}
-        >
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button onClick={() => closeModal()} variant="secondary">
          Cancel
-        </button>
-        <button
-          onClick={() =>
-            deleteList.mutate({
-              listPublicId,
-            })
-          }
-          className="inline-flex justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-        >
+        </Button>
+        <Button onClick={() => deleteList.mutate({ listPublicId })}>
          Delete
-        </button>
+        </Button>
      </div>
    </div>
  );
--- a/src/views/board/components/NewCardForm.tsx
+++ b/src/views/board/components/NewCardForm.tsx
@@ -1,22 +1,22 @@
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import ContentEditable from "react-contenteditable";
-import { api } from "~/utils/api";
-
 import {
  HiXMark,
  HiOutlineBarsArrowDown,
  HiOutlineBarsArrowUp,
 } from "react-icons/hi2";

-import { Switch } from "@headlessui/react";
-
+import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
+import Input from "~/components/Input";
+import Toggle from "~/components/Toggle";

 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";

+import { api } from "~/utils/api";
+
 import { type NewCardInput } from "~/types/router.types";

 type NewCardFormInput = NewCardInput & {
@@ -27,10 +27,6 @@ interface NewCardFormProps {
  listPublicId: string;
 }

-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
-}
-
 export function NewCardForm({ listPublicId }: NewCardFormProps) {
  const { boardData, addCard, refetchBoard } = useBoard();
  const { showPopup } = usePopup();
@@ -168,20 +164,14 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
        </div>

        <div>
-          <input
-            id="title"
-            type="text"
-            {...register("title")}
-            placeholder="Card title"
-            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-          />
+          <Input id="title" placeholder="Card title" {...register("title")} />
        </div>
        <div className="mt-2 ">
-          <ContentEditable
+          <Input
            placeholder="Add description..."
-            html={watch("description") || ""}
            onChange={(e) => setValue("description", e.target.value)}
-            className="block min-h-[70px] w-full rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-1.5 text-light-900 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 focus-visible:outline-none dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+            value={watch("description")}
+            contentEditable
          />
        </div>
        <div className="mt-2 flex space-x-1">
@@ -301,38 +291,14 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
      </div>

      <div className="mt-5 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        <div className="mr-4 flex items-center justify-end">
-          <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
-            Create more
-          </span>
-          <Switch
-            checked={isCreateAnotherEnabled}
-            onChange={handleToggleCreateAnother}
-            className={classNames(
-              isCreateAnotherEnabled
-                ? "bg-indigo-600"
-                : "bg-light-800 dark:bg-dark-800",
-              "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
-            )}
-          >
-            <span className="sr-only">Create another</span>
-            <span
-              aria-hidden="true"
-              className={classNames(
-                isCreateAnotherEnabled ? "translate-x-2" : "translate-x-0",
-                "pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-              )}
-            />
-          </Switch>
-        </div>
+        <Toggle
+          label="Create another"
+          isChecked={isCreateAnotherEnabled}
+          onChange={handleToggleCreateAnother}
+        />

        <div>
-          <button
-            type="submit"
-            className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-          >
-            Create card
-          </button>
+          <Button type="submit">Create card</Button>
        </div>
      </div>
    </form>
--- a/src/views/board/components/NewListForm.tsx
+++ b/src/views/board/components/NewListForm.tsx
@@ -1,19 +1,19 @@
 import { useEffect } from "react";
-import { api } from "~/utils/api";
 import { useForm } from "react-hook-form";

 import { HiXMark } from "react-icons/hi2";
-import { Switch } from "@headlessui/react";

 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";

-import { type NewListInput } from "~/types/router.types";
+import { api } from "~/utils/api";

-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
-}
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import Toggle from "~/components/Toggle";
+
+import { type NewListInput } from "~/types/router.types";

 type NewListFormInput = NewListInput & {
  isCreateAnotherEnabled: boolean;
@@ -88,48 +88,19 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
          </button>
        </div>

-        <input
-          id="list-name"
-          placeholder="List name"
-          {...register("name", { required: true })}
-          className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-        />
+        <Input id="list-name" placeholder="List name" {...register("name")} />
      </div>
      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        <div className="mr-4 flex items-center justify-end">
-          <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
-            Create more
-          </span>
-          <Switch
-            checked={isCreateAnotherEnabled}
-            onChange={() =>
-              setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
-            }
-            className={classNames(
-              isCreateAnotherEnabled
-                ? "bg-indigo-600"
-                : "bg-light-800 dark:bg-dark-800",
-              "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
-            )}
-          >
-            <span className="sr-only">Create another</span>
-            <span
-              aria-hidden="true"
-              className={classNames(
-                isCreateAnotherEnabled ? "translate-x-2" : "translate-x-0",
-                "pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-              )}
-            />
-          </Switch>
-        </div>
+        <Toggle
+          label="Create another"
+          isChecked={isCreateAnotherEnabled}
+          onChange={() =>
+            setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
+          }
+        />

        <div>
-          <button
-            type="submit"
-            className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-          >
-            Create list
-          </button>
+          <Button type="submit">Create list</Button>
        </div>
      </div>
    </form>
--- a/src/views/card/components/NewLabelForm.tsx
+++ b/src/views/card/components/NewLabelForm.tsx
@@ -1,23 +1,26 @@
 import { Fragment } from "react";
-import { Listbox, Transition } from "@headlessui/react";
-import { api } from "~/utils/api";
 import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
-import { useModal } from "~/providers/modal";
 import { useForm, Controller } from "react-hook-form";
+import { Listbox, Transition } from "@headlessui/react";

-interface FormValues {
-  name: string;
+import { api } from "~/utils/api";
+import { useModal } from "~/providers/modal";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import Toggle from "~/components/Toggle";
+
+import { type NewLabelInput } from "~/types/router.types";
+
+type NewLabelFormInput = NewLabelInput & {
  colour: Colour;
-}
+  isCreateAnotherEnabled: boolean;
+};

-interface Colour {
+type Colour = {
  name: string;
  code: string;
-}
-
-interface CardPublicId {
-  cardPublicId: string;
-}
+};

 const colours = [
  { name: "Teal", code: "#0d9488" },
@@ -30,31 +33,43 @@ const colours = [
  { name: "Pink", code: "#db2777" },
 ];

-export function NewLabelForm({ cardPublicId }: CardPublicId) {
+export function NewLabelForm({ cardPublicId }: { cardPublicId: string }) {
  const utils = api.useUtils();
  const { closeModal } = useModal();

-  const { control, handleSubmit } = useForm<FormValues>({
-    defaultValues: {
-      name: "",
-      colour: colours[0],
-    },
-  });
+  const { control, register, reset, handleSubmit, setValue, watch } =
+    useForm<NewLabelFormInput>({
+      defaultValues: {
+        name: "",
+        colour: colours[0],
+        isCreateAnotherEnabled: false,
+      },
+    });

  const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });

+  const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
+
  const createLabel = api.label.create.useMutation({
    onSuccess: async () => {
+      const currentColourIndex = colours.findIndex(
+        (c) => c.code === watch("colour").code,
+      );
      try {
        await refetchCard();
-        closeModal();
+        if (!isCreateAnotherEnabled) closeModal();
+        reset({
+          name: "",
+          colour: colours[(currentColourIndex + 1) % colours.length],
+          isCreateAnotherEnabled,
+        });
      } catch (e) {
        console.log(e);
      }
    },
  });

-  const onSubmit = (values: FormValues) => {
+  const onSubmit = (values: NewLabelFormInput) => {
    if (!values.colour?.code) return;

    createLabel.mutate({
@@ -65,35 +80,22 @@ export function NewLabelForm({ cardPublicId }: CardPublicId) {
  };

  return (
-    <div className="p-5">
-      <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
-        <h2 className="text-sm font-medium">New label</h2>
-        <button
-          className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
-          onClick={() => closeModal()}
-        >
-          <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
-        </button>
-      </div>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+          <h2 className="text-sm font-medium">New label</h2>
+          <button
+            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>

-      <form onSubmit={handleSubmit(onSubmit)}>
-        <label
-          htmlFor="name"
-          className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
-        >
-          Name
-        </label>
-        <Controller
-          name="name"
-          control={control}
-          render={({ field }) => (
-            <input
-              {...field}
-              id="name"
-              className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-            />
-          )}
-        />
+        <Input id="label-name" placeholder="Name" {...register("name")} />
        <Controller
          name="colour"
          control={control}
@@ -158,15 +160,21 @@ export function NewLabelForm({ cardPublicId }: CardPublicId) {
            </Listbox>
          )}
        />
-        <div className="mt-5 sm:mt-6">
-          <button
-            type="submit"
-            className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
-          >
-            Create label
-          </button>
+      </div>
+
+      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <Toggle
+          label="Create another"
+          isChecked={isCreateAnotherEnabled}
+          onChange={() =>
+            setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
+          }
+        />
+
+        <div>
+          <Button type="submit">Create label</Button>
        </div>
-      </form>
-    </div>
+      </div>
+    </form>
  );
 }