@noya-app/noya-designsystem 0.0.2

package/src/contexts/GlobalInputBlurContext.tsx

@@ -0,0 +1,61 @@
+import { createContext, useContext, useEffect } from 'react';
+
+export type GlobalInputBlurContextValue = {
+  addListener: (f: () => void) => void;
+  removeListener: (f: () => void) => void;
+  trigger: () => void;
+};
+
+const defaultValue = (() => {
+  const listeners: (() => void)[] = [];
+
+  const value: GlobalInputBlurContextValue = {
+    addListener(f) {
+      listeners.push(f);
+    },
+    removeListener(f) {
+      const index = listeners.indexOf(f);
+      if (index === -1) return;
+      listeners.splice(index, 1);
+    },
+    trigger() {
+      listeners.forEach((f) => {
+        f();
+      });
+    },
+  };
+
+  return value;
+})();
+
+const GlobalInputBlurContext =
+  createContext<GlobalInputBlurContextValue>(defaultValue);
+
+export const GlobalInputBlurProvider = GlobalInputBlurContext.Provider;
+
+/**
+ * Some components store their editable state internally.
+ * We trigger this event before selection changes so that they can commit their
+ * edits before they unmount. This is more manual but simpler than doing so during
+ * the unmount phase (e.g. the return function of `useEffect`), since handlers are
+ * guaranteed to be called with the current data.
+ */
+export const useGlobalInputBlur = (): GlobalInputBlurContextValue => {
+  return useContext(GlobalInputBlurContext);
+};
+
+export function useGlobalInputBlurListener(f: () => void) {
+  const context = useGlobalInputBlur();
+
+  useEffect(() => {
+    context.addListener(f);
+
+    return () => {
+      context.removeListener(f);
+    };
+  }, [context, f]);
+}
+
+export function useGlobalInputBlurTrigger() {
+  return useGlobalInputBlur().trigger;
+}

package/src/contexts/ImageDataContext.tsx

@@ -0,0 +1,44 @@
+import React, {
+  createContext,
+  memo,
+  ReactNode,
+  useContext,
+  useMemo,
+} from "react";
+
+export type ImageDataContextValue = {
+  getImageData: (ref: string) => ArrayBuffer | undefined;
+};
+
+const ImageDataContext = createContext<ImageDataContextValue | undefined>(
+  undefined
+);
+
+export const ImageDataProvider = memo(function ImageDataProvider({
+  children,
+  getImageData,
+}: {
+  children: ReactNode;
+  getImageData?: (ref: string) => ArrayBuffer | undefined;
+}) {
+  const contextValue = useMemo(
+    () => ({ getImageData: getImageData ?? (() => undefined) }),
+    [getImageData]
+  );
+
+  return (
+    <ImageDataContext.Provider value={contextValue}>
+      {children}
+    </ImageDataContext.Provider>
+  );
+});
+
+export function useImageData(ref: string): ArrayBuffer | undefined {
+  const value = useContext(ImageDataContext);
+
+  if (!value) {
+    throw new Error("Missing ImageDataProvider");
+  }
+
+  return value.getImageData(ref);
+}

package/src/hooks/__tests__/mergeEventHandlers.test.ts

