@noya-app/noya-designsystem 0.1.49 → 0.1.50

package/src/components/Sortable.tsx

@@ -19,6 +19,7 @@ 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";
@@ -96,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>({
@@ -360,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";
@@ -270,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 && (

package/src/components/pipeline/PipelineResultLayout.tsx

@@ -0,0 +1,32 @@
+import { Link1Icon } from "@noya-app/noya-icons";
+import React from "react";
+import { DividerVertical } from "../Divider";
+import { Small } from "../Text";
+
+export const PipelineResultLink = ({ url }: { url: string }) => {
+  return (
+    <div className="flex flex-col gap-0.5">
+      {/* <Label position="start">{name}</Label> */}
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex text-primary hover:opacity-80 border border-divider rounded-md"
+      >
+        <div className="flex gap-1 items-center p-2">
+          <Link1Icon className="w-[15px] h-[15px] flex-shrink-0" />
+        </div>
+        <DividerVertical />
+        <Small className="truncate p-2 flex-1">{url}</Small>
+      </a>
+    </div>
+  );
+};
+
+export const PipelineResultLayout = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <div className="flex flex-col gap-2">{children}</div>;
+};