feat: add template selection when creating new boards with predefined… (#42)

* feat: add template selection when creating new boards with predefined lists

* feat: extend templates with labels, update design and add translations

* feat: add validation and error states to new board form

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

apps/web/src/views/boards/components/NewBoardForm.tsx

@@ -1,28 +1,59 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/core/macro";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
+import { z } from "zod";
 
-import type { NewBoardInput } from "@kan/api/types";
-
+import type { Template } from "./TemplateBoards";
 import Button from "~/components/Button";
 import Input from "~/components/Input";
+import Toggle from "~/components/Toggle";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
+import TemplateBoards, { getTemplates } from "./TemplateBoards";
+
+const schema = z.object({
+  name: z
+    .string()
+    .min(1, { message: t`Board name is required` })
+    .max(100, { message: t`Board name cannot exceed 100 characters` }),
+  workspacePublicId: z.string(),
+  template: z.custom<Template | null>(),
+});
+
+interface NewBoardInputWithTemplate {
+  name: string;
+  workspacePublicId: string;
+  template: Template | null;
+}
 
 export function NewBoardForm() {
   const utils = api.useUtils();
   const { closeModal } = useModal();
   const { workspace } = useWorkspace();
+  const [showTemplates, setShowTemplates] = useState(false);
 
-  const { register, handleSubmit } = useForm<NewBoardInput>({
+  const templates = getTemplates();
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<NewBoardInputWithTemplate>({
+    resolver: zodResolver(schema),
     defaultValues: {
       name: "",
       workspacePublicId: workspace.publicId || "",
+      template: null,
     },
   });
 
+  const currentTemplate = watch("template");
+
   const refetchBoards = () => utils.board.all.refetch();
 
   const createBoard = api.board.create.useMutation({
@@ -32,8 +63,13 @@ export function NewBoardForm() {
     },
   });
 
-  const onSubmit = (data: NewBoardInput) => {
-    createBoard.mutate(data);
+  const onSubmit = (data: NewBoardInputWithTemplate) => {
+    createBoard.mutate({
+      name: data.name,
+      workspacePublicId: data.workspacePublicId,
+      lists: data.template?.lists ?? [],
+      labels: data.template?.labels ?? [],
+    });
   };
 
   useEffect(() => {
@@ -62,6 +98,7 @@ export function NewBoardForm() {
           id="name"
           placeholder={t`Name`}
           {...register("name", { required: true })}
+          errorMessage={errors.name?.message}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -70,8 +107,22 @@ export function NewBoardForm() {
           }}
         />
       </div>
-
+      <TemplateBoards
+        currentBoard={currentTemplate}
+        setCurrentBoard={(t) => setValue("template", t)}
+        showTemplates={showTemplates}
+      />
       <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={t`Use template`}
+          isChecked={showTemplates}
+          onChange={() => {
+            setShowTemplates(!showTemplates);
+            if (!showTemplates && !currentTemplate) {
+              setValue("template", templates[0] ?? null);
+            }
+          }}
+        />
         <div>
           <Button type="submit" isLoading={createBoard.isPending}>
             {t`Create board`}

apps/web/src/views/boards/components/TemplateBoards.tsx

@@ -0,0 +1,191 @@
+import { t } from "@lingui/core/macro";
+import { useEffect, useRef, useState } from "react";
+import { HiCheckCircle } from "react-icons/hi2";
+
+export interface Template {
+  id: string;
+  name: string;
+  lists: string[];
+  labels: string[];
+}
+
+export const getTemplates = (): Template[] => [
+  {
+    id: "basic",
+    name: t`Basic Kanban`,
+    lists: [t`To Do`, t`In Progress`, t`Done`],
+    labels: [t`High Priority`, t`Medium Priority`, t`Low Priority`],
+  },
+  {
+    id: "software-dev",
+    name: t`Software Development`,
+    lists: [t`Backlog`, t`To Do`, t`In Progress`, t`Code Review`, t`Done`],
+    labels: [t`Bug`, t`Feature`, t`Enhancement`, t`Critical`, t`Documentation`],
+  },
+  {
+    id: "content-creation",
+    name: t`Content Creation`,
+    lists: [
+      t`Brainstorming`,
+      t`Writing`,
+      t`Editing`,
+      t`Design`,
+      t`Approval`,
+      t`Publishing`,
+      t`Done`,
+    ],
+    labels: [t`Blog Post`, t`Social Media`, t`Video`, t`Newsletter`, t`Urgent`],
+  },
+  {
+    id: "customer-support",
+    name: t`Customer Support`,
+    lists: [
+      t`New Ticket`,
+      t`Triaging`,
+      t`In Progress`,
+      t`Awaiting Customer`,
+      t`Resolution`,
+      t`Done`,
+    ],
+    labels: [
+      t`Bug Report`,
+      t`Feature Request`,
+      t`Question`,
+      t`Urgent`,
+      t`Billing`,
+    ],
+  },
+  {
+    id: "recruitment",
+    name: t`Recruitment`,
+    lists: [
+      t`Applicants`,
+      t`Screening`,
+      t`Interviewing`,
+      t`Offer`,
+      t`Onboarding`,
+      t`Hired`,
+    ],
+    labels: [t`Remote`, t`Full-time`, t`Part-time`, t`Senior`, t`Junior`],
+  },
+  {
+    id: "personal-project",
+    name: t`Personal Project`,
+    lists: [
+      t`Ideas`,
+      t`Research`,
+      t`Planning`,
+      t`Execution`,
+      t`Review`,
+      t`Next Steps`,
+      t`Complete`,
+    ],
+    labels: [t`Important`, t`Quick Win`, t`Long-term`, t`Learning`, t`Fun`],
+  },
+];
+
+export default function TemplateBoards({
+  currentBoard,
+  setCurrentBoard,
+  showTemplates,
+}: {
+  currentBoard: Template | null;
+  setCurrentBoard: (board: Template | null) => void;
+  showTemplates: boolean;
+}) {
+  const [showFade, setShowFade] = useState(false);
+  const [showTopFade, setShowTopFade] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const templates = getTemplates();
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5;
+    const isAtTop = scrollTop <= 5;
+
+    setShowFade(!isAtBottom);
+    setShowTopFade(!isAtTop);
+  };
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+
+    handleScroll();
+
+    scrollElement.addEventListener("scroll", handleScroll);
+    return () => scrollElement.removeEventListener("scroll", handleScroll);
+  }, [showTemplates]);
+
+  useEffect(() => {
+    if (showTemplates && currentBoard && scrollRef.current) {
+      const selectedElement = scrollRef.current.querySelector(
+        `[data-template-id="${currentBoard.id}"]`,
+      );
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }
+  }, [showTemplates, currentBoard]);
+
+  const handleBoardSelect = (boardId: string) => {
+    if (currentBoard?.id === boardId) {
+      setCurrentBoard(null);
+    } else {
+      setCurrentBoard(
+        templates.find((template) => template.id === boardId) ?? null,
+      );
+    }
+  };
+
+  if (!showTemplates) {
+    return null;
+  }
+
+  return (
+    <div className="px-5 pt-4">
+      <div className="relative">
+        <div
+          ref={scrollRef}
+          className="scroll-container -mr-2 flex max-h-[200px] flex-col gap-3 overflow-y-auto pr-2 pt-0.5"
+        >
+          {templates.map((template) => (
+            <label
+              key={template.id}
+              data-template-id={template.id}
+              onClick={() => handleBoardSelect(template.id)}
+              className={`scroll-container relative flex cursor-pointer rounded-lg border p-3 transition-all hover:bg-light-100 dark:hover:bg-dark-200 ${
+                currentBoard?.id === template.id
+                  ? "border-light-700 bg-light-100 ring-1 ring-inset ring-light-700 dark:border-dark-700 dark:bg-dark-200 dark:ring-dark-700"
+                  : "border-light-600 dark:border-dark-600"
+              }`}
+            >
+              <div className="flex-1">
+                <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {template.name}
+                </h4>
+                <p className="text-xs text-light-950 dark:text-dark-900">
+                  {template.lists.join(", ")}
+                </p>
+              </div>
+              {currentBoard?.id === template.id && (
+                <div className="absolute right-3 top-3 text-light-1000 dark:text-dark-1000">
+                  <HiCheckCircle className="h-5 w-5" />
+                </div>
+              )}
+            </label>
+          ))}
+        </div>
+        {showTopFade && (
+          <div className="pointer-events-none absolute left-0 right-0 top-0 h-6 bg-gradient-to-b from-white/80 to-transparent dark:from-dark-100/80" />
+        )}
+        {showFade && (
+          <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-white/80 to-transparent dark:from-dark-100/80" />
+        )}
+      </div>
+    </div>
+  );
+}