@noya-app/noya-designsystem 0.1.77 → 0.1.78

package/src/utils/mergeProps.ts

@@ -0,0 +1,57 @@
+import React from "react";
+
+/**
+ * Merges trigger props with child element props, composing event handlers
+ * instead of overwriting them. This ensures that when a component like
+ * Tooltip wraps a Button with an onClick, both handlers get called.
+ *
+ * @param triggerProps - Props from the trigger component (e.g., Base UI's Trigger render prop)
+ * @param childProps - Props from the child element being wrapped
+ * @returns Merged props with composed event handlers
+ */
+export function mergePropsWithEventComposition(
+  triggerProps: Record<string, unknown>,
+  childProps: Record<string, unknown>
+): Record<string, unknown> {
+  const mergedProps: Record<string, unknown> = { ...triggerProps };
+
+  // Compose event handlers to preserve child's handlers
+  for (const key of Object.keys(triggerProps)) {
+    if (
+      key.startsWith("on") &&
+      typeof triggerProps[key] === "function" &&
+      typeof childProps[key] === "function"
+    ) {
+      const triggerHandler = triggerProps[key] as (...args: unknown[]) => void;
+      const childHandler = childProps[key] as (...args: unknown[]) => void;
+      mergedProps[key] = (...args: unknown[]) => {
+        childHandler(...args);
+        triggerHandler(...args);
+      };
+    }
+  }
+
+  return mergedProps;
+}
+
+/**
+ * Clones a React element with trigger props, composing event handlers.
+ * If the element is not a valid React element, wraps it in a span.
+ *
+ * @param element - The element to clone (trigger child)
+ * @param triggerProps - Props from the trigger component
+ * @returns Cloned element with merged props
+ */
+export function cloneElementWithMergedProps(
+  element: React.ReactNode,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  triggerProps: any
+): React.ReactElement {
+  const props = triggerProps as Record<string, unknown>;
+  if (React.isValidElement(element)) {
+    const childProps = element.props as Record<string, unknown>;
+    const mergedProps = mergePropsWithEventComposition(props, childProps);
+    return React.cloneElement(element, mergedProps);
+  }
+  return React.createElement("span", props, element);
+}

package/src/utils/skinTone.ts

@@ -0,0 +1,90 @@
+// Fitzpatrick skin tone modifiers
+export const SKIN_TONES = {
+  default: "",
+  light: "\u{1F3FB}", // 🏻 Type 1-2
+  "medium-light": "\u{1F3FC}", // 🏼 Type 3
+  medium: "\u{1F3FD}", // 🏽 Type 4
+  "medium-dark": "\u{1F3FE}", // 🏾 Type 5
+  dark: "\u{1F3FF}", // 🏿 Type 6
+} as const;
+
+export type SkinTone = keyof typeof SKIN_TONES;
+
+// Display emojis for the skin tone picker (using hand as example)
+export const SKIN_TONE_DISPLAY: Record<SkinTone, string> = {
+  default: "✋",
+  light: "✋🏻",
+  "medium-light": "✋🏼",
+  medium: "✋🏽",
+  "medium-dark": "✋🏾",
+  dark: "✋🏿",
+};
+
+// Emoji presentation selector - takes the same place as skin tone modifier
+// https://unicode.org/reports/tr51/#composing_zwj_seq
+const EMOJI_PRESENTATION_SELECTOR = "\u{FE0F}";
+
+// Emojis that don't render correctly with skin tones on some platforms
+// - Family emojis with 2 people (to distinguish from couple, handshake, etc.)
+// - Multi-person activity emojis (don't render correctly on macOS)
+const SKIN_TONE_EXCLUDED_EMOJIS = new Set([
+  "👩‍👦",
+  "👩‍👧",
+  "👨‍👧",
+  "👨‍👦",
+  "👯", // dancers
+  "👯‍♂️", // dancing_men
+  "👯‍♀️", // dancing_women
+  "🤼", // wrestling
+  "🤼‍♂️", // men_wrestling
+  "🤼‍♀️", // women_wrestling
+]);
+
+// Regex to match emoji modifier base characters (characters that can have skin tone applied)
+const EMOJI_MODIFIER_BASE_REGEX = /\p{Emoji_Modifier_Base}/gu;
+
+// Apply skin tone modifier to an emoji
+// Based on https://github.com/sindresorhus/skin-tone (MIT)
+export function applySkinTone(emoji: string, skinTone: SkinTone): string {
+  if (skinTone === "default") {
+    return emoji;
+  }
+
+  // Remove any existing skin tone modifiers
+  const cleanEmoji = emoji.replaceAll(/[\u{1F3FB}-\u{1F3FF}]/gu, "");
+
+  // Count how many modifiable components the emoji has
+  const modifiableCount =
+    cleanEmoji.match(EMOJI_MODIFIER_BASE_REGEX)?.length ?? 0;
+
+  // Skip if:
+  // - No modifiable components
+  // - More than 2 modifiable components (family emojis with 3+ people)
+  // - Excluded emoji (family emojis, dancers that don't render correctly)
+  if (
+    modifiableCount === 0 ||
+    modifiableCount > 2 ||
+    SKIN_TONE_EXCLUDED_EMOJIS.has(cleanEmoji)
+  ) {
+    return emoji;
+  }
+
+  const tone = SKIN_TONES[skinTone];
+  let result = "";
+
+  for (const codePoint of cleanEmoji) {
+    // Skip emoji presentation selector (it's replaced by skin tone modifier)
+    if (codePoint === EMOJI_PRESENTATION_SELECTOR) {
+      continue;
+    }
+
+    result += codePoint;
+
+    // Apply skin tone after each modifiable component
+    if (EMOJI_MODIFIER_BASE_REGEX.test(codePoint)) {
+      result += tone;
+    }
+  }
+
+  return result;
+}

