@noya-app/noya-designsystem 0.1.48 → 0.1.50

package/src/components/Sortable.tsx

@@ -19,17 +19,18 @@ import {
 } from "@dnd-kit/sortable";
 import { memoGeneric } from "@noya-app/react-utils";
 import * as React from "react";
+import { memo } from "react";
 import { createPortal } from "react-dom";
 
 export type RelativeDropPosition = "above" | "below" | "inside";
 
 export type DropValidator = (
   sourceIndex: number,
-  destinationIndex: number,
+  targetIndex: number,
   position: RelativeDropPosition
 ) => boolean;
 
-export const normalizeListDestinationIndex = (
+export const normalizeListTargetIndex = (
   index: number,
   position: "above" | "below"
 ): number => {
@@ -38,12 +39,12 @@ export const normalizeListDestinationIndex = (
 
 export const defaultAcceptsDrop: DropValidator = (
   sourceIndex,
-  destinationIndex,
+  targetIndex,
   position
 ) => {
   if (position === "inside") return false;
 
-  const normalized = normalizeListDestinationIndex(destinationIndex, position);
+  const normalized = normalizeListTargetIndex(targetIndex, position);
 
   if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
     return false;
@@ -52,18 +53,22 @@ export const defaultAcceptsDrop: DropValidator = (
   return true;
 };
 
-const SortableItemContext = React.createContext<{
+export type SortableItemContextProps = {
   keys: UniqueIdentifier[];
   acceptsDrop: DropValidator;
   axis: "x" | "y";
   position: { x: number; y: number };
   setActivatorEvent: (event: PointerEvent) => void;
-}>({
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+};
+
+const SortableItemContext = React.createContext<SortableItemContextProps>({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
   position: { x: 0, y: 0 },
   setActivatorEvent: () => {},
+  getDropTargetParentIndex: undefined,
 });
 
 type ValidateDropIndicatorParams = {
@@ -92,42 +97,67 @@ export function validateDropIndicator({
 
   const acceptsDropInside = acceptsDrop(activeIndex, overIndex, "inside");
 
-  // If cursor is in the middle third of the element (between 1/3 and 2/3)
-  // and dropping inside is allowed, show "inside" indicator
+  // Drop into the middle third if possible
   if (
-    offsetStart >= elementStart + elementSize / 3 &&
-    offsetStart <= elementStart + (elementSize * 2) / 3 &&
+    isContainedInMiddleThird(elementStart, elementSize, offsetStart) &&
     acceptsDropInside
-  )
+  ) {
     return "inside";
+  }
+
+  const containingHalf = getContainingHalf(
+    elementStart,
+    elementSize,
+    offsetStart
+  );
 
-  // Are we over the top or bottom half of the element?
-  const indicator =
-    offsetStart < elementStart + elementSize / 2 ? "above" : "below";
-  // Drop above or below if possible, falling back to inside
-  return acceptsDrop(activeIndex, overIndex, indicator)
-    ? indicator
-    : acceptsDropInside
+  // Drop above or below if possible
+  const acceptedHalf = acceptsDrop(activeIndex, overIndex, containingHalf);
+
+  return acceptedHalf
+    ? containingHalf
+    : // Lastly, check if inside but not middle third
+      acceptsDropInside
       ? "inside"
       : undefined;
 }
 
+function isContainedInMiddleThird(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): boolean {
+  return (
+    offsetStart >= elementStart + elementSize / 3 &&
+    offsetStart <= elementStart + (elementSize * 2) / 3
+  );
+}
+
+function getContainingHalf(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): "above" | "below" {
+  if (offsetStart < elementStart + elementSize / 2) return "above";
+  return "below";
+}
+
 /* ----------------------------------------------------------------------------
  * Item
  * ------------------------------------------------------------------------- */
 
 type UseSortableReturnType = ReturnType<typeof useSortable>;
 
+type ItemChildrenProps<T> = {
+  ref: React.Ref<T>;
+  relativeDropPosition?: RelativeDropPosition;
+  style?: React.CSSProperties;
+} & UseSortableReturnType["attributes"];
+
 interface ItemProps<T> {
   id: UniqueIdentifier;
   disabled?: boolean;
-  children: (
-    props: {
-      ref: React.Ref<T>;
-      relativeDropPosition?: RelativeDropPosition;
-      style?: React.CSSProperties;
-    } & UseSortableReturnType["attributes"]
-  ) => JSX.Element;
+  children: (props: ItemChildrenProps<T>) => JSX.Element;
 }
 
 function SortableItem<T extends HTMLElement>({
@@ -135,8 +165,14 @@ function SortableItem<T extends HTMLElement>({
   disabled,
   children,
 }: ItemProps<T>) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } =
-    React.useContext(SortableItemContext);
+  const {
+    keys,
+    position,
+    acceptsDrop,
+    setActivatorEvent,
+    axis,
+    getDropTargetParentIndex,
+  } = React.useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
   const { activatorEvent } = useDndContext();
 
@@ -147,6 +183,7 @@ function SortableItem<T extends HTMLElement>({
     setNodeRef,
     isDragging,
     index,
+    activeIndex,
     overIndex,
     over,
   } = sortable;
@@ -161,23 +198,40 @@ function SortableItem<T extends HTMLElement>({
   const offsetTop = eventY + position.y;
 
   const ref = React.useCallback((node: T) => setNodeRef(node), [setNodeRef]);
+  const parentIndex =
+    overIndex === -1 ? undefined : getDropTargetParentIndex?.(overIndex);
+  const isValidParent =
+    parentIndex === undefined || parentIndex === -1
+      ? false
+      : acceptsDrop(activeIndex, parentIndex, "inside");
+  const overIdAcceptsDrop =
+    overIndex === -1
+      ? undefined
+      : acceptsDrop(activeIndex, overIndex, "inside");
+
+  const relativeDropPosition =
+    index >= 0 && index === overIndex && !isDragging && active && over
+      ? validateDropIndicator({
+          acceptsDrop,
+          keys,
+          activeId: active.id,
+          overId: over.id,
+          offsetStart: axis === "x" ? offsetLeft : offsetTop,
+          elementStart: axis === "x" ? over.rect.left : over.rect.top,
+          elementSize: axis === "x" ? over.rect.width : over.rect.height,
+        })
+      : undefined;
+
+  const showDragInsideIndicatorOnParent =
+    !overIdAcceptsDrop && isValidParent && parentIndex === index;
 
   return children({
     ref,
     ...attributes,
     ...listeners,
     relativeDropPosition:
-      index >= 0 && index === overIndex && !isDragging && active && over
-        ? validateDropIndicator({
-            acceptsDrop,
-            keys,
-            activeId: active.id,
-            overId: over.id,
-            offsetStart: axis === "x" ? offsetLeft : offsetTop,
-            elementStart: axis === "x" ? over.rect.left : over.rect.top,
-            elementSize: axis === "x" ? over.rect.width : over.rect.height,
-          })
-        : undefined,
+      relativeDropPosition ??
+      (showDragInsideIndicatorOnParent ? "inside" : undefined),
   });
 }
 
@@ -191,11 +245,12 @@ interface RootProps {
   renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: RelativeDropPosition
   ) => void;
-  acceptsDrop?: DropValidator;
-  axis?: "x" | "y";
+  acceptsDrop?: SortableItemContextProps["acceptsDrop"];
+  axis?: SortableItemContextProps["axis"];
+  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 }
 
 function SortableRoot({
@@ -205,6 +260,7 @@ function SortableRoot({
   renderOverlay,
   acceptsDrop = defaultAcceptsDrop,
   axis = "y",
+  getDropTargetParentIndex,
 }: RootProps) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -242,7 +298,6 @@ function SortableRoot({
       const { active, over } = event;
 
       setActiveIndex(undefined);
-
       if (over && active.id !== over.id) {
         const oldIndex = keys.findIndex((id) => id === active.id);
         const newIndex = keys.findIndex((id) => id === over.id);
@@ -281,14 +336,22 @@ function SortableRoot({
   return (
     <SortableItemContext.Provider
       value={React.useMemo(
-        () => ({
+        (): SortableItemContextProps => ({
           keys,
           acceptsDrop,
           position,
           setActivatorEvent,
           axis,
+          getDropTargetParentIndex,
         }),
-        [acceptsDrop, axis, keys, position, setActivatorEvent]
+        [
+          acceptsDrop,
+          axis,
+          getDropTargetParentIndex,
+          keys,
+          position,
+          setActivatorEvent,
+        ]
       )}
     >
       <DndContext
@@ -323,7 +386,83 @@ function SortableRoot({
   );
 }
 
-export namespace Sortable {
-  export const Item = memoGeneric(SortableItem);
-  export const Root = memoGeneric(SortableRoot);
+// Create a map of all subcomponents
+const SortableSubcomponents = {
+  Root: memo(SortableRoot),
+  Item: memoGeneric(SortableItem),
+} as const;
+
+interface SortableProps<T, TElement extends HTMLElement>
+  extends Omit<RootProps, "children" | "keys" | "renderOverlay"> {
+  items: T[];
+  keyExtractor: (item: T) => UniqueIdentifier;
+  shouldRenderOverlay?: boolean;
+  renderItem: (
+    item: T,
+    props: ItemChildrenProps<TElement>,
+    { isOverlay }: { isOverlay: boolean }
+  ) => JSX.Element;
 }
+
+const SortableComponent = memoGeneric(function Sortable<
+  TItem,
+  TElement extends HTMLElement,
+>(props: SortableProps<TItem, TElement>) {
+  const {
+    renderItem,
+    items,
+    keyExtractor,
+    shouldRenderOverlay = true,
+    ...rest
+  } = props;
+
+  const keys = React.useMemo(
+    () => items.map(keyExtractor),
+    [items, keyExtractor]
+  );
+
+  const renderOverlay = React.useCallback(
+    (index: number) => {
+      return renderItem(
+        items[index],
+        {
+          ref: () => {},
+          style: {},
+          tabIndex: -1,
+          "aria-disabled": true,
+          "aria-pressed": false,
+          "aria-roledescription": "Item being dragged",
+          "aria-describedby": "Item being dragged",
+          role: "button",
+        },
+        { isOverlay: true }
+      );
+    },
+    [renderItem, items]
+  );
+
+  return (
+    <SortableSubcomponents.Root
+      {...rest}
+      keys={keys}
+      renderOverlay={shouldRenderOverlay ? renderOverlay : undefined}
+    >
+      {keys.map((key, index) => (
+        <SortableSubcomponents.Item key={key} id={key}>
+          {(props) => {
+            return renderItem(
+              items[index],
+              props as ItemChildrenProps<TElement>,
+              { isOverlay: false }
+            );
+          }}
+        </SortableSubcomponents.Item>
+      ))}
+    </SortableSubcomponents.Root>
+  );
+});
+
+// Export both the namespace and the component
+const Sortable = Object.assign(SortableComponent, SortableSubcomponents);
+
+export { Sortable };

package/src/components/UserPointer.tsx

@@ -94,7 +94,7 @@ const UserPointerIcon = memo(function PointerIcon({
       <polygon
         points={points}
         fill={color}
-        stroke="var(--background)"
+        stroke="var(--n-background)"
         strokeWidth="0.5"
       />
     </svg>

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

@@ -0,0 +1,102 @@
+import { IconButton } from "../IconButton";
+
+import { cssVars } from "../../theme";
+
+import { Avatar } from "../Avatar";
+import { Logo } from "../NoyaLogo";
+
+import React, { forwardRef } from "react";
+import { INPUT_HEIGHT } from "../../theme";
+import { cx } from "../../utils/classNames";
+import { TextAreaRow } from "../TextArea";
+
+export const AIAssistantLoadingIndicator = () => {
+  return (
+    <div className="flex gap-2">
+      <Avatar
+        name="Assistant"
+        size={INPUT_HEIGHT}
+        backgroundColor={cssVars.colors.primaryPastel}
+      >
+        <Logo style={{ width: 15 }} fill={cssVars.colors.primary} />
+      </Avatar>
+      <div className="animate-pulse">▋</div>
+    </div>
+  );
+};
+
+type AIAssistantInputProps = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onSubmitClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  disabled: boolean;
+};
+
+export const AIAssistantInput = forwardRef<
+  HTMLDivElement,
+  AIAssistantInputProps
+>(({ value, onChange, onSubmitClick, onKeyDown, disabled }, ref) => (
+  <TextAreaRow
+    autoResize
+    autoFocus
+    value={value}
+    onChange={onChange}
+    ref={ref}
+    textAreaClassName="py-2 pl-3 !pr-9 w-full mt-3"
+    placeholder="Tell me what you'd like to do..."
+    onKeyDown={onKeyDown}
+    disabled={disabled}
+    end={
+      <IconButton
+        iconName="ArrowUpIcon"
+        onClick={onSubmitClick}
+        disabled={!value.trim() || disabled}
+        className="h-8 w-8 z-20 rounded-full"
+        size={20}
+        color={cssVars.colors.text}
+        style={{
+          backgroundColor: cssVars.colors.chipDefaultBg,
+        }}
+      />
+    }
+  />
+));
+
+type AIAssistantLayoutProps = {
+  renderMessages: () => React.ReactNode;
+  renderInput: () => React.ReactNode;
+  isLoading: boolean;
+  renderLoadingIndicator?: () => React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const AIAssistantLayout = forwardRef<
+  HTMLDivElement,
+  AIAssistantLayoutProps
+>(
+  (
+    {
+      renderMessages,
+      renderInput,
+      isLoading,
+      renderLoadingIndicator,
+      className,
+      style,
+    }: AIAssistantLayoutProps,
+    ref
+  ) => {
+    return (
+      <div className={cx("flex flex-col flex-1", className)} style={style}>
+        <div className="flex-1 min-h-0 overflow-auto" ref={ref}>
+          <div className="flex flex-col gap-2 pb-4 pt-1">
+            {renderMessages()}
+            {isLoading ? renderLoadingIndicator?.() : null}
+          </div>
+        </div>
+        <div className="border-t border-divider pt-1 px-1">{renderInput()}</div>
+      </div>
+    );
+  }
+);

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

@@ -0,0 +1,71 @@
+import { cssVars } from "../../theme";
+
+import { ChatBubbleWithDotsIcon } from "@noya-app/noya-icons";
+import React from "react";
+import { INPUT_HEIGHT } from "../../theme";
+import { colorFromString } from "../../utils/colorFromString";
+import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
+import Button from "../Button";
+import { Spacer } from "../Spacer";
+import { Small } from "../Text";
+import { Tooltip } from "../Tooltip";
+
+export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
+  <Tooltip
+    key={userId}
+    content={
+      <div className="flex flex-col">
+        <Small>{name}</Small>
+      </div>
+    }
+  >
+    <Avatar size={INPUT_HEIGHT} userId={userId} name={name} image={image} />
+  </Tooltip>
+);
+
+type ConnectedUsersMenuLayoutProps = {
+  renderUsers: () => React.ReactNode;
+  currentUserId?: string;
+  launchAIAssistant?: () => void;
+  isAssistantOpen?: boolean;
+};
+
+export const ConnectedUsersMenuLayout = ({
+  renderUsers,
+  currentUserId,
+  launchAIAssistant,
+  isAssistantOpen,
+}: ConnectedUsersMenuLayoutProps) => {
+  return (
+    <div className="flex gap-1.5">
+      <AvatarStack size={INPUT_HEIGHT}>{renderUsers()}</AvatarStack>
+
+      {/* AI Assistant Avatar */}
+      {launchAIAssistant && (
+        <Tooltip
+          content={
+            <div className="flex flex-col">
+              <Small>AI Assistant</Small>
+            </div>
+          }
+        >
+          <Button
+            variant={isAssistantOpen ? "secondary" : undefined}
+            onClick={launchAIAssistant}
+            style={{
+              backgroundColor: isAssistantOpen
+                ? colorFromString(currentUserId ?? "")
+                : undefined,
+            }}
+          >
+            AI
+            <Spacer.Horizontal size={8} />
+            <ChatBubbleWithDotsIcon
+              color={isAssistantOpen ? undefined : cssVars.colors.icon}
+            />
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+import {
+  Banner,
+  BannerProps,
+  IconButton,
+  Section,
+  SectionProps,
+} from "@noya-app/noya-designsystem";
+import { forwardRefGeneric } from "@noya-app/react-utils";
+import React from "react";
+import { cx } from "../../utils/classNames";
+import { Collection, CollectionProps, CollectionRef } from "../Collection";
+
+export const FileExplorerLayout = ({
+  children,
+  className,
+  ...props
+}: SectionProps) => (
+  <Section className={cx(className, "px-3 flex-1")} {...props}>
+    {children}
+  </Section>
+);
+
+export const FileExplorerUploadButton = ({
+  showUploadButton,
+  onUpload,
+  children,
+}: {
+  showUploadButton?: boolean;
+  onUpload?: () => void;
+  children?: React.ReactNode;
+}) => (
+  <div className="flex items-center gap-2">
+    {showUploadButton && (
+      <IconButton
+        iconName="UploadIcon"
+        onClick={onUpload}
+        aria-label="Upload media"
+        tooltip="Upload media"
+      />
+    )}
+    {children}
+  </div>
+);
+
+export const FileExplorerCollection = forwardRefGeneric(
+  function FileExplorerCollection<T, M extends string = string>(
+    { ...props }: CollectionProps<T, M>,
+    ref: React.ForwardedRef<CollectionRef>
+  ) {
+    return <Collection<T, M> ref={ref} className="-mx-3 flex-1" {...props} />;
+  }
+);
+
+export const FileExplorerDetail = ({
+  selected,
+  children,
+}: {
+  selected: boolean;
+  children: React.ReactNode;
+}) => (
+  <span
+    className={cx("text-sm", selected ? "text-primary" : "text-text-muted")}
+  >
+    {children}
+  </span>
+);
+
+export const FileExplorerEmptyState = ({
+  label = "No files",
+  ...props
+}: BannerProps) => <Banner label={label} className="mx-3" {...props} />;

package/src/components/internal/Menu.tsx

@@ -1,7 +1,7 @@
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
 import React, { memo, ReactNode } from "react";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
-import { cx } from "../../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../../utils/classNames";
 import { IScoredItem } from "../../utils/fuzzyScorer";
 import withSeparatorElements from "../../utils/withSeparatorElements";
 import { IconName } from "../Icons";
@@ -157,12 +157,12 @@ export const getMenuItemKey = <T extends string>(
   }
 };
 
-export const CHECKBOX_WIDTH = 16;
+export const CHECKBOX_WIDTH = 15;
 export const CHECKBOX_RIGHT_INSET = 8;
 export const CHECKBOX_INDENT_WIDTH = 6;
 
 export const styles = {
-  separatorStyle: "h-px bg-divider mx-4 my-1",
+  separatorStyle: "h-px bg-divider mx-3 my-1",
   selectedItemStyle:
     "focus:outline-none focus:text-white focus:bg-primary focus:kbd:text-white",
   testSelectedItemStyle: "outline-none text-white bg-primary kbd:text-white",
@@ -175,7 +175,12 @@ export const styles = {
     font-sans text-button font-medium
     ${disabled ? "text-text-disabled" : ""}
   `,
-  itemIndicatorStyle: "flex items-center relative -left-2.5 -mr-2",
+  itemIndicator: {
+    className: "flex items-center relative -left-2.5",
+    style: {
+      marginRight: -CHECKBOX_RIGHT_INSET,
+    },
+  },
   contentStyle:
     "rounded bg-popover-background text-text shadow-[0_2px_4px_rgba(0,0,0,0.2),_0_0_12px_rgba(0,0,0,0.1)] z-menu py-1",
 };
@@ -265,12 +270,17 @@ export const SectionHeader = memo(function SectionHeader({
   return (
     <span
       id={id}
-      className={cx(
-        variant === "label"
-          ? `text-label ${textStyles.label} !font-bold text-text-disabled`
-          : "font-sans text-heading5 font-normal",
-        "bg-listview-raised-background flex items-center py-1.5 px-3",
-        isFirst && "-mt-1"
+      className={mergeConflictingClassNames(
+        [
+          variant === "label"
+            ? `text-label ${textStyles.label} font-bold text-text-disabled`
+            : "font-sans text-heading5 font-normal",
+          "bg-listview-raised-background flex items-center py-1.5 px-3",
+          isFirst && "-mt-1",
+        ],
+        {
+          categories: ["font"],
+        }
       )}
     >
       {indented && (