shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: convert to pages router

Browse Source
This commit is contained in:
Henry
2024-04-13 16:21:38 +01:00
parent 6178b4f309
commit e048e243d4
74 changed files with 518 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/api/auth/[...nextauth]/route.ts
View File

@@ -1,5 +0,0 @@
export { GET, POST } from "~/server/auth";
export const runtime = "edge";
export const preferredRegion = 'lhr1';
export const dynamic = 'force-dynamic'

28
src/app/api/trpc/[trpc]/route.ts
View File

@@ -1,28 +0,0 @@
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { type NextRequest } from "next/server";
import { env } from "~/env.mjs";
import { appRouter } from "~/server/api/root";
import { createTRPCContext } from "~/server/api/trpc";
const handler = (req: NextRequest) =>
fetchRequestHandler({
endpoint: "/api/trpc",
req,
router: appRouter,
createContext: () => createTRPCContext({ req }),
onError:
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
);
}
: undefined,
});
export { handler as GET, handler as POST };
export const runtime = "edge";
export const preferredRegion = 'lhr1';
export const dynamic = 'force-dynamic'

10
src/app/boards/layout.tsx
View File

@@ -1,10 +0,0 @@
import { WorkspaceProvider } from "~/app/providers/workspace";
import Dashboard from "~/app/components/dashboard";
export default function Layout(props: { children: React.ReactNode }) {
return (
<WorkspaceProvider>
<Dashboard>{props.children}</Dashboard>
</WorkspaceProvider>
);
}

10
src/app/cards/layout.tsx
View File

@@ -1,10 +0,0 @@
import { WorkspaceProvider } from "~/app/providers/workspace";
import Dashboard from "~/app/components/dashboard";
export default function Layout(props: { children: React.ReactNode }) {
return (
<WorkspaceProvider>
<Dashboard>{props.children}</Dashboard>;
</WorkspaceProvider>
);
}

41
src/app/layout.tsx
View File

@@ -1,41 +0,0 @@
import "~/styles/globals.css";
import { Plus_Jakarta_Sans } from "next/font/google";
import { headers } from "next/headers";
import { TRPCReactProvider } from "~/trpc/react";
import { ModalProvider } from "~/app/providers/modal";
import { BoardProvider } from "~/app/providers/board";
import { ThemeProvider } from "./providers/theme";
const jakarta = Plus_Jakarta_Sans({
subsets: ["latin"],
display: "swap",
variable: "--font-plus-jakarta-sans",
});
export const metadata = {
title: "Kan",
description: "The open source Trello alternative",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={`${jakarta.variable}`}>
<body className="h-screen overflow-hidden font-sans">
<ThemeProvider>
<TRPCReactProvider headers={headers()}>
<ModalProvider>
<BoardProvider>{children}</BoardProvider>
</ModalProvider>
</TRPCReactProvider>
</ThemeProvider>
</body>
</html>
);
}

10
src/app/members/layout.tsx
View File

@@ -1,10 +0,0 @@
import { WorkspaceProvider } from "~/app/providers/workspace";
import Dashboard from "~/app/components/dashboard";
export default function Layout(props: { children: React.ReactNode }) {
return (
<WorkspaceProvider>
<Dashboard>{props.children}</Dashboard>;
</WorkspaceProvider>
);
}

3
src/app/page.tsx
View File

@@ -1,3 +0,0 @@
export default function Home() {
return <main></main>;
}

10
src/app/settings/layout.tsx
View File

@@ -1,10 +0,0 @@
import { WorkspaceProvider } from "~/app/providers/workspace";
import Dashboard from "~/app/components/dashboard";
export default function Layout(props: { children: React.ReactNode }) {
return (
<WorkspaceProvider>
<Dashboard>{props.children}</Dashboard>;
</WorkspaceProvider>
);
}

0
src/app/assets/boards-dark.json → src/assets/boards-dark.json
View File

0
src/app/assets/boards-light.json → src/assets/boards-light.json
View File

0
src/app/assets/chat-dark.json → src/assets/chat-dark.json
View File

0
src/app/assets/chat-light.json → src/assets/chat-light.json
View File

0
src/app/assets/members-dark.json → src/assets/members-dark.json
View File

0
src/app/assets/members-light.json → src/assets/members-light.json
View File

0
src/app/assets/settings-dark.json → src/assets/settings-dark.json
View File

0
src/app/assets/settings-light.json → src/assets/settings-light.json
View File

