base

2026-04-18 18:39:25 +03:00
commit 3ba092b60c
4944 changed files with 497564 additions and 0 deletions
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { TabNavigationItem } from "./tab-navigation-item";
+export { TabNavigationList } from "./tab-navigation-list";
+export type { TTabNavigationItemProps, TTabNavigationListProps } from "./tab-navigation-types";
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../utils";
+import type { TTabNavigationItemProps } from "./tab-navigation-types";
+
+export function TabNavigationItem({ children, isActive, className }: TTabNavigationItemProps) {
+  return (
+    <div
+      className={cn(
+        "relative z-10 flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors",
+        isActive ? "text-primary" : "text-secondary hover:bg-layer-transparent-hover hover:text-primary",
+        className
+      )}
+    >
+      <AnimatePresence>
+        {isActive && (
+          <motion.div
+            className="absolute inset-0 -z-10 rounded-md bg-layer-transparent-active"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+            transition={{
+              duration: 0.3,
+              ease: [0.4, 0, 0.2, 1],
+            }}
+          />
+        )}
+      </AnimatePresence>
+      {children}
+    </div>
+  );
+}
+
+TabNavigationItem.displayName = "TabNavigationItem";
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { LayoutGroup } from "framer-motion";
+import { cn } from "../utils";
+import type { TTabNavigationListProps } from "./tab-navigation-types";
+
+export function TabNavigationList({ children, className }: TTabNavigationListProps) {
+  return (
+    <LayoutGroup id="tab-navigation">
+      <div className={cn("relative flex items-center gap-1 rounded-md", className)}>{children}</div>
+    </LayoutGroup>
+  );
+}
+
+TabNavigationList.displayName = "TabNavigationList";
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+
+export type TTabNavigationItemProps = {
+  /** The content to display inside the tab (icons, text, etc.) */
+  children: ReactNode;
+  /** Whether this tab is currently active */
+  isActive: boolean;
+  /** Additional CSS class names */
+  className?: string;
+};
+
+export type TTabNavigationListProps = {
+  /** The navigation items (each should be a TabNavigationItem wrapped in a routing component) */
+  children: ReactNode;
+  /** Additional CSS class names for the container */
+  className?: string;
+};
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+// icons import
+import { OverviewIcon } from "../icons/overview-icon";
+import { CycleIcon } from "../icons/project/cycle-icon";
+import { IntakeIcon } from "../icons/project/intake-icon";
+import { ModuleIcon } from "../icons/project/module-icon";
+import { PageIcon } from "../icons/project/page-icon";
+import { ViewsIcon } from "../icons/project/view-icon";
+import { WorkItemsIcon } from "../icons/project/work-items-icon";
+// tab navigation import
+import { TabNavigationItem } from "./tab-navigation-item";
+import { TabNavigationList } from "./tab-navigation-list";
+
+const meta: Meta<typeof TabNavigationList> = {
+  title: "Components/TabNavigation",
+  component: TabNavigationList,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[900px] bg-surface-1 p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    const [activeNavTab, setActiveNavTab] = useState("work_items");
+
+    // Example navigation items (matching actual Plane project navigation)
+    const navItems = [
+      { key: "overview", name: "Overview", href: "#overview", icon: OverviewIcon },
+      { key: "work_items", name: "Work items", href: "#work_items", icon: WorkItemsIcon },
+      { key: "cycles", name: "Cycles", href: "#cycles", icon: CycleIcon },
+      { key: "modules", name: "Modules", href: "#modules", icon: ModuleIcon },
+      { key: "views", name: "Views", href: "#views", icon: ViewsIcon },
+      { key: "pages", name: "Pages", href: "#pages", icon: PageIcon },
+      { key: "intake", name: "Intake", href: "#intake", icon: IntakeIcon },
+    ];
+
+    return (
+      <div className="space-y-8">
+        {/* Example 1: Navigation with anchor tags (simulating React Router Link) */}
+        <div className="space-y-3">
+          <div className="text-11 font-medium tracking-wide text-tertiary uppercase">
+            With Navigation Links (e.g., React Router)
+          </div>
+          <TabNavigationList>
+            {navItems.map((item) => (
+              <a
+                key={item.key}
+                href={item.href}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setActiveNavTab(item.key);
+                }}
+              >
+                <TabNavigationItem isActive={activeNavTab === item.key}>
+                  <div className="z-10 flex items-center gap-2">
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.name}</span>
+                  </div>
+                </TabNavigationItem>
+              </a>
+            ))}
+          </TabNavigationList>
+          <div className="text-11 text-tertiary">
+            Active: <span className="font-mono text-primary">{activeNavTab}</span>
+          </div>
+        </div>
+
+        {/* Code example */}
+        <div className="mt-6 rounded-md bg-layer-1 p-4">
+          <div className="mb-2 text-11 font-medium text-secondary">Example Code:</div>
+          <pre className="overflow-x-auto text-11 text-tertiary">
+            {`// With React Router Link
+<TabNavigationList>
+  {items.map(item => (
+    <Link key={item.key} to={item.href}>
+      <TabNavigationItem isActive={pathname === item.href}>
+        <item.icon className="h-4 w-4" />
+        <span>{item.name}</span>
+      </TabNavigationItem>
+    </Link>
+  ))}
+</TabNavigationList>
+`}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};