package/tsup.config.ts

@@ -6,7 +6,7 @@ const execAsync = promisify(exec);
 
 // "build": "tsup src/index.tsx --format cjs,esm --dts --sourcemap",
 export default defineConfig({
-  entry: ["./src/index.tsx"],
+  entry: ["./src/index.tsx", "./src/emojis.ts"],
   format: ["cjs", "esm"],
   dts: true,
   sourcemap: true,

package/src/__tests__/workspaceLayout.test.ts

@@ -1,281 +0,0 @@
-import { expect, it } from "bun:test";
-import { MockClientStorage } from "../../../noya-react-utils/src/__tests__/MockClientStorage";
-import {
-  CONTENT_AREA_ID,
-  LEFT_SIDEBAR_ID,
-  RIGHT_SIDEBAR_ID,
-} from "../components/workspace/constants";
-import {
-  getInitialLayout,
-  getLayoutCollapsedState,
-  getLayoutIds,
-  getPropertyKey,
-  getStorageKey,
-  mapWorkspaceLayoutState,
-  setInitialLayout,
-  toPercentageSize,
-  toPixelSize,
-} from "../components/workspace/panelStorage";
-import { WorkspaceLayoutState } from "../components/workspace/types";
-
-const TEST_WINDOW_WIDTH = 1000;
-
-it("gets layout ids", () => {
-  expect(
-    getLayoutIds({
-      hasLeftPanel: true,
-      hasRightPanel: false,
-      hasCenterPanel: true,
-    })
-  ).toEqual([LEFT_SIDEBAR_ID, CONTENT_AREA_ID]);
-});
-
-it("gets layout ids with all panels", () => {
-  expect(
-    getLayoutIds({
-      hasLeftPanel: true,
-      hasRightPanel: true,
-      hasCenterPanel: true,
-    })
-  ).toEqual([LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID]);
-});
-
-it("gets layout ids with no panels", () => {
-  expect(
-    getLayoutIds({
-      hasLeftPanel: false,
-      hasRightPanel: false,
-      hasCenterPanel: false,
-    })
-  ).toEqual([]);
-});
-
-it("converts to pixel size", () => {
-  expect(toPixelSize(25, TEST_WINDOW_WIDTH)).toBe(250); // 25% of 1000px = 250px
-  expect(toPixelSize(50, TEST_WINDOW_WIDTH)).toBe(500); // 50% of 1000px = 500px
-  expect(toPixelSize(75, TEST_WINDOW_WIDTH)).toBe(750); // 75% of 1000px = 750px
-});
-
-it("converts to percentage size", () => {
-  expect(toPercentageSize(250, TEST_WINDOW_WIDTH)).toBe(25); // 250px of 1000px = 25%
-  expect(toPercentageSize(500, TEST_WINDOW_WIDTH)).toBe(50); // 500px of 1000px = 50%
-  expect(toPercentageSize(750, TEST_WINDOW_WIDTH)).toBe(75); // 750px of 1000px = 75%
-});
-
-it("maps workspace layout state", () => {
-  const layout: WorkspaceLayoutState = {
-    "left,center": {
-      layout: [20, 80],
-      expandToSizes: { left: 30, center: 70 },
-    },
-    "left,center,right": {
-      layout: [20, 60, 20],
-      expandToSizes: { left: 25, center: 50, right: 25 },
-    },
-  };
-
-  const mapped = mapWorkspaceLayoutState(layout, (size) => size * 2);
-
-  expect(mapped).toEqual({
-    "left,center": {
-      layout: [40, 160],
-      expandToSizes: { left: 60, center: 140 },
-    },
-    "left,center,right": {
-      layout: [40, 120, 40],
-      expandToSizes: { left: 50, center: 100, right: 50 },
-    },
-  });
-});
-
-it("gets property key", () => {
-  expect(getPropertyKey([LEFT_SIDEBAR_ID, CONTENT_AREA_ID])).toBe(
-    [CONTENT_AREA_ID, LEFT_SIDEBAR_ID].sort().join(",")
-  );
-});
-
-it("gets storage key", () => {
-  expect(getStorageKey("test-workspace")).toBe(
-    "react-resizable-panels:test-workspace"
-  );
-});
-
-it("gets initial layout with left panel only", () => {
-  const result = getInitialLayout({
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID],
-    leftSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    rightSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    centerPanelPercentage: 80,
-    hasLeftPanel: true,
-    hasRightPanel: false,
-    hasCenterPanel: true,
-    windowWidth: TEST_WINDOW_WIDTH,
-  });
-
-  expect(result).toEqual([200, 800]); // 20% and 80% of 1000px
-});
-
-it("gets initial layout with collapsed left panel", () => {
-  const result = getInitialLayout({
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID],
-    leftSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: true,
-    },
-    rightSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    centerPanelPercentage: 80,
-    hasLeftPanel: true,
-    hasRightPanel: false,
-    hasCenterPanel: true,
-    windowWidth: TEST_WINDOW_WIDTH,
-  });
-
-  expect(result).toEqual([0, 1000]); // Collapsed left panel, center takes full width
-});
-
-it("gets initial layout with all panels", () => {
-  const result = getInitialLayout({
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID],
-    leftSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    rightSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    centerPanelPercentage: 60,
-    hasLeftPanel: true,
-    hasRightPanel: true,
-    hasCenterPanel: true,
-    windowWidth: TEST_WINDOW_WIDTH,
-  });
-
-  expect(result).toEqual([200, 600, 200]); // 20%, 60%, 20% of 1000px
-});
-
-it("sets initial layout in storage", () => {
-  const mockStorage = new MockClientStorage();
-
-  setInitialLayout({
-    storageKey: "test-key",
-    propertyKey: "left,center",
-    calculateLayout: () => [200, 800],
-    storage: mockStorage,
-  });
-
-  expect(mockStorage.hasItem("test-key")).toBe(true);
-  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual({
-    "left,center": {
-      layout: [200, 800],
-      expandToSizes: {},
-    },
-  });
-});
-
-it("does not update existing layout property in storage", () => {
-  const existingLayout: WorkspaceLayoutState = {
-    center: {
-      layout: [1000],
-      expandToSizes: {},
-    },
-    // Already has the property we're trying to set
-    "left,center": {
-      layout: [100, 900],
-      expandToSizes: {},
-    },
-  };
-
-  const mockStorage = new MockClientStorage();
-  mockStorage.setItem("test-key", JSON.stringify(existingLayout));
-
-  setInitialLayout({
-    storageKey: "test-key",
-    propertyKey: "left,center",
-    calculateLayout: () => [200, 800],
-    storage: mockStorage,
-  });
-
-  // setInitialLayout doesn't update existing properties, so the layout should remain unchanged
-  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual(
-    existingLayout
-  );
-});
-
-it("adds new layout property to existing storage", () => {
-  const existingLayout: WorkspaceLayoutState = {
-    center: {
-      layout: [1000],
-      expandToSizes: {},
-    },
-  };
-
-  const mockStorage = new MockClientStorage();
-  mockStorage.setItem("test-key", JSON.stringify(existingLayout));
-
-  // The propertyId should be sorted
-  const sortedPropertyId = [LEFT_SIDEBAR_ID, CONTENT_AREA_ID].sort().join(",");
-
-  setInitialLayout({
-    storageKey: "test-key",
-    propertyKey: sortedPropertyId,
-    calculateLayout: () => [200, 800],
-    storage: mockStorage,
-  });
-
-  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual({
-    center: {
-      layout: [1000],
-      expandToSizes: {},
-    },
-    [sortedPropertyId]: {
-      layout: [200, 800],
-      expandToSizes: {},
-    },
-  });
-});
-
-it("gets layout collapsed state", () => {
-  const layoutGroup = {
-    layout: [0, 800, 200],
-    expandToSizes: {},
-  };
-
-  const result = getLayoutCollapsedState({
-    layoutGroup,
-    propertyKey: "left,center,right",
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID],
-    hasLeftPanel: true,
-    hasRightPanel: true,
-  });
-
-  expect(result.leftSidebarCollapsed).toBe(true); // size is 0
-  expect(result.rightSidebarCollapsed).toBe(false); // size is 200
-});
-
-it("handles panels that don't exist", () => {
-  const layoutGroup = {
-    layout: [1000],
-    expandToSizes: {},
-  };
-
-  const result = getLayoutCollapsedState({
-    layoutGroup,
-    propertyKey: "center",
-    layoutIds: [CONTENT_AREA_ID],
-    hasLeftPanel: false,
-    hasRightPanel: false,
-  });
-
-  expect(result.leftSidebarCollapsed).toBe(false); // Panel doesn't exist
-  expect(result.rightSidebarCollapsed).toBe(false); // Panel doesn't exist
-});

