base

plane-src/packages/ui/src/tabs/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./tabs";
+export * from "./tab-list";

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

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Tab } from "@headlessui/react";
+import type { LucideProps } from "lucide-react";
+import type { FC } from "react";
+import React from "react";
+// helpers
+import { cn } from "../utils";
+
+export type TabListItem = {
+  key: string;
+  icon?: FC<LucideProps>;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+type TTabListProps = {
+  tabs: TabListItem[];
+  tabListClassName?: string;
+  tabClassName?: string;
+  size?: "sm" | "md" | "lg";
+  selectedTab?: string;
+  autoWrap?: boolean;
+  onTabChange?: (key: string) => void;
+};
+
+export function TabList({ autoWrap = true, ...props }: TTabListProps) {
+  return autoWrap ? (
+    <Tab.Group>
+      <TabListInner {...props} />
+    </Tab.Group>
+  ) : (
+    <TabListInner {...props} />
+  );
+}
+
+function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selectedTab, onTabChange }: TTabListProps) {
+  return (
+    <Tab.List
+      as="div"
+      className={cn(
+        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md bg-layer-1 p-0.5 text-13",
+        tabListClassName
+      )}
+    >
+      {tabs.map((tab) => (
+        <Tab
+          className={({ selected }) =>
+            cn(
+              "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-sm p-1 font-medium text-primary transition-all outline-none focus:outline-none",
+              (selectedTab ? selectedTab === tab.key : selected)
+                ? "shadow-sm bg-layer-transparent-active text-primary"
+                : tab.disabled
+                  ? "cursor-not-allowed text-placeholder"
+                  : "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
+              {
+                "text-11": size === "sm",
+                "text-13": size === "md",
+                "text-14": size === "lg",
+              },
+              tabClassName
+            )
+          }
+          key={tab.key}
+          onClick={() => {
+            if (!tab.disabled) {
+              onTabChange?.(tab.key);
+              tab.onClick?.();
+            }
+          }}
+          disabled={tab.disabled}
+        >
+          {tab.icon && (
+            <tab.icon className={cn({ "size-3": size === "sm", "size-4": size === "md", "size-5": size === "lg" })} />
+          )}
+          {tab.label}
+        </Tab>
+      ))}
+    </Tab.List>
+  );
+}

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

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Tab } from "@headlessui/react";
+import React, { Fragment, useEffect, useState } from "react";
+// helpers
+import { useLocalStorage } from "@plane/hooks";
+import { cn } from "../utils";
+// types
+import type { TabListItem } from "./tab-list";
+import { TabList } from "./tab-list";
+
+export type TabContent = {
+  content: React.ReactNode;
+};
+
+export type TabItem = TabListItem & TabContent;
+
+type TTabsProps = {
+  tabs: TabItem[];
+  storageKey?: string;
+  actions?: React.ReactNode;
+  defaultTab?: string;
+  containerClassName?: string;
+  tabListContainerClassName?: string;
+  tabListClassName?: string;
+  tabClassName?: string;
+  tabPanelClassName?: string;
+  size?: "sm" | "md" | "lg";
+  storeInLocalStorage?: boolean;
+};
+
+export function Tabs(props: TTabsProps) {
+  const {
+    tabs,
+    storageKey,
+    actions,
+    defaultTab = tabs[0]?.key,
+    containerClassName = "",
+    tabListContainerClassName = "",
+    tabListClassName = "",
+    tabClassName = "",
+    tabPanelClassName = "",
+    size = "md",
+    storeInLocalStorage = true,
+  } = props;
+  // local storage
+  const { storedValue, setValue } = useLocalStorage(
+    storeInLocalStorage && storageKey ? `tab-${storageKey}` : `tab-${tabs[0]?.key}`,
+    defaultTab
+  );
+  // state
+  const [selectedTab, setSelectedTab] = useState(storedValue ?? defaultTab);
+
+  useEffect(() => {
+    if (storeInLocalStorage) {
+      setValue(selectedTab);
+    }
+  }, [selectedTab, setValue, storeInLocalStorage, storageKey]);
+
+  const currentTabIndex = (tabKey: string): number => tabs.findIndex((tab) => tab.key === tabKey);
+
+  const handleTabChange = (key: string) => {
+    setSelectedTab(key);
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      <Tab.Group defaultIndex={currentTabIndex(selectedTab)}>
+        <div className={cn("flex h-full w-full flex-col gap-2", containerClassName)}>
+          <div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
+            <TabList
+              tabs={tabs}
+              tabListClassName={tabListClassName}
+              tabClassName={tabClassName}
+              size={size}
+              onTabChange={handleTabChange}
+            />
+            {actions && <div className="flex-grow">{actions}</div>}
+          </div>
+          <Tab.Panels as={Fragment}>
+            {tabs.map((tab) => (
+              <Tab.Panel key={tab.key} as="div" className={cn("relative outline-none", tabPanelClassName)}>
+                {tab.content}
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </div>
+      </Tab.Group>
+    </div>
+  );
+}