@noya-app/noya-designsystem 0.1.49 → 0.1.51

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;
+}

package/tailwind.config.ts

@@ -1,246 +1,9 @@
+import noyaConfig from "@noya-app/noya-tailwind-config";
 import containerQueries from "@tailwindcss/container-queries";
 import type { Config } from "tailwindcss";
 
 const config = {
-  content: ["./src/**/*.{ts,tsx}"],
-  corePlugins: {
-    // disables @tailwind base global styles
-    preflight: false,
-  },
-  theme: {
-    extend: {
-      colors: {
-        "logo-fill": "var(--logo-fill)",
-        "logo-highlight": "var(--logo-highlight)",
-        background: "var(--background)",
-        text: "var(--text)",
-        "text-muted": "var(--text-muted)",
-        "text-subtle": "var(--text-subtle)",
-        "text-disabled": "var(--text-disabled)",
-        "text-decorative-light": "var(--text-decorative-light)",
-        "divider-subtle": "var(--divider-subtle)",
-        divider: "var(--divider)",
-        "divider-strong": "var(--divider-strong)",
-        primary: "var(--primary)",
-        "primary-light": "var(--primary-light)",
-        "primary-pastel": "var(--primary-pastel)",
-        secondary: "var(--secondary)",
-        "secondary-light": "var(--secondary-light)",
-        "secondary-pastel": "var(--secondary-pastel)",
-        "secondary-bright": "var(--secondary-bright)",
-        "input-background": "var(--input-background)",
-        "input-background-light": "var(--input-background-light)",
-        "list-view-hover-background": "var(--list-view-hover-background)",
-        "list-view-thumbnail-background":
-          "var(--list-view-thumbnail-background)",
-        "code-background": "var(--code-background)",
-        "code-background-dark": "var(--code-background-dark)",
-        "selected-background": "var(--selected-background)",
-        "breadcrumb-text": "var(--breadcrumb-text)",
-        "breadcrumb-text-hover": "var(--breadcrumb-text-hover)",
-        "breadcrumb-icon": "var(--breadcrumb-icon)",
-        "canvas-background": "var(--canvas-background)",
-        "canvas-grid": "var(--canvas-grid)",
-        "sidebar-background": "var(--sidebar-background)",
-        "sidebar-background-transparent":
-          "var(--sidebar-background-transparent)",
-        "popover-background": "var(--popover-background)",
-        "popover-divider": "var(--popover-divider)",
-        "listview-raised-background": "var(--listview-raised-background)",
-        "listview-editing-background": "var(--listview-editing-background)",
-        "slider-thumb-background": "var(--slider-thumb-background)",
-        "slider-border": "var(--slider-border)",
-        "segmented-control-item": "var(--segmented-control-item)",
-        mask: "var(--mask)",
-        "transparent-checker": "var(--transparent-checker)",
-        scrollbar: "var(--scrollbar)",
-        "placeholder-dots": "var(--placeholder-dots)",
-        "drag-outline": "var(--drag-outline)",
-        "active-background": "var(--active-background)",
-        "thumbnail-background": "var(--thumbnail-background)",
-        "thumbnail-shadow": "var(--thumbnail-shadow)",
-        "inline-code-text": "var(--inline-code-text)",
-        "inline-code-background": "var(--inline-code-background)",
-        "text-link": "var(--text-link)",
-        "text-link-focused": "var(--text-link-focused)",
-        icon: "var(--icon)",
-        "icon-selected": "var(--icon-selected)",
-        warning: "var(--warning)",
-        dot: "var(--dot)",
-        "row-highlight": "var(--row-highlight)",
-        "table-row-background": "var(--table-row-background)",
-        "chip-primary-bg": "var(--chip-primary-bg)",
-        "chip-secondary-bg": "var(--chip-secondary-bg)",
-        "chip-error-bg": "var(--chip-error-bg)",
-        "chip-default-bg": "var(--chip-default-bg)",
-        "chip-primary-shadow": "var(--chip-primary-shadow)",
-        "chip-secondary-shadow": "var(--chip-secondary-shadow)",
-        "chip-error-shadow": "var(--chip-error-shadow)",
-        "chip-default-shadow": "var(--chip-default-shadow)",
-        "floating-button": "var(--floating-button)",
-        "block-border": "var(--block-border)",
-        "block-highlight": "var(--block-highlight)",
-      },
-      fontFamily: {
-        sans: [
-          "__Inter_6b0edc",
-          "__Inter_Fallback_6b0edc",
-          "-apple-system",
-          "BlinkMacSystemFont",
-          "Helvetica Neue",
-          "Segoe UI",
-          "Roboto",
-          "Helvetica",
-          "Arial",
-          "sans-serif",
-        ],
-        mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"],
-      },
-      // Type scale
-      // The last one, 0.85, I just eyeballed
-      // old:  typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
-      fontSize: {
-        title: [
-          "3.052rem", // 48.83px
-          {
-            lineHeight: "1.4",
-            letterSpacing: "-0.05em",
-          },
-        ],
-        subtitle: [
-          "1.563rem", // 25px
-          {
-            lineHeight: "1.75",
-            letterSpacing: "-0.05em",
-          },
-        ],
-        heading1: [
-          "1.953rem", // 31.25px
-          {
-            lineHeight: "1.6",
-            letterSpacing: "-0.025em",
-          },
-        ],
-        heading2: [
-          "1.563rem", // 25px
-          {
-            lineHeight: "1.5",
-            letterSpacing: "-0.025em",
-          },
-        ],
-        heading3: [
-          "1.25rem", // 20px
-          {
-            lineHeight: "1.4",
-            letterSpacing: "-0.025em",
-          },
-        ],
-        heading4: [
-          "1rem", // 16px
-          {
-            lineHeight: "1.4",
-          },
-        ],
-        heading5: [
-          "0.85rem", // 13.6px
-          {
-            lineHeight: "1.4",
-          },
-        ],
-        body: [
-          "1", // 16px (1 = 1rem)
-          {
-            lineHeight: "1.4",
-          },
-        ],
-        small: [
-          "1", // 16px (1 = 1rem)
-          {
-            lineHeight: "19px",
-          },
-        ],
-        code: [
-          "90%", // 14.4px
-          {
-            lineHeight: "1.5",
-          },
-        ],
-        button: [
-          "0.8rem", // 12.8px
-          {
-            lineHeight: "1.4",
-            letterSpacing: "-0.2px",
-          },
-        ],
-        label: [
-          "0.62rem", // 9.92px
-          {
-            lineHeight: "19px",
-            letterSpacing: "-0.3px",
-          },
-        ],
-      },
-      spacing: {
-        nano: "2px",
-        micro: "4px",
-        small: "8px",
-        medium: "16px",
-        large: "32px",
-        xlarge: "64px",
-        xxlarge: "128px",
-        "inset-top": "var(--inset-top)",
-        "sidebar-width": "var(--sidebar-width)",
-        "toolbar-height": "var(--toolbar-height)",
-        "toolbar-separator": "var(--toolbar-separator)",
-        "inspector-h-separator": "var(--inspector-h-separator)",
-        "inspector-v-separator": "var(--inspector-v-separator)",
-        "dialog-padding": "var(--dialog-padding)",
-        "input-height": "var(--input-height)",
-      },
-      keyframes: {
-        spin: {
-          "0%": { transform: "rotate(0deg)" },
-          "100%": { transform: "rotate(360deg)" },
-        },
-        shimmer: {
-          "0%": {
-            backgroundPosition: "-200% 0",
-          },
-          "100%": {
-            backgroundPosition: "200% 0",
-          },
-        },
-      },
-      animation: {
-        spin: "spin 1s linear infinite",
-        shimmer: "shimmer 6s infinite linear",
-      },
-      zIndex: {
-        interactable: "var(--interactable-z-index)",
-        label: "var(--label-z-index)",
-        menu: "var(--menu-z-index)",
-      },
-    },
-  },
-  safelist: [
-    "group",
-    "group-hover:flex",
-    "bg-row-highlight",
-    "left-5",
-    "right-6",
-    "m-[0_-24px_0_-20px]",
-    "p-[0_24px_0_20px]",
-    "left-0",
-    "border-divider-strong",
-    "decoration-text-decorative-light",
-    "underline",
-    "-left-2.5",
-    "-mr-2",
-    "border-gray-200",
-    "gap-1.5",
-    "gap-toolbar-separator",
-    "-mr-1",
-  ],
+  ...noyaConfig,
   plugins: [containerQueries],
 } satisfies Config;
 

package/tailwind.d.ts

@@ -1,5 +1,5 @@
 // Get the config from your actual config file
-import tailwindConfig from "./tailwind.config";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
 
 type ExtractThemeTypes<T> = T extends { theme: { extend: infer E } }
   ? E

package/tsup.config.ts

@@ -1,5 +1,4 @@
 import { exec } from "child_process";
-import fixReactVirtualized from "esbuild-plugin-react-virtualized";
 import { defineConfig } from "tsup";
 import { promisify } from "util";
 
@@ -11,8 +10,6 @@ export default defineConfig({
   format: ["cjs", "esm"],
   dts: true,
   sourcemap: true,
-  noExternal: ["react-virtualized"],
-  esbuildPlugins: [fixReactVirtualized],
   async onSuccess() {
     // Build Tailwind CSS after successful tsup build
     try {