@@ -0,0 +1,47 @@
+import { ReactEventHandlers } from 'react-use-gesture/dist/types';
+import { mergeEventHandlers } from '../..';
+
+const event = { defaultPrevented: false };
+
+test('merges handlers', () => {
+  const out: [number, any][] = [];
+
+  const a: ReactEventHandlers = { onClick: (e) => out.push([1, e]) };
+  const b: ReactEventHandlers = { onClick: (e) => out.push([2, e]) };
+  const c: ReactEventHandlers = {};
+  const d: ReactEventHandlers = { onClick: (e) => out.push([3, e]) };
+
+  const result = mergeEventHandlers(a, b, c, d);
+
+  result.onClick?.(event as any);
+
+  expect(Object.keys(result)).toEqual(['onClick']);
+  expect(typeof result.onClick).toEqual('function');
+  expect(out).toEqual([
+    [1, event],
+    [2, event],
+    [3, event],
+  ]);
+});
+
+const noop = () => {};
+
+test('merges multiple handlers', () => {
+  const a: ReactEventHandlers = {
+    onMouseDown: noop,
+    onMouseMove: noop,
+    onMouseUp: noop,
+  };
+  const b: ReactEventHandlers = {
+    onMouseDown: noop,
+    onMouseUp: noop,
+  };
+
+  const result = mergeEventHandlers(a, b);
+
+  expect(Object.keys(result)).toEqual([
+    'onMouseDown',
+    'onMouseMove',
+    'onMouseUp',
+  ]);
+});

package/src/hooks/mergeEventHandlers.ts

@@ -0,0 +1,55 @@
+import { KeyMap } from '@noya-app/noya-keymap';
+import { unique } from '@noya-app/noya-utils';
+import { composeEventHandlers } from '@radix-ui/primitive';
+import { useGesture } from 'react-use-gesture';
+import { RegularMenuItem } from '../components/internal/Menu';
+import { Optional } from '../utils/createSectionedMenu';
+
+function composeAllEventHandlers<E>(...handlers: ((e: E) => void)[]) {
+  const [first, ...rest] = handlers;
+
+  return rest.reduce(
+    (result, handler) => composeEventHandlers(result, handler),
+    first,
+  );
+}
+
+export type ReactDOMEventHandlers = ReturnType<
+  ReturnType<typeof useGesture>
+> & {
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  onKeyDownCapture?: (e: React.KeyboardEvent) => void;
+  onKeyUp?: (e: React.KeyboardEvent) => void;
+  onKeyUpCapture?: (e: React.KeyboardEvent) => void;
+  onKeyPress?: (e: React.KeyboardEvent) => void;
+  onKeyPressCapture?: (e: React.KeyboardEvent) => void;
+
+  // Special
+  onBeforeInput?: (e: InputEvent) => void;
+};
+
+export type ReactEventHandlers<MenuItemType extends string = string> =
+  ReactDOMEventHandlers & {
+    onContributeMenuItems?: () => Optional<RegularMenuItem<MenuItemType>>[];
+    keyboardShortcuts?: KeyMap;
+    onSelectMenuItem?: (id: string) => void;
+  };
+
+export type EventName = keyof ReactEventHandlers;
+
+export function mergeEventHandlers(
+  ...handlerMaps: ReactEventHandlers[]
+): ReactEventHandlers {
+  const eventNames = unique(handlerMaps.map(Object.keys).flat() as EventName[]);
+
+  return Object.fromEntries(
+    eventNames.map((eventName) => {
+      const handlers = handlerMaps.flatMap((handlerMap) => {
+        const value = handlerMap[eventName];
+        return value ? [value] : [];
+      });
+
+      return [eventName, composeAllEventHandlers(...handlers)];
+    }),
+  );
+}

package/src/hooks/useHover.ts

