feat: app dir migration

packages/tailwind-config-custom/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
   content: {
     relative: true,
     files: [
+      "./app/**/*.{js,ts,jsx,tsx}",
       "./components/**/*.tsx",
       "./constants/**/*.{js,ts,jsx,tsx}",
       "./layouts/**/*.tsx",

packages/ui/src/sortable/sortable.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Draggable } from "./draggable";
 import { Sortable } from "./sortable";
 
 const meta: Meta<typeof Sortable> = {
@@ -12,7 +13,7 @@ type Story = StoryObj<typeof Sortable>;
 
 const data = [
   { id: "1", name: "John Doe" },
-  { id: "2", name: "Satish" },
+  { id: "2", name: "Jane Doe 2" },
   { id: "3", name: "Alice" },
   { id: "4", name: "Bob" },
   { id: "5", name: "Charlie" },

space/types/project.d.ts

@@ -0,0 +1,42 @@
+import { TLogoProps } from "@plane/types";
+
+export type TWorkspaceDetails = {
+  name: string;
+  slug: string;
+  id: string;
+};
+
+export type TViewDetails = {
+  list: boolean;
+  gantt: boolean;
+  kanban: boolean;
+  calendar: boolean;
+  spreadsheet: boolean;
+};
+
+export type TProjectDetails = {
+  id: string;
+  identifier: string;
+  name: string;
+  cover_image: string | undefined;
+  logo_props: TLogoProps;
+  description: string;
+};
+
+export type TProjectSettings = {
+  id: string;
+  anchor: string;
+  comments: boolean;
+  reactions: boolean;
+  votes: boolean;
+  inbox: unknown;
+  workspace: string;
+  workspace_detail: TWorkspaceDetails;
+  project: string;
+  project_details: TProjectDetails;
+  views: TViewDetails;
+  created_by: string;
+  updated_by: string;
+  created_at: string;
+  updated_at: string;
+};

web/components/headers/workspace-active-cycles.tsx → web/app/[workspaceSlug]/@header/active-cycles/header.tsx

@@ -1,11 +1,13 @@
+"use client";
+
 import { observer } from "mobx-react";
 // ui
 import { Crown } from "lucide-react";
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // icons
 
-export const WorkspaceActiveCycleHeader = observer(() => (
+const WorkspaceActiveCycleHeader = observer(() => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div className="flex items-center gap-2">
@@ -25,3 +27,5 @@ export const WorkspaceActiveCycleHeader = observer(() => (
     </div>
   </div>
 ));
+
+export default WorkspaceActiveCycleHeader;

web/app/[workspaceSlug]/@header/active-cycles/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "../../app-header-wrapper";
+import WorkspaceActiveCycleHeader from "./header";
+
+const WorkspaceActiveCycleHeaderPage = () => <AppHeaderWrapper header={<WorkspaceActiveCycleHeader />} />;
+
+export default WorkspaceActiveCycleHeaderPage;

web/components/headers/workspace-analytics.tsx → web/app/[workspaceSlug]/@header/analytics/header.tsx

@@ -1,17 +1,22 @@
+"use client";
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+// icons
 import { BarChart2, PanelRight } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
+// helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
 import { useAppTheme } from "@/hooks/store";
 
-export const WorkspaceAnalyticsHeader = observer(() => {
-  const router = useRouter();
-  const { analytics_tab } = router.query;
+const WorkspaceAnalyticsHeader = observer(() => {
+  const searchParams = useSearchParams();
+  const analytics_tab = searchParams.get("analytics_tab");
   // store hooks
   const { workspaceAnalyticsSidebarCollapsed, toggleWorkspaceAnalyticsSidebar } = useAppTheme();
 
@@ -66,3 +71,5 @@ export const WorkspaceAnalyticsHeader = observer(() => {
     </>
   );
 });
+
+export default WorkspaceAnalyticsHeader;

web/app/[workspaceSlug]/@header/analytics/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "../../app-header-wrapper";
+import WorkspaceAnalyticsHeader from "./header";
+
+const WorkspaceAnalyticsHeaderPage = () => <AppHeaderWrapper header={<WorkspaceAnalyticsHeader />} />;
+
+export default WorkspaceAnalyticsHeaderPage;

web/components/headers/workspace-dashboard.tsx → web/app/[workspaceSlug]/@header/header.tsx

@@ -1,18 +1,21 @@
+"use client";
+
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Home, Zap } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
-// hooks
-// components
+// ui
 import { Breadcrumbs } from "@plane/ui";
+// components
 import { BreadcrumbLink } from "@/components/common";
 // constants
 import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "@/constants/event-tracker";
+// hooks
 import { useEventTracker } from "@/hooks/store";
 
-export const WorkspaceDashboardHeader = () => {
+const WorkspaceDashboardHeader = () => {
   // hooks
   const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
@@ -69,3 +72,5 @@ export const WorkspaceDashboardHeader = () => {
     </>
   );
 };
+
+export default WorkspaceDashboardHeader;

web/app/[workspaceSlug]/@header/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "../app-header-wrapper";
+import WorkspaceDashboardHeader from "./header";
+
+const WorkspaceDashboardHeaderPage = () => <AppHeaderWrapper header={<WorkspaceDashboardHeader />} />;
+
+export default WorkspaceDashboardHeaderPage;

web/app/[workspaceSlug]/@header/profile/[userId]/activity/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+
+const ProfileActivityHeader = () => <AppHeaderWrapper header={<UserProfileHeader type="Activity" />} />;
+
+export default ProfileActivityHeader;

web/app/[workspaceSlug]/@header/profile/[userId]/assigned/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+import ProfileIssuesMobileHeader from "../mobile-header";
+
+const ProfileAssignedHeader = () => (
+  <AppHeaderWrapper header={<UserProfileHeader type="Assigned" />} mobileHeader={<ProfileIssuesMobileHeader />} />
+);
+
+export default ProfileAssignedHeader;

web/app/[workspaceSlug]/@header/profile/[userId]/created/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+import ProfileIssuesMobileHeader from "../mobile-header";
+
+const ProfileCreatedHeader = () => (
+  <AppHeaderWrapper header={<UserProfileHeader type="Created" />} mobileHeader={<ProfileIssuesMobileHeader />} />
+);
+
+export default ProfileCreatedHeader;

web/components/headers/user-profile.tsx → web/app/[workspaceSlug]/@header/profile/[userId]/header.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 // ui
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
 import { Breadcrumbs, CustomMenu } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
@@ -15,11 +17,10 @@ type TUserProfileHeader = {
   type?: string | undefined;
 };
 
-export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
+const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
   const { type = undefined } = props;
   // router
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
+  const { workspaceSlug, userId } = useParams();
   // store hooks
   const { toggleProfileSidebar, profileSidebarCollapsed } = useAppTheme();
   const {
@@ -89,3 +90,5 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
     </div>
   );
 });
+
+export default UserProfileHeader;

web/components/profile/profile-issues-mobile-header.tsx → web/app/[workspaceSlug]/@header/profile/[userId]/mobile-header.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
@@ -18,8 +20,7 @@ import { useIssues, useLabel } from "@/hooks/store";
 
 const ProfileIssuesMobileHeader = observer(() => {
   // router
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
+  const { workspaceSlug, userId } = useParams();
   // store hook
   const {
     issuesFilter: { issueFilters, updateFilters },

web/app/[workspaceSlug]/@header/profile/[userId]/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "./header";
+
+const ProfileOverviewHeader = () => <AppHeaderWrapper header={<UserProfileHeader type="Summary" />} />;
+
+export default ProfileOverviewHeader;

web/app/[workspaceSlug]/@header/profile/[userId]/subscribed/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+import ProfileIssuesMobileHeader from "../mobile-header";
+
+const ProfileSubscribedHeader = () => (
+  <AppHeaderWrapper header={<UserProfileHeader type="Subscribed" />} mobileHeader={<ProfileIssuesMobileHeader />} />
+);
+
+export default ProfileSubscribedHeader;

web/app/[workspaceSlug]/@header/projects/[projectId]/archives/[...default-header]/page.tsx

@@ -0,0 +1,2 @@
+import DefaultProjectArchivesHeader from "../page";
+export default DefaultProjectArchivesHeader;

web/components/headers/project-archives.tsx → web/app/[workspaceSlug]/@header/projects/[projectId]/archives/header.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useParams, usePathname, useRouter } from "next/navigation";
 // ui
 import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
 // components
@@ -12,11 +12,12 @@ import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
-export const ProjectArchivesHeader: FC = observer(() => {
+const ProjectArchivesHeader: FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-  const activeTab = router.pathname.split("/").pop();
+  const { workspaceSlug, projectId } = useParams();
+  const pathname = usePathname();
+  const activeTab = pathname.split("/").pop();
   // store hooks
   const {
     issuesFilter: { issueFilters },
@@ -93,3 +94,5 @@ export const ProjectArchivesHeader: FC = observer(() => {
     </div>
   );
 });
+
+export default ProjectArchivesHeader;

web/components/headers/project-archived-issue-details.tsx → web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/header.tsx

@@ -1,27 +1,23 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
-// hooks
+// ui
 import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
+// components
 import { BreadcrumbLink, Logo } from "@/components/common";
+// constants
 import { ISSUE_DETAILS } from "@/constants/fetch-keys";
+// hooks
 import { useProject } from "@/hooks/store";
-// components
-// ui
-// types
-import { IssueArchiveService } from "@/services/issue";
-// constants
 // services
-// helpers
-// components
+import { IssueArchiveService } from "@/services/issue";
 
 const issueArchiveService = new IssueArchiveService();
 
-export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
+const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   // router
-  const router = useRouter();
-  const { workspaceSlug, projectId, archivedIssueId } = router.query;
+  const { workspaceSlug, projectId, archivedIssueId } = useParams();
   // store hooks
   const { currentProjectDetails } = useProject();
 
@@ -96,3 +92,5 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
     </div>
   );
 });
+
+export default ProjectArchivedIssueDetailsHeader;

web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import ProjectArchivedIssueDetailsHeader from "./header";
+
+const ProjectArchivedIssueDetailsHeaderPage = () => <AppHeaderWrapper header={<ProjectArchivedIssueDetailsHeader />} />;
+
+export default ProjectArchivedIssueDetailsHeaderPage;

web/app/[workspaceSlug]/@header/projects/[projectId]/archives/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import ProjectArchivesHeader from "./header";
+
+const ProjectArchivesHeaderPage = () => <AppHeaderWrapper header={<ProjectArchivesHeader />} />;
+
+export default ProjectArchivesHeaderPage;