package/src/components/ScrollArea2.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { ScrollArea } from "@base-ui-components/react/scroll-area";
-import * as React from "react";
-import { cx } from "../utils/classNames";
-
-const SCROLLBAR_STATE_CLASSES =
-  "scroll-component n-opacity-0 n-transition-opacity n-delay-300 n-pointer-events-none data-[hovering]:n-opacity-100 data-[hovering]:n-delay-0 data-[hovering]:n-duration-75 data-[hovering]:n-pointer-events-auto data-[scrolling]:n-opacity-100 data-[scrolling]:n-delay-0 data-[scrolling]:n-duration-75 data-[scrolling]:n-pointer-events-auto";
-
-const SCROLLBAR_TRACK_VERTICAL =
-  "n-m-1 n-w-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
-const SCROLLBAR_TRACK_HORIZONTAL =
-  "n-m-1 n-h-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
-
-const SCROLLBAR_THUMB_VERTICAL =
-  "scroll-component n-w-full n-rounded n-bg-scrollbar";
-const SCROLLBAR_THUMB_HORIZONTAL =
-  "scroll-component n-h-full n-rounded n-bg-scrollbar";
-
-type ScrollAreaViewportProps = React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.Ref<HTMLDivElement>;
-};
-
-export function ScrollArea2({
-  children,
-  className,
-  viewportClassName,
-  orientation = "vertical",
-  style,
-  viewportProps,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  viewportClassName?: string;
-  orientation?: "vertical" | "horizontal" | "both";
-  style?: React.CSSProperties;
-  viewportProps?: ScrollAreaViewportProps;
-}) {
-  const {
-    className: viewportPropsClassName,
-    ref: viewportRef,
-    ...viewportRest
-  } = viewportProps ?? {};
-
-  return (
-    <ScrollArea.Root className={cx("n-relative", className)} style={style}>
-      <ScrollArea.Viewport
-        ref={viewportRef}
-        className={cx(
-          "n-h-full n-overscroll-contain",
-          viewportClassName,
-          viewportPropsClassName
-        )}
-        {...viewportRest}
-      >
-        {children}
-      </ScrollArea.Viewport>
-      {(orientation === "vertical" || orientation === "both") && (
-        <ScrollArea.Scrollbar
-          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)}
-        >
-          <ScrollArea.Thumb className={SCROLLBAR_THUMB_VERTICAL} />
-        </ScrollArea.Scrollbar>
-      )}
-      {(orientation === "horizontal" || orientation === "both") && (
-        <ScrollArea.Scrollbar
-          orientation="horizontal"
-          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)}
-        >
-          <ScrollArea.Thumb className={SCROLLBAR_THUMB_HORIZONTAL} />
-        </ScrollArea.Scrollbar>
-      )}
-      {orientation === "both" && <ScrollArea.Corner />}
-    </ScrollArea.Root>
-  );
-}

