@noya-app/noya-designsystem 0.1.61 → 0.1.63

package/src/components/Tabs.tsx

@@ -0,0 +1,46 @@
+import { useControlledOrUncontrolled } from "@noya-app/react-utils";
+import * as React from "react";
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { cx } from "../utils/classNames";
+import { Divider } from "./Divider";
+import { isSelectableMenuItem, MenuItem } from "./internal/Menu";
+import { SegmentedControl } from "./SegmentedControl";
+
+export type TabsProps<T extends string = string> = {
+  value?: T;
+  onValueChange?: (value: T) => void;
+  items: MenuItem<T>[];
+  renderContent: ({ value }: { value: T }) => React.ReactNode;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export function Tabs<T extends string = string>({
+  value,
+  onValueChange,
+  items,
+  renderContent,
+  ...props
+}: TabsProps<T>) {
+  const selectableItems = items.filter(isSelectableMenuItem);
+
+  const [activeTab, setActiveTab] = useControlledOrUncontrolled({
+    defaultValue: selectableItems.at(0)?.value ?? ("" as T),
+    value,
+    onChange: onValueChange,
+  });
+
+  return (
+    <div {...props} className={cx("flex flex-col", props.className)}>
+      <div className="flex flex-row px-3">
+        <SegmentedControl
+          className="flex-1"
+          value={activeTab}
+          onValueChange={setActiveTab}
+          variant="tabs"
+          items={selectableItems}
+        />
+      </div>
+      <Divider />
+      {renderContent({ value: activeTab })}
+    </div>
+  );
+}

package/src/components/Toolbar.tsx

@@ -1,5 +1,5 @@
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, ReactNode } from "react";
 
 import { memoGeneric } from "@noya-app/react-utils";
 import { BaseToolbar } from "./BaseToolbar";
@@ -9,17 +9,17 @@ import { DropdownMenu } from "./DropdownMenu";
 import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
+  KeyboardShortcut,
   MenuItem,
+  PopoverMenuItem,
   SelectableMenuItem,
   SubMenuItem,
 } from "./internal/Menu";
+import { Popover } from "./Popover";
+import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 
-const iconButtonStyle = {
-  height: 27,
-  width: 27,
-  minWidth: 27,
-};
+const SIDE_OFFSET = 6;
 
 export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
   T extends string,
@@ -55,24 +55,101 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
   );
 });
 