@@ -0,0 +1,173 @@
+// From: https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/useHover.ts
+// MIT License
+
+// This code is a fork of `react-aria`'s `useHover` hook. The code in this file are based on code
+// from both `react-aria` and `react-interactions`. Original licensing for each project can be found
+// in the the root directories of each respective repository.
+//
+// @see https://github.com/adobe/react-spectrum/tree/452d1cb6a49f9f493757737edaf2b64014108de6/packages/%40react-aria
+// @see https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+
+import * as React from 'react';
+
+export interface HoverEvent {
+  /** The type of hover event being fired. */
+  type: 'hoverstart' | 'hoverend';
+  /** The pointer type that triggered the hover event. */
+  pointerType: 'mouse' | 'pen';
+  /** The target element of the hover event. */
+  target: HTMLElement;
+}
+
+export interface HoverEvents {
+  /** Handler that is called when a hover interaction starts. */
+  onHoverStart?(e: HoverEvent): void;
+  /** Handler that is called when a hover interaction ends. */
+  onHoverEnd?(e: HoverEvent): void;
+  /** Handler that is called when the hover state changes. */
+  onHoverChange?(isHovering: boolean): void;
+}
+
+export interface HoverProps extends HoverEvents {
+  /** Whether the hover events should be disabled. */
+  isDisabled?: boolean;
+}
+
+interface HoverResult {
+  /** Props to spread on the target element. */
+  hoverProps: React.HTMLAttributes<HTMLElement>;
+  isHovered: boolean;
+}
+
+// iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
+// We want to ignore these emulated events so they do not trigger hover behavior.
+// See https://bugs.webkit.org/show_bug.cgi?id=214609.
+let globalIgnoreEmulatedMouseEvents = false;
+let hoverCount = 0;
+
+function setGlobalIgnoreEmulatedMouseEvents() {
+  globalIgnoreEmulatedMouseEvents = true;
+
+  // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter with
+  // pointerType="mouse" immediately after onPointerUp and before onFocus. On other devices that
+  // don't have this quirk, we don't want to ignore a mouse hover sometime in the distant future
+  // because a user previously touched the element.
+  setTimeout(function clearGlobalIgnoreEmulatedMouseEvents() {
+    globalIgnoreEmulatedMouseEvents = false;
+  }, 50);
+}
+
+function handleGlobalPointerEvent(event: PointerEvent) {
+  if (event.pointerType === 'touch') {
+    setGlobalIgnoreEmulatedMouseEvents();
+  }
+}
+
+function setupGlobalTouchEvents() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  document.addEventListener('pointerup', handleGlobalPointerEvent);
+
+  hoverCount++;
+  return function teardownGlobalTouchEvents() {
+    hoverCount--;
+    if (hoverCount > 0) {
+      return;
+    }
+    document.removeEventListener('pointerup', handleGlobalPointerEvent);
+  };
+}
+
+/**
+ * Handles pointer hover interactions for an element. Normalizes behavior
+ * across browsers and platforms, and ignores emulated mouse events on touch devices.
+ */
+export function useHover(props: HoverProps = {}): HoverResult {
+  const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
+
+  const [isHovered, setHovered] = React.useState(false);
+  const state = React.useRef({
+    isHovered: false,
+    ignoreEmulatedMouseEvents: false,
+  }).current;
+
+  React.useEffect(setupGlobalTouchEvents, []);
+
+  const hoverProps = React.useMemo(
+    function getHoverProps() {
+      function triggerHoverStart(
+        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
+        pointerType: 'mouse' | 'pen' | 'touch'
+      ) {
+        if (isDisabled || pointerType === 'touch' || state.isHovered) {
+          return;
+        }
+
+        state.isHovered = true;
+        const target = event.target as HTMLElement;
+
+        if (onHoverStart) {
+          onHoverStart({
+            type: 'hoverstart',
+            target,
+            pointerType,
+          });
+        }
+
+        if (onHoverChange) {
+          onHoverChange(true);
+        }
+
+        setHovered(true);
+      }
+
+      function triggerHoverEnd(
+        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
+        pointerType: 'mouse' | 'pen' | 'touch'
+      ) {
+        if (isDisabled || pointerType === 'touch' || !state.isHovered) {
+          return;
+        }
+
+        state.isHovered = false;
+        const target = event.target as HTMLElement;
+
+        if (onHoverEnd) {
+          onHoverEnd({
+            type: 'hoverend',
+            target,
+            pointerType,
+          });
+        }
+
+        if (onHoverChange) {
+          onHoverChange(false);
+        }
+
+        setHovered(false);
+      }
+
+      const hoverProps: React.HTMLAttributes<HTMLElement> = {
+        onPointerEnter(event: React.PointerEvent<HTMLElement>) {
+          if (globalIgnoreEmulatedMouseEvents && event.pointerType === 'mouse') {
+            return;
+          }
+          triggerHoverStart(event, event.pointerType);
+        },
+        onPointerLeave(event: React.PointerEvent<HTMLElement>) {
+          triggerHoverEnd(event, event.pointerType);
+        },
+      };
+
+      return hoverProps;
+    },
+    [isDisabled, state, onHoverStart, onHoverChange, onHoverEnd]
+  );
+
+  return {
+    hoverProps,
+    isHovered,
+  };
+}

