@noya-app/noya-designsystem 0.1.62 → 0.1.64

package/src/components/Tabs.tsx

@@ -0,0 +1,48 @@
+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;
+  variant?: "default" | "tabs" | "buttons";
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export function Tabs<T extends string = string>({
+  value,
+  onValueChange,
+  items,
+  renderContent,
+  variant = "tabs",
+  ...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={variant}
+          items={selectableItems}
+        />
+      </div>
+      <Divider />
+      {renderContent({ value: activeTab })}
+    </div>
+  );
+}

package/src/components/Text.tsx

@@ -1,4 +1,6 @@
-import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from "react";
+"use client";
+
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
 import { ThemeColor } from "../theme";
 import { camelToKebabCase, KebabToCamelCase } from "../theme/themeUtils";
 import { cx } from "../utils/classNames";
@@ -17,7 +19,7 @@ type Variant =
   | "code"
   | "label";
 
-const elements: Record<Variant, keyof ReactHTML> = {
+const elements: Record<Variant, React.HTMLElementType> = {
   title: "h1",
   subtitle: "h1",
   heading1: "h1",
@@ -48,7 +50,7 @@ export const textStyles: Record<Variant, string> = {
 } as const;
 
 export type TextProps = {
-  as?: keyof ReactHTML;
+  as?: React.HTMLElementType;
   href?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -78,11 +80,10 @@ export const Text = forwardRef(function Text(
   }: TextProps,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
-  const Component = as ?? elements[variant] ?? "span";
+  const Component = (as ?? elements[variant] ?? "span") as "span";
 
   return (
     <Component
-      // @ts-expect-error expected to be many semantic html elements
       ref={forwardedRef}
       className={cx(
         `${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} `,

package/src/components/TextArea.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { assignRef } from "@noya-app/react-utils";
 import React, {
   ComponentProps,

package/src/components/Toast.tsx

@@ -1,4 +1,4 @@
-import * as ToastPrimitive from "@radix-ui/react-toast";
+import { Toast as ToastPrimitive } from "radix-ui";
 import React, { ReactNode } from "react";
 import { IconButton } from "./IconButton";
 import { textStyles } from "./Text";

package/src/components/Toolbar.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 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 +11,18 @@ import { DropdownMenu } from "./DropdownMenu";
 import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
+  KeyboardShortcut,
   MenuItem,
+  PopoverMenuItem,
   SelectableMenuItem,
   SubMenuItem,
 } from "./internal/Menu";
+import { Popover } from "./Popover";
+import { Spacer } from "./Spacer";
+import { ToolbarDrawer } from "./ToolbarDrawer";
 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 +58,102 @@ 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 isActive = item.checked || activeValue === item.value;
   const content = (
     <Button
       as={as}
       disabled={item.disabled}
-      active={item.checked}
+      active={isActive}
       icon={item.icon}
-      style={item.icon && !item.title ? iconButtonStyle : undefined}
       {...(as === "a" && { href: item.value })}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
@@ -84,8 +165,10 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
     </Button>
   );
 
-  return item.tooltip ? (
-    <Tooltip sideOffset={10} content={item.tooltip}>
+  return item.drawer && isActive ? (
+    <ToolbarDrawer trigger={content}>{item.drawer}</ToolbarDrawer>
+  ) : item.tooltip ? (
+    <Tooltip sideOffset={SIDE_OFFSET} content={item.tooltip} side={tooltipSide}>
       {content}
     </Tooltip>
   ) : (
@@ -99,23 +182,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 +221,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 +241,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/ToolbarDrawer.tsx

@@ -0,0 +1,29 @@
+import React, { ForwardedRef, forwardRef, memo, ReactNode } from "react";
+
+type ToolbarDrawerProps = {
+  children: ReactNode;
+  trigger: ReactNode;
+  sideOffset?: number;
+};
+
+export const ToolbarDrawer = memo(
+  forwardRef(function ToolbarDrawer(
+    { children, trigger, sideOffset = 8 }: ToolbarDrawerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) {
+    return (
+      <div className="relative" ref={ref}>
+        <div
+          className="absolute bottom-full left-1/2 -translate-x-1/2 rounded-t-lg border border-toolbar-drawer-border border-b-transparent bg-toolbar-drawer-background -z-10"
+          style={{
+            marginBottom: `${sideOffset}px`,
+            boxShadow: "0px -2px 12px 0px var(--n-toolbar-drawer-shadow)",
+          }}
+        >
+          {children}
+        </div>
+        {trigger}
+      </div>
+    );
+  })
+);

package/src/components/Tooltip.tsx

@@ -1,25 +1,26 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 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/TreeView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, { ForwardedRef, ReactNode, useCallback, useContext } from "react";
 import { IconButton } from "./IconButton";

package/src/components/UserPointer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { memo, useMemo } from "react";
 import { cx } from "../utils/classNames";
 import { colorFromString } from "../utils/colorFromString";

package/src/components/ai-assistant/AIAssistantLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { IconButton } from "../IconButton";
 
 import { cssVars } from "../../theme";

package/src/components/blocks/ImageBlockComponent.tsx

@@ -0,0 +1,156 @@
+import { ActivityIndicator, cx } from "@noya-app/noya-designsystem";
+import { ImageIcon } from "@noya-app/noya-icons";
+import React, { ForwardedRef, forwardRef } from "react";
+
+type ImageState = "loading" | "error" | "loaded";
+
+const placeholderClassName =
+  "cursor-pointer flex items-center justify-center p-4 border border-dashed border-indigo-100 rounded-md bg-indigo-50";
+
+export function decodeImageSrc(src?: string): string | undefined {
+  if (!src) return undefined;
+
+  try {
+    return decodeURIComponent(src);
+  } catch (error) {
+    return undefined;
+  }
+}
+
+const ImageLoadingComponent = forwardRef(function ImageLoadingComponent(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <ActivityIndicator />
+    </span>
+  );
+});
+
+const ImagePlaceholderComponent = forwardRef(function ImagePlaceholderComponent(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <ImageIcon className="w-[30px] h-[30px] text-indigo-900 pointer-events-none" />
+    </span>
+  );
+});
+
+const ImageErrorComponent = forwardRef(function ImageErrorComponent(
+  { src, ...props }: React.HTMLAttributes<HTMLSpanElement> & { src?: string },
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <span className="text-cm-error font-mono text-sm">
+        Invalid image URL: {src ?? "No URL provided"}
+      </span>
+    </span>
+  );
+});
+
+const ImageDisplayComponent = forwardRef(function ImageDisplayComponent(
+  {
+    src,
+    alt,
+    title,
+    ...props
+  }: React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  >,
+  forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+  return (
+    <img
+      {...props}
+      ref={forwardedRef}
+      src={src}
+      alt={alt ?? ""}
+      title={title ?? undefined}
+      className={cx(
+        "cursor-pointer max-w-full max-h-[720px] object-contain mx-auto my-8",
+        props.className
+      )}
+    />
+  );
+});
+
+const ImageBlockComponent_ = forwardRef(function ImageBlockComponent(
+  {
+    src,
+    alt,
+    title,
+    imageState,
+    ...props
+  }: React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > & { imageState?: ImageState },
+  forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+  if (imageState === "loading") {
+    return (
+      <ImageLoadingComponent
+        {...props}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  if (!src) {
+    return (
+      <ImagePlaceholderComponent
+        {...props}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  const decodedSrc = decodeImageSrc(src.toString());
+
+  if (!decodedSrc || imageState === "error") {
+    return (
+      <ImageErrorComponent
+        {...props}
+        src={src.toString()}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  return (
+    <ImageDisplayComponent
+      {...props}
+      ref={forwardedRef}
+      src={src}
+      alt={alt}
+      title={title}
+    />
+  );
+});
+
+export const ImageBlockComponent = Object.assign(ImageBlockComponent_, {
+  Loading: ImageLoadingComponent,
+  Placeholder: ImagePlaceholderComponent,
+  Error: ImageErrorComponent,
+  Display: ImageDisplayComponent,
+});

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";

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

@@ -1,7 +1,10 @@
+"use client";
+
 import {
+  ActivityIndicator,
   Banner,
   BannerProps,
-  IconButton,
+  Button,
   Section,
   SectionProps,
 } from "@noya-app/noya-designsystem";
@@ -28,20 +31,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/Checkmark.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function Checkmark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      width={15}
+      height={15}
+      {...props}
+    >
+      <path
+        className="scale-90 origin-center"
+        d="M3 8L6 11L12 5"
+        strokeWidth="1.1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}