@noya-app/noya-designsystem 0.1.48 → 0.1.50

package/src/components/internal/SelectItem.tsx

@@ -65,8 +65,9 @@ export const SelectItem = React.forwardRef(
               testSelected && styles.testSelectedItemStyle
             )}
           >
+            <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />
             {Components.ItemIndicator && (
-              <Components.ItemIndicator className={styles.itemIndicatorStyle}>
+              <Components.ItemIndicator {...styles.itemIndicator}>
                 <CheckIcon />
               </Components.ItemIndicator>
             )}
@@ -107,7 +108,7 @@ export const SelectItem = React.forwardRef(
           <div className="flex flex-1 items-center">
             {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
             {checked ? (
-              <div className={styles.itemIndicatorStyle}>
+              <div {...styles.itemIndicator}>
                 <CheckIcon />
               </div>
             ) : 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>;
+};

package/src/index.css

@@ -3,119 +3,125 @@
 @tailwind utilities;
 
 :root {
-  --logo-fill: rgb(150, 152, 172);
-  --logo-highlight: rgb(150, 152, 172);
-  --background: rgb(255, 255, 255);
-  --text: rgb(38, 48, 83);
-  --text-muted: rgb(107, 113, 136);
-  --text-subtle: rgb(117, 121, 129);
-  --text-disabled: rgb(150, 152, 172);
-  --text-decorative-light: rgb(168, 185, 212);
-  --divider-subtle: rgba(30, 50, 100, 0.04);
-  --divider: rgba(30, 50, 100, 0.07);
-  --divider-strong: rgba(30, 50, 100, 0.09);
-  --primary: rgb(103, 70, 255);
-  --primary-light: rgb(147, 86, 255);
-  --primary-pastel: rgba(234, 230, 255);
-  --secondary: rgb(0, 151, 117);
-  --secondary-light: rgb(0, 160, 129);
-  --secondary-pastel: rgb(205, 238, 231);
-  --secondary-bright: #0ab557;
-  --input-background: rgb(240, 242, 246);
-  --input-background-light: rgb(243, 245, 249);
-  --code-background: rgb(250, 250, 250);
-  --code-background-dark: #435080;
-  --selected-background: rgb(242, 245, 250);
-  --breadcrumb-text: rgb(107, 113, 136);
-  --breadcrumb-text-hover: rgb(117, 121, 129);
-  --breadcrumb-icon: rgb(129, 131, 165);
-  --canvas-background: rgb(249, 249, 249);
-  --canvas-grid: rgba(0, 0, 0, 0.05);
-  --sidebar-background: rgb(255, 255, 255);
-  --sidebar-background-transparent: rgba(255, 255, 255, 0.85);
-  --popover-background: rgb(252, 252, 252);
-  --popover-divider: transparent;
-  --listview-raised-background: rgba(0, 0, 0, 0.03);
-  --listview-editing-background: #fff;
-  --slider-thumb-background: white;
-  --slider-border: #9698ac;
-  --mask: rgb(12, 193, 67);
-  --transparent-checker: rgba(255, 255, 255, 0.8);
-  --scrollbar: rgba(199, 199, 199, 0.8);
-  --placeholder-dots: rgba(0, 0, 0, 0.3);
-  --drag-outline: rgb(103, 70, 255);
-  --active-background: rgba(0, 0, 0, 0.1);
-  --thumbnail-background: #f0efff;
-  --thumbnail-shadow: #d3ceed66;
-  --inline-code-text: rgb(103, 70, 255);
-  --inline-code-background: rgb(240, 242, 246);
-  --text-link: rgb(103, 70, 255);
-  --text-link-focused: rgb(147, 86, 255);
-  --inset-top: 46px;
-  --sidebar-width: 260px;
-  --toolbar-height: 46px;
-  --toolbar-separator: 8px;
-  --inspector-h-separator: 8px;
-  --inspector-v-separator: 10px;
-  --dialog-padding: 16px;
-  --input-height: 27px;
-  --icon: rgb(129, 131, 165);
-  --icon-selected: rgb(220, 220, 220);
-  --warning: rgb(251, 211, 0);
-  --segmented-control-item: rgb(139, 139, 139);
-  --dot: rgba(0, 0, 0, 0.25);
-  --row-highlight: #3390ff10;
-  --table-row-background: var(--background);
-  --interactable-z-index: 2;
-  --label-z-index: 3;
-  --menu-z-index: 5000;
-  --chip-primary-bg: rgba(238, 229, 255, 0.2);
-  --chip-secondary-bg: rgba(205, 238, 231, 0.2);
-  --chip-error-bg: rgba(255, 219, 219, 0.2);
-  --chip-default-bg: rgba(0, 0, 0, 0.1);
-  --chip-primary-shadow: rgb(238, 229, 255);
-  --chip-secondary-shadow: rgb(205, 238, 231);
-  --chip-error-shadow: rgb(255, 219, 219);
-  --chip-default-shadow: rgb(0, 0, 0);
-  --floating-button: rgb(248, 248, 250);
+  --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-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-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-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-list-view-hover-background: rgb(244, 246, 250);
+  --n-list-view-thumbnail-background: var(--n-input-background);
+  --n-slider-thumb-background: white;
+  --n-slider-border: #9698ac;
+  --n-mask: rgb(12, 193, 67);
+  --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-thumbnail-background: #f0efff;
+  --n-thumbnail-shadow: #d3ceed66;
+  --n-inline-code-text: rgb(103, 70, 255);
+  --n-inline-code-background: rgb(240, 242, 246);
+  --n-text-link: rgb(103, 70, 255);
+  --n-text-link-focused: rgb(147, 86, 255);
+  --n-inset-top: 46px;
+  --n-sidebar-width: 260px;
+  --n-toolbar-height: 46px;
+  --n-toolbar-separator: 8px;
+  --n-inspector-h-separator: 8px;
+  --n-inspector-v-separator: 10px;
+  --n-dialog-padding: 16px;
+  --n-input-height: 27px;
+  --n-icon: rgb(129, 131, 165);
+  --n-icon-selected: rgb(220, 220, 220);
+  --n-warning: rgb(251, 211, 0);
+  --n-segmented-control-item: rgb(139, 139, 139);
+  --n-dot: rgba(0, 0, 0, 0.25);
+  --n-row-highlight: #3390ff10;
+  --n-table-row-background: var(--n-background);
+  --n-interactable-z-index: 2;
+  --n-label-z-index: 3;
+  --n-menu-z-index: 5000;
+  --n-chip-primary-bg: rgba(238, 229, 255, 0.2);
+  --n-chip-secondary-bg: rgba(205, 238, 231, 0.2);
+  --n-chip-error-bg: rgba(255, 219, 219, 0.2);
+  --n-chip-default-bg: rgba(0, 0, 0, 0.1);
+  --n-chip-primary-shadow: rgb(238, 229, 255);
+  --n-chip-secondary-shadow: rgb(205, 238, 231);
+  --n-chip-error-shadow: rgb(255, 219, 219);
+  --n-chip-default-shadow: rgb(0, 0, 0);
+  --n-floating-button: rgb(248, 248, 250);
+  --n-block-border: rgb(184, 201, 218);
+  --n-block-highlight: rgb(255, 165, 0);
 }
 
 [data-theme="dark"] {
-  --background: #111111;
-  --logo-fill: rgb(248, 248, 250);
-  --logo-highlight: rgb(248, 248, 250);
-  --text: rgb(248, 248, 250);
-  --text-muted: rgb(180, 179, 182);
-  --text-subtle: rgb(180, 179, 182);
-  --text-disabled: rgb(115, 114, 126);
-  --divider-subtle: rgba(255, 255, 255, 0.04);
-  --divider: rgba(255, 255, 255, 0.08);
-  --divider-strong: rgba(0, 0, 0, 1);
-  --primary: rgb(119, 66, 255);
-  --primary-light: rgb(134, 86, 255);
-  --secondary-bright: #36fe91;
-  --input-background: rgba(181, 178, 255, 0.08);
-  --input-background-light: rgba(181, 178, 255, 0.1);
-  --code-background: rgb(20, 19, 23);
-  --canvas-background: rgb(20, 19, 23);
-  --canvas-grid: rgba(0, 0, 0, 0.1);
-  --sidebar-background: rgb(34, 33, 39);
-  --sidebar-background-transparent: rgba(34, 33, 39, 0.95);
-  --popover-background: rgb(34, 33, 39);
-  --popover-divider: rgba(255, 255, 255, 0.08);
-  --listview-raised-background: rgba(181, 178, 255, 0.1);
-  --listview-editing-background: #000;
-  --slider-thumb-background: var(--input-background-light);
-  --slider-border: var(--divider);
-  --mask: rgb(102, 187, 106);
-  --transparent-checker: rgba(255, 255, 255, 0.3);
-  --scrollbar: rgba(199, 199, 199, 0.2);
-  --placeholder-dots: rgba(255, 255, 255, 0.3);
-  --drag-outline: white;
-  --active-background: rgba(181, 178, 255, 0.08);
-  --thumbnail-background: #1f1d33;
-  --thumbnail-shadow: #1f1d3366;
-  --dot: rgba(255, 255, 255, 0.15);
-  --table-row-background: var(--sidebar-background);
-  --floating-button: #333333;
+  --n-background: #111111;
+  --n-logo-fill: rgb(248, 248, 250);
+  --n-logo-highlight: rgb(248, 248, 250);
+  --n-text: rgb(248, 248, 250);
+  --n-text-muted: rgb(180, 179, 182);
+  --n-text-subtle: rgb(180, 179, 182);
+  --n-text-disabled: rgb(115, 114, 126);
+  --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-secondary-bright: #36fe91;
+  --n-input-background: rgba(181, 178, 255, 0.08);
+  --n-input-background-light: rgba(181, 178, 255, 0.1);
+  --n-code-background: rgb(20, 19, 23);
+  --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);
+  --n-listview-editing-background: #000;
+  --n-list-view-hover-background: var(--n-input-background-light);
+  --n-list-view-thumbnail-background: var(--n-input-background);
+  --n-slider-thumb-background: var(--n-input-background-light);
+  --n-slider-border: var(--n-divider);
+  --n-mask: rgb(102, 187, 106);
+  --n-transparent-checker: rgba(255, 255, 255, 0.3);
+  --n-scrollbar: rgba(199, 199, 199, 0.2);
+  --n-placeholder-dots: rgba(255, 255, 255, 0.3);
+  --n-drag-outline: white;
+  --n-active-background: rgba(181, 178, 255, 0.08);
+  --n-thumbnail-background: #1f1d33;
+  --n-thumbnail-shadow: #1f1d3366;
+  --n-dot: rgba(255, 255, 255, 0.15);
+  --n-table-row-background: var(--n-sidebar-background);
+  --n-floating-button: #333333;
 }

package/src/index.tsx

@@ -1,7 +1,10 @@
 // Components
+export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
+export * from "./components/ai-assistant/AIAssistantLayout";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
+export * from "./components/Banner";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
@@ -10,6 +13,7 @@ export * from "./components/Collection";
 export * from "./components/Combobox";
 export * from "./components/ComboboxMenu";
 export * from "./components/CommandPalette";
+export * from "./components/connected-users-menu/ConnectedUsersMenuLayout";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
@@ -18,6 +22,7 @@ export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
+export * from "./components/file-explorer/FileExplorerLayout";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
@@ -42,10 +47,13 @@ export * from "./components/List";
 export * from "./components/ListView";
 export * from "./components/MediaThumbnail";
 export * from "./components/Message";
+export * from "./components/NoyaLogo";
+export * from "./components/pipeline/PipelineResultLayout";
 export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
+export * from "./components/Section";
 export * from "./components/SegmentedControl";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
@@ -83,6 +91,7 @@ export * from "./utils/getGradientBackground";
 export * from "./utils/colorFromString";
 export * from "./utils/combobox";
 export * from "./utils/fuzzyScorer";
+export * from "./utils/moveTreeItem";
 export * from "./utils/selection";
 export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";

package/src/theme/index.ts

@@ -6,3 +6,5 @@ export type Theme = (typeof tailwindConfig.theme)["extend"];
 export type ThemeColor = keyof Theme["colors"];
 
 export const cssVars = convertKebabToCamelCase(tailwindConfig.theme.extend);
+
+export const INPUT_HEIGHT = 27;

package/src/utils/classNames.ts

@@ -1,5 +1,78 @@
-export function cx(
-  ...args: Array<string | number | boolean | null | undefined>
-): string {
+import tailwindConfig from "../../tailwind.config";
+
+type ClassNameItem = string | number | BigInt | boolean | null | undefined;
+type Category = "text" | "color" | "font" | "flex";
+type Options = {
+  categories?: Category[];
+};
+
+const colorKeys = Object.keys(tailwindConfig.theme.extend.colors).map(
+  (key) => `text-${key}`
+);
+const colorKeysSet = new Set(colorKeys);
+const textKeys = Object.keys(tailwindConfig.theme.extend.fontSize).map(
+  (key) => `text-${key}`
+);
+const textKeysSet = new Set(textKeys);
+const fontKeys = [
+  "thin",
+  "extralight",
+  "light",
+  "normal",
+  "medium",
+  "semibold",
+  "bold",
+  "extra-bold",
+  "black",
+].map((key) => `font-${key}`);
+const fontKeysSet = new Set(fontKeys);
+const flexKeysSet = new Set([
+  "flex-auto",
+  "flex-none",
+  "flex-[0_0_auto]",
+  "flex-1",
+]);
+
+const keyMap: Record<Category, Set<string>> = {
+  text: textKeysSet,
+  flex: flexKeysSet,
+  color: colorKeysSet,
+  font: fontKeysSet,
+};
+
+export function cx(...args: ClassNameItem[]): string {
   return args.filter(Boolean).join(" ").trim();
 }
+
+const filterLastClassNameInCategory = ({
+  classNames,
+  categoryKeys,
+}: {
+  classNames: string[];
+  categoryKeys: Set<string>;
+}) => {
+  const lastClassInGroup = classNames.findLast((key) => categoryKeys.has(key));
+  return classNames.flatMap((className) => {
+    if (categoryKeys.has(className)) {
+      return lastClassInGroup === className ? [className] : [];
+    }
+    return [className];
+  });
+};
+
+export function mergeConflictingClassNames(
+  classNames: ClassNameItem | ClassNameItem[],
+  options?: Options
+): string {
+  const classes = Array.isArray(classNames)
+    ? cx(...classNames)
+    : cx(classNames);
+  let classNamesList = classes.split(/\s+/);
+  options?.categories?.forEach((category) => {
+    classNamesList = filterLastClassNameInCategory({
+      classNames: classNamesList,
+      categoryKeys: keyMap[category],
+    });
+  });
+  return classNamesList.join(" ");
+}

package/src/utils/inputs.ts

@@ -0,0 +1,21 @@
+import { cx } from "./classNames";
+
+export type InputSize = "small" | "medium" | "large";
+
+const insetEndBaseStyles = "absolute inset-y-0 flex items-center z-label";
+
+export const getInsetEndStyles = (size: InputSize = "medium") => {
+  return cx(
+    insetEndBaseStyles,
+    size === "large"
+      ? "right-2"
+      : size === "medium"
+        ? "right-1.5"
+        : size === "small"
+          ? "right-0.5"
+          : "",
+    size === "small" ? "min-h-[19px]" : "min-h-input-height"
+  );
+};
+
+export const startBaseStyles = "absolute left-1.5 inset-y-0 flex items-center";

package/src/utils/moveTreeItem.ts

@@ -0,0 +1,99 @@
+import { isDeepEqual } from "@noya-app/noya-utils";
+import {
+  defaultAcceptsDrop,
+  RelativeDropPosition,
+} from "../components/Sortable";
+
+type MoveOptions = {
+  indexPaths: number[][];
+  to: number[];
+};
+
+export type MoveTreeItemOptions<T> = {
+  root: T;
+  move: (root: T, options: MoveOptions) => T;
+  position: RelativeDropPosition;
+  sourceIndexPath: number[];
+  targetIndexPath: number[];
+};
+
+export function moveTreeItem<T>({
+  root,
+  move,
+  position,
+  sourceIndexPath,
+  targetIndexPath,
+}: MoveTreeItemOptions<T>): T {
+  switch (position) {
+    case "above": {
+      return move(root, {
+        indexPaths: [sourceIndexPath],
+        to: targetIndexPath,
+      });
+    }
+    case "below": {
+      return move(root, {
+        indexPaths: [sourceIndexPath],
+        to: [...targetIndexPath.slice(0, -1), targetIndexPath.at(-1)! + 1],
+      });
+    }
+    case "inside": {
+      return move(root, {
+        indexPaths: [sourceIndexPath],
+        to: [...targetIndexPath, 1000],
+      });
+    }
+  }
+}
+
+export type AcceptsDropOptions = {
+  sourceIndexPath: number[];
+  targetIndexPath: number[];
+  position: RelativeDropPosition;
+
+  /**
+   * Whether to allow dropping the source item within the same parent as the target item.
+   */
+  allowSiblings: boolean;
+
+  /**
+   * Whether to allow dropping the source item within itself or one of its descendants.
+   */
+  allowRecursion: boolean;
+};
+
+export function acceptsDrop({
+  sourceIndexPath,
+  targetIndexPath,
+  position,
+  allowSiblings,
+  allowRecursion,
+}: AcceptsDropOptions): boolean {
+  if (!allowRecursion) {
+    const targetIsDescendantOfSource = isDeepEqual(
+      sourceIndexPath,
+      targetIndexPath.slice(0, sourceIndexPath.length)
+    );
+
+    if (targetIsDescendantOfSource) return false;
+  }
+
+  const areSiblings = isDeepEqual(
+    sourceIndexPath.slice(0, -1),
+    targetIndexPath.slice(0, -1)
+  );
+
+  if (areSiblings && position !== "inside") {
+    if (!allowSiblings) {
+      return false;
+    }
+
+    return defaultAcceptsDrop(
+      sourceIndexPath.at(-1)!,
+      targetIndexPath.at(-1)!,
+      position
+    );
+  }
+
+  return true;
+}