refactor: cleanup

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx

@@ -6,8 +6,8 @@ import { useRouter } from "next/navigation";
 // plane package imports
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TAnalyticsTabsBase } from "@plane/types";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@plane/propel/tabs";
+import { TAnalyticsTabsBase } from "@plane/types";
 // components
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
 import { PageHead } from "@/components/core/page-title";

apps/web/core/components/cycles/active-cycle/cycle-stats.tsx

@@ -7,8 +7,8 @@ import { CalendarCheck } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { PriorityIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@plane/propel/tabs";
+import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType, ICycle, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Loader, Avatar } from "@plane/ui";

apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx

@@ -4,8 +4,8 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTranslation } from "@plane/i18n";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@plane/propel/tabs";
 import { StateGroupIcon } from "@plane/propel/icons";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@plane/propel/tabs";
 import {
   IIssueFilterOptions,
   IIssueFilters,

apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx

@@ -4,8 +4,8 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTranslation } from "@plane/i18n";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@plane/propel/tabs";
 import { StateGroupIcon } from "@plane/propel/icons";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@plane/propel/tabs";
 import {
   IIssueFilterOptions,
   IIssueFilters,

apps/web/core/components/pages/navigation-pane/root.tsx

@@ -2,9 +2,9 @@ import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ArrowRightCircle } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@plane/propel/tabs";
 // plane imports
-import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@plane/propel/tooltip";
 // hooks
 import { useQueryParams } from "@/hooks/use-query-params";
@@ -106,10 +106,10 @@ export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {
           <ActiveExtension.component page={page} extensionData={ActiveExtension.data} storeType={storeType} />
         ) : showNavigationTabs ? (
           <Tabs
-        value={activeTab}
-        onValueChange={handleTabChange}
-        className="size-full p-3.5 pt-0 overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
-      >
+            value={activeTab}
+            onValueChange={handleTabChange}
+            className="size-full p-3.5 pt-0 overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
+          >
             <PageNavigationPaneTabsList />
             <PageNavigationPaneTabPanelsRoot page={page} versionHistory={versionHistory} />
           </Tabs>

apps/web/core/components/pages/navigation-pane/tabs-list.tsx

@@ -1,6 +1,6 @@
+import { useTranslation } from "@plane/i18n";
 import { TabsList, TabsTrigger } from "@plane/propel/tabs";
 // plane imports
-import { useTranslation } from "@plane/i18n";
 // plane web components
 import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
 

apps/web/core/components/pages/version/editor.tsx

@@ -3,8 +3,8 @@ import { useParams } from "next/navigation";
 // plane imports
 import type { TDisplayConfig } from "@plane/editor";
 import type { JSONContent, TPageVersion } from "@plane/types";
-import { isJSONContentEmpty } from "@plane/utils";
 import { Loader } from "@plane/ui";
+import { isJSONContentEmpty } from "@plane/utils";
 // components
 import { DocumentEditor } from "@/components/editor/document/editor";
 // hooks

packages/propel/package.json

@@ -79,4 +79,4 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   }
-}
+}

packages/ui/src/tabs/composable-tabs.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
-import { cn } from "../utils";
-
-function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col w-full h-full", className)} {...props} />;
-}
-
-function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60 relative",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
-  return (
-    <TabsPrimitive.Tab
-      data-slot="tabs-trigger"
-      className={cn(
-        "flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all rounded",
-        "data-[state=active]:bg-custom-background-100 data-[state=active]:text-custom-text-100 data-[state=active]:shadow-sm",
-        "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60",
-        "disabled:text-custom-text-400 disabled:cursor-not-allowed",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>) {
-  return <TabsPrimitive.Panel data-slot="tabs-content" className={cn("relative outline-none", className)} {...props} />;
-}
-
-function TabsIndicator({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-sm bg-custom-background-100 shadow-sm transition-[width,transform] duration-200 ease-in-out",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };

packages/ui/src/tabs/tab-list.tsx

@@ -21,7 +21,14 @@ type TTabListProps<TKey extends string> = {
   onTabChange?: (key: TKey) => void;
 };
 
-export const TabList = <TKey extends string>({ tabs, tabListClassName, tabClassName, size = "md", selectedTab, onTabChange }: TTabListProps<TKey>) => (
+export const TabList = <TKey extends string>({
+  tabs,
+  tabListClassName,
+  tabClassName,
+  size = "md",
+  selectedTab,
+  onTabChange,
+}: TTabListProps<TKey>) => (
   <Tab.List
     className={cn(
       "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60",