= ({ value, onChange }) => {
11 | return (
12 |
13 | {[
14 | "#fd79a8",
15 | "#e74c3c",
16 | "#fd9644",
17 | "#fed330",
18 | "#26de81",
19 | "#2bcbba",
20 | "#45aaf2",
21 | "#4b7bec",
22 | "#a55eea",
23 | "#d1d8e0",
24 | "#778ca3",
25 | "#4b6584",
26 | ].map((color, i) => (
27 |
41 | );
42 | };
43 |
44 | export default ColorSelector;
45 |
--------------------------------------------------------------------------------
/src/components/editable-title.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FC, useEffect, useState } from "react";
4 | import { useRouter } from "next/navigation";
5 | import { cn } from "@/lib/utils";
6 | import { useOuterClick } from "@/hooks/use-outer-click";
7 | import { Button } from "@/components/ui/button";
8 | import { Input } from "@/components/ui/input";
9 |
10 | interface EditableTitleProps {
11 | title: string;
12 | onSave: (title: string) => Promise;
13 | className?: string;
14 | }
15 |
16 | const EditableTitle: FC = ({
17 | title: initialTitle,
18 | onSave,
19 | className,
20 | }) => {
21 | const router = useRouter();
22 | const [mode, setMode] = useState<"EDIT" | "DISPLAY">("DISPLAY");
23 | const [title, setTitle] = useState(initialTitle);
24 |
25 | const inputRef = useOuterClick(async () => {
26 | if (mode === "EDIT") {
27 | setMode("DISPLAY");
28 | if (!title.trim()) return;
29 |
30 | await onSave(title);
31 | router.refresh();
32 | }
33 | });
34 |
35 | useEffect(() => {
36 | if (mode === "EDIT") {
37 | inputRef.current?.focus();
38 | inputRef.current?.select();
39 | }
40 | }, [mode, inputRef]);
41 |
42 | if (mode === "DISPLAY") {
43 | return (
44 |
52 | );
53 | }
54 |
55 | return (
56 | setTitle(e.target.value)}
62 | />
63 | );
64 | };
65 |
66 | export default EditableTitle;
67 |
--------------------------------------------------------------------------------
/src/components/navbar/actions.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { prisma } from "@/lib/prisma";
4 |
5 | export async function getUserBoards(id: string) {
6 | return await prisma.board.findMany({
7 | include: { owner: true },
8 | orderBy: { updatedAt: "desc" },
9 | where: {
10 | OR: [{ ownerId: id }, { members: { some: { id: id } } }],
11 | },
12 | });
13 | }
14 |
15 | export async function getStarredBoards(id: string) {
16 | return await prisma.board.findMany({
17 | include: { owner: true },
18 | orderBy: { updatedAt: "desc" },
19 | where: {
20 | starsGivenBy: { some: { id } },
21 | },
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/navbar/create-button.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import { Plus } from "lucide-react";
4 | import { Button } from "@/components/ui/button";
5 | import {
6 | Tooltip,
7 | TooltipContent,
8 | TooltipProvider,
9 | TooltipTrigger,
10 | } from "@/components/ui/tooltip";
11 |
12 | const CreateButton = () => {
13 | return (
14 |
15 |
16 |
17 |
22 |
23 |
24 | Create board
25 |
26 |
27 |
28 | );
29 | };
30 |
31 | export default CreateButton;
32 |
--------------------------------------------------------------------------------
/src/components/navbar/dropdowns/boards-dropdown.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useEffect, useState, useTransition } from "react";
2 | import Image from "next/image";
3 | import { Board, User } from "@prisma/client";
4 | import { ChevronDown, Loader2 } from "lucide-react";
5 | import { Button } from "@/components/ui/button";
6 | import {
7 | DropdownMenu,
8 | DropdownMenuContent,
9 | DropdownMenuLabel,
10 | DropdownMenuSeparator,
11 | DropdownMenuTrigger,
12 | } from "@/components/ui/dropdown-menu";
13 | import BoardMenuItem from "@/components/boards/board-menu-item";
14 |
15 | export type BoardWithOwner = Board & { owner: User };
16 |
17 | interface BoardsDropdownProps {
18 | menuLabel: string;
19 | getBoards: () => Promise;
20 | image: any;
21 | }
22 |
23 | const BoardsDropdown: FC = ({
24 | menuLabel,
25 | getBoards,
26 | image,
27 | }) => {
28 | const [loading, startTransition] = useTransition();
29 | const [boards, setBoards] = useState([]);
30 |
31 | useEffect(() => {
32 | startTransition(async () => {
33 | const boards = await getBoards();
34 | setBoards(boards);
35 | });
36 | }, [getBoards]);
37 |
38 | return (
39 |
40 |
41 |
45 |
46 |
47 |
48 | {menuLabel}
49 |
50 |
51 |
52 | {loading ? (
53 |
54 | ) : boards.length > 0 ? (
55 | boards.map((board) => )
56 | ) : (
57 |
58 |
65 | You don't have anything here yet.
66 |
67 | )}
68 |
69 |
70 | );
71 | };
72 |
73 | export default BoardsDropdown;
74 |
--------------------------------------------------------------------------------
/src/components/navbar/dropdowns/theme-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { Moon, Sun } from "lucide-react";
5 | import { useTheme } from "next-themes";
6 | import { Button } from "@/components/ui/button";
7 | import {
8 | DropdownMenu,
9 | DropdownMenuContent,
10 | DropdownMenuItem,
11 | DropdownMenuTrigger,
12 | } from "@/components/ui/dropdown-menu";
13 |
14 | export function ThemeToggle() {
15 | const { setTheme } = useTheme();
16 |
17 | return (
18 |
19 |
20 |
25 |
26 |
27 | setTheme("light")}>
28 | Light
29 |
30 | setTheme("dark")}>
31 | Dark
32 |
33 | setTheme("system")}>
34 | System
35 |
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/navbar/navbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import Link from "next/link";
5 | import boardImage from "@/assets/board.svg";
6 | import logo from "@/assets/logo.svg";
7 | import starImage from "@/assets/star.svg";
8 | import { useAuthContext } from "@/context/auth-context";
9 | import { getStarredBoards, getUserBoards } from "@/components/navbar/actions";
10 | import CreateButton from "@/components/navbar/create-button";
11 | import BoardsDropdown from "@/components/navbar/dropdowns/boards-dropdown";
12 | import { ThemeToggle } from "@/components/navbar/dropdowns/theme-toggle";
13 | import UserActions from "@/components/navbar/user-actions";
14 |
15 | const Navbar = () => {
16 | const { user } = useAuthContext();
17 |
18 | return (
19 |
47 | );
48 | };
49 |
50 | export default Navbar;
51 |
--------------------------------------------------------------------------------
/src/components/navbar/user-actions.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/navigation";
2 | import { useAuthContext } from "@/context/auth-context";
3 | import { Lock, LogOut } from "lucide-react";
4 | import { signOut } from "next-auth/react";
5 | import { generateInitials } from "@/lib/utils";
6 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
7 | import {
8 | DropdownMenu,
9 | DropdownMenuContent,
10 | DropdownMenuItem,
11 | DropdownMenuLabel,
12 | DropdownMenuSeparator,
13 | DropdownMenuTrigger,
14 | } from "@/components/ui/dropdown-menu";
15 |
16 | const UserActions = () => {
17 | const router = useRouter();
18 | const { user } = useAuthContext();
19 |
20 | return (
21 |
22 |
23 |
24 |
25 | {generateInitials(user.name)}
26 |
27 |
28 |
29 |
30 |
31 | My Account
32 |
33 |
34 |
35 |
36 | {generateInitials(user.name)}
37 |
38 |
39 |
40 |
41 | {user.name}
42 | {user.email}
43 |
44 |
10 |
11 |
14 |
15 | );
16 | };
17 |
18 | export default NotFound;
19 |
--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
5 | import { type ThemeProviderProps } from "next-themes/dist/types";
6 |
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 | return {children};
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 | import { cn } from "@/lib/utils";
4 |
5 | const alertVariants = cva(
6 | "text-center relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
7 | {
8 | variants: {
9 | variant: {
10 | default: "bg-background text-foreground",
11 | success:
12 | "bg-primary/10 border-primary/30 text-primary [&>svg]:text-primary",
13 | destructive:
14 | "border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
15 | },
16 | },
17 | defaultVariants: {
18 | variant: "default",
19 | },
20 | }
21 | );
22 |
23 | const Alert = React.forwardRef<
24 | HTMLDivElement,
25 | React.HTMLAttributes & VariantProps
26 | >(({ className, variant, ...props }, ref) => (
27 |
33 | ));
34 | Alert.displayName = "Alert";
35 |
36 | const AlertTitle = React.forwardRef<
37 | HTMLParagraphElement,
38 | React.HTMLAttributes
39 | >(({ className, ...props }, ref) => (
40 |
45 | ));
46 | AlertTitle.displayName = "AlertTitle";
47 |
48 | const AlertDescription = React.forwardRef<
49 | HTMLParagraphElement,
50 | React.HTMLAttributes
51 | >(({ className, ...props }, ref) => (
52 |
57 | ));
58 | AlertDescription.displayName = "AlertDescription";
59 |
60 | export { Alert, AlertTitle, AlertDescription };
61 |
--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
5 | import { cn } from "@/lib/utils";
6 |
7 | const Avatar = React.forwardRef<
8 | React.ElementRef,
9 | React.ComponentPropsWithoutRef
10 | >(({ className, ...props }, ref) => (
11 |
19 | ));
20 | Avatar.displayName = AvatarPrimitive.Root.displayName;
21 |
22 | const AvatarImage = React.forwardRef<
23 | React.ElementRef,
24 | React.ComponentPropsWithoutRef
25 | >(({ className, ...props }, ref) => (
26 |
31 | ));
32 | AvatarImage.displayName = AvatarPrimitive.Image.displayName;
33 |
34 | const AvatarFallback = React.forwardRef<
35 | React.ElementRef,
36 | React.ComponentPropsWithoutRef
37 | >(({ className, ...props }, ref) => (
38 |
46 | ));
47 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
48 |
49 | export { Avatar, AvatarImage, AvatarFallback };
50 |
--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 | import { cn } from "@/lib/utils";
4 |
5 | const badgeVariants = cva(
6 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
7 | {
8 | variants: {
9 | variant: {
10 | default:
11 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
12 | secondary:
13 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
14 | destructive:
15 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
16 | outline: "text-foreground",
17 | },
18 | },
19 | defaultVariants: {
20 | variant: "default",
21 | },
22 | }
23 | );
24 |
25 | export interface BadgeProps
26 | extends React.HTMLAttributes,
27 | VariantProps {}
28 |
29 | function Badge({ className, variant, ...props }: BadgeProps) {
30 | return (
31 |
32 | );
33 | }
34 |
35 | export { Badge, badgeVariants };
36 |
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { Slot } from "@radix-ui/react-slot";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 | import { cn } from "@/lib/utils";
7 | import { useRipple } from "@/hooks/use-ripple";
8 |
9 | const buttonVariants = cva(
10 | "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
15 | destructive:
16 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
17 | outline:
18 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
19 | secondary:
20 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
21 | ghost: "hover:bg-accent hover:text-accent-foreground",
22 | link: "text-primary underline-offset-4 hover:underline",
23 | },
24 | size: {
25 | default: "h-10 px-4 py-2",
26 | sm: "h-9 rounded-md px-3",
27 | lg: "h-11 rounded-md px-8",
28 | icon: "h-10 w-10",
29 | },
30 | },
31 | defaultVariants: {
32 | variant: "default",
33 | size: "default",
34 | },
35 | }
36 | );
37 |
38 | export interface ButtonProps
39 | extends React.ButtonHTMLAttributes,
40 | VariantProps {
41 | asChild?: boolean;
42 | }
43 |
44 | const Button = React.forwardRef(
45 | ({ className, variant, size, asChild = false, ...props }, ref) => {
46 | const Comp = asChild ? Slot : "button";
47 | const [ripples, handleMouseDown] = useRipple();
48 |
49 | return (
50 |
56 |
62 | {ripples}
63 |
64 | );
65 | }
66 | );
67 | Button.displayName = "Button";
68 |
69 | export { Button, buttonVariants };
70 |
--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | const Card = React.forwardRef<
5 | HTMLDivElement,
6 | React.HTMLAttributes
7 | >(({ className, ...props }, ref) => (
8 |
16 | ));
17 | Card.displayName = "Card";
18 |
19 | const CardHeader = React.forwardRef<
20 | HTMLDivElement,
21 | React.HTMLAttributes
22 | >(({ className, ...props }, ref) => (
23 |
28 | ));
29 | CardHeader.displayName = "CardHeader";
30 |
31 | const CardTitle = React.forwardRef<
32 | HTMLParagraphElement,
33 | React.HTMLAttributes
34 | >(({ className, ...props }, ref) => (
35 |
43 | ));
44 | CardTitle.displayName = "CardTitle";
45 |
46 | const CardDescription = React.forwardRef<
47 | HTMLParagraphElement,
48 | React.HTMLAttributes
49 | >(({ className, ...props }, ref) => (
50 |
55 | ));
56 | CardDescription.displayName = "CardDescription";
57 |
58 | const CardContent = React.forwardRef<
59 | HTMLDivElement,
60 | React.HTMLAttributes
61 | >(({ className, ...props }, ref) => (
62 |
63 | ));
64 | CardContent.displayName = "CardContent";
65 |
66 | const CardFooter = React.forwardRef<
67 | HTMLDivElement,
68 | React.HTMLAttributes
69 | >(({ className, ...props }, ref) => (
70 |
75 | ));
76 | CardFooter.displayName = "CardFooter";
77 |
78 | export {
79 | Card,
80 | CardHeader,
81 | CardFooter,
82 | CardTitle,
83 | CardDescription,
84 | CardContent,
85 | };
86 |
--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
5 | import { Check } from "lucide-react";
6 | import { cn } from "@/lib/utils";
7 |
8 | const Checkbox = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 |
20 |
23 |
24 |
25 |
26 | ));
27 | Checkbox.displayName = CheckboxPrimitive.Root.displayName;
28 |
29 | export { Checkbox };
30 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as DialogPrimitive from "@radix-ui/react-dialog";
5 | import { X } from "lucide-react";
6 | import { cn } from "@/lib/utils";
7 |
8 | const Dialog = DialogPrimitive.Root;
9 |
10 | const DialogTrigger = DialogPrimitive.Trigger;
11 |
12 | const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
13 |
14 | );
15 | DialogPortal.displayName = DialogPrimitive.Portal.displayName;
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 |
29 | ));
30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31 |
32 | interface DialogContextProps
33 | extends React.ComponentPropsWithoutRef {
34 | showCloseBtn?: boolean;
35 | }
36 | const DialogContent = React.forwardRef<
37 | React.ElementRef,
38 | DialogContextProps
39 | >(({ className, children, showCloseBtn = true, ...props }, ref) => (
40 |
41 |
42 |
50 | {children}
51 | {showCloseBtn && (
52 |
53 |
54 | Close
55 |
56 | )}
57 |
58 |
59 |
60 | ));
61 | DialogContent.displayName = DialogPrimitive.Content.displayName;
62 |
63 | const DialogHeader = ({
64 | className,
65 | ...props
66 | }: React.HTMLAttributes) => (
67 |
74 | );
75 | DialogHeader.displayName = "DialogHeader";
76 |
77 | const DialogFooter = ({
78 | className,
79 | ...props
80 | }: React.HTMLAttributes) => (
81 |
88 | );
89 | DialogFooter.displayName = "DialogFooter";
90 |
91 | const DialogTitle = React.forwardRef<
92 | React.ElementRef,
93 | React.ComponentPropsWithoutRef
94 | >(({ className, ...props }, ref) => (
95 |
103 | ));
104 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
105 |
106 | const DialogDescription = React.forwardRef<
107 | React.ElementRef,
108 | React.ComponentPropsWithoutRef
109 | >(({ className, ...props }, ref) => (
110 |
115 | ));
116 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
117 |
118 | export {
119 | Dialog,
120 | DialogTrigger,
121 | DialogContent,
122 | DialogHeader,
123 | DialogFooter,
124 | DialogTitle,
125 | DialogDescription,
126 | };
127 |
--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as LabelPrimitive from "@radix-ui/react-label";
3 | import { Slot } from "@radix-ui/react-slot";
4 | import {
5 | Controller,
6 | ControllerProps,
7 | FieldPath,
8 | FieldValues,
9 | FormProvider,
10 | useFormContext,
11 | } from "react-hook-form";
12 | import { cn } from "@/lib/utils";
13 | import { Label } from "@/components/ui/label";
14 |
15 | const Form = FormProvider;
16 |
17 | type FormFieldContextValue<
18 | TFieldValues extends FieldValues = FieldValues,
19 | TName extends FieldPath = FieldPath,
20 | > = {
21 | name: TName;
22 | };
23 |
24 | const FormFieldContext = React.createContext(
25 | {} as FormFieldContextValue
26 | );
27 |
28 | const FormField = <
29 | TFieldValues extends FieldValues = FieldValues,
30 | TName extends FieldPath = FieldPath,
31 | >({
32 | ...props
33 | }: ControllerProps) => {
34 | return (
35 |
36 |
37 |
38 | );
39 | };
40 |
41 | const useFormField = () => {
42 | const fieldContext = React.useContext(FormFieldContext);
43 | const itemContext = React.useContext(FormItemContext);
44 | const { getFieldState, formState } = useFormContext();
45 |
46 | const fieldState = getFieldState(fieldContext.name, formState);
47 |
48 | if (!fieldContext) {
49 | throw new Error("useFormField should be used within ");
50 | }
51 |
52 | const { id } = itemContext;
53 |
54 | return {
55 | id,
56 | name: fieldContext.name,
57 | formItemId: `${id}-form-item`,
58 | formDescriptionId: `${id}-form-item-description`,
59 | formMessageId: `${id}-form-item-message`,
60 | ...fieldState,
61 | };
62 | };
63 |
64 | type FormItemContextValue = {
65 | id: string;
66 | };
67 |
68 | const FormItemContext = React.createContext(
69 | {} as FormItemContextValue
70 | );
71 |
72 | const FormItem = React.forwardRef<
73 | HTMLDivElement,
74 | React.HTMLAttributes
75 | >(({ className, ...props }, ref) => {
76 | const id = React.useId();
77 |
78 | return (
79 |
80 |
81 |
82 | );
83 | });
84 | FormItem.displayName = "FormItem";
85 |
86 | const FormLabel = React.forwardRef<
87 | React.ElementRef,
88 | React.ComponentPropsWithoutRef
89 | >(({ className, ...props }, ref) => {
90 | const { error, formItemId } = useFormField();
91 |
92 | return (
93 |
99 | );
100 | });
101 | FormLabel.displayName = "FormLabel";
102 |
103 | const FormControl = React.forwardRef<
104 | React.ElementRef,
105 | React.ComponentPropsWithoutRef
106 | >(({ ...props }, ref) => {
107 | const { error, formItemId, formDescriptionId, formMessageId } =
108 | useFormField();
109 |
110 | return (
111 |
122 | );
123 | });
124 | FormControl.displayName = "FormControl";
125 |
126 | const FormDescription = React.forwardRef<
127 | HTMLParagraphElement,
128 | React.HTMLAttributes
129 | >(({ className, ...props }, ref) => {
130 | const { formDescriptionId } = useFormField();
131 |
132 | return (
133 |
139 | );
140 | });
141 | FormDescription.displayName = "FormDescription";
142 |
143 | const FormMessage = React.forwardRef<
144 | HTMLParagraphElement,
145 | React.HTMLAttributes
146 | >(({ className, children, ...props }, ref) => {
147 | const { error, formMessageId } = useFormField();
148 | const body = error ? String(error?.message) : children;
149 |
150 | if (!body) {
151 | return null;
152 | }
153 |
154 | return (
155 |
161 | {body}
162 |
163 | );
164 | });
165 | FormMessage.displayName = "FormMessage";
166 |
167 | export {
168 | useFormField,
169 | Form,
170 | FormItem,
171 | FormLabel,
172 | FormControl,
173 | FormDescription,
174 | FormMessage,
175 | FormField,
176 | };
177 |
--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
5 | import { cn } from "@/lib/utils";
6 |
7 | const HoverCard = HoverCardPrimitive.Root;
8 |
9 | const HoverCardTrigger = HoverCardPrimitive.Trigger;
10 |
11 | const HoverCardContent = React.forwardRef<
12 | React.ElementRef,
13 | React.ComponentPropsWithoutRef
14 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
15 |
25 | ));
26 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
27 |
28 | export { HoverCard, HoverCardTrigger, HoverCardContent };
29 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | export interface InputProps
5 | extends React.InputHTMLAttributes {}
6 |
7 | const Input = React.forwardRef(
8 | ({ className, type, ...props }, ref) => {
9 | return (
10 |
19 | );
20 | }
21 | );
22 | Input.displayName = "Input";
23 |
24 | export { Input };
25 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as LabelPrimitive from "@radix-ui/react-label";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 | import { cn } from "@/lib/utils";
7 |
8 | const labelVariants = cva(
9 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
10 | );
11 |
12 | const Label = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef &
15 | VariantProps
16 | >(({ className, ...props }, ref) => (
17 |
22 | ));
23 | Label.displayName = LabelPrimitive.Root.displayName;
24 |
25 | export { Label };
26 |
--------------------------------------------------------------------------------
/src/components/ui/loading-button.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Loader2 } from "lucide-react";
3 | import { Button, ButtonProps } from "@/components/ui/button";
4 |
5 | interface LoadingButtonProps extends ButtonProps {
6 | loading?: boolean;
7 | loadingIndicator?: React.ReactNode;
8 | }
9 |
10 | const LoadingButton = React.forwardRef(
11 | (
12 | { children, disabled, loading = false, loadingIndicator, ...props },
13 | ref
14 | ) => {
15 | return (
16 |
20 | );
21 | }
22 | );
23 | LoadingButton.displayName = "LoadingButton";
24 |
25 | export default LoadingButton;
26 |
--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
5 | import { cn } from "@/lib/utils";
6 |
7 | const ScrollArea = React.forwardRef<
8 | React.ElementRef,
9 | React.ComponentPropsWithoutRef
10 | >(({ className, children, ...props }, ref) => (
11 |
16 |
17 | {children}
18 |
19 |
20 |
21 |
22 | ));
23 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
24 |
25 | const ScrollBar = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, orientation = "vertical", ...props }, ref) => (
29 |
42 |
43 |
44 | ));
45 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
46 |
47 | export { ScrollArea, ScrollBar };
48 |
--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
5 | import { cn } from "@/lib/utils";
6 |
7 | const Separator = React.forwardRef<
8 | React.ElementRef,
9 | React.ComponentPropsWithoutRef
10 | >(
11 | (
12 | { className, orientation = "horizontal", decorative = true, ...props },
13 | ref
14 | ) => (
15 |
26 | )
27 | );
28 | Separator.displayName = SeparatorPrimitive.Root.displayName;
29 |
30 | export { Separator };
31 |
--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as SheetPrimitive from "@radix-ui/react-dialog";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 | import { X } from "lucide-react";
7 | import { cn } from "@/lib/utils";
8 |
9 | const Sheet = SheetPrimitive.Root;
10 |
11 | const SheetTrigger = SheetPrimitive.Trigger;
12 |
13 | const SheetClose = SheetPrimitive.Close;
14 |
15 | const SheetPortal = ({
16 | className,
17 | ...props
18 | }: SheetPrimitive.DialogPortalProps) => (
19 |
20 | );
21 | SheetPortal.displayName = SheetPrimitive.Portal.displayName;
22 |
23 | const SheetOverlay = React.forwardRef<
24 | React.ElementRef,
25 | React.ComponentPropsWithoutRef
26 | >(({ className, ...props }, ref) => (
27 |
35 | ));
36 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
37 |
38 | const sheetVariants = cva(
39 | "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
40 | {
41 | variants: {
42 | side: {
43 | top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
44 | bottom:
45 | "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
46 | left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
47 | right:
48 | "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
49 | },
50 | },
51 | defaultVariants: {
52 | side: "right",
53 | },
54 | }
55 | );
56 |
57 | interface SheetContentProps
58 | extends React.ComponentPropsWithoutRef,
59 | VariantProps {}
60 |
61 | const SheetContent = React.forwardRef<
62 | React.ElementRef,
63 | SheetContentProps
64 | >(({ side = "right", className, children, ...props }, ref) => (
65 |
66 |
67 |
72 | {children}
73 |
74 |
75 | Close
76 |
77 |
78 |
79 | ));
80 | SheetContent.displayName = SheetPrimitive.Content.displayName;
81 |
82 | const SheetHeader = ({
83 | className,
84 | ...props
85 | }: React.HTMLAttributes) => (
86 |
93 | );
94 | SheetHeader.displayName = "SheetHeader";
95 |
96 | const SheetFooter = ({
97 | className,
98 | ...props
99 | }: React.HTMLAttributes) => (
100 |
107 | );
108 | SheetFooter.displayName = "SheetFooter";
109 |
110 | const SheetTitle = React.forwardRef<
111 | React.ElementRef,
112 | React.ComponentPropsWithoutRef
113 | >(({ className, ...props }, ref) => (
114 |
119 | ));
120 | SheetTitle.displayName = SheetPrimitive.Title.displayName;
121 |
122 | const SheetDescription = React.forwardRef<
123 | React.ElementRef,
124 | React.ComponentPropsWithoutRef
125 | >(({ className, ...props }, ref) => (
126 |
131 | ));
132 | SheetDescription.displayName = SheetPrimitive.Description.displayName;
133 |
134 | export {
135 | Sheet,
136 | SheetTrigger,
137 | SheetClose,
138 | SheetContent,
139 | SheetHeader,
140 | SheetFooter,
141 | SheetTitle,
142 | SheetDescription,
143 | };
144 |
--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | );
13 | }
14 |
15 | export { Skeleton };
16 |
--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as SwitchPrimitives from "@radix-ui/react-switch";
5 | import { cn } from "@/lib/utils";
6 |
7 | const Switch = React.forwardRef<
8 | React.ElementRef,
9 | React.ComponentPropsWithoutRef
10 | >(({ className, ...props }, ref) => (
11 |
19 |
24 |
25 | ));
26 | Switch.displayName = SwitchPrimitives.Root.displayName;
27 |
28 | export { Switch };
29 |
--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TabsPrimitive from "@radix-ui/react-tabs";
5 | import { cn } from "@/lib/utils";
6 |
7 | const Tabs = TabsPrimitive.Root;
8 |
9 | const TabsList = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
21 | ));
22 | TabsList.displayName = TabsPrimitive.List.displayName;
23 |
24 | const TabsTrigger = React.forwardRef<
25 | React.ElementRef,
26 | React.ComponentPropsWithoutRef
27 | >(({ className, ...props }, ref) => (
28 |
36 | ));
37 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
38 |
39 | const TabsContent = React.forwardRef<
40 | React.ElementRef,
41 | React.ComponentPropsWithoutRef
42 | >(({ className, ...props }, ref) => (
43 |
51 | ));
52 | TabsContent.displayName = TabsPrimitive.Content.displayName;
53 |
54 | export { Tabs, TabsList, TabsTrigger, TabsContent };
55 |
--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | export interface TextareaProps
5 | extends React.TextareaHTMLAttributes {}
6 |
7 | const Textarea = React.forwardRef(
8 | ({ className, ...props }, ref) => {
9 | return (
10 |
18 | );
19 | }
20 | );
21 | Textarea.displayName = "Textarea";
22 |
23 | export { Textarea };
24 |
--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TogglePrimitive from "@radix-ui/react-toggle";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 | import { cn } from "@/lib/utils";
7 |
8 | const toggleVariants = cva(
9 | "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
10 | {
11 | variants: {
12 | variant: {
13 | default: "bg-transparent",
14 | outline:
15 | "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
16 | },
17 | size: {
18 | default: "h-10 px-3",
19 | sm: "h-9 px-2.5",
20 | lg: "h-11 px-5",
21 | },
22 | },
23 | defaultVariants: {
24 | variant: "default",
25 | size: "default",
26 | },
27 | }
28 | );
29 |
30 | const Toggle = React.forwardRef<
31 | React.ElementRef,
32 | React.ComponentPropsWithoutRef &
33 | VariantProps
34 | >(({ className, variant, size, ...props }, ref) => (
35 |
40 | ));
41 |
42 | Toggle.displayName = TogglePrimitive.Root.displayName;
43 |
44 | export { Toggle, toggleVariants };
45 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5 | import { cn } from "@/lib/utils";
6 |
7 | const TooltipProvider = TooltipPrimitive.Provider;
8 |
9 | const Tooltip = TooltipPrimitive.Root;
10 |
11 | const TooltipTrigger = TooltipPrimitive.Trigger;
12 |
13 | const TooltipContent = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef
16 | >(({ className, sideOffset = 4, ...props }, ref) => (
17 |
26 | ));
27 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
28 |
29 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
30 |
--------------------------------------------------------------------------------
/src/components/wysiwyg/rich-text-editor.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FC } from "react";
4 | import { EditorContent, useEditor, type Editor } from "@tiptap/react";
5 | import StarterKit from "@tiptap/starter-kit";
6 | import { Bold, Italic, List, ListOrdered, Strikethrough } from "lucide-react";
7 | import { Separator } from "@/components/ui/separator";
8 | import { Toggle } from "@/components/ui/toggle";
9 |
10 | interface RichTextEditorProps {
11 | value?: string;
12 | onChange?: (value: string) => void;
13 | }
14 |
15 | const RichTextEditor: FC = ({ value = "", onChange }) => {
16 | const editor = useEditor({
17 | editorProps: {
18 | attributes: {
19 | class:
20 | "text-base break-all min-h-[150px] w-full rounded-md rounded-tr-none rounded-tl-none border border-input bg-transparent px-3 py-2 border-t-0 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 overflow-auto",
21 | },
22 | },
23 | extensions: [
24 | StarterKit.configure({
25 | orderedList: {
26 | HTMLAttributes: {
27 | class: "list-decimal pl-4",
28 | },
29 | },
30 | bulletList: {
31 | HTMLAttributes: {
32 | class: "list-disc pl-4",
33 | },
34 | },
35 | }),
36 | ],
37 | content: value,
38 | onUpdate({ editor }) {
39 | onChange?.(editor.getHTML());
40 | },
41 | });
42 |
43 | return (
44 |
45 | {editor ? : null}
46 |
47 |
48 | );
49 | };
50 |
51 | const RichTextEditorToolbar = ({ editor }: { editor: Editor }) => {
52 | return (
53 |
54 | editor.chain().focus().toggleBold().run()}
58 | >
59 |
60 |
61 | editor.chain().focus().toggleItalic().run()}
65 | >
66 |
67 |
68 | editor.chain().focus().toggleStrike().run()}
72 | >
73 |
74 |
75 |
76 | editor.chain().focus().toggleBulletList().run()}
80 | >
81 |
82 |
83 | editor.chain().focus().toggleOrderedList().run()}
87 | >
88 |
89 |
90 |
91 | );
92 | };
93 |
94 | export default RichTextEditor;
95 |
--------------------------------------------------------------------------------
/src/config/site.ts:
--------------------------------------------------------------------------------
1 | export type SiteConfig = typeof siteConfig;
2 |
3 | export const siteConfig = {
4 | name: "Trello Clone",
5 | description:
6 | "An open-source, full-stack trello-clone built with everything new in Next.js 14.",
7 | links: {
8 | github: "https://github.com/0l1v3rr/trello-clone",
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/src/context/auth-context.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createContext, FC, PropsWithChildren, useContext } from "react";
4 | import { Session } from "next-auth";
5 |
6 | interface AuthContextType {
7 | user: Session["user"];
8 | }
9 |
10 | const AuthContext = createContext({} as AuthContextType);
11 |
12 | export function useAuthContext() {
13 | return useContext(AuthContext) as AuthContextType;
14 | }
15 |
16 | interface AuthContextProviderProps extends PropsWithChildren {
17 | user: Session["user"];
18 | }
19 |
20 | export const AuthContextProvider: FC = ({
21 | children,
22 | user,
23 | }) => {
24 | return (
25 | {children}
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/context/board-context.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | createContext,
5 | FC,
6 | PropsWithChildren,
7 | useContext,
8 | useOptimistic,
9 | } from "react";
10 | import { DragDropContext, DropResult } from "react-beautiful-dnd";
11 | import { BoardDetail, BoardMemberType, ListDetail } from "@/types/board";
12 | import {
13 | updateCard,
14 | updateCardPositions,
15 | } from "@/app/(dashboard)/[username]/[boardSlug]/actions";
16 |
17 | interface BoardContextProps {
18 | board: BoardDetail;
19 | lists: ListDetail[];
20 | permission: BoardMemberType;
21 | path: string;
22 | }
23 |
24 | const BoardContext = createContext({} as BoardContextProps);
25 |
26 | export function useBoardContext() {
27 | return useContext(BoardContext) as BoardContextProps;
28 | }
29 |
30 | interface BoardContextProviderProps extends PropsWithChildren {
31 | board: BoardDetail;
32 | lists: ListDetail[];
33 | permission: BoardMemberType;
34 | }
35 |
36 | const BoardContextProvider: FC = ({
37 | children,
38 | board,
39 | lists: initialLists,
40 | permission,
41 | }) => {
42 | const path = `/${board.owner.username}/${board.slug}`;
43 | const [lists, handleDragEnd] = useOptimistic(
44 | initialLists,
45 | (state, { destination, source, draggableId }: DropResult) => {
46 | if (!destination) return state;
47 |
48 | if (
49 | destination.droppableId === source.droppableId &&
50 | destination.index === source.index
51 | ) {
52 | return state;
53 | }
54 |
55 | const sourceList = state.find((x) => x.id === source.droppableId);
56 | const destList =
57 | source.droppableId === destination.droppableId
58 | ? sourceList
59 | : state.find((x) => x.id === destination.droppableId);
60 |
61 | if (!sourceList || !destList) return state;
62 |
63 | const item = sourceList.cards.find((x) => x.id == draggableId);
64 | if (!item) return state;
65 |
66 | sourceList.cards.splice(source.index, 1);
67 | destList.cards.splice(destination.index, 0, item);
68 |
69 | updateCardPositions(
70 | sourceList.cards.map((x, i) => ({ id: x.id, position: i + 1 }))
71 | );
72 |
73 | if (sourceList.id !== destList.id) {
74 | updateCard(item.id, { listId: destList.id });
75 | updateCardPositions(
76 | destList.cards.map((x, i) => ({ id: x.id, position: i + 1 }))
77 | );
78 | }
79 |
80 | return state;
81 | }
82 | );
83 |
84 | return (
85 |
86 | {children}
87 |
88 | );
89 | };
90 |
91 | export default BoardContextProvider;
92 |
--------------------------------------------------------------------------------
/src/context/board-list-context.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | createContext,
5 | FC,
6 | PropsWithChildren,
7 | useContext,
8 | useState,
9 | } from "react";
10 | import { type Session } from "next-auth";
11 | import { BoardWithOwner } from "@/components/navbar/dropdowns/boards-dropdown";
12 |
13 | interface BoardListContextProps {
14 | boardList: BoardWithOwner[];
15 | guestBoards: BoardWithOwner[];
16 | setBoardList: (boards: BoardWithOwner[]) => void;
17 | session: Session | null;
18 | setGuestBoard: (boards: BoardWithOwner[]) => void;
19 | }
20 |
21 | export const BoardListContext = createContext({
22 | boardList: [],
23 | guestBoards: [],
24 | setBoardList: () => {},
25 | session: null,
26 | setGuestBoard: () => {},
27 | });
28 |
29 | export function useBoardListContext() {
30 | return useContext(BoardListContext) as BoardListContextProps;
31 | }
32 |
33 | interface BoardListContextProviderProps extends PropsWithChildren {
34 | userBoards: BoardWithOwner[];
35 | guestBoards: BoardWithOwner[];
36 | session: Session | null;
37 | }
38 | const BoardListContextProvider: FC = ({
39 | children,
40 | session,
41 | userBoards,
42 | guestBoards,
43 | }) => {
44 | const [boardList, setBoardList] = useState(userBoards);
45 | const [userGuestBoards, setGuestBoard] =
46 | useState(guestBoards);
47 |
48 | return (
49 |
58 | {children}
59 |
60 | );
61 | };
62 |
63 | export default BoardListContextProvider;
64 |
--------------------------------------------------------------------------------
/src/context/card-context.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | createContext,
5 | FC,
6 | PropsWithChildren,
7 | useContext,
8 | useState,
9 | } from "react";
10 | import { Label } from "@prisma/client";
11 | import { BoardDetail, BoardMemberType, CardDetail } from "@/types/board";
12 | import {
13 | addCardLabel,
14 | getCardDetails,
15 | removeCardLabel,
16 | } from "@/app/(dashboard)/[username]/[boardSlug]/@card/(.)cards/[cardId]/actions";
17 | import { findBoardById } from "@/app/(dashboard)/[username]/[boardSlug]/actions";
18 |
19 | interface CardContextProps {
20 | card: CardDetail;
21 | board: BoardDetail;
22 | permission: BoardMemberType;
23 | path: string;
24 | toggleLabel: (label: Label, remove: boolean) => void;
25 | revalidateCard: () => Promise;
26 | revalidateBoard: () => Promise;
27 | }
28 |
29 | const CardContext = createContext({} as CardContextProps);
30 |
31 | export function useCardContext() {
32 | return useContext(CardContext) as CardContextProps;
33 | }
34 |
35 | interface CardContextProviderProps extends PropsWithChildren {
36 | card: CardDetail;
37 | board: BoardDetail;
38 | permission: BoardMemberType;
39 | }
40 |
41 | const CardContextProvider: FC = ({
42 | children,
43 | board: initialBoard,
44 | card: initialCard,
45 | permission,
46 | }) => {
47 | const [card, setCard] = useState(initialCard);
48 | const [board, setBoard] = useState(initialBoard);
49 | const path = `/${board.owner.username}/${board.slug}/cards/${card.id}`;
50 |
51 | const toggleLabel = (label: Label, remove: boolean) => {
52 | setCard((prev) => {
53 | const newCard = structuredClone(prev);
54 |
55 | if (remove) {
56 | newCard.labels = prev.labels.filter((x) => x.id !== label.id);
57 | removeCardLabel(prev.id, label.id);
58 | } else {
59 | newCard.labels.push(label);
60 | addCardLabel(prev.id, label.id);
61 | }
62 |
63 | newCard.labels.sort((a, z) =>
64 | a.color > z.color ? 1 : z.color > a.color ? -1 : 0
65 | );
66 | return newCard;
67 | });
68 | };
69 |
70 | const revalidateCard = async () => {
71 | const revalidatedBoard = await getCardDetails(card.id);
72 | setCard(revalidatedBoard);
73 | };
74 |
75 | const revalidateBoard = async () => {
76 | const revalidatedBoard = await findBoardById(board.id);
77 | setBoard(revalidatedBoard);
78 | };
79 |
80 | return (
81 |
92 | {children}
93 |
94 | );
95 | };
96 |
97 | export default CardContextProvider;
98 |
--------------------------------------------------------------------------------
/src/context/fullscreen-context.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | createContext,
5 | MutableRefObject,
6 | ReactNode,
7 | useContext,
8 | useEffect,
9 | useRef,
10 | useState,
11 | } from "react";
12 |
13 | interface FullscreenContextType {
14 | fullscreenEnabled: boolean;
15 | toggleFullscreen: () => void;
16 | }
17 |
18 | const FullscreenContext = createContext(
19 | {} as FullscreenContextType
20 | );
21 |
22 | export function useFullscreen() {
23 | return useContext(FullscreenContext);
24 | }
25 |
26 | export function FullscreenContextProvider({
27 | children,
28 | }: {
29 | children(ref: MutableRefObject): ReactNode;
30 | }) {
31 | const ref = useRef(null);
32 | const [fullscreenEnabled, setFullscreenEnabled] = useState(false);
33 |
34 | const toggleFullscreen = () => {
35 | if (fullscreenEnabled) {
36 | document.exitFullscreen();
37 | } else {
38 | ref.current?.requestFullscreen();
39 | }
40 | };
41 |
42 | useEffect(() => {
43 | function handleFullscreenChange() {
44 | setFullscreenEnabled(
45 | document.fullscreenElement !== null &&
46 | document.fullscreenElement === ref.current
47 | );
48 | }
49 |
50 | document.addEventListener("fullscreenchange", handleFullscreenChange);
51 | return () =>
52 | document.removeEventListener("fullscreenchange", handleFullscreenChange);
53 | }, []);
54 |
55 | return (
56 |
57 | {children(ref)}
58 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/env.mjs:
--------------------------------------------------------------------------------
1 | // src/env.mjs
2 | import { createEnv } from "@t3-oss/env-nextjs";
3 | import { z } from "zod";
4 |
5 | export const env = createEnv({
6 | server: {
7 | NODE_ENV: z
8 | .enum(["development", "test", "production"])
9 | .default("development"),
10 | NEXTAUTH_SECRET: z.string().default("SECRET"),
11 | GITHUB_ID: z.string(),
12 | GITHUB_SECRET: z.string(),
13 | DISCORD_ID: z.string(),
14 | DISCORD_SECRET: z.string(),
15 | },
16 | skipValidation: process.env.SKIP_ENV_VALIDATION === "true",
17 | client: {},
18 | // NOTE: specifying runtimeEnv is not necessary for Next,js >= 13.4.4
19 | // runtimeEnv: {},
20 | // you only need to destructure client variables:
21 | experimental__runtimeEnv: {},
22 | });
23 |
--------------------------------------------------------------------------------
/src/hooks/use-outer-click.ts:
--------------------------------------------------------------------------------
1 | import { RefObject, useEffect, useRef } from "react";
2 |
3 | export const useOuterClick = (
4 | callback: () => void
5 | ): RefObject => {
6 | const callbackRef = useRef<() => void>(() => {});
7 | const ref = useRef(null);
8 |
9 | useEffect(() => {
10 | callbackRef.current = callback;
11 | });
12 |
13 | useEffect(() => {
14 | const handleClick = (e: MouseEvent) => {
15 | if (ref.current && !ref.current?.contains(e.target as Node)) {
16 | callbackRef.current();
17 | }
18 | };
19 |
20 | document.addEventListener("mousedown", handleClick);
21 | return () => document.removeEventListener("mousedown", handleClick);
22 | }, []);
23 |
24 | return ref;
25 | };
26 |
--------------------------------------------------------------------------------
/src/hooks/use-ripple.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { CSSProperties, MouseEvent, useEffect, useState } from "react";
4 |
5 | export function useRipple() {
6 | const [ripples, setRipples] = useState([]);
7 |
8 | const onClick = (e: MouseEvent) => {
9 | const rect = e.currentTarget.getBoundingClientRect();
10 | const left = e.clientX - rect.left;
11 | const top = e.clientY - rect.top;
12 | const diameter = Math.max(
13 | e.currentTarget.clientWidth,
14 | e.currentTarget.clientHeight
15 | );
16 |
17 | setRipples((prev) => [
18 | ...prev,
19 | {
20 | top: top - diameter / 2,
21 | left: left - diameter / 2,
22 | height: diameter,
23 | width: diameter,
24 | },
25 | ]);
26 | };
27 |
28 | useEffect(() => {
29 | const timeout = setTimeout(() => setRipples([]), 1000);
30 | return () => clearTimeout(timeout);
31 | }, [ripples.length]);
32 |
33 | return [
34 | ripples.map((style, i) => (
35 |
49 | )),
50 | onClick,
51 | ] as const;
52 | }
53 |
--------------------------------------------------------------------------------
/src/lib/fonts.ts:
--------------------------------------------------------------------------------
1 | import { JetBrains_Mono, Montserrat } from "next/font/google";
2 |
3 | export const fontSans = Montserrat({
4 | subsets: ["latin"],
5 | variable: "--font-sans",
6 | });
7 |
8 | export const fontMono = JetBrains_Mono({
9 | subsets: ["latin"],
10 | variable: "--font-mono",
11 | });
12 |
--------------------------------------------------------------------------------
/src/lib/prisma.ts:
--------------------------------------------------------------------------------
1 | import { env } from "@/env.mjs";
2 | import { PrismaClient } from "@prisma/client";
3 |
4 | const globalForPrisma = global as unknown as { prisma: PrismaClient };
5 |
6 | export const prisma = globalForPrisma.prisma || new PrismaClient();
7 |
8 | if (env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
9 |
--------------------------------------------------------------------------------
/src/lib/schemas/board.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export type BoardBackground = z.infer;
4 |
5 | export const boardSchema = z.object({
6 | name: z
7 | .string()
8 | .min(3, { message: "The name must be at least 3 characters" })
9 | .max(64, { message: "The name can be maximum 64 characters" }),
10 | slug: z
11 | .string()
12 | .min(3, { message: "The slug must be at least 3 characters" })
13 | .max(64, { message: "The slug can be maximum 64 characters" })
14 | .regex(/^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/),
15 | public: z.boolean(),
16 | background: z.object({
17 | type: z.enum(["color", "image"]),
18 | value: z.string(),
19 | }),
20 | });
21 |
--------------------------------------------------------------------------------
/src/lib/schemas/card.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const cardSchema = z.object({
4 | title: z
5 | .string()
6 | .min(1, { message: "The title must be at least 1 characters" })
7 | .max(256, { message: "The title can be maximum 256 characters" }),
8 | });
9 |
--------------------------------------------------------------------------------
/src/lib/schemas/label.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const labelSchema = z.object({
4 | title: z
5 | .string()
6 | .min(1, { message: "The title must be at least 1 characters" })
7 | .max(32, { message: "The title can be maximum 20 characters" }),
8 | color: z.string(),
9 | });
10 |
--------------------------------------------------------------------------------
/src/lib/schemas/list.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const listSchema = z.object({
4 | name: z
5 | .string()
6 | .min(3, { message: "The name must be at least 3 characters" })
7 | .max(20, { message: "The name can be maximum 20 characters" }),
8 | });
9 |
--------------------------------------------------------------------------------
/src/lib/schemas/login.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const loginSchema = z.object({
4 | username: z.string(),
5 | password: z.string(),
6 | });
7 |
--------------------------------------------------------------------------------
/src/lib/schemas/password.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const passwordType = z
4 | .string()
5 | .min(8, {
6 | message: "The password must be at least 8 characters long",
7 | })
8 | .max(100)
9 | .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/, {
10 | message:
11 | "The password must contain at least 8 characters, one uppercase, one lowercase, one number and one special character",
12 | });
13 |
14 | export const changePasswordSchema = z
15 | .object({
16 | oldPassword: z.string(),
17 | password: passwordType,
18 | passwordConfirmation: z.string(),
19 | })
20 | .refine((data) => data.password === data.passwordConfirmation, {
21 | message: "The passwords must match",
22 | path: ["passwordConfirmation"],
23 | });
24 |
--------------------------------------------------------------------------------
/src/lib/schemas/profile.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const profileSchema = z.object({
4 | name: z
5 | .string()
6 | .min(4, { message: "The name must be at least 4 characters" }),
7 | status: z
8 | .string()
9 | .max(64, { message: "The status can be maximum 64 characters long" }),
10 | });
11 |
--------------------------------------------------------------------------------
/src/lib/schemas/register.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 | import { passwordType } from "@/lib/schemas/password";
3 | import { profileSchema } from "@/lib/schemas/profile";
4 |
5 | export const registerSchema = z
6 | .object({
7 | name: profileSchema.shape.name,
8 | email: z.string().email({ message: "The email is not valid" }),
9 | password: passwordType,
10 | passwordConfirmation: z.string(),
11 | })
12 | .refine((data) => data.password === data.passwordConfirmation, {
13 | message: "The passwords must match",
14 | path: ["passwordConfirmation"],
15 | });
16 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export function generateUsernameFromEmail(email: string) {
9 | return email
10 | .split("@")[0]
11 | .toLowerCase()
12 | .replace(/[^a-zA-Z0-9-_.]/g, "");
13 | }
14 |
15 | export function generateInitials(name: string) {
16 | return name
17 | .toUpperCase()
18 | .split(" ")
19 | .slice(0, 2)
20 | .map((x) => x.at(0))
21 | .join("");
22 | }
23 |
24 | export function slugify(s: string) {
25 | return s
26 | .toLowerCase()
27 | .replace(/[^a-z0-9-\s]/g, "")
28 | .replace(/[\s]/g, "-");
29 | }
30 |
31 | export function generateRandomHex() {
32 | return `#${((Math.random() * 0xffffff) << 0).toString(16).padStart(6, "0")}`;
33 | }
34 |
35 | export function getTextColor(hex: string): "white" | "black" {
36 | const r = parseInt(hex.substring(1, 3), 16);
37 | const g = parseInt(hex.substring(3, 5), 16);
38 | const b = parseInt(hex.substring(5, 7), 16);
39 | const yiq = (r * 299 + g * 587 + b * 114) / 1000;
40 | return yiq >= 128 ? "black" : "white";
41 | }
42 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | export { default } from "next-auth/middleware";
2 |
3 | export const config = {
4 | matcher: [
5 | /*
6 | * Match all request paths except for the ones starting with:
7 | * - api (API routes)
8 | * - _next/static (static files)
9 | * - _next/image (image optimization files)
10 | * - favicon.ico (favicon file)
11 | */
12 | "/((?!api|_next/static|_next/image|favicon.ico|login|register).*)",
13 | ],
14 | };
15 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 | --card: 0 0% 100%;
10 | --card-foreground: 222.2 84% 4.9%;
11 | --popover: 0 0% 100%;
12 | --popover-foreground: 222.2 84% 4.9%;
13 | --primary: 221.2 83.2% 53.3%;
14 | --primary-foreground: 210 40% 98%;
15 | --secondary: 210 40% 92.1%;
16 | --secondary-foreground: 222.2 47.4% 11.2%;
17 | --muted: 210 40% 92.1%;
18 | --muted-foreground: 215.4 16.3% 46.9%;
19 | --accent: 210 40% 96.1%;
20 | --accent-foreground: 222.2 47.4% 11.2%;
21 | --destructive: 0 84.2% 60.2%;
22 | --destructive-foreground: 210 40% 98%;
23 | --border: 214.3 31.8% 85%;
24 | --input: 214.3 31.8% 85%;
25 | --ring: 221.2 83.2% 53.3%;
26 | --radius: 0.5rem;
27 | }
28 |
29 | .dark {
30 | --background: 222.2 64% 4.9%;
31 | --foreground: 210 40% 98%;
32 | --card: 222.2 64% 4.9%;
33 | --card-foreground: 210 40% 98%;
34 | --popover: 222.2 64% 4.9%;
35 | --popover-foreground: 210 40% 98%;
36 | --primary: 217.2 91.2% 59.8%;
37 | --primary-foreground: 222.2 47.4% 11.2%;
38 | --secondary: 217.2 32.6% 17.5%;
39 | --secondary-foreground: 210 40% 98%;
40 | --muted: 217.2 32.6% 17.5%;
41 | --muted-foreground: 215 20.2% 65.1%;
42 | --accent: 217.2 32.6% 17.5%;
43 | --accent-foreground: 210 40% 98%;
44 | --destructive: 0 62.8% 45%;
45 | --destructive-foreground: 210 40% 98%;
46 | --border: 217.2 32.6% 17.5%;
47 | --input: 217.2 32.6% 17.5%;
48 | --ring: 224.3 76.3% 48%;
49 | }
50 | }
51 |
52 | @layer base {
53 | * {
54 | @apply border-border;
55 | }
56 | body {
57 | @apply min-h-screen overflow-x-auto bg-background;
58 | }
59 | img {
60 | @apply select-none;
61 | }
62 | .ripple {
63 | @apply bg-foreground;
64 | }
65 | }
66 |
67 | @keyframes ripple {
68 | to {
69 | transform: scale(4);
70 | opacity: 0;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/types/board.ts:
--------------------------------------------------------------------------------
1 | import { Board, Card, Label, List, User } from "@prisma/client";
2 |
3 | export interface BoardDetail extends Board {
4 | owner: User;
5 | members: User[];
6 | labels: Label[];
7 | }
8 |
9 | export interface ListDetail extends List {
10 | cards: (Card & { labels: Label[] })[];
11 | }
12 |
13 | export interface CardDetail extends Card {
14 | list: List;
15 | labels: Label[];
16 | }
17 |
18 | export type BoardMemberType = "VISITOR" | "MEMBER" | "OWNER";
19 |
--------------------------------------------------------------------------------
/src/types/next-auth.d.ts:
--------------------------------------------------------------------------------
1 | import { User as PrismaUser } from "@prisma/client";
2 | import type { DefaultJWT, DefaultSession, DefaultUser } from "next-auth";
3 |
4 | declare module "next-auth" {
5 | interface Session {
6 | user: PrismaUser;
7 | }
8 |
9 | interface User extends PrismaUser {}
10 | }
11 |
12 | declare module "next-auth/jwt" {
13 | interface JWT extends DefaultJWT, PrismaUser {}
14 | }
15 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: ["class"],
4 | content: [
5 | "./pages/**/*.{ts,tsx}",
6 | "./components/**/*.{ts,tsx}",
7 | "./app/**/*.{ts,tsx}",
8 | "./src/**/*.{ts,tsx}",
9 | ],
10 | theme: {
11 | container: {
12 | center: true,
13 | padding: "2rem",
14 | screens: {
15 | "2xl": "1400px",
16 | },
17 | },
18 | extend: {
19 | colors: {
20 | border: "hsl(var(--border))",
21 | input: "hsl(var(--input))",
22 | ring: "hsl(var(--ring))",
23 | background: "hsl(var(--background))",
24 | foreground: "hsl(var(--foreground))",
25 | primary: {
26 | DEFAULT: "hsl(var(--primary))",
27 | foreground: "hsl(var(--primary-foreground))",
28 | },
29 | secondary: {
30 | DEFAULT: "hsl(var(--secondary))",
31 | foreground: "hsl(var(--secondary-foreground))",
32 | },
33 | destructive: {
34 | DEFAULT: "hsl(var(--destructive))",
35 | foreground: "hsl(var(--destructive-foreground))",
36 | },
37 | muted: {
38 | DEFAULT: "hsl(var(--muted))",
39 | foreground: "hsl(var(--muted-foreground))",
40 | },
41 | accent: {
42 | DEFAULT: "hsl(var(--accent))",
43 | foreground: "hsl(var(--accent-foreground))",
44 | },
45 | popover: {
46 | DEFAULT: "hsl(var(--popover))",
47 | foreground: "hsl(var(--popover-foreground))",
48 | },
49 | card: {
50 | DEFAULT: "hsl(var(--card))",
51 | foreground: "hsl(var(--card-foreground))",
52 | },
53 | },
54 | borderRadius: {
55 | lg: "var(--radius)",
56 | md: "calc(var(--radius) - 2px)",
57 | sm: "calc(var(--radius) - 4px)",
58 | },
59 | keyframes: {
60 | "accordion-down": {
61 | from: { height: 0 },
62 | to: { height: "var(--radix-accordion-content-height)" },
63 | },
64 | "accordion-up": {
65 | from: { height: "var(--radix-accordion-content-height)" },
66 | to: { height: 0 },
67 | },
68 | },
69 | animation: {
70 | "accordion-down": "accordion-down 0.2s ease-out",
71 | "accordion-up": "accordion-up 0.2s ease-out",
72 | },
73 | },
74 | },
75 | plugins: [require("tailwindcss-animate")],
76 | };
77 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "moduleResolution": "node",
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
6 |
7 |