@noya-app/noya-designsystem 0.1.51 → 0.1.53

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/internal/Menu.tsx

@@ -92,9 +92,10 @@ export type SelectableMenuItem<T extends string> = BaseMenuItem & {
   shortcut?: string;
   value: T;
   testSelected?: boolean;
+  tooltip?: ReactNode;
 };
 
-type SubMenuItem<T extends string> = BaseMenuItem & {
+export type SubMenuItem<T extends string> = BaseMenuItem & {
   type: "submenu";
   items: MenuItem<T>[];
   id: string;
@@ -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

@@ -2,7 +2,11 @@ import { ChevronRightIcon } from "@noya-app/noya-icons";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import React from "react";
-import { cx } from "../..";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../../contexts/PortalScopeContext";
+import { cx } from "../../utils/classNames";
 import { MenuItem, SectionHeader, styles } from "./Menu";
 import { SelectItem } from "./SelectItem";
 
@@ -59,6 +63,8 @@ export const MenuViewport = <T extends string>({
   Components,
   onSelect,
 }: MenuViewportProps<T>) => {
+  const portalScopeId = usePortalScopeId();
+
   const hasCheckedItem = items.some(
     (item) =>
       item.type !== "separator" && item.type !== "sectionHeader" && item.checked
@@ -105,6 +111,7 @@ export const MenuViewport = <T extends string>({
                       e.stopPropagation();
                       e.preventDefault();
                     }}
+                    disabled={item.disabled}
                   >
                     <SelectItem
                       value={item.id}
@@ -113,6 +120,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}
@@ -122,6 +130,7 @@ export const MenuViewport = <T extends string>({
                   </Components.SubTrigger>
                   <Components.Portal>
                     <Components.SubContent
+                      {...portalScopeProps(portalScopeId)}
                       alignOffset={-5}
                       className={styles.contentStyle}
                     >
@@ -147,6 +156,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/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/contexts/PortalScopeContext.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+export type PortalScopeContextValue = string;
+
+const PortalScopeContext = React.createContext<
+  PortalScopeContextValue | undefined
+>(undefined);
+
+export const PortalScopeProvider = React.memo(function PortalScopeProvider({
+  children,
+  portalScopeId,
+}: {
+  children: React.ReactNode;
+  portalScopeId: string;
+}) {
+  return (
+    <PortalScopeContext.Provider value={portalScopeId}>
+      {children}
+    </PortalScopeContext.Provider>
+  );
+});
+
+export function usePortalScopeId(): string {
+  return React.useContext(PortalScopeContext) ?? "";
+}
+
+export const portalScopeDataSetName = "noyaPortalScope";
+export const portalScopePropName = `data-noya-portal-scope`;
+
+export function portalScopeProps(id?: string) {
+  return {
+    [portalScopePropName]: id,
+  };
+}
+
+export function getClosestPortalScope(element: EventTarget) {
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+
+  const closest = element.closest(`[${portalScopePropName}]`);
+
+  if (!closest || !(closest instanceof HTMLElement)) {
+    return;
+  }
+
+  return closest.dataset[portalScopeDataSetName];
+}

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,7 +101,26 @@
   --n-floating-button: rgb(248, 248, 250);
   --n-block-border: rgb(184, 201, 218);
   --n-block-highlight: rgb(255, 165, 0);
-  --n-visual-editor-line-placeholder-content: "Write or press / for commands";
+  --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"] {
@@ -96,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);
@@ -105,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);
@@ -125,10 +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;
 }
 
-.visual-editor-line-placeholder::after {
-  content: var(--n-visual-editor-line-placeholder-content);
-  color: var(--n-text-disabled);
-  pointer-events: none;
+.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";
@@ -75,6 +78,7 @@ export * from "./contexts/DialogContext";
 export * from "./contexts/FloatingWindowContext";
 export * from "./contexts/GlobalInputBlurContext";
 export * from "./contexts/ImageDataContext";
+export * from "./contexts/PortalScopeContext";
 // Hooks
 export * from "./hooks/useHover";
 export * from "./hooks/useIndent";

package/src/theme/index.ts

@@ -1,5 +1,5 @@
 import tailwindConfig from "@noya-app/noya-tailwind-config";
-import { convertKebabToCamelCase } from "./themeUtils";
+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 "@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/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],
       });
     }

package/tsup.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     // Build Tailwind CSS after successful tsup build
     try {
       const { stdout, stderr } = await execAsync(
-        "tailwindcss -i ./src/index.css -o ./dist/index.css --minify"
+        "tailwindcss -i ./src/index.css -o ./dist/index.css --minify --postcss"
       );
       if (stdout) console.info(stdout);
       if (stderr) console.error(stderr);