@noya-app/noya-designsystem 0.1.50 → 0.1.52

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

@@ -38,7 +38,9 @@ export const ConnectedUsersMenuLayout = ({
 }: ConnectedUsersMenuLayoutProps) => {
   return (
     <div className="flex gap-1.5">
-      <AvatarStack size={INPUT_HEIGHT}>{renderUsers()}</AvatarStack>
+      <AvatarStack size={INPUT_HEIGHT} className="mr-1">
+        {renderUsers()}
+      </AvatarStack>
 
       {/* AI Assistant Avatar */}
       {launchAIAssistant && (

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

@@ -8,7 +8,12 @@ import {
 import { forwardRefGeneric } from "@noya-app/react-utils";
 import React from "react";
 import { cx } from "../../utils/classNames";
-import { Collection, CollectionProps, CollectionRef } from "../Collection";
+import {
+  Collection,
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "../Collection";
 
 export const FileExplorerLayout = ({
   children,
@@ -53,13 +58,18 @@ export const FileExplorerCollection = forwardRefGeneric(
 
 export const FileExplorerDetail = ({
   selected,
+  size,
   children,
 }: {
   selected: boolean;
   children: React.ReactNode;
+  size?: CollectionItemSize;
 }) => (
   <span
-    className={cx("text-sm", selected ? "text-primary" : "text-text-muted")}
+    className={cx(
+      size === "small" ? "text-list-small" : "text-sm",
+      selected ? "text-primary" : "text-text-muted"
+    )}
   >
     {children}
   </span>

package/src/components/internal/Menu.tsx

@@ -92,6 +92,7 @@ export type SelectableMenuItem<T extends string> = BaseMenuItem & {
   shortcut?: string;
   value: T;
   testSelected?: boolean;
+  tooltip?: ReactNode;
 };
 
 type SubMenuItem<T extends string> = BaseMenuItem & {
@@ -164,12 +165,12 @@ export const CHECKBOX_INDENT_WIDTH = 6;
 export const styles = {
   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",
+    "focus:outline-none focus:text-selected-list-item-text focus:bg-selected-list-item-background focus:kbd:text-selected-list-item-text",
+  testSelectedItemStyle:
+    "outline-none text-selected-list-item-text bg-selected-list-item-background kbd:text-selected-list-item-text",
   itemStyle: ({ disabled }: { disabled?: boolean }) => `
     flex-none select-none cursor-pointer rounded
     py-1.5 px-2
-    active:bg-primary-light
     transition-colors
     flex items-center
     font-sans text-button font-medium
@@ -182,7 +183,7 @@ export const styles = {
     },
   },
   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",
+    "rounded bg-popover-background text-text shadow-popover z-menu py-1",
 };
 
 function getKeyboardShortcuts<T extends string>(

package/src/components/internal/MenuViewport.tsx

@@ -113,6 +113,7 @@ export const MenuViewport = <T extends string>({
                       onSelect={onSelect}
                       Components={Components}
                       indented={hasCheckedItem}
+                      disabled={item.disabled}
                     >
                       <div className="flex items-center flex-1">
                         {item.title}
@@ -147,6 +148,7 @@ export const MenuViewport = <T extends string>({
                 Components={Components}
                 indented={hasCheckedItem}
                 testSelected={item.testSelected}
+                disabled={item.disabled}
               >
                 {item.title ?? item.value}
               </SelectItem>

package/src/components/internal/TextInput.tsx

@@ -126,6 +126,8 @@ type SubmittableProps = Props & {
   onSubmit: (value: string) => void;
   allowSubmittingWithSameValue?: boolean;
   submitAutomaticallyAfterDelay?: number;
+  /** @default true */
+  submitOnBlur?: boolean;
 };
 
 const SubmittableTextInput = forwardRef(function SubmittableTextInput(
@@ -138,6 +140,7 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
     onFocusCapture,
     allowSubmittingWithSameValue = false,
     submitAutomaticallyAfterDelay,
+    submitOnBlur = true,
     ...rest
   }: SubmittableProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
@@ -218,9 +221,11 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
 
       onFocusChange?.(false);
 
-      handleSubmit();
+      if (submitOnBlur) {
+        handleSubmit();
+      }
     },
-    [onBlur, onFocusChange, handleSubmit]
+    [onBlur, onFocusChange, handleSubmit, submitOnBlur]
   );
 
   const handleFocusCapture = useCallback(

package/src/components/pipeline/PipelineResultLayout.tsx

@@ -30,3 +30,21 @@ export const PipelineResultLayout = ({
 }) => {
   return <div className="flex flex-col gap-2">{children}</div>;
 };
+
+export function getPipelineResultLink(
+  value: unknown
+): { url: string } | undefined {
+  if (typeof value !== "object" || value === null) return undefined;
+
+  // Check for htmlUrl first
+  if ("html_url" in value && typeof value.html_url === "string") {
+    return { url: value.html_url };
+  }
+
+  // Fall back to regular url
+  if ("url" in value && typeof value.url === "string") {
+    return { url: value.url };
+  }
+
+  return undefined;
+}

package/src/contexts/DialogContext.tsx

@@ -43,7 +43,12 @@ export type DialogContextValue = {
   ): Promise<string | undefined>;
 
   openConfirmationDialog(
-    options: string | BaseDialogContents
+    options:
+      | string
+      | (BaseDialogContents & {
+          confirmButtonLabel?: string;
+          cancelButtonLabel?: string;
+        })
   ): Promise<boolean>;
 
   containsElement(element: HTMLElement): boolean;
@@ -67,6 +72,8 @@ type InputDialogContents = BaseDialogContents & {
 
 type ConfirmationDialogContents = BaseDialogContents & {
   type: "confirmation";
+  confirmButtonLabel?: string;
+  cancelButtonLabel?: string;
   resolve: (value: boolean) => void;
 };
 
@@ -139,13 +146,21 @@ export const DialogProvider = function DialogProvider({
     useCallback((options) => {
       const { promise, resolve } = createDeferredPromise<boolean>();
 
-      const { title, description, style, className } =
-        typeof options === "string" ? { title: options } : options;
+      const {
+        title,
+        description,
+        confirmButtonLabel,
+        cancelButtonLabel,
+        style,
+        className,
+      } = typeof options === "string" ? { title: options } : options;
 
       setContents({
         type: "confirmation",
         title,
         description,
+        confirmButtonLabel,
+        cancelButtonLabel,
         style,
         className,
         resolve: (value: boolean) => {
@@ -262,7 +277,7 @@ export const DialogProvider = function DialogProvider({
                 setContents(undefined);
               }}
             >
-              Cancel
+              {contents.cancelButtonLabel ?? "Cancel"}
             </Button>
             <Spacer.Horizontal size={16} />
             <Button
@@ -271,7 +286,7 @@ export const DialogProvider = function DialogProvider({
                 setContents(undefined);
               }}
             >
-              OK
+              {contents.confirmButtonLabel ?? "OK"}
             </Button>
           </div>
         ) : contents?.type === "custom" ? (

package/src/index.css

@@ -1,42 +1,61 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
-  --n-logo-fill: rgb(150, 152, 172);
-  --n-logo-highlight: rgb(150, 152, 172);
-  --n-background: rgb(255, 255, 255);
-  --n-text: rgb(38, 48, 83);
-  --n-text-muted: rgb(107, 113, 136);
-  --n-text-subtle: rgb(117, 121, 129);
-  --n-text-disabled: rgb(150, 152, 172);
-  --n-text-decorative-light: rgb(168, 185, 212);
-  --n-divider-subtle: rgba(30, 50, 100, 0.04);
-  --n-divider: rgba(30, 50, 100, 0.07);
-  --n-divider-strong: rgba(30, 50, 100, 0.09);
-  --n-primary: rgb(103, 70, 255);
-  --n-primary-light: rgb(147, 86, 255);
-  --n-primary-pastel: rgba(234, 230, 255);
+  --n-primary-900: rgb(45, 25, 95); /* dark: --n-primary-pastel */
+  --n-primary-600: rgb(103, 70, 255); /* --n-primary */
+  --n-primary-500: rgb(119, 66, 255); /* dark: --n-primary */
+  --n-primary-400: rgb(147, 86, 255); /* --n-primary-light */
+  --n-primary-300: rgb(134, 86, 255); /* dark: --n-primary-light */
+  --n-primary-250: rgb(171, 137, 251);
+  --n-primary-200: rgb(188, 160, 255);
+  --n-primary-150: rgb(225, 219, 255);
+  --n-primary-100: rgb(234, 230, 255); /* --n-primary-pastel */
+
+  --n-indigo-950: rgb(18, 26, 37);
+  --n-indigo-900: rgb(30, 40, 60);
+  --n-indigo-800: rgb(38, 48, 83);
+  --n-indigo-700: rgb(55, 65, 99);
+  --n-indigo-600: rgb(76, 86, 122);
+  --n-indigo-500: rgb(107, 113, 136);
+  --n-indigo-400: rgb(117, 121, 129);
+  --n-indigo-300: rgb(129, 131, 165);
+  --n-indigo-200: rgb(150, 152, 172);
+  --n-indigo-150: rgb(226, 230, 238);
+  --n-indigo-100: rgb(240, 242, 246);
+  --n-indigo-50: rgb(243, 245, 249);
+  --n-indigo-25: rgb(251, 252, 254);
+
+  --n-logo-fill: var(--n-indigo-200);
+  --n-logo-highlight: var(--n-indigo-200);
+  --n-background: white;
+  --n-text: var(--n-indigo-800);
+  --n-text-muted: var(--n-indigo-500);
+  --n-text-subtle: var(--n-indigo-400);
+  --n-text-disabled: var(--n-indigo-200);
+  --n-text-decorative-light: var(--n-indigo-100);
+  --n-divider-subtle: color-mix(in srgb, var(--n-indigo-900) 4%, transparent);
+  --n-divider: color-mix(in srgb, var(--n-indigo-900) 7%, transparent);
+  --n-divider-strong: color-mix(in srgb, var(--n-indigo-900) 9%, transparent);
+  --n-primary: var(--n-primary-600);
+  --n-primary-light: var(--n-primary-400);
+  --n-primary-pastel: var(--n-primary-100);
   --n-secondary: rgb(0, 151, 117);
   --n-secondary-light: rgb(0, 160, 129);
   --n-secondary-pastel: rgb(205, 238, 231);
   --n-secondary-bright: #0ab557;
   --n-input-background-light: rgb(243, 245, 249);
   --n-code-background: rgb(250, 250, 250);
-  --n-code-background-dark: #435080;
+  --n-code-background-dark: var(--n-indigo-950);
   --n-selected-background: rgb(242, 245, 250);
-  --n-breadcrumb-text: rgb(107, 113, 136);
-  --n-breadcrumb-text-hover: rgb(117, 121, 129);
-  --n-breadcrumb-icon: rgb(129, 131, 165);
-  --n-canvas-background: rgb(249, 249, 249);
+  --n-breadcrumb-text: var(--n-indigo-500);
+  --n-breadcrumb-text-hover: var(--n-indigo-400);
+  --n-breadcrumb-icon: var(--n-indigo-300);
+  --n-canvas-background: var(--n-indigo-25);
   --n-canvas-grid: rgba(0, 0, 0, 0.05);
   --n-sidebar-background: rgb(255, 255, 255);
-  --n-sidebar-background-transparent: rgba(255, 255, 255, 0.85);
   --n-popover-background: rgb(252, 252, 252);
   --n-popover-divider: transparent;
   --n-listview-raised-background: rgba(0, 0, 0, 0.03);
   --n-listview-editing-background: #fff;
-  --n-input-background: rgb(240, 242, 246);
+  --n-input-background: var(--n-indigo-100);
   --n-list-view-hover-background: rgb(244, 246, 250);
   --n-list-view-thumbnail-background: var(--n-input-background);
   --n-slider-thumb-background: white;
@@ -45,14 +64,14 @@
   --n-transparent-checker: rgba(255, 255, 255, 0.8);
   --n-scrollbar: rgba(199, 199, 199, 0.8);
   --n-placeholder-dots: rgba(0, 0, 0, 0.3);
-  --n-drag-outline: rgb(103, 70, 255);
-  --n-active-background: rgba(0, 0, 0, 0.1);
+  --n-drag-outline: var(--n-primary-600);
+  --n-active-background: var(--n-indigo-150);
   --n-thumbnail-background: #f0efff;
   --n-thumbnail-shadow: #d3ceed66;
-  --n-inline-code-text: rgb(103, 70, 255);
+  --n-inline-code-text: var(--n-primary-600);
   --n-inline-code-background: rgb(240, 242, 246);
-  --n-text-link: rgb(103, 70, 255);
-  --n-text-link-focused: rgb(147, 86, 255);
+  --n-text-link: var(--n-primary-600);
+  --n-text-link-focused: var(--n-primary-400);
   --n-inset-top: 46px;
   --n-sidebar-width: 260px;
   --n-toolbar-height: 46px;
@@ -61,7 +80,7 @@
   --n-inspector-v-separator: 10px;
   --n-dialog-padding: 16px;
   --n-input-height: 27px;
-  --n-icon: rgb(129, 131, 165);
+  --n-icon: var(--n-indigo-300);
   --n-icon-selected: rgb(220, 220, 220);
   --n-warning: rgb(251, 211, 0);
   --n-segmented-control-item: rgb(139, 139, 139);
@@ -82,6 +101,26 @@
   --n-floating-button: rgb(248, 248, 250);
   --n-block-border: rgb(184, 201, 218);
   --n-block-highlight: rgb(255, 165, 0);
+  --n-markdown-editor-line-placeholder-content: "Write or press / for commands";
+  --n-selected-list-item-background: var(--n-primary-100);
+  --n-selected-list-item-text: var(--n-primary);
+  --n-selected-list-item-icon-background: var(--n-primary-150);
+  /* based on vs code light theme: https://github.com/fsegurai/codemirror-themes/blob/main/packages/vscode-light/src/index.ts */
+  --n-cm-keyword: var(--n-primary-600);
+  --n-cm-function: #1b4db8;
+  --n-cm-control-keyword: var(--n-primary-600);
+  --n-cm-class-type: #1b4db8;
+  --n-cm-regexp: #1097af;
+  --n-cm-link: #1097af;
+  --n-cm-string: #1097af;
+  --n-cm-number: #1097af;
+  --n-cm-comment: var(--n-indigo-300);
+  --n-cm-operator: var(--n-indigo-800);
+  --n-cm-variable: var(--n-indigo-800);
+  --n-cm-type: #f59e0b;
+  --n-cm-error: #e45649;
+  --n-cm-warning: #fb9d00;
+  --n-cm-info: #3390ff;
 }
 
 [data-theme="dark"] {
@@ -95,8 +134,11 @@
   --n-divider-subtle: rgba(255, 255, 255, 0.04);
   --n-divider: rgba(255, 255, 255, 0.08);
   --n-divider-strong: rgba(0, 0, 0, 1);
-  --n-primary: rgb(119, 66, 255);
-  --n-primary-light: rgb(134, 86, 255);
+  --n-primary: var(--n-primary-500);
+  --n-primary-light: var(--n-primary-300);
+  --n-selected-list-item-background: var(--n-primary-900);
+  --n-selected-list-item-text: var(--n-primary-200);
+  --n-selected-list-item-icon-background: var(--n-primary-900);
   --n-secondary-bright: #36fe91;
   --n-input-background: rgba(181, 178, 255, 0.08);
   --n-input-background-light: rgba(181, 178, 255, 0.1);
@@ -104,7 +146,6 @@
   --n-canvas-background: rgb(20, 19, 23);
   --n-canvas-grid: rgba(0, 0, 0, 0.1);
   --n-sidebar-background: rgb(34, 33, 39);
-  --n-sidebar-background-transparent: rgba(34, 33, 39, 0.95);
   --n-popover-background: rgb(34, 33, 39);
   --n-popover-divider: rgba(255, 255, 255, 0.08);
   --n-listview-raised-background: rgba(181, 178, 255, 0.1);
@@ -124,4 +165,32 @@
   --n-dot: rgba(255, 255, 255, 0.15);
   --n-table-row-background: var(--n-sidebar-background);
   --n-floating-button: #333333;
+  /* based on vs code dark theme: https://github.com/fsegurai/codemirror-themes/blob/main/packages/vscode-dark/src/index.ts */
+  --n-cm-keyword: #569cd6;
+  --n-cm-function: #dcdcaa;
+  --n-cm-control-keyword: #c586c0;
+  --n-cm-class-type: #4ec9b0;
+  --n-cm-regexp: #d16969;
+  --n-cm-link: #4078f2;
+  --n-cm-string: #ce9178;
+  --n-cm-number: #b5cea8;
+  --n-cm-comment: #6a9955;
+  --n-cm-operator: #d4d4d4;
+  --n-cm-variable: #9cdcfe;
+  --n-cm-type: #f59e0b;
+  --n-cm-error: #ff0000;
+  --n-cm-warning: #fb9d00;
+  --n-cm-info: #3390ff;
+}
+
+.noya-styles {
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  .markdown-editor-line-placeholder::after {
+    content: var(--n-markdown-editor-line-placeholder-content);
+    color: var(--n-text-disabled);
+    pointer-events: none;
+  }
 }

package/src/index.tsx

@@ -10,6 +10,8 @@ export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
 export * from "./components/Collection";
+export * from "./components/ColorSwatch";
+export * from "./components/ColorSwatchControl";
 export * from "./components/Combobox";
 export * from "./components/ComboboxMenu";
 export * from "./components/CommandPalette";
@@ -55,6 +57,7 @@ export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
 export * from "./components/Section";
 export * from "./components/SegmentedControl";
+export * from "./components/SelectionToolbar";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
 export * from "./components/Sortable";

package/src/theme/index.ts

@@ -1,5 +1,5 @@
-import tailwindConfig from "../../tailwind.config";
-import { convertKebabToCamelCase } from "./themeUtils";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
+import { convertKebabToCamelCase, parseCssVarName } from "./themeUtils";
 
 export type Theme = (typeof tailwindConfig.theme)["extend"];
 
@@ -7,4 +7,9 @@ export type ThemeColor = keyof Theme["colors"];
 
 export const cssVars = convertKebabToCamelCase(tailwindConfig.theme.extend);
 
+export const cssVarNames = convertKebabToCamelCase(
+  tailwindConfig.theme.extend,
+  parseCssVarName
+);
+
 export const INPUT_HEIGHT = 27;

package/src/theme/themeUtils.ts

@@ -48,7 +48,8 @@ export function kebabToCamelCase<S extends string>(
 
 // Runtime function to convert all keys in an object from kebab-case to camelCase
 export function convertKebabToCamelCase<T extends object>(
-  obj: T
+  obj: T,
+  mapValue?: (value: string) => string
 ): KebabToCamelCaseKeys<T> {
   if (Array.isArray(obj) || obj instanceof Set || obj instanceof Map) {
     return obj as KebabToCamelCaseKeys<T>;
@@ -64,9 +65,15 @@ export function convertKebabToCamelCase<T extends object>(
       !Array.isArray(value) &&
       !(value instanceof Set) &&
       !(value instanceof Map)
-        ? convertKebabToCamelCase(value)
-        : value;
+        ? convertKebabToCamelCase(value, mapValue)
+        : mapValue && typeof value === "string"
+          ? mapValue(value)
+          : value;
   }
 
   return result as KebabToCamelCaseKeys<T>;
 }
+
+export function parseCssVarName(key: string) {
+  return key.match(/var\((--.*?)\)/)?.[1] ?? "";
+}

package/src/utils/classNames.ts

@@ -1,7 +1,7 @@
-import tailwindConfig from "../../tailwind.config";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
 
 type ClassNameItem = string | number | BigInt | boolean | null | undefined;
-type Category = "text" | "color" | "font" | "flex";
+type Category = "text" | "color" | "font" | "flex" | "position";
 type Options = {
   categories?: Category[];
 };
@@ -32,12 +32,13 @@ const flexKeysSet = new Set([
   "flex-[0_0_auto]",
   "flex-1",
 ]);
-
+const positionKeysSet = new Set(["absolute", "relative", "fixed", "sticky"]);
 const keyMap: Record<Category, Set<string>> = {
   text: textKeysSet,
   flex: flexKeysSet,
   color: colorKeysSet,
   font: fontKeysSet,
+  position: positionKeysSet,
 };
 
 export function cx(...args: ClassNameItem[]): string {

package/src/utils/combobox.ts

@@ -168,12 +168,12 @@ export class ComboboxState<T extends string> {
 
   moveSelection(direction: "up" | "down") {
     const filteredItems = this.getFilteredItems();
-    this.selectedIndex = getNextIndex(
-      filteredItems,
-      this.selectedIndex,
-      direction === "down" ? "next" : "previous",
-      (item) => isNonSelectableMenuItem(item)
-    );
+    this.selectedIndex = getNextIndex({
+      items: filteredItems,
+      currentIndex: this.selectedIndex,
+      direction: direction === "down" ? "next" : "previous",
+      isDisabled: (item) => isNonSelectableMenuItem(item),
+    });
     this.notifyChange();
   }
 
@@ -257,7 +257,7 @@ export class ComboboxState<T extends string> {
   }
 }
 
-function filterWithGroupedSections<T extends string>(
+export function filterWithGroupedSections<T extends string>(
   items: MenuItem<T>[],
   query: string
 ): ScoredMenuItem<T>[] {
@@ -341,12 +341,17 @@ function filterWithGroupedSections<T extends string>(
   return result;
 }
 
-export function getNextIndex<T>(
-  items: T[],
-  currentIndex: number,
-  direction: "next" | "previous",
-  isDisabled: (item: T) => boolean
-): number {
+export function getNextIndex<T>({
+  items,
+  currentIndex,
+  direction,
+  isDisabled,
+}: {
+  items: T[];
+  currentIndex: number;
+  direction: "next" | "previous";
+  isDisabled: (item: T) => boolean;
+}): number {
   // Make sure the current index is within bounds
   currentIndex =
     currentIndex < 0

package/src/utils/moveTreeItem.ts

@@ -5,7 +5,7 @@ import {
 } from "../components/Sortable";
 
 type MoveOptions = {
-  indexPaths: number[][];
+  paths: number[][];
   to: number[];
 };
 
@@ -27,19 +27,19 @@ export function moveTreeItem<T>({
   switch (position) {
     case "above": {
       return move(root, {
-        indexPaths: [sourceIndexPath],
+        paths: [sourceIndexPath],
         to: targetIndexPath,
       });
     }
     case "below": {
       return move(root, {
-        indexPaths: [sourceIndexPath],
+        paths: [sourceIndexPath],
         to: [...targetIndexPath.slice(0, -1), targetIndexPath.at(-1)! + 1],
       });
     }
     case "inside": {
       return move(root, {
-        indexPaths: [sourceIndexPath],
+        paths: [sourceIndexPath],
         to: [...targetIndexPath, 1000],
       });
     }