@noya-app/noya-designsystem 0.1.41 → 0.1.43

package/src/components/ComboboxMenu.tsx

@@ -0,0 +1,88 @@
+import { Size } from "@noya-app/noya-geometry";
+import React, { ForwardedRef, forwardRef, memo } from "react";
+import { cx } from "../utils/classNames";
+import { InternalComboboxItem } from "../utils/combobox";
+import { fuzzyTokenize } from "../utils/fuzzyScorer";
+import { IVirtualizedList, ListView } from "./ListView";
+import { Spacer } from "./Spacer";
+
+interface ComboboxMenuProps {
+  items: InternalComboboxItem[];
+  selectedIndex: number;
+  onSelectItem: (item: InternalComboboxItem) => void;
+  onHoverIndex: (index: number) => void;
+  listSize: Size;
+  style?: React.CSSProperties;
+}
+
+export const ComboboxMenu = memo(
+  forwardRef(function ComboboxMenu(
+    {
+      items,
+      selectedIndex,
+      onSelectItem,
+      onHoverIndex,
+      listSize,
+      style,
+    }: ComboboxMenuProps,
+    forwardedRef: ForwardedRef<IVirtualizedList>
+  ) {
+    return (
+      <ListView.Root
+        ref={forwardedRef}
+        scrollable
+        keyExtractor={(item) => item.id}
+        data={items}
+        virtualized={listSize}
+        pressEventName="onPointerDown"
+        sectionHeaderVariant="label"
+        style={style}
+        renderItem={(item, i) => {
+          if (item.type === "sectionHeader") {
+            return (
+              <ListView.Row key={item.id} isSectionHeader>
+                {item.name}
+              </ListView.Row>
+            );
+          }
+
+          const tokens = fuzzyTokenize({
+            item: item.name,
+            itemScore: item,
+          });
+
+          return (
+            <ListView.Row
+              key={item.id}
+              selected={i === selectedIndex}
+              onPress={() => onSelectItem(item)}
+              onHoverChange={(hovered) => {
+                if (hovered) {
+                  onHoverIndex(i);
+                }
+              }}
+            >
+              {tokens.map((token, j) => (
+                <span
+                  key={`${item.id}-token-${j}`}
+                  className={cx(
+                    token.type === "match" ? "font-bold" : "font-normal",
+                    "whitespace-pre"
+                  )}
+                >
+                  {token.text}
+                </span>
+              ))}
+              {item.icon && (
+                <>
+                  <Spacer.Horizontal />
+                  {item.icon}
+                </>
+              )}
+            </ListView.Row>
+          );
+        }}
+      />
+    );
+  })
+);

package/src/components/Dialog.tsx

@@ -7,9 +7,9 @@ import React, {
   useImperativeHandle,
   useRef,
 } from "react";
+import { cx } from "../utils/classNames";
 import { IconButton } from "./IconButton";
 import { Spacer } from "./Spacer";
-import { cx } from "../utils/classNames";
 
 const StyledOverlay = forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -99,6 +99,7 @@ interface Props {
     typeof DialogPrimitive.Content
   >["onOpenAutoFocus"];
   closeOnInteractOutside?: boolean;
+  showCloseButton?: boolean;
   className?: string;
 }
 
@@ -113,6 +114,7 @@ export const Dialog = forwardRef(function Dialog(
     onOpenAutoFocus,
     closeOnInteractOutside = true,
     className,
+    showCloseButton = true,
   }: Props,
   forwardedRef: ForwardedRef<IDialog>
 ) {
@@ -138,11 +140,13 @@ export const Dialog = forwardRef(function Dialog(
           onInteractOutside: (event) => event.preventDefault(),
         })}
       >