package/src/hooks/useObjectURL.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useMemo } from 'react';
+
+export function useObjectURL(object?: ArrayBuffer | Uint8Array | Blob) {
+  const objectURL = useMemo(() => {
+    if (object instanceof Blob) return URL.createObjectURL(object);
+
+    const bytes =
+      object instanceof Uint8Array
+        ? object
+        : object !== undefined
+        ? new Uint8Array(object)
+        : new Uint8Array();
+
+    return URL.createObjectURL(new Blob([bytes]));
+  }, [object]);
+
+  useLayoutEffect(() => {
+    return () => URL.revokeObjectURL(objectURL);
+  }, [objectURL]);
+
+  return objectURL;
+}

package/src/hooks/usePlatform.ts

@@ -0,0 +1,13 @@
+import { useDesignSystemConfiguration } from '../contexts/DesignSystemConfiguration';
+
+export function usePlatform() {
+  return useDesignSystemConfiguration().platform;
+}
+
+/**
+ * Either ctrl or meta, depending on the platform
+ */
+export function usePlatformModKey(): 'ctrlKey' | 'metaKey' {
+  const platform = useDesignSystemConfiguration().platform;
+  return platform === 'mac' ? 'metaKey' : 'ctrlKey';
+}

package/src/index.tsx

@@ -0,0 +1,77 @@
+// These types propagate generics through memo and forwardRef to support generic components
+//
+// https://stackoverflow.com/questions/60386614/how-to-use-props-with-generics-with-react-memo/60389122#60389122
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012
+declare module "react" {
+  function memo<A, B>(
+    Component: (props: A) => B
+  ): (props: A) => React.ReactElement | null;
+
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+
+// Theme
+// Components
+export * from "./components/ActivityIndicator";
+export * from "./components/Avatar";
+export * from "./components/Button";
+export * from "./components/Chip";
+export * from "./components/ContextMenu";
+export * from "./components/Dialog";
+export * from "./components/Divider";
+export * from "./components/DropdownMenu";
+export * from "./components/FillInputField";
+export * from "./components/FillPreviewBackground";
+export * from "./components/GradientPicker";
+export * from "./components/Grid";
+export * from "./components/GridView";
+export * from "./components/IconButton";
+export * from "./components/InputField";
+export * from "./components/InputFieldWithCompletions";
+export * from "./components/Label";
+export * from "./components/LabeledElementView";
+export * from "./components/ListView";
+export * from "./components/Popover";
+export * from "./components/Progress";
+export * from "./components/RadioGroup";
+export * from "./components/ScrollArea";
+export * from "./components/Select";
+export * from "./components/Slider";
+export * from "./components/Sortable";
+export type { RelativeDropPosition } from "./components/Sortable";
+export * from "./components/Spacer";
+export * from "./components/Stack";
+export * from "./components/Switch";
+export * from "./components/Text";
+export * from "./components/Toast";
+export * from "./components/Tooltip";
+export * from "./components/TreeView";
+export { KeyboardShortcut, SEPARATOR_ITEM } from "./components/internal/Menu";
+export type {
+  ExtractMenuItemType,
+  MenuItem,
+  RegularMenuItem,
+} from "./components/internal/Menu";
+export * from "./contexts/DesignSystemConfiguration";
+export * from "./contexts/DialogContext";
+// Contexts
+export * from "./contexts/GlobalInputBlurContext";
+// Hooks
+export * from "./hooks/mergeEventHandlers";
+export * from "./hooks/useHover";
+export * from "./hooks/usePlatform";
+export * from "./mediaQuery";
+export * from "./theme";
+export * as darkTheme from "./theme/dark";
+export * as lightTheme from "./theme/light";
+export * from "./utils/createSectionedMenu";
+export * from "./utils/getGradientBackground";
+export * from "./utils/mouseEvent";
+// Utils
+export * from "./utils/completions";
+export * from "./utils/fuzzyScorer";
+export * from "./utils/sketchColor";
+export * from "./utils/sketchPattern";
+export { default as withSeparatorElements } from "./utils/withSeparatorElements";

package/src/mediaQuery.ts

@@ -0,0 +1,13 @@
+export const size = {
+  medium: '800px',
+  large: '1280px',
+  xlarge: '1550px',
+  xxlarge: '1680px',
+};
+
+export const mediaQuery = {
+  small: `@media (max-width: ${size.medium})`,
+  medium: `@media (max-width: ${size.large}) and (min-width: ${size.medium})`,
+  large: `@media (max-width: ${size.xlarge}) and (min-width: ${size.large})`,
+  xlarge: `@media (min-width: ${size.xlarge})`,
+};

package/src/theme/dark.ts

@@ -0,0 +1,37 @@
+import produce from 'immer';
+import * as lightTheme from './light';
+
+export const colors = produce(lightTheme.colors, (colors) => {
+  colors.logo.fill = 'rgb(248,248,250)';
+  colors.logo.highlight = 'rgb(248,248,250)';
+  colors.text = 'rgb(248,248,250)';
+  colors.textMuted = 'rgb(180,179,182)';
+  colors.textDisabled = 'rgb(100,99,102)';
+  colors.inputBackground = 'rgba(181,178,255,0.08)';
+  colors.inputBackgroundLight = 'rgba(181,178,255,0.10)';
+  colors.codeBackground = 'rgb(20,19,23)';
+  colors.dividerSubtle = 'rgba(255,255,255,0.04)';
+  colors.divider = 'rgba(255,255,255,0.08)';
+  colors.dividerStrong = 'rgba(0,0,0,1)';
+  colors.primary = 'rgb(119, 66, 255)';
+  colors.primaryLight = 'rgb(134, 86, 255)';
+  colors.secondaryBright = '#36fe91';
+  colors.canvas.background = 'rgb(20,19,23)';
+  colors.canvas.sliceOutline = 'rgb(150,150,150)';
+  colors.canvas.grid = 'rgba(0,0,0,0.1)';
+  colors.sidebar.background = 'rgba(34,33,39,0.95)';
+  colors.popover.background = 'rgba(34,33,39,1)';
+  colors.popover.divider = colors.divider;
+  colors.listView.raisedBackground = 'rgba(181,178,255,0.1)';
+  colors.listView.editingBackground = '#000';
+  colors.slider.background = '#BBB';
+  colors.radioGroup.background = colors.inputBackground;
+  colors.mask = 'rgb(102,187,106)';
+  colors.transparentChecker = 'rgba(255,255,255,0.3)';
+  colors.scrollbar = 'rgba(199,199,199,0.2)';
+  colors.placeholderDots = 'rgba(255,255,255,0.3)';
+  colors.dragOutline = 'white';
+  colors.activeBackground = 'rgba(181,178,255,0.08)';
+});
+
+export { fonts, sizes, textStyles } from './light';

package/src/theme/index.ts

@@ -0,0 +1,17 @@
+import * as lightTheme from './light';
+
+export type Theme = typeof lightTheme;
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}
+
+export interface Colors {}
+
+type PickByValue<T, V> = Pick<
+  T,
+  // Remove any value that extends V
+  { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T]
+>;
+
+export type ThemeColorName = keyof PickByValue<Theme['colors'], string>;