6
src/app/components/CheckboxDropdown.tsx → src/components/CheckboxDropdown.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
@@ -35,13 +33,13 @@ export default function CheckboxDropdown({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 border-light-200 absolute left-0 top-[26px] z-10 mt-2 w-56 origin-top-left rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<Menu.Items className="absolute left-0 top-[26px] z-10 mt-2 w-56 origin-top-left rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<div className="p-1">
{items?.map((item) => (
<Menu.Item key={item.key}>
<div
key={item.key}
className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
onClick={(e) => {
e.preventDefault();
handleSelect({ key: item.key });

12
src/app/components/FeedbackButton.tsx → src/components/FeedbackButton.tsx
View File

@@ -1,11 +1,9 @@
"use client";
import { useState } from "react";
import { useTheme } from "~/app/providers/theme";
import { useTheme } from "~/providers/theme";
import LottieIcon from "~/app/components/LottieIcon";
import chatIconLight from "~/app/assets/chat-light.json";
import chatIconDark from "~/app/assets/chat-dark.json";
import LottieIcon from "~/components/LottieIcon";
import chatIconLight from "~/assets/chat-light.json";
import chatIconDark from "~/assets/chat-dark.json";
const FeedbackButton: React.FC = () => {
const { theme } = useTheme();
@@ -21,7 +19,7 @@ const FeedbackButton: React.FC = () => {
<button
type="button"
onMouseEnter={handleMouseEnter}
className="bg-light-50 border-light-600 flex items-center rounded-md border-[1px] px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-600 dark:bg-dark-50 dark:text-dark-1000"
className="flex items-center rounded-md border-[1px] border-light-600 bg-light-50 px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-600 dark:bg-dark-50 dark:text-dark-1000"
>
<LottieIcon
index={index}

2
src/app/components/LottieIcon.tsx → src/components/LottieIcon.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import Lottie from "react-lottie-player";
type IconProps = {

8
src/app/components/NewWorkspaceForm.tsx → src/components/NewWorkspaceForm.tsx
View File

@@ -1,11 +1,9 @@
"use client";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { HiXMark } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useWorkspace } from "~/app/providers/workspace";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { Formik, Form, Field } from "formik";

6
src/app/components/ReactiveButton.tsx → src/components/ReactiveButton.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import LottieIcon from "~/app/components/LottieIcon";
import LottieIcon from "~/components/LottieIcon";
function classNames(...classes: string[]): string {
return classes.filter(Boolean).join(" ");
@@ -29,7 +27,7 @@ const Button: React.FC<{
onMouseEnter={handleMouseEnter}
className={classNames(
current ? "bg-light-200 dark:bg-dark-200" : " dark:bg-dark-50",
"hover:bg-light-200 group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-200",
"group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-200",
)}
>
<LottieIcon index={index} json={json} isPlaying={isHovered} />

24
src/app/components/SideNavigation.tsx → src/components/SideNavigation.tsx
View File

@@ -1,19 +1,17 @@
"use client";
import { usePathname } from "next/navigation";
import { useTheme } from "~/app/providers/theme";
import { useTheme } from "~/providers/theme";
import boardsIconDark from "~/app/assets/boards-dark.json";
import boardsIconLight from "~/app/assets/boards-light.json";
import membersIconDark from "~/app/assets/members-dark.json";
import membersIconLight from "~/app/assets/members-light.json";
import settingsIconDark from "~/app/assets/settings-dark.json";
import settingsIconLight from "~/app/assets/settings-light.json";
import boardsIconDark from "~/assets/boards-dark.json";
import boardsIconLight from "~/assets/boards-light.json";
import membersIconDark from "~/assets/members-dark.json";
import membersIconLight from "~/assets/members-light.json";
import settingsIconDark from "~/assets/settings-dark.json";
import settingsIconLight from "~/assets/settings-light.json";
import ReactiveButton from "~/app/components/ReactiveButton";
import UserMenu from "~/app/components/UserMenu";
import WorkspaceMenu from "~/app/components/WorkspaceMenu";
import ReactiveButton from "~/components/ReactiveButton";
import UserMenu from "~/components/UserMenu";
import WorkspaceMenu from "~/components/WorkspaceMenu";
interface SideNavigationProps {
user: UserType;
@@ -48,7 +46,7 @@ export default function SideNavigation({ user }: SideNavigationProps) {
return (
<>
<nav className="border-light-600 flex w-72 flex-col justify-between border-r px-3 pb-3 pt-5 dark:border-dark-600">
<nav className="flex w-72 flex-col justify-between border-r border-light-600 px-3 pb-3 pt-5 dark:border-dark-600">
<div>
<WorkspaceMenu />
<ul role="list" className="space-y-1">

27
src/app/components/UserMenu.tsx → src/components/UserMenu.tsx
View File

@@ -1,10 +1,7 @@
"use client";
import { Fragment } from "react";
import Image from "next/image";
import { signOut } from "next-auth/react";
import { Menu, Transition } from "@headlessui/react";
import { useTheme } from "~/app/providers/theme";
import { useTheme } from "~/providers/theme";
interface UserMenuProps {
imageUrl: string | undefined;
@@ -21,7 +18,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
return (
<Menu as="div" className="relative inline-block w-full text-left">
<div>
<Menu.Button className="hover:bg-light-200 flex w-full items-center rounded-md p-1.5 text-neutral-900 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
<Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
{imageUrl ? (
<Image
src={imageUrl ?? ""}
@@ -31,7 +28,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
alt=""
/>
) : (
<span className="bg-light-400 inline-block h-6 w-6 overflow-hidden rounded-full dark:bg-dark-400">
<span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-light-400 dark:bg-dark-400">
<svg
className="h-full w-full text-dark-700"
fill="currentColor"
@@ -54,7 +51,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="border-light-600 bg-light-50 absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
<Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
<div className="flex flex-col text-neutral-900 dark:text-dark-1000">
<div className="p-1">
<div className="flex w-full items-center px-3 py-2 text-left text-xs">
@@ -63,12 +60,12 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
<Menu.Item>
<button
onClick={() => switchTheme("system")}
className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
>
<span
className={classNames(
theme === "system" ? "visible" : "invisible",
"bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
"mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
)}
/>
System
@@ -77,12 +74,12 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
<Menu.Item>
<button
onClick={() => switchTheme("dark")}
className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
>
<span
className={classNames(
theme === "dark" ? "visible" : "invisible",
"bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
"mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
)}
/>
Dark
@@ -91,12 +88,12 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
<Menu.Item>
<button
onClick={() => switchTheme("light")}
className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
>
<span
className={classNames(
theme === "light" ? "visible" : "invisible",
"bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
"mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
)}
/>
Light
@@ -106,8 +103,8 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
<div className="light-border-600 border-t-[1px] p-1 dark:border-dark-600">
<Menu.Item>
<button
onClick={() => signOut({ callbackUrl: "/boards" })}
className=" hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
// onClick={() => signOut({ callbackUrl: "/boards" })}
className=" flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
>
Logout
</button>

16
src/app/components/WorkspaceMenu.tsx → src/components/WorkspaceMenu.tsx
View File

@@ -1,10 +1,8 @@
"use client";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { useModal } from "~/app/providers/modal";
import { useWorkspace } from "~/app/providers/workspace";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { HiCheck } from "react-icons/hi2";
@@ -15,7 +13,7 @@ export default function WorkspaceMenu() {
return (
<Menu as="div" className="relative inline-block w-full pb-3 text-left">
<div>
<Menu.Button className="hover:bg-light-200 mb-1 flex w-full items-center rounded-[5px] p-1.5 dark:hover:bg-dark-200">
<Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
<span className="text-xs font-bold leading-none text-white">
{workspace?.name.charAt(0).toUpperCase()}
@@ -36,14 +34,14 @@ export default function WorkspaceMenu() {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 border-light-600 absolute left-0 z-10 w-full origin-top-left rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
<Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
<div className="p-1">
{availableWorkspaces.map((availableWorkspace) => (
<div key={availableWorkspace.publicId} className="flex">
<Menu.Item>
<button
onClick={() => switchWorkspace(availableWorkspace)}
className="hover:bg-light-200 flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
>
<div>
<span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
@@ -65,11 +63,11 @@ export default function WorkspaceMenu() {
</div>
))}
</div>
<div className="border-light-600 border-t-[1px] p-1 dark:border-dark-500">
<div className="border-t-[1px] border-light-600 p-1 dark:border-dark-500">
<Menu.Item>
<button
onClick={() => openModal("NEW_WORKSPACE")}
className="hover:bg-light-200 flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
>
Create workspace
</button>

4
src/app/components/auth.tsx → src/components/auth.tsx
View File

@@ -1,7 +1,5 @@
"use client";
import { Formik, Form, Field } from "formik";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
interface FormValues {
email: string;

20
src/app/components/dashboard.tsx → src/components/dashboard.tsx
View File

@@ -1,20 +1,18 @@
import { redirect } from "next/navigation";
import { auth } from "~/server/auth";
import SideNavigation from "./SideNavigation";
import FeedbackButton from "./FeedbackButton";
export default async function Dashboard(props: { children: React.ReactNode }) {
const session = await auth();
export default function Dashboard(props: { children: React.ReactNode }) {
// const session = await auth();
if (!session?.user) {
redirect("/api/auth/signin");
}
// if (!session?.user) {
// redirect("/api/auth/signin");
// }
return (
<main className="bg-light-100 flex h-screen flex-col items-center dark:bg-dark-50">
<div className="border-light-600 m-auto flex h-16 w-full justify-between border-b px-5 py-2 align-middle dark:border-dark-600">
<div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
<div className="m-auto flex h-16 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-600">
<div className="my-auto flex w-full items-center justify-between">
<h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
kan.bn
@@ -24,9 +22,9 @@ export default async function Dashboard(props: { children: React.ReactNode }) {
</div>
<div className="flex h-full w-full">
<SideNavigation user={session.user} />
<SideNavigation user={{ email: "henry_ball@hotmail.co.uk" }} />
<div className="w-full overflow-hidden">{props.children}</div>
</div>
</main>
</div>
);
}

8
src/app/components/modal.tsx → src/components/modal.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { useModal } from "~/app/providers/modal";
import { useModal } from "~/providers/modal";
interface Props {
children: React.ReactNode;
@@ -24,7 +22,7 @@ const Modal: React.FC<Props> = ({ children }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="bg-light-50 fixed inset-0 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40" />
<div className="fixed inset-0 bg-light-50 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40" />
</Transition.Child>
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
@@ -38,7 +36,7 @@ const Modal: React.FC<Props> = ({ children }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="shadow-3xl-light dark:shadow-3xl-dark bg-light-50 border-light-600 relative mt-[25vh] transform rounded-lg border px-4 pb-4 pt-5 text-left transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:backdrop-blur-lg sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
<Dialog.Panel className="relative mt-[25vh] transform rounded-lg border border-light-600 bg-light-50 px-4 pb-4 pt-5 text-left shadow-3xl-light transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:shadow-3xl-dark dark:backdrop-blur-lg sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
{children}
</Dialog.Panel>
</Transition.Child>

18
src/env.mjs
View File

@@ -17,17 +17,6 @@ export const env = createEnv({
NODE_ENV: z
.enum(["development", "test", "production"])
.default("development"),
NEXTAUTH_SECRET:
process.env.NODE_ENV === "production"
? z.string()
: z.string().optional(),
NEXTAUTH_URL: z.preprocess(
// This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
// Since NextAuth.js automatically uses the VERCEL_URL if present.
(str) => process.env.VERCEL_URL ?? str,
// VERCEL_URL doesn't include `https` so it cant be validated as a URL
process.env.VERCEL ? z.string() : z.string().url(),
),
},
/**
@@ -46,8 +35,7 @@ export const env = createEnv({
runtimeEnv: {
POSTGRES_URL: process.env.POSTGRES_URL,
NODE_ENV: process.env.NODE_ENV,
NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
// NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
},
/**
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
@@ -55,8 +43,8 @@ export const env = createEnv({
*/
skipValidation: !!process.env.SKIP_ENV_VALIDATION,
/**
* Makes it so that empty strings are treated as undefined.
* `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error.
* Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
* `SOME_VAR=''` will throw an error.
*/
emptyStringAsUndefined: true,
});

38
src/pages/_app.tsx Normal file
View File

@@ -0,0 +1,38 @@
import "~/styles/globals.css";
import { type AppType } from "next/app";
import { Plus_Jakarta_Sans } from "next/font/google";
import { ModalProvider } from "~/providers/modal";
import { BoardProvider } from "~/providers/board";
import { ThemeProvider } from "~/providers/theme";
import { api } from "~/utils/api";
const jakarta = Plus_Jakarta_Sans({
subsets: ["latin"],
display: "swap",
variable: "--font-plus-jakarta-sans",
});
export const metadata = {
title: "Kan",
description: "The open source Trello alternative",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
const MyApp: AppType = ({ Component, pageProps }) => {
return (
<main className={`${jakarta.variable} h-screen overflow-hidden font-sans`}>
<ThemeProvider>
<ModalProvider>
<BoardProvider>
<Component {...pageProps} />
</BoardProvider>
</ModalProvider>
</ThemeProvider>
</main>
);
};
export default api.withTRPC(MyApp);

36
src/pages/api/auth/confirm.ts Normal file
View File

@@ -0,0 +1,36 @@
import { type EmailOtpType } from '@supabase/supabase-js'
import type { NextApiRequest, NextApiResponse } from 'next'
import createClient from '~/utils/supabase/api'
function stringOrFirstString(item: string | string[] | undefined) {
return Array.isArray(item) ? item[0] : item
}
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method !== 'GET') {
res.status(405).appendHeader('Allow', 'GET').end()
return
}
const queryParams = req.query
const token_hash = stringOrFirstString(queryParams.token_hash)
const type = stringOrFirstString(queryParams.type)
let next = '/error'
if (token_hash && type) {
const supabase = createClient(req, res)
const { error } = await supabase.auth.verifyOtp({
type: type as EmailOtpType,
token_hash,
})
if (error) {
console.error(error)
} else {
next = stringOrFirstString(queryParams.next) || '/'
}
}
res.redirect(next)
}

33
src/pages/api/trpc/[trpc].ts Normal file
View File

@@ -0,0 +1,33 @@
import { NextApiRequest, NextApiResponse } from 'next';
import { createNextApiHandler, CreateNextContextOptions } from "@trpc/server/adapters/next";
import { env } from "~/env.mjs";
import { appRouter } from "~/server/api/root";
import { createTRPCContext } from "~/server/api/trpc";
const nextApiHandler = createNextApiHandler({
router: appRouter,
createContext: createTRPCContext,
onError:
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
);
}
: undefined,
});
export default async function handler(
req: NextApiRequest,
res: NextApiResponse,
) {
return nextApiHandler(req, res);
}
// export const runtime = "edge";
// export const preferredRegion = 'lhr1';
// export const dynamic = 'force-dynamic'

13
src/pages/boards/[...boardId]/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { WorkspaceProvider } from "~/providers/workspace";
import Dashboard from "~/components/dashboard";
import BoardView from "~/views/board";
export default function BoardPage() {
return (
<WorkspaceProvider>
<Dashboard>
<BoardView />
</Dashboard>
</WorkspaceProvider>
);
}

13
src/pages/boards/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { WorkspaceProvider } from "~/providers/workspace";
import Dashboard from "~/components/dashboard";
import BoardsView from "~/views/boards";
export default function BoardsPage() {
return (
<WorkspaceProvider>
<Dashboard>
<BoardsView />
</Dashboard>
</WorkspaceProvider>
);
}

13
src/pages/cards/[cardId]/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { WorkspaceProvider } from "~/providers/workspace";
import Dashboard from "~/components/dashboard";
import CardView from "~/views/card";
export default function CardPage() {
return (
<WorkspaceProvider>
<Dashboard>
<CardView />
</Dashboard>
</WorkspaceProvider>
);
}

5
src/pages/login/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import LoginView from "~/views/auth/login";
export default function LoginPage() {
return <LoginView />;
}

13
src/pages/members/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { WorkspaceProvider } from "~/providers/workspace";
import Dashboard from "~/components/dashboard";
import MembersView from "~/views/members";
export default function MembersPage() {
return (
<WorkspaceProvider>
<Dashboard>
<MembersView />
</Dashboard>
</WorkspaceProvider>
);
}

13
src/pages/settings/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { WorkspaceProvider } from "~/providers/workspace";
import Dashboard from "~/components/dashboard";
import SettingsView from "~/views/settings";
export default function SettingsPage() {
return (
<WorkspaceProvider>
<Dashboard>
<SettingsView />
</Dashboard>
</WorkspaceProvider>
);
}

4
src/app/providers/board.tsx → src/providers/board.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import React, {
createContext,
useContext,
@@ -7,7 +5,7 @@ import React, {
type ReactNode,
} from "react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
interface BoardContextProps {
boardData: BoardData;

2
src/app/providers/modal.tsx → src/providers/modal.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import { createContext, useContext, useState } from "react";
type ModalContextType = {

2
src/app/providers/theme.tsx → src/providers/theme.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import React, {
createContext,
useContext,

4
src/app/providers/workspace.tsx → src/providers/workspace.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import React, {
createContext,
useContext,
@@ -8,7 +6,7 @@ import React, {
type ReactNode,
} from "react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { useRouter } from "next/navigation";

10
src/server/api/root.ts
View File

@@ -24,3 +24,13 @@ export const appRouter = createTRPCRouter({
// export type definition of API
export type AppRouter = typeof appRouter;
/**
* Create a server-side caller for the tRPC API.
* @example
* const trpc = createCaller(createContext);
* const res = await trpc.post.all();
* ^? Post[]
*/
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
// export const createCaller = createCallerFactory(appRouter);

67
src/server/api/trpc.ts
View File

@@ -6,14 +6,15 @@
* TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will
* need to use are documented accordingly near the end.
*/
import { initTRPC, TRPCError } from "@trpc/server";
import { type NextRequest } from "next/server";
import { initTRPC } from "@trpc/server";
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import superjson from "superjson";
import { ZodError } from "zod";
import { auth } from "~/server/auth";
import { db, supabase } from "~/server/db";
import { db } from "~/server/db";
import createClient from "~/utils/supabase/api";
import { type Database } from "~/types/database.types";
import { SupabaseClient } from '@supabase/supabase-js';
/**
* 1. CONTEXT
@@ -23,8 +24,14 @@ import { db, supabase } from "~/server/db";
* These allow you to access things when processing a request, like the database, the session, etc.
*/
type User = {
id: string;
};
interface CreateContextOptions {
headers: Headers;
user: User | null;
supabase: SupabaseClient<Database>
db: any;
}
/**
@@ -37,14 +44,12 @@ interface CreateContextOptions {
*
* @see https://create.t3.gg/en/usage/trpc#-serverapitrpcts
*/
export const createInnerTRPCContext = async (opts: CreateContextOptions) => {
const session = await auth();
export const createInnerTRPCContext = (opts: CreateContextOptions) => {
return {
session,
headers: opts.headers,
user: opts.user,
supabase: opts.supabase,
db,
supabase
};
};
@@ -54,12 +59,12 @@ export const createInnerTRPCContext = async (opts: CreateContextOptions) => {
*
* @see https://trpc.io/docs/context
*/
export const createTRPCContext = async (opts: { req: NextRequest }) => {
// Fetch stuff that depends on the request
export const createTRPCContext = async (_opts: CreateNextContextOptions) => {
const supabase = createClient(_opts.req, _opts.res);
return await createInnerTRPCContext({
headers: opts.req.headers,
});
const { data: { user } } = await supabase.auth.getUser()
return createInnerTRPCContext({ user, supabase });
};
/**
@@ -84,6 +89,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
},
});
/**
* Create a server-side caller.
*
* @see https://trpc.io/docs/server/server-side-calls
*/
// export const createCallerFactory = t.createCallerFactory;
/**
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
*
@@ -106,26 +118,3 @@ export const createTRPCRouter = t.router;
* are logged in.
*/
export const publicProcedure = t.procedure;
/** Reusable middleware that enforces users are logged in before running the procedure. */
const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
if (!ctx.session || !ctx.session.user) {
throw new TRPCError({ code: "UNAUTHORIZED" });
}
return next({
ctx: {
// infers the `session` as non-nullable
session: { ...ctx.session, user: ctx.session.user },
},
});
});
/**
* Protected (authenticated) procedure
*
* If you want a query or mutation to ONLY be accessible to logged in users, use this. It verifies
* the session is valid and guarantees `ctx.session.user` is not null.
*
* @see https://trpc.io/docs/procedures
*/
export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);

47
src/trpc/react.tsx
View File

@@ -1,47 +0,0 @@
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import { type AppRouter } from "~/server/api/root";
import { getUrl, transformer } from "./shared";
export const api = createTRPCReact<AppRouter>();
export function TRPCReactProvider(props: {
children: React.ReactNode;
headers: Headers;
}) {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
api.createClient({
transformer,
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
unstable_httpBatchStreamLink({
url: getUrl(),
headers() {
const heads = new Map(props.headers);
heads.set("x-trpc-source", "react");
return Object.fromEntries(heads);
},
}),
],
}),
);
return (
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
);
}

28
src/trpc/server.ts
View File

@@ -1,28 +0,0 @@
import {
createTRPCProxyClient,
loggerLink,
unstable_httpBatchStreamLink,
} from "@trpc/client";
import { headers } from "next/headers";
import { type AppRouter } from "~/server/api/root";
import { getUrl, transformer } from "./shared";
export const api = createTRPCProxyClient<AppRouter>({
transformer,
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
unstable_httpBatchStreamLink({
url: getUrl(),
headers() {
const heads = new Map(headers());
heads.set("x-trpc-source", "rsc");
return Object.fromEntries(heads);
},
}),
],
});

30
src/trpc/shared.ts
View File

@@ -1,30 +0,0 @@
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";
import { type AppRouter } from "~/server/api/root";
export const transformer = superjson;
function getBaseUrl() {
if (typeof window !== "undefined") return "";
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
return `http://localhost:${process.env.PORT ?? 3000}`;
}
export function getUrl() {
return getBaseUrl() + "/api/trpc";
}
/**
* Inference helper for inputs.
*
* @example type HelloInput = RouterInputs['example']['hello']
*/
export type RouterInputs = inferRouterInputs<AppRouter>;
/**
* Inference helper for outputs.
*
* @example type HelloOutput = RouterOutputs['example']['hello']
*/
export type RouterOutputs = inferRouterOutputs<AppRouter>;

68
src/utils/api.ts Normal file
View File

@@ -0,0 +1,68 @@
/**
* This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
* contains the Next.js App-wrapper, as well as your type-safe React Query hooks.
*
* We also create a few inference helpers for input and output types.
*/
import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";
import { type AppRouter } from "~/server/api/root";
const getBaseUrl = () => {
if (typeof window !== "undefined") return ""; // browser should use relative url
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};
/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
config() {
return {
/**
* Links used to determine request flow from client to server.
*
* @see https://trpc.io/docs/links
*/
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === "development" ||
(opts.direction === "down" && opts.result instanceof Error),
}),
httpBatchLink({
/**
* Transformer used for data de-serialization from the server.
*
* @see https://trpc.io/docs/data-transformers
*/
transformer: superjson,
url: `${getBaseUrl()}/api/trpc`,
}),
],
};
},
/**
* Whether tRPC should await queries when server rendering pages.
*
* @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
*/
ssr: false,
transformer: superjson,
});
/**
* Inference helper for inputs.
*
* @example type HelloInput = RouterInputs['example']['hello']
*/
export type RouterInputs = inferRouterInputs<AppRouter>;
/**
* Inference helper for outputs.
*
* @example type HelloOutput = RouterOutputs['example']['hello']
*/
export type RouterOutputs = inferRouterOutputs<AppRouter>;

2
src/app/auth/login/page.tsx → src/views/auth/login/index.tsx
View File

@@ -1,4 +1,4 @@
import { Login } from "~/app/components/auth";
import { Login } from "~/components/auth";
export default function LoginPage() {
return (

0
src/app/auth/verify/page.tsx → src/views/auth/verify/index.tsx
View File

10
src/app/boards/[...boardId]/components/BoardDropdown.tsx → src/views/board/components/BoardDropdown.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { HiEllipsisHorizontal } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useModal } from "~/providers/modal";
export default function BoardDropdown() {
const { openModal } = useModal();
@@ -11,7 +9,7 @@ export default function BoardDropdown() {
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="hover:bg-light-200 flex h-8 w-8 items-center justify-center rounded-[5px] dark:hover:bg-dark-200">
<Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200">
<HiEllipsisHorizontal
size={25}
className="text-light-900 dark:text-dark-900"
@@ -28,12 +26,12 @@ export default function BoardDropdown() {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 border-light-200 absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<div className="flex">
<Menu.Item>
<button
onClick={() => openModal("DELETE_BOARD")}
className="hover:bg-light-200 m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
>
Delete board
</button>

14
src/app/boards/[...boardId]/components/DeleteBoardConfirmation.tsx → src/views/board/components/DeleteBoardConfirmation.tsx
View File

@@ -1,10 +1,8 @@
"use client";
import { useRouter } from "next/navigation";
import { api } from "~/trpc/react";
import { useBoard } from "~/app/providers/board";
import { useModal } from "~/app/providers/modal";
import { api } from "~/utils/api";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
export function DeleteBoardConfirmation() {
const router = useRouter();
@@ -24,13 +22,13 @@ export function DeleteBoardConfirmation() {
<h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
Are you sure you want to delete this board?
</h2>
<p className="text-light-900 text-sm font-medium dark:text-dark-900">
<p className="text-sm font-medium text-light-900 dark:text-dark-900">
{"This action can't be undone."}
</p>
</div>
<div className="mt-5 flex justify-end sm:mt-6">
<button
className="bg-light-50 border-light-600 mr-4 inline-flex justify-center rounded-md border-[1px] 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"
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
@@ -41,7 +39,7 @@ export function DeleteBoardConfirmation() {
boardPublicId: boardData.publicId,
})
}
className="bg-light-1000 text-light-50 inline-flex justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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>

14
src/app/boards/[...boardId]/components/DeleteListConfirmation.tsx → src/views/board/components/DeleteListConfirmation.tsx
View File

@@ -1,8 +1,6 @@
"use client";
import { api } from "~/trpc/react";
import { useBoard } from "~/app/providers/board";
import { useModal } from "~/app/providers/modal";
import { api } from "~/utils/api";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
interface DeleteListConfirmationProps {
listPublicId: string;
@@ -31,13 +29,13 @@ export function DeleteListConfirmation({
<h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
Are you sure you want to delete this list?
</h2>
<p className="text-light-900 text-sm font-medium dark:text-dark-900">
<p className="text-sm font-medium text-light-900 dark:text-dark-900">
{"This action can't be undone."}
</p>
</div>
<div className="mt-5 flex justify-end sm:mt-6">
<button
className="bg-light-50 border-light-600 mr-4 inline-flex justify-center rounded-md border-[1px] 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"
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
@@ -48,7 +46,7 @@ export function DeleteListConfirmation({
listPublicId,
})
}
className="bg-light-1000 text-light-50 inline-flex justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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>

10
src/app/boards/[...boardId]/components/List.tsx → src/views/board/components/List.tsx
View File

@@ -1,12 +1,10 @@
"use client";
import { type ReactNode } from "react";
import { HiOutlinePlusSmall } from "react-icons/hi2";
import { Draggable } from "react-beautiful-dnd";
import { useFormik } from "formik";
import { api } from "~/trpc/react";
import { useModal } from "~/app/providers/modal";
import { api } from "~/utils/api";
import { useModal } from "~/providers/modal";
import ListDropdown from "./ListDropdown";
@@ -66,7 +64,7 @@ export default function List({
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="bg-light-300 border-light-400 dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-400 dark:bg-dark-200"
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-400 dark:bg-dark-200"
>
<div className="flex justify-between">
<form
@@ -85,7 +83,7 @@ export default function List({
</form>
<div>
<button
className="hover:bg-light-400 mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 dark:hover:bg-dark-400"
className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-400 dark:hover:bg-dark-400"
onClick={() => openNewCardForm(list.publicId)}
>
<HiOutlinePlusSmall

10
src/app/boards/[...boardId]/components/ListDropdown.tsx → src/views/board/components/ListDropdown.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { HiEllipsisHorizontal } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useModal } from "~/providers/modal";
interface ListDropdownProps {
setSelectedPublicListId: () => void;
@@ -22,7 +20,7 @@ export default function ListDropdown({
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="hover:bg-light-400 mr-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 dark:hover:bg-dark-400">
<Menu.Button className="mr-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-400 dark:hover:bg-dark-400">
<HiEllipsisHorizontal className="h-5 w-5 text-dark-900" />
</Menu.Button>
</div>
@@ -36,12 +34,12 @@ export default function ListDropdown({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 dark-text-dark-1000 border-light-400 absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border text-neutral-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<Menu.Items className="dark-text-dark-1000 absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border border-light-400 bg-light-50 text-neutral-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<div className="flex">
<Menu.Item>
<button
onClick={handleOpenDeleteListConfirmation}
className="hover:bg-light-400 m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm dark:hover:bg-dark-400"
className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm hover:bg-light-400 dark:hover:bg-dark-400"
>
Delete list
</button>

26
src/app/boards/[...boardId]/components/NewCardForm.tsx → src/views/board/components/NewCardForm.tsx
View File

@@ -1,15 +1,13 @@
"use client";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { HiXMark } from "react-icons/hi2";
import { Switch } from "@headlessui/react";
import CheckboxDropdown from "~/app/components/CheckboxDropdown";
import { useBoard } from "~/app/providers/board";
import { useModal } from "~/app/providers/modal";
import CheckboxDropdown from "~/components/CheckboxDropdown";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
interface FormData {
title: string;
@@ -142,7 +140,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
New card
</h2>
<button
className="hover:bg-light-200 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
@@ -161,7 +159,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
id="title"
type="text"
{...register("title")}
className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 bg-dark-300 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:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
/>
</div>
<div className="mt-2 flex space-x-1">
@@ -172,7 +170,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
handleSelectList(list.key)
}
>
<div className="border-light-600 bg-light-200 text-light-800 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] px-2 py-1 text-left text-xs dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
<div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
{selectedList?.value}
</div>
</CheckboxDropdown>
@@ -184,7 +182,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
handleSelectMembers(list.key)
}
>
<div className="border-light-600 bg-light-200 text-light-800 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] px-2 py-1 text-left text-xs dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
<div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
{!memberPublicIds.length ? (
"Members"
) : (
@@ -197,7 +195,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
return (
<span
key={member?.key}
className="ring-light-200 inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 dark:ring-dark-500"
className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-light-200 dark:ring-dark-500"
>
<span className="text-[8px] font-medium leading-none text-white">
{member?.value
@@ -222,7 +220,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
handleSelectLabels(list.key)
}
>
<div className="border-light-600 bg-light-200 text-light-800 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] px-2 py-1 text-left text-xs dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
<div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
{!labelPublicIds.length ? (
"Labels"
) : (
@@ -267,7 +265,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
</div>
<div className="mt-3 flex items-center justify-end">
<span className="text-light-900 mr-2 text-xs dark:text-dark-900">
<span className="mr-2 text-xs text-light-900 dark:text-dark-900">
Create more
</span>
<Switch
@@ -294,7 +292,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
<div className="mt-5 sm:mt-6">
<button
type="submit"
className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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>

16
src/app/boards/[...boardId]/components/NewListForm.tsx → src/views/board/components/NewListForm.tsx
View File

@@ -1,13 +1,11 @@
"use client";
import { useState, useEffect } from "react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { HiXMark } from "react-icons/hi2";
import { Switch } from "@headlessui/react";
import { useBoard } from "~/app/providers/board";
import { useModal } from "~/app/providers/modal";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import { Formik, Form, Field } from "formik";
@@ -56,7 +54,7 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
New list
</h2>
<button
className="hover:bg-light-200 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
@@ -85,10 +83,10 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
<Field
id="list-name"
name="name"
className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 bg-dark-300 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:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
/>
<div className="mt-3 flex items-center justify-end">
<span className="text-light-900 mr-2 text-xs dark:text-dark-900">
<span className="mr-2 text-xs text-light-900 dark:text-dark-900">
Create more
</span>
<Switch
@@ -114,7 +112,7 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
<div className="mt-5 sm:mt-6">
<button
type="submit"
className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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>

12
src/app/boards/[...boardId]/page.tsx → src/views/board/index.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
@@ -12,17 +10,17 @@ import {
} from "react-beautiful-dnd";
import { useFormik } from "formik";
import { api } from "~/trpc/react";
import { useBoard } from "~/app/providers/board";
import { useModal } from "~/app/providers/modal";
import { api } from "~/utils/api";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import Modal from "~/app/components/modal";
import Modal from "~/components/modal";
import BoardDropdown from "./components/BoardDropdown";
import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
import { DeleteListConfirmation } from "./components/DeleteListConfirmation";
import List from "./components/List";
import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { NewCardForm } from "./components/NewCardForm";
import { NewListForm } from "./components/NewListForm";

6
src/app/boards/components/BoardsList.tsx → src/views/boards/components/BoardsList.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import Link from "next/link";
import { api } from "~/trpc/react";
import { useWorkspace } from "~/app/providers/workspace";
import { api } from "~/utils/api";
import { useWorkspace } from "~/providers/workspace";
export function BoardsList() {
const { workspace } = useWorkspace();

24
src/app/boards/components/ImportBoardsForm.tsx → src/views/boards/components/ImportBoardsForm.tsx
View File

@@ -1,14 +1,12 @@
"use client";
import { Fragment, useState } from "react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { Listbox, Transition } from "@headlessui/react";
import { FaTrello } from "react-icons/fa";
import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useWorkspace } from "~/app/providers/workspace";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { useFormik } from "formik";
@@ -41,7 +39,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="ring-light-600 focus-ring-light-700 block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
<Listbox.Button className="focus-ring-light-700 block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
<span className="flex items-center">
<FaTrello />
<span className="ml-2 block truncate">
@@ -63,14 +61,14 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="bg-light-50 ring-light-600 absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base text-neutral-900 shadow-lg ring-1 ring-opacity-5 focus:outline-none dark:bg-dark-300 dark:text-dark-1000 sm:text-sm">
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-1 text-base text-neutral-900 shadow-lg ring-1 ring-light-600 ring-opacity-5 focus:outline-none dark:bg-dark-300 dark:text-dark-1000 sm:text-sm">
{sources.map(({ source }, index) => (
<Listbox.Option
key={`source_${index}`}
className="relative cursor-default select-none px-1"
value={source}
>
<div className="hover:bg-light-200 flex items-center rounded-[5px] p-1 dark:hover:bg-dark-400">
<div className="flex items-center rounded-[5px] p-1 hover:bg-light-200 dark:hover:bg-dark-400">
<FaTrello className="ml-1" />
<span className="ml-2 block truncate font-normal">
{source}
@@ -87,7 +85,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
<div className="mt-5 sm:mt-6">
<button
type="submit"
className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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"
>
Select source
</button>
@@ -219,7 +217,7 @@ const ImportTrello: React.FC = () => {
<input
id="apiKey"
name="apiKey"
className="ring-light-600 focus:ring-light-700 mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
className="mb-2 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 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"
value={formik.values.apiKey}
onChange={formik.handleChange}
/>
@@ -232,14 +230,14 @@ const ImportTrello: React.FC = () => {
<input
id="token"
name="token"
className="ring-light-600 focus:ring-light-700 mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
className="mb-2 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 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"
value={formik.values.token}
onChange={formik.handleChange}
/>
<div className="mt-5 sm:mt-6">
<button
type="submit"
className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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"
>
Fetch boards
</button>
@@ -259,7 +257,7 @@ export function ImportBoardsForm() {
New import
</h2>
<button
className="hover:bg-light-200 rounded p-1 dark:hover:bg-dark-300"
className="rounded p-1 hover:bg-light-200 dark:hover:bg-dark-300"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-dark-900" />

14
src/app/boards/components/NewBoardForm.tsx → src/views/boards/components/NewBoardForm.tsx
View File

@@ -1,11 +1,9 @@
"use client";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { HiXMark } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useWorkspace } from "~/app/providers/workspace";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { Formik, Form, Field } from "formik";
@@ -32,7 +30,7 @@ export function NewBoardForm() {
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
<h2 className="text-sm font-bold">New board</h2>
<button
className="hover:bg-light-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
@@ -60,12 +58,12 @@ export function NewBoardForm() {
<Field
id="name"
name="name"
className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
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"
/>
<div className="mt-5 sm:mt-6">
<button
type="submit"
className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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 board
</button>

12
src/app/boards/page.tsx → src/views/boards/index.tsx
View File

@@ -1,14 +1,12 @@
"use client";
import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";
import { BoardsList } from "./components/BoardsList";
import { useModal } from "~/app/providers/modal";
import Modal from "~/app/components/modal";
import { useModal } from "~/providers/modal";
import Modal from "~/components/modal";
import { ImportBoardsForm } from "./components/ImportBoardsForm";
import { NewBoardForm } from "./components/NewBoardForm";
import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
export default function BoardsPage() {
const { openModal, modalContentType } = useModal();
@@ -22,7 +20,7 @@ export default function BoardsPage() {
<div className="flex">
<button
type="button"
className="bg-dark-3000 border-light-600 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] px-3 py-2 text-sm text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-dark-600 dark:text-dark-1000"
className="bg-dark-3000 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] border-light-600 px-3 py-2 text-sm text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-dark-600 dark:text-dark-1000"
onClick={() => openModal("IMPORT_BOARDS")}
>
<div className="flex h-5 w-5 items-center">
@@ -32,7 +30,7 @@ export default function BoardsPage() {
</button>
<button
type="button"
className="bg-light-1000 text-light-50 flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
className="flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
onClick={() => openModal("NEW_BOARD")}
>
<div className="h-5 w-5 items-center">

12
src/app/cards/[cardId]/components/DeleteCardConfirmation.tsx → src/views/card/components/DeleteCardConfirmation.tsx
View File

@@ -1,8 +1,6 @@
"use client";
import { useRouter } from "next/navigation";
import { api } from "~/trpc/react";
import { useModal } from "~/app/providers/modal";
import { api } from "~/utils/api";
import { useModal } from "~/providers/modal";
interface DeleteCardConfirmationProps {
cardPublicId: string;
@@ -29,13 +27,13 @@ export function DeleteCardConfirmation({
<h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
Are you sure you want to delete this card?
</h2>
<p className="text-light-900 text-sm font-medium dark:text-dark-900">
<p className="text-sm font-medium text-light-900 dark:text-dark-900">
{"This action can't be undone."}
</p>
</div>
<div className="mt-5 flex justify-end sm:mt-6">
<button
className="bg-light-50 border-light-600 mr-4 inline-flex justify-center rounded-md border-[1px] 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"
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
@@ -46,7 +44,7 @@ export function DeleteCardConfirmation({
cardPublicId,
})
}
className="bg-light-1000 text-light-50 inline-flex justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
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>

10
src/app/cards/[cardId]/components/Dropdown.tsx → src/views/card/components/Dropdown.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { HiEllipsisHorizontal } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useModal } from "~/providers/modal";
export default function Dropdown() {
const { openModal } = useModal();
@@ -11,7 +9,7 @@ export default function Dropdown() {
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="hover:bg-light-200 flex h-8 w-8 items-center justify-center rounded-[5px] dark:hover:bg-dark-200">
<Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200">
<HiEllipsisHorizontal
size={25}
className="text-light-900 dark:text-dark-900"
@@ -28,12 +26,12 @@ export default function Dropdown() {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 border-light-200 absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<div className="flex">
<Menu.Item>
<button
onClick={() => openModal("DELETE_CARD")}
className="hover:bg-light-200 m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
>
Delete card
</button>

18
src/app/cards/[cardId]/components/LabelSelector.tsx → src/views/card/components/LabelSelector.tsx
View File

@@ -1,12 +1,10 @@
"use client";
import { Fragment } from "react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { Menu, Transition } from "@headlessui/react";
import { HiMiniPlus } from "react-icons/hi2";
import { useFormik } from "formik";
import { useModal } from "~/app/providers/modal";
import { useModal } from "~/providers/modal";
interface LabelSelectorProps {
cardPublicId: string;
@@ -58,7 +56,7 @@ export default function LabelSelector({
{selectedLabels.map((label) => (
<Menu.Button
key={label.publicId}
className="text-light-800 ring-light-600 my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium ring-1 ring-inset dark:text-dark-1000 dark:ring-dark-800"
className="my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
>
<svg
fill={label.colourCode}
@@ -71,13 +69,13 @@ export default function LabelSelector({
<div>{label.name}</div>
</Menu.Button>
))}
<Menu.Button className="hover:bg-light-400 my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 dark:hover:bg-dark-200">
<Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-light-400 dark:hover:bg-dark-200">
<HiMiniPlus size={16} />
Add label
</Menu.Button>
</>
) : (
<Menu.Button className="border-light-200 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] pl-2 text-left text-sm text-neutral-900 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
<HiMiniPlus size={22} className="pr-2" />
Add label
</Menu.Button>
@@ -92,7 +90,7 @@ export default function LabelSelector({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 border-light-600 absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<div className="p-2">
<form onSubmit={formik.handleSubmit}>
{labels?.map((label) => (
@@ -100,7 +98,7 @@ export default function LabelSelector({
{() => (
<div
key={label.publicId}
className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
onClick={async (e) => {
e.preventDefault();
await formik.setFieldValue(
@@ -137,7 +135,7 @@ export default function LabelSelector({
))}
<button
onClick={() => openModal("NEW_LABEL")}
className="hover:bg-light-200 flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm dark:hover:bg-dark-300"
className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
>
<HiMiniPlus size={22} className="pr-2" />
Create new label

10
src/app/cards/[cardId]/components/ListSelector.tsx → src/views/card/components/ListSelector.tsx
View File

@@ -1,7 +1,5 @@
"use client";
import { Fragment } from "react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { Menu, Transition } from "@headlessui/react";
import { useFormik } from "formik";
@@ -48,7 +46,7 @@ export default function ListSelector({
as="div"
className="relative flex w-full flex-wrap items-center text-left"
>
<Menu.Button className="border-light-200 hover:border-light-300 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] pl-2 text-left text-sm text-neutral-900 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
{selectedList?.name}
</Menu.Button>
@@ -61,14 +59,14 @@ export default function ListSelector({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 border-light-600 absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<div className="p-2">
<form onSubmit={formik.handleSubmit}>
{lists?.map((list) => (
<Menu.Item key={list.publicId}>
<div
key={list.publicId}
className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
onClick={async (e) => {
e.preventDefault();
await formik.setFieldValue(

12
src/app/cards/[cardId]/components/MemberSelector.tsx → src/views/card/components/MemberSelector.tsx
View File

@@ -1,7 +1,5 @@
"use client";
import { Fragment } from "react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { Menu, Transition } from "@headlessui/react";
import { HiMiniPlus } from "react-icons/hi2";
import { useFormik } from "formik";
@@ -52,13 +50,13 @@ export default function LabelSelector({
as="div"
className="relative flex w-full flex-wrap items-center text-left"
>
<Menu.Button className="border-light-200 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] pl-2 text-left text-sm text-neutral-900 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
{selectedMembers.length ? (
<div className="isolate flex -space-x-1 overflow-hidden">
{selectedMembers.map((member) => (
<span
key={member.publicId}
className="ring-light-200 relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 dark:ring-dark-100"
className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
>
<span className="text-[10px] font-medium leading-none text-white">
{member.user?.name
@@ -88,14 +86,14 @@ export default function LabelSelector({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="bg-light-50 border-light-600 absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
<div className="p-2">
<form onSubmit={formik.handleSubmit}>
{members?.map((member) => (
<Menu.Item key={member.publicId}>
<div
key={member.publicId}
className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
onClick={async (e) => {
e.preventDefault();
await formik.setFieldValue(

18
src/app/cards/[cardId]/components/NewLabelForm.tsx → src/views/card/components/NewLabelForm.tsx
View File

@@ -1,12 +1,10 @@
"use client";
import { Fragment, useState } from "react";
import { Listbox, Transition } from "@headlessui/react";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useModal } from "~/providers/modal";
import { Formik, Form, Field } from "formik";
@@ -58,7 +56,7 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
<h2 className="text-sm font-medium">New label</h2>
<button
className="hover:bg-light-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
@@ -90,13 +88,13 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
<Field
id="name"
name="name"
className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
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"
/>
<Listbox value={selected} onChange={setSelected}>
{({ open }) => (
<>
<div className="relative mt-4">
<Listbox.Button className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
<Listbox.Button className="block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 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">
<span className="flex items-center">
<span
style={{ backgroundColor: selected?.code }}
@@ -121,7 +119,7 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="bg-light-50 absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-dark-300 sm:text-sm">
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-dark-300 sm:text-sm">
{colours.map((colour, index) => (
<Listbox.Option
key={`colours_${index}`}
@@ -130,7 +128,7 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
>
{() => (
<>
<div className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-400">
<div className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-400">
<span
style={{ backgroundColor: colour?.code }}
className="ml-2 inline-block h-2 w-2 flex-shrink-0 rounded-full"
@@ -153,7 +151,7 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
<div className="mt-5 sm:mt-6">
<button
type="submit"
className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
>
Create label
</button>

18
src/app/cards/[cardId]/page.tsx → src/views/card/index.tsx
View File

@@ -1,5 +1,3 @@
"use client";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useFormik } from "formik";
@@ -12,12 +10,12 @@ import LabelSelector from "./components/LabelSelector";
import ListSelector from "./components/ListSelector";
import MemberSelector from "./components/MemberSelector";
import { NewLabelForm } from "./components/NewLabelForm";
import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import Modal from "~/app/components/modal";
import { useModal } from "~/app/providers/modal";
import Modal from "~/components/modal";
import { useModal } from "~/providers/modal";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
interface FormValues {
cardId: string;
@@ -98,14 +96,14 @@ export default function CardPage() {
<div className="w-full p-8">
<div className="mb-8 flex w-full items-center justify-between">
<Link
className="text-light-900 whitespace-nowrap font-medium leading-[2.3rem] tracking-tight dark:text-dark-900 sm:text-[1.2rem]"
className="whitespace-nowrap font-medium leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
href={`/boards/${board?.publicId}`}
>
{board?.name}
</Link>
<IoChevronForwardSharp
size={18}
className="text-light-900 mx-2 dark:text-dark-900"
className="mx-2 text-light-900 dark:text-dark-900"
/>
<form onSubmit={formik.handleSubmit} className="w-full space-y-6">
<div>
@@ -135,13 +133,13 @@ export default function CardPage() {
formik.setFieldValue("description", e.target.value)
}
onBlur={formik.submitForm}
className="text-light-900 block w-full border-0 bg-transparent py-1.5 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
/>
</div>
</form>
</div>
</div>
<div className="bg-light-200 border-light-600 text-light-900 min-w-[325px] border-l-[1px] p-8 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
<div className="min-w-[325px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
<div className="mb-4 flex w-full">
<p className="my-2 w-[100px] text-sm">List</p>
<ListSelector cardPublicId={cardId} lists={formattedLists} />

0
src/app/members/components/MemberDropdown.tsx → src/views/members/components/MemberDropdown.tsx
View File

24
src/app/members/page.tsx → src/views/members/index.tsx
View File

@@ -1,13 +1,11 @@
"use client";
import { HiOutlinePlusSmall } from "react-icons/hi2";
import { useModal } from "~/app/providers/modal";
import { useWorkspace } from "~/app/providers/workspace";
import Modal from "~/app/components/modal";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import Modal from "~/components/modal";
import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { api } from "~/trpc/react";
import { api } from "~/utils/api";
export default function MembersPage() {
const { openModal, modalContentType } = useModal();
@@ -27,7 +25,7 @@ export default function MembersPage() {
<div className="flex">
<button
type="button"
className="bg-light-1000 text-light-50 flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
className="flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
// onClick={() => openModal("")}
>
<div className="h-5 w-5 items-center">
@@ -45,30 +43,30 @@ export default function MembersPage() {
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<table className="divide-light-600 min-w-full divide-y dark:divide-dark-600">
<table className="min-w-full divide-y divide-light-600 dark:divide-dark-600">
<thead className="bg-light-300 dark:bg-dark-200">
<tr>
<th
scope="col"
className="text-light-900 py-3.5 pl-4 pr-3 text-left text-sm font-semibold dark:text-dark-900 sm:pl-6"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
>
User
</th>
<th
scope="col"
className="text-light-900 px-3 py-3.5 text-left text-sm font-semibold dark:text-dark-900"
className="px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
>
Role
</th>
</tr>
</thead>
<tbody className="bg-light-50 divide-light-600 divide-y dark:divide-dark-600 dark:bg-dark-100">
<tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
{data?.members.map((member) => (
<tr key={member.publicId}>
<td>
<div className="flex items-center p-4">
<div className="flex-shrink-0">
<span className="bg-light-1000 inline-flex h-9 w-9 items-center justify-center rounded-full dark:bg-dark-400">
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400">
<span className="text-sm font-medium leading-none text-white">
{member.user.name
?.split(" ")

8
src/app/settings/page.tsx → src/views/settings/index.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import { useModal } from "~/providers/modal";
import Modal from "~/components/modal";
import { useModal } from "~/app/providers/modal";
import Modal from "~/app/components/modal";
import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
export default function SettingsPage() {
const { openModal, modalContentType } = useModal();