chore: cleanup components

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": {

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}
     >

src/components/Input.tsx

@@ -1,17 +1,36 @@
 import React, { forwardRef } from "react";
+import ContentEditable from "react-contenteditable";
 
-const Input = forwardRef<
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  HTMLInputElement,
+  contentEditable?: boolean;
-  React.InputHTMLAttributes<HTMLInputElement>
+  value?: string;
->(({ ...props }, ref) => {
+  onChange?: (
-  return (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    <input
+  ) => void;
-      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}
+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";
 

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;

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"];

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">
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
-        <button
+        <Button onClick={() => closeModal()} variant="secondary">
-          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()}
-        >
           Cancel
-        </button>
+        </Button>
-        <button
+        <Button onClick={handleDeleteBoard}>Delete</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>
       </div>
     </div>
   );

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">
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
-        <button
+        <Button onClick={() => closeModal()} variant="secondary">
-          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()}
-        >
           Cancel
-        </button>
+        </Button>
-        <button
+        <Button onClick={() => deleteList.mutate({ listPublicId })}>
-          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"
-        >
           Delete
-        </button>
+        </Button>
       </div>
     </div>
   );

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
+          <Input id="title" placeholder="Card title" {...register("title")} />
-            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"
-          />
         </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">
+        <Toggle
-          <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
+          label="Create another"
-            Create more
+          isChecked={isCreateAnotherEnabled}
-          </span>
+          onChange={handleToggleCreateAnother}
-          <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>
 
         <div>
-          <button
+          <Button type="submit">Create card</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>
         </div>
       </div>
     </form>

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 {
+import Button from "~/components/Button";
-  return classes.filter(Boolean).join(" ");
+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
+        <Input id="list-name" placeholder="List name" {...register("name")} />
-          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"
-        />
       </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">
+        <Toggle
-          <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
+          label="Create another"
-            Create more
+          isChecked={isCreateAnotherEnabled}
-          </span>
+          onChange={() =>
-          <Switch
+            setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
-            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>
 
         <div>
-          <button
+          <Button type="submit">Create list</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>
         </div>
       </div>
     </form>

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 {
+import { api } from "~/utils/api";
-  name: string;
+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>({
+  const { control, register, reset, handleSubmit, setValue, watch } =
-    defaultValues: {
+    useForm<NewLabelFormInput>({
-      name: "",
+      defaultValues: {
-      colour: colours[0],
+        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">
+    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+      <div className="px-5 pt-5">
-        <h2 className="text-sm font-medium">New label</h2>
+        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
-        <button
+          <h2 className="text-sm font-medium">New label</h2>
-          className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
+          <button
-          onClick={() => closeModal()}
+            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
-        >
+            onClick={(e) => {
-          <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+              e.preventDefault();
-        </button>
+              closeModal();
-      </div>
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
 
-      <form onSubmit={handleSubmit(onSubmit)}>
+        <Input id="label-name" placeholder="Name" {...register("name")} />
-        <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"
-            />
-          )}
-        />
         <Controller
           name="colour"
           control={control}
@@ -158,15 +160,21 @@ export function NewLabelForm({ cardPublicId }: CardPublicId) {
             </Listbox>
           )}
         />
-        <div className="mt-5 sm:mt-6">
+      </div>
-          <button
+
-            type="submit"
+      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-            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"
+        <Toggle
-          >
+          label="Create another"
-            Create label
+          isChecked={isCreateAnotherEnabled}
-          </button>
+          onChange={() =>
+            setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
+          }
+        />
+
+        <div>
+          <Button type="submit">Create label</Button>
         </div>
-      </form>
+      </div>
-    </div>
+    </form>
   );
 }