package/src/components/internal/MenuViewport.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { ChevronRightIcon } from "@noya-app/noya-icons";
-import {
-  ContextMenu as RadixContextMenu,
-  DropdownMenu as RadixDropdownMenu,
-} from "radix-ui";
-import React from "react";
-import {
-  portalScopeProps,
-  usePortalScopeId,
-} from "../../contexts/PortalScopeContext";
-import { cx } from "../../utils/classNames";
-import {
-  isSelectableMenuItem,
-  MenuItem,
-  SectionHeaderMenuItem,
-  styles,
-} from "./Menu";
-import { SelectItem } from "./SelectItem";
-
-type MenuSeparatorComponent = React.FC<{ className?: string }>;
-type MenuItemTextComponent = React.FC<{ children?: React.ReactNode }>;
-type MenuItemComponent = React.ForwardRefExoticComponent<
-  React.RefAttributes<HTMLDivElement> &
-    React.PropsWithoutRef<{
-      className?: string;
-      disabled?: boolean;
-      children?: React.ReactNode;
-      value: string;
-      onSelect?: (event: any) => void;
-      onClick?: (event: React.MouseEvent<any>) => void;
-    }>
->;
-type MenuCheckboxItemComponent = React.FC<{
-  checked?: boolean | "indeterminate";
-  disabled?: boolean;
-  onSelect?: (event: any) => void;
-  className?: string;
-  children?: React.ReactNode;
-}>;
-
-type MenuItemIndicatorComponent = React.FC<{
-  className?: string;
-  children?: React.ReactNode;
-}>;
-
-export type MenuComponents = {
-  Separator: MenuSeparatorComponent;
-  ItemText: MenuItemTextComponent;
-  Item: MenuItemComponent;
-  CheckboxItem?: MenuCheckboxItemComponent;
-  ItemIndicator?: MenuItemIndicatorComponent;
-  Sub?: typeof RadixDropdownMenu.Sub | typeof RadixContextMenu.Sub;
-  SubTrigger?:
-    | typeof RadixDropdownMenu.SubTrigger
-    | typeof RadixContextMenu.SubTrigger;
-  SubContent?:
-    | typeof RadixDropdownMenu.SubContent
-    | typeof RadixContextMenu.SubContent;
-  Portal?: typeof RadixDropdownMenu.Portal | typeof RadixContextMenu.Portal;
-};
-
-type MenuViewportProps<T extends string> = {
-  items: MenuItem<T>[];
-  Components: MenuComponents;
-  onSelect?: (value: any) => void;
-};
-
-export const MenuViewport = <T extends string>({
-  items,
-  Components,
-  onSelect,
-}: MenuViewportProps<T>) => {
-  const portalScopeId = usePortalScopeId();
-
-  const hasCheckedItem = items.some(
-    (item) => isSelectableMenuItem(item) && item.checked
-  );
-
-  return (
-    <>
-      {items.map((item, index) => {
-        switch (item.type) {
-          case "separator":
-            return (
-              <Components.Separator
-                key={index}
-                className={styles.separatorStyle}
-              />
-            );
-
-          case "sectionHeader":
-            return (
-              <SectionHeaderMenuItem
-                isFirst={index === 0}
-                key={item.id}
-                {...item}
-                indented={hasCheckedItem}
-              />
-            );
-          case "popover":
-            return null;
-          case "submenu":
-            if (
-              item.items &&
-              Components.Sub &&
-              Components.SubTrigger &&
-              Components.SubContent &&
-              Components.Portal
-            ) {
-              return (
-                <Components.Sub key={item.id}>
-                  <Components.SubTrigger
-                    className={cx(
-                      styles.itemStyle({ disabled: item.disabled }),
-                      styles.selectedItemStyle
-                    )}
-                    asChild
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                    }}
-                    disabled={item.disabled}
-                  >
-                    <SelectItem
-                      value={item.id}
-                      icon={item.icon}
-                      checked={item.checked}
-                      onSelect={onSelect}
-                      Components={Components}
-                      indented={hasCheckedItem}
-                      disabled={item.disabled}
-                    >
-                      <div className="n-flex n-items-center n-flex-1">
-                        {item.title}
-                      </div>
-                      <ChevronRightIcon className="-n-mr-1" />
-                    </SelectItem>
-                  </Components.SubTrigger>
-                  <Components.Portal>
-                    <Components.SubContent
-                      {...portalScopeProps(portalScopeId)}
-                      alignOffset={-5}
-                      className={styles.contentStyle}
-                    >
-                      <MenuViewport
-                        items={item.items}
-                        Components={Components}
-                        onSelect={onSelect}
-                      />
-                    </Components.SubContent>
-                  </Components.Portal>
-                </Components.Sub>
-              );
-            } else return null;
-          default:
-            return (
-              <SelectItem
-                key={item.value}
-                value={item.value}
-                icon={item.icon}
-                checked={item.checked}
-                shortcut={item.shortcut}
-                onSelect={onSelect}
-                Components={Components}
-                indented={hasCheckedItem}
-                testSelected={item.testSelected}
-                disabled={item.disabled}
-              >
-                {item.title ?? item.value}
-              </SelectItem>
-            );
-        }
-      })}
-    </>
-  );
-};