-        <CloseButtonContainer>
-          <DialogPrimitive.Close asChild>
-            <IconButton iconName="Cross1Icon" />
-          </DialogPrimitive.Close>
-        </CloseButtonContainer>
+        {showCloseButton && (
+          <CloseButtonContainer>
+            <DialogPrimitive.Close asChild>
+              <IconButton iconName="Cross1Icon" />
+            </DialogPrimitive.Close>
+          </CloseButtonContainer>
+        )}
         {title && (
           <>
             <StyledTitle>{title}</StyledTitle>

package/src/components/DimensionInput.tsx

@@ -1,5 +1,5 @@
 import { round } from "@noya-app/noya-utils";
-import React, { memo, useCallback } from "react";
+import * as React from "react";
 import { InputField } from "./InputField";
 
 export type SetNumberMode = "replace" | "adjust";
@@ -29,7 +29,7 @@ interface Props {
   trigger?: "change" | "submit";
 }
 
-export const DimensionInput = memo(function DimensionInput({
+export const DimensionInput = React.memo(function DimensionInput({
   id,
   value,
   onSetValue,
@@ -39,12 +39,12 @@ export const DimensionInput = memo(function DimensionInput({
   disabled,
   trigger = "submit",
 }: Props) {
-  const handleNudgeValue = useCallback(
+  const handleNudgeValue = React.useCallback(
     (value: number) => onSetValue(value, "adjust"),
     [onSetValue]
   );
 
-  const handleSetValue = useCallback(
+  const handleSetValue = React.useCallback(
     (value: number) => onSetValue(value, "replace"),
     [onSetValue]
   );

package/src/components/FillPreviewBackground.tsx

@@ -1,6 +1,6 @@
 import { Sketch } from "@noya-app/noya-file-format";
 // import { useSketchImage } from 'noya-renderer';
-import React, { memo, useMemo } from "react";
+import * as React from "react";
 import { useImageData } from "../contexts/ImageDataContext";
 import { useObjectURL } from "../hooks/useObjectURL";
 import { cssVars } from "../theme";
@@ -14,7 +14,7 @@ const dotsHorizontalSvg = (fillColor: string) => `
   </svg>
 `;
 
-const Background = memo(function Background({
+const Background = React.memo(function Background({
   background,
 }: {
   background?: string;
@@ -42,57 +42,64 @@ function getPatternSizeAndPosition(
   }
 }
 
-export const PatternPreviewBackground = memo(function PatternPreviewBackground({
-  fillType,
-  tileScale,
-  imageRef,
-}: {
-  fillType: Sketch.PatternFillType;
-  tileScale: number;
-  imageRef: string;
-}) {
-  const image = useImageData(imageRef);
-
-  const url = useObjectURL(image);
-
-  const size = getPatternSizeAndPosition(fillType, tileScale);
-
-  const background = useMemo(
-    () =>
-      [
-        size,
-        `url(${url})`,
-        fillType === Sketch.PatternFillType.Tile ? "repeat" : "no-repeat",
-      ].join(" "),
-    [fillType, size, url]
-  );
-
-  return <Background background={background} />;
-});
+export const PatternPreviewBackground = React.memo(
+  function PatternPreviewBackground({
+    fillType,
+    tileScale,
+    imageRef,
+  }: {
+    fillType: Sketch.PatternFillType;
+    tileScale: number;
+    imageRef: string;
+  }) {
+    const image = useImageData(imageRef);
+
+    const url = useObjectURL(image);
+
+    const size = getPatternSizeAndPosition(fillType, tileScale);
+
+    const background = React.useMemo(
+      () =>
+        [
+          size,
+          `url(${url})`,
+          fillType === Sketch.PatternFillType.Tile ? "repeat" : "no-repeat",
+        ].join(" "),
+      [fillType, size, url]
+    );
+
+    return <Background background={background} />;
+  }
+);
 
-const ColorPreviewBackground = memo(function ColorPreviewBackground({
+const ColorPreviewBackground = React.memo(function ColorPreviewBackground({
   color,
 }: {
   color: Sketch.Color;
 }) {
-  const background = useMemo(() => sketchColorToRgbaString(color), [color]);
-
-  return <Background background={background} />;
-});
-
-const GradientPreviewBackground = memo(function GradientPreviewBackground({
-  gradient,
-}: {
-  gradient: Sketch.Gradient;
-}) {
-  const background = useMemo(
-    () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
-    [gradient.gradientType, gradient.stops]
+  const background = React.useMemo(
+    () => sketchColorToRgbaString(color),
+    [color]
   );
 
   return <Background background={background} />;
 });
 
+const GradientPreviewBackground = React.memo(
+  function GradientPreviewBackground({
+    gradient,
+  }: {
+    gradient: Sketch.Gradient;
+  }) {
+    const background = React.useMemo(
+      () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
+      [gradient.gradientType, gradient.stops]
+    );
+
+    return <Background background={background} />;
+  }
+);
+
 interface Props {
   value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
@@ -101,7 +108,7 @@ const background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
   cssVars.colors.placeholderDots
 )}") no-repeat`;
 
-export const FillPreviewBackground = memo(function FillPreviewBackground({
+export const FillPreviewBackground = React.memo(function FillPreviewBackground({
   value,
 }: Props) {
   if (!value) return <Background background={background} />;

package/src/components/FloatingWindow.tsx

@@ -129,7 +129,9 @@ function defaultRenderToolbar({
       {toolbarContent}
       <IconButton
         iconName="Cross3Icon"
+        className="h-8 w-8 rounded-full"
         onClick={onClose}
+        size={20}
         style={{
           marginLeft: "6px",
           marginRight: "-6px",
@@ -250,7 +252,7 @@ export const FloatingWindow: React.FC<FloatingWindowProps> = ({
     ]
   );
 
-  const handleMouseUp = useCallback((e: MouseEvent) => {
+  const handleMouseUp = useCallback((_e: MouseEvent) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
@@ -285,7 +287,8 @@ export const FloatingWindow: React.FC<FloatingWindowProps> = ({
         width: size.width,
         height: size.height,
         outline: `1px solid ${cssVars.colors.divider}`,
-        backgroundColor: cssVars.colors.canvasBackground,
+        backgroundColor: cssVars.colors.background,
+        zIndex: cssVars.zIndex.menu,
       }}
     >
       <div

package/src/components/GradientPicker.tsx

@@ -9,11 +9,11 @@ import {
   equalColorObjects,
   hsvaToRgba,
   rgbaToHsva,
-} from '@noya-app/noya-colorpicker';
-import type { Sketch } from '@noya-app/noya-file-format';
-import React, { memo, useCallback, useMemo } from 'react';
-import { Spacer } from '../components/Spacer';
-import { rgbaToSketchColor, sketchColorToRgba } from '../utils/sketchColor';
+} from "@noya-app/noya-colorpicker";
+import type { Sketch } from "@noya-app/noya-file-format";
+import * as React from "react";
+import { Spacer } from "../components/Spacer";
+import { rgbaToSketchColor, sketchColorToRgba } from "../utils/sketchColor";
 
 interface Props {
   value: Sketch.GradientStop[];
@@ -25,7 +25,7 @@ interface Props {
   onSelectStop: (index: number) => void;
 }
 
-export const GradientPicker = memo(function GradientPicker({
+export const GradientPicker = React.memo(function GradientPicker({
   value,
   selectedStop,
   onChangeColor,
@@ -34,33 +34,33 @@ export const GradientPicker = memo(function GradientPicker({
   onDelete,
   onSelectStop,
 }: Props) {
-  const colorModel: ColorModel<RgbaColor> = useMemo(
+  const colorModel: ColorModel<RgbaColor> = React.useMemo(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: rgbaToHsva,
       fromHsva: hsvaToRgba,
       equal: equalColorObjects,
     }),
-    [],
+    []
   );
 
-  const rgbaColor = useMemo(
+  const rgbaColor = React.useMemo(
     () => sketchColorToRgba(value[selectedStop].color),
-    [value, selectedStop],
+    [value, selectedStop]
   );
 
-  const handleChangeColor = useCallback(
+  const handleChangeColor = React.useCallback(
     (value: RgbaColor) => {
       onChangeColor(rgbaToSketchColor(value));
     },
-    [onChangeColor],
+    [onChangeColor]
   );
 
-  const handleAddGradientStop = useCallback(
+  const handleAddGradientStop = React.useCallback(
     (value: RgbaColor, position: number) => {
       onAdd(rgbaToSketchColor(value), position);
     },
-    [onAdd],
+    [onAdd]
   );
 
   return (

package/src/components/IconButton.tsx

@@ -1,10 +1,4 @@
-import React, {
-  CSSProperties,
-  ForwardedRef,
-  forwardRef,
-  memo,
-  useMemo,
-} from "react";
+import * as React from "react";
 import { cssVars } from "../theme";
 import { Button, ButtonRootProps } from "./Button";
 import { IconName, Icons } from "./Icons";
@@ -12,20 +6,20 @@ import { IconName, Icons } from "./Icons";
 type Props = Omit<ButtonRootProps, "children" | "variant" | "flex" | "size"> & {
   iconName: IconName;
   className?: string;
-  style?: CSSProperties;
+  style?: React.CSSProperties;
   selected?: boolean;
   color?: string;
   size?: number;
 };
 
-export const IconButton = memo(
-  forwardRef(function IconButton(
+export const IconButton = React.memo(
+  React.forwardRef(function IconButton(
     { selected, iconName, color, size, contentStyle, ...props }: Props,
-    forwardedRef: ForwardedRef<HTMLButtonElement>
+    forwardedRef: React.ForwardedRef<HTMLButtonElement>
   ) {
     const Icon = Icons[iconName];
 
-    const style = useMemo((): CSSProperties => {
+    const style = React.useMemo((): React.CSSProperties => {
       return {
         padding: "0 2px",
         ...(size && { minHeight: size }),

package/src/components/Icons.tsx

@@ -1,13 +1,13 @@
 import * as Icons from "@noya-app/noya-icons";
-import React, { ReactNode } from "react";
+import * as React from "react";
 
 export type IconName = keyof typeof Icons;
 
 export { Icons };
 
 export function renderIcon(
-  iconName: Exclude<ReactNode, string> | IconName
-): ReactNode {
+  iconName: Exclude<React.ReactNode, string> | IconName
+): React.ReactNode {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName as IconName];