+export const ToolbarShortcut = ({
+  shortcut,
+  label,
+}: {
+  shortcut: string;
+  label?: ReactNode;
+}) => {
+  return (
+    <div className="flex items-center">
+      {label}
+      <Spacer.Horizontal size={6} />
+      <KeyboardShortcut shortcut={shortcut} />
+    </div>
+  );
+};
+
+export const ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover({
+  item,
+  portalContainer,
+}: {
+  item: PopoverMenuItem;
+  portalContainer?: HTMLElement | null;
+}) {
+  const {
+    disabled,
+    icon,
+    title,
+    tooltip,
+    content: itemContent,
+    checked,
+  } = item;
+  const [open, setOpen] = React.useState(false);
+
+  const content = (
+    <span>
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
+        side="top"
+        showArrow={false}
+        sideOffset={SIDE_OFFSET}
+        portalContainer={portalContainer}
+        trigger={
+          <Button
+            disabled={disabled}
+            active={checked || open}
+            icon={icon}
+            iconRight="DropdownChevronIcon"
+          >
+            {title}
+          </Button>
+        }
+      >
+        {typeof itemContent === "function"
+          ? itemContent({ close: () => setOpen(false) })
+          : itemContent}
+      </Popover>
+    </span>
+  );
+
+  return tooltip && !open ? (
+    <Tooltip
+      sideOffset={SIDE_OFFSET}
+      side="top"
+      content={tooltip}
+      portalContainer={portalContainer}
+    >
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+});
+
 export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
   T extends string,
 >({
   item,
   onSelectMenuItem,
   as,
+  activeValue,
+  tooltipSide,
 }: {
   item: SelectableMenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
   as?: ComponentProps<typeof Button>["as"];
+  activeValue?: T;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
 }) {
   const content = (
     <Button
       as={as}
       disabled={item.disabled}
-      active={item.checked}
+      active={item.checked || activeValue === item.value}
       icon={item.icon}
-      style={item.icon && !item.title ? iconButtonStyle : undefined}
       {...(as === "a" && { href: item.value })}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
@@ -85,7 +162,7 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
   );
 
   return item.tooltip ? (
-    <Tooltip sideOffset={10} content={item.tooltip}>
+    <Tooltip sideOffset={SIDE_OFFSET} content={item.tooltip} side={tooltipSide}>
       {content}
     </Tooltip>
   ) : (
@@ -99,23 +176,32 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   item,
   onSelectMenuItem,
   buttonAs,
+  activeValue,
+  tooltipSide,
+  portalContainer,
 }: {
   item: MenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
   buttonAs?: ComponentProps<typeof Button>["as"];
+  activeValue?: T;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+  portalContainer?: HTMLElement | null;
 }) {
   if (item.type === "sectionHeader") return null;
-
   if (item.type === "separator") {
     return <DividerVertical overflow={4} />;
   }
-
+  if (item.type === "popover") {
+    return <ToolbarMenuPopover item={item} portalContainer={portalContainer} />;
+  }
   if (isSelectableMenuItem(item)) {
     return (
       <ToolbarMenuButton
         item={item}
         onSelectMenuItem={onSelectMenuItem}
         as={buttonAs}
+        activeValue={activeValue}
+        tooltipSide={tooltipSide}
       />
     );
   }
@@ -129,10 +215,16 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
   buttonAs,
+  activeValue,
+  tooltipSide,
+  portalContainer,
 }: {
   items: MenuItem<T>[];
   onSelectMenuItem?: (value: T) => void;
   buttonAs?: ComponentProps<typeof Button>["as"];
+  activeValue?: T;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+  portalContainer?: HTMLElement | null;
 }) {
   return (
     <>
@@ -143,6 +235,9 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
             item={item}
             onSelectMenuItem={onSelectMenuItem}
             buttonAs={buttonAs}
+            activeValue={activeValue}
+            tooltipSide={tooltipSide}
+            portalContainer={portalContainer}
           />
         );
       })}

package/src/components/Tooltip.tsx

@@ -1,25 +1,26 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { ComponentProps } from "react";
 import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
 import { textStyles } from "./Text";
 
-// const Arrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
-//   fill: theme.colors.popover.background,
-// }));
-
 interface Props {
   children: React.ReactNode;
   content: React.ReactNode;
   sideOffset?: number;
+  side?: ComponentProps<typeof TooltipPrimitive.Content>["side"];
+  portalContainer?: HTMLElement | null;
 }
 
 export const Tooltip = React.memo(function Tooltip({
   children,
   content,
   sideOffset = 2,
+  side = "bottom",
+  portalContainer,
 }: Props) {
   const portalScopeId = usePortalScopeId();
 
@@ -27,17 +28,16 @@ export const Tooltip = React.memo(function Tooltip({
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root>
         <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Portal container={portalContainer}>
           <TooltipPrimitive.Content
             {...portalScopeProps(portalScopeId)}
-            side="bottom"
+            side={side}
             align="center"
             sideOffset={sideOffset}
             collisionPadding={8}
-            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-popover border border-solid border-divider-strong z-menu`}
+            className={`${textStyles.small} text-text rounded-sm p-2 bg-popover-background shadow-tooltip z-menu`}
           >
             {content}
-            {/* <Arrow /> */}
           </TooltipPrimitive.Content>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>

package/src/components/file-explorer/FileExplorerLayout.tsx

@@ -1,7 +1,8 @@
 import {
+  ActivityIndicator,
   Banner,
   BannerProps,
-  IconButton,
+  Button,
   Section,
   SectionProps,
 } from "@noya-app/noya-designsystem";
@@ -28,20 +29,25 @@ export const FileExplorerLayout = ({
 export const FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
+  isUploading,
   children,
 }: {
   showUploadButton?: boolean;
   onUpload?: () => void;
+  isUploading?: boolean;
   children?: React.ReactNode;
 }) => (
   <div className="flex items-center gap-2">
     {showUploadButton && (
-      <IconButton
-        iconName="UploadIcon"
+      <Button
+        icon={isUploading ? <ActivityIndicator size={15} /> : "UploadIcon"}
         onClick={onUpload}
-        aria-label="Upload media"
-        tooltip="Upload media"
-      />
+        aria-label="Upload file"
+        tooltip="Upload file"
+        disabled={isUploading}
+      >
+        Upload
+      </Button>
     )}
     {children}
   </div>

package/src/components/internal/Menu.tsx

@@ -101,16 +101,26 @@ export type SubMenuItem<T extends string> = BaseMenuItem & {
   id: string;
 };
 
+export type PopoverMenuItem = BaseMenuItem & {
+  type: "popover";
+  id: string;
+  content: ReactNode | ((props: { close: () => void }) => ReactNode);
+  shortcut?: string;
+  tooltip?: ReactNode;
+};
+
 export type NonSelectableMenuItem<T extends string> =
   | SeparatorItem
   | SectionHeaderMenuItem
-  | SubMenuItem<T>;
+  | SubMenuItem<T>
+  | PopoverMenuItem;
 
 export type MenuItem<T extends string> =
   | SeparatorItem
   | SelectableMenuItem<T>
   | SectionHeaderMenuItem
-  | SubMenuItem<T>;
+  | SubMenuItem<T>
+  | PopoverMenuItem;
 
 type ScoredSelectableMenuItem<T extends string> = SelectableMenuItem<T> &
   IScoredItem;
@@ -142,6 +152,10 @@ export const isSelectableMenuItemWithScore = (
 ): item is ScoredSelectableMenuItem<string> =>
   isSelectableMenuItem(item) && "index" in item && "score" in item;
 
+export const isPopoverMenuItem = (
+  item: MenuItem<string>
+): item is PopoverMenuItem => item.type === "popover";
+
 export const getMenuItemKey = <T extends string>(
   item: MenuItem<T>,
   index: number
@@ -153,6 +167,8 @@ export const getMenuItemKey = <T extends string>(
       return item.id;
     case "submenu":
       return item.id;
+    case "popover":
+      return item.id;
     default:
       return item.value;
   }
@@ -191,6 +207,7 @@ function getKeyboardShortcuts<T extends string>(
 ): [string, T][] {
   if (item.type === "separator") return [];
   if (item.type === "sectionHeader") return [];
+  if (item.type === "popover") return [];
 
   if (item.type === "submenu") return item.items.flatMap(getKeyboardShortcuts);
 

package/src/components/internal/MenuViewport.tsx

@@ -7,7 +7,7 @@ import {
   usePortalScopeId,
 } from "../../contexts/PortalScopeContext";
 import { cx } from "../../utils/classNames";
-import { MenuItem, SectionHeader, styles } from "./Menu";
+import { isSelectableMenuItem, MenuItem, SectionHeader, styles } from "./Menu";
 import { SelectItem } from "./SelectItem";
 
 type MenuSeparatorComponent = React.FC<{ className?: string }>;
@@ -66,8 +66,7 @@ export const MenuViewport = <T extends string>({
   const portalScopeId = usePortalScopeId();
 
   const hasCheckedItem = items.some(
-    (item) =>
-      item.type !== "separator" && item.type !== "sectionHeader" && item.checked
+    (item) => isSelectableMenuItem(item) && item.checked
   );
 
   return (
@@ -91,6 +90,8 @@ export const MenuViewport = <T extends string>({
                 indented={hasCheckedItem}
               />
             );
+          case "popover":
+            return null;
           case "submenu":
             if (
               item.items &&

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useLayoutEffect, useRef, useState } from "react";
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import {
   EDITOR_PANEL_GROUP_ID,
   LEFT_SIDEBAR_ID,
@@ -7,7 +8,10 @@ import {
 import { Drawer } from "../Drawer";
 import { LayoutProps } from "./types";
 
-export const DrawerWorkspaceLayout = memo(function DrawerWorkspaceLayout({
+export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
+  LeftTab extends string = string,
+  RightTab extends string = string,
+>({
   leftPanel,
   leftSidebarRef,
   rightPanel,
@@ -15,7 +19,7 @@ export const DrawerWorkspaceLayout = memo(function DrawerWorkspaceLayout({
   centerPanel,
   internalLayoutState,
   handleChangeLayoutState,
-}: LayoutProps) {
+}: LayoutProps<LeftTab, RightTab>) {
   const portalContainer = useRef<HTMLDivElement>(null);
   const [mounted, setMounted] = useState(false);
 

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useRef } from "react";
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { ComponentProps, useRef } from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -13,9 +14,17 @@ import {
   RIGHT_SIDEBAR_ID,
   usePreservePanelSize,
 } from "../../hooks/usePreservePanelSize";
+import { cssVarNames } from "../../theme";
+import { DividerVertical } from "../Divider";
+import { MenuItem } from "../internal/Menu";
+import { ToolbarMenu } from "../Toolbar";
+import { Tooltip } from "../Tooltip";
 import { LayoutProps } from "./types";
 
-export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
+export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
+  LeftTab extends string,
+  RightTab extends string,
+>({
   leftPanel,
   rightPanel,
   centerPanel,
@@ -26,8 +35,14 @@ export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
   internalLayoutState,
   leftSidebarRef,
   rightSidebarRef,
+  leftTabItems,
+  rightTabItems,
+  leftTabValue,
+  rightTabValue,
+  onChangeLeftTab,
+  onChangeRightTab,
   handleChangeLayoutState,
-}: LayoutProps) {
+}: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
@@ -46,6 +61,33 @@ export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
     >
       {leftPanel && (
         <>
+          {leftTabItems && (
+            <VerticalTabMenu
+              tooltipSide="right"
+              items={leftTabItems}
+              activeValue={leftTabValue}
+              isSidebarCollapsed={
+                internalLayoutState?.leftSidebarCollapsed ?? false
+              }
+              onChange={(value) => {
+                if (value === leftTabValue) {
+                  if (leftSidebarRef.current?.isExpanded()) {
+                    leftSidebarRef.current?.collapse();
+                  } else {
+                    leftSidebarRef.current?.expand();
+                  }
+                } else {
+                  if (!leftSidebarRef.current?.isExpanded()) {
+                    leftSidebarRef.current?.expand();
+                  }
+                  onChangeLeftTab?.(value);
+                }
+              }}
+            />
+          )}
+          {leftTabItems && !internalLayoutState?.leftSidebarCollapsed && (
+            <DividerVertical className="h-full" />
+          )}
           <Panel
             id={LEFT_SIDEBAR_ID}
             className="relative"
@@ -95,8 +137,66 @@ export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
           >
             {internalLayoutState?.rightSidebarCollapsed ? null : rightPanel}
           </Panel>
+          {rightTabItems && !internalLayoutState?.rightSidebarCollapsed && (
+            <DividerVertical className="h-full" />
+          )}
+          {rightTabItems && (
+            <VerticalTabMenu
+              tooltipSide="left"
+              items={rightTabItems}
+              activeValue={rightTabValue}
+              isSidebarCollapsed={
+                internalLayoutState?.rightSidebarCollapsed ?? false
+              }
+              onChange={(value) => {
+                if (value === rightTabValue) {
+                  if (rightSidebarRef.current?.isExpanded()) {
+                    rightSidebarRef.current?.collapse();
+                  } else {
+                    rightSidebarRef.current?.expand();
+                  }
+                } else {
+                  if (!rightSidebarRef.current?.isExpanded()) {
+                    rightSidebarRef.current?.expand();
+                  }
+                  onChangeRightTab?.(value);
+                }
+              }}
+            />
+          )}
         </>
       )}
     </PanelGroup>
   );
 });
+
+function VerticalTabMenu<TabValue extends string>({
+  items,
+  activeValue,
+  isSidebarCollapsed,
+  onChange,
+  tooltipSide,
+}: {
+  items: MenuItem<TabValue>[];
+  activeValue: TabValue | undefined;
+  isSidebarCollapsed: boolean;
+  onChange: (value: TabValue) => void;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+}) {
+  return (
+    <div
+      className="w-[47px] h-full bg-sidebar-background flex flex-col items-center py-3 gap-3"
+      style={{
+        [cssVarNames.colors.inputBackground]: "transparent",
+        [cssVarNames.colors.buttonBackground]: "transparent",
+      }}
+    >
+      <ToolbarMenu
+        items={items}
+        activeValue={isSidebarCollapsed ? undefined : activeValue}
+        onSelectMenuItem={onChange}
+        tooltipSide={tooltipSide}
+      />
+    </div>
+  );
+}