@noya-app/noya-designsystem 0.1.30 → 0.1.32

package/src/components/DraggableMenuButton.tsx

@@ -1,29 +1,30 @@
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React, { memo, useCallback, useState } from "react";
-import styled from "styled-components";
-import { useDesignSystemTheme } from "../contexts/DesignSystemConfiguration";
+import React, { forwardRef, memo, useCallback, useState } from "react";
+import { cn } from "../utils/tailwind";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 
-const DotButtonElement = styled.div(({ theme }) => ({
-  cursor: "pointer",
-  borderRadius: "4px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: "2px 0",
-  "&:hover": {
-    background: theme.colors.inputBackgroundLight,
-  },
-  "&:active": {
-    background: theme.colors.activeBackground,
-  },
-}));
+const DotButton = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ${className ?? ""}`}
+    {...props}
+  />
+));
 
-const TriggerElement = styled.div({
-  pointerEvents: "none",
-  height: "15px",
-});
+const Trigger = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("pointer-events-none h-[15px]", className)}
+    {...props}
+  />
+));
 
 /**
  * A button that opens a menu when clicked, but also allows dragging the
@@ -39,9 +40,8 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
   onSelect?: (value: T) => void;
   isVisible?: boolean;
 }) {
-  const color = useDesignSystemTheme().colors.icon;
   const [open, setOpen] = useState(false);
-  const [downPosition, setDownPosition] = React.useState<{
+  const [downPosition, setDownPosition] = useState<{
     x: number;
     y: number;
   } | null>(null);
@@ -70,7 +70,6 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
 
       const dx = event.clientX - downPosition.x;
       const dy = event.clientY - downPosition.y;
-
       const distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
 
       if (distance < 5) {
@@ -90,7 +89,7 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
   );
 
   return (
-    <DotButtonElement
+    <DotButton
       onPointerDownCapture={handlePointerDownCapture}
       onPointerUp={handlePointerUp}
       onClick={(event) => {
@@ -106,17 +105,17 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
           onSelect={onSelect}
           shouldBindKeyboardShortcuts={false}
         >
-          <TriggerElement>
+          <Trigger>
             <DragHandleDots2Icon
-              color={isVisible || open ? color : "transparent"}
+              color={isVisible || open ? "var(--icon)" : "transparent"}
             />
-          </TriggerElement>
+          </Trigger>
         </DropdownMenu>
       ) : (
         <DragHandleDots2Icon
-          color={isVisible || open ? color : "transparent"}
+          color={isVisible || open ? "var(--icon)" : "transparent"}
         />
       )}
-    </DotButtonElement>
+    </DotButton>
   );
 });

package/src/components/DropdownMenu.tsx

@@ -10,7 +10,6 @@ import React, {
   useCallback,
   useMemo,
 } from "react";
-import styled from "styled-components";
 import { MenuItemProps, MenuProps } from "./ContextMenu";
 import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
@@ -23,28 +22,6 @@ import {
   styles,
 } from "./internal/Menu";
 
-/* ----------------------------------------------------------------------------
- * Separator
- * ------------------------------------------------------------------------- */
-
-const SeparatorElement = styled(RadixDropdownMenu.Separator)(
-  styles.separatorStyle
-);
-
-/* ----------------------------------------------------------------------------
- * Item
- * ------------------------------------------------------------------------- */
-
-const ItemElement = styled(RadixDropdownMenu.Item)(styles.itemStyle);
-
-const CheckboxItemElement = styled(RadixDropdownMenu.CheckboxItem)(
-  styles.itemStyle
-);
-
-const StyledItemIndicator = styled(RadixDropdownMenu.ItemIndicator)(
-  styles.itemIndicatorStyle
-);
-
 const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
   value,
   children,
@@ -64,14 +41,15 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
 
   if (checked) {
     return (
-      <CheckboxItemElement
+      <RadixDropdownMenu.CheckboxItem
         checked={checked}
         disabled={disabled}
         onSelect={handleSelectItem}
+        className={styles.itemStyle({ disabled })}
       >
-        <StyledItemIndicator>
+        <RadixDropdownMenu.ItemIndicator className={styles.itemIndicatorStyle}>
           <CheckIcon />
-        </StyledItemIndicator>
+        </RadixDropdownMenu.ItemIndicator>
         {icon && (
           <>
             {renderIcon(icon)}
@@ -79,12 +57,16 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
           </>
         )}
         {children}
-      </CheckboxItemElement>
+      </RadixDropdownMenu.CheckboxItem>
     );
   }
 
   const element = (
-    <ItemElement disabled={disabled} onSelect={handleSelectItem}>
+    <RadixDropdownMenu.Item
+      disabled={disabled}
+      onSelect={handleSelectItem}
+      className={styles.itemStyle({ disabled })}
+    >
       {indented && (
         <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
       )}
@@ -109,7 +91,7 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
           <ChevronRightIcon />
         </>
       )}
-    </ItemElement>
+    </RadixDropdownMenu.Item>
   );
 
   if (items && items.length > 0) {
@@ -132,8 +114,14 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
  * Root
  * ------------------------------------------------------------------------- */
 
-const Content = styled(RadixDropdownMenu.Content)(styles.contentStyle);
-const SubContent = styled(RadixDropdownMenu.SubContent)(styles.contentStyle);
+type DropdownRootProps<T extends string> = MenuProps<T> & {
+  open?: boolean;
+  onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
+  emptyState?: React.ReactNode;
+} & Pick<
+    ComponentProps<typeof RadixDropdownMenu.Content>,
+    "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
+  >;
 
 const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
   {
@@ -150,13 +138,8 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
     align,
     alignOffset,
     collisionPadding = 8,
-  }: MenuProps<T> & {
-    open?: boolean;
-    onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
-  } & Pick<
-      ComponentProps<typeof RadixDropdownMenu.Content>,
-      "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
-    >,
+    emptyState,
+  }: DropdownRootProps<T>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
   const hasCheckedItem = items.some(
@@ -179,7 +162,9 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
   const TriggerComponent = isNested
     ? RadixDropdownMenu.SubTrigger
     : RadixDropdownMenu.Trigger;
-  const ContentComponent = isNested ? SubContent : Content;
+  const ContentComponent = isNested
+    ? RadixDropdownMenu.SubContent
+    : RadixDropdownMenu.Content;
 
   const contentStyle = useMemo(() => ({ zIndex: 1000 }), []);
 
@@ -190,6 +175,7 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
       </TriggerComponent>
       <RadixDropdownMenu.Portal>
         <ContentComponent
+          className={styles.contentStyle}
           side={side}
           sideOffset={sideOffset}
           align={align}
@@ -198,9 +184,13 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
           collisionPadding={collisionPadding}
           {...({ onCloseAutoFocus } as any)}
         >
+          {items.length === 0 ? emptyState : null}
           {items.map((item, index) =>
             item === SEPARATOR_ITEM ? (
-              <SeparatorElement key={index} />
+              <RadixDropdownMenu.Separator
+                key={index}
+                className={styles.separatorStyle}
+              />
             ) : (
               <DropdownMenuItem
                 key={item.value ?? index}

package/src/components/FillInputField.tsx

@@ -1,43 +1,33 @@
 import { Sketch } from "@noya-app/noya-file-format";
-import React, { CSSProperties, ForwardedRef, forwardRef, memo } from "react";
-import styled from "styled-components";
+import React, { forwardRef, memo } from "react";
 import { SketchPattern } from "../utils/sketchPattern";
 import { FillPreviewBackground } from "./FillPreviewBackground";
 
-const Container = styled.button<{ $flex?: CSSProperties["flex"] }>(
-  ({ theme, $flex }) => ({
-    outline: "none",
-    padding: 0,
-    width: "50px",
-    height: "27px",
-    borderRadius: "4px",
-    overflow: "hidden",
-    border: "none",
-    boxShadow: `0 0 0 1px ${theme.colors.divider} inset`,
-    background: "transparent",
-    "&:focus": {
-      boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
-    },
-    position: "relative",
-    flex: $flex,
-  })
-);
+const FillButton = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+  <button
+    ref={ref}
+    className={`outline-none p-0 w-[50px] h-[27px] rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] ${className ?? ""}`}
+    {...props}
+  />
+));
 
 interface Props {
   id?: string;
   value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-  flex?: CSSProperties["flex"];
 }
 
 export const FillInputField = memo(
-  forwardRef(function FillInputField(
-    { id, value, flex, ...rest }: Props,
-    ref: ForwardedRef<HTMLButtonElement>
+  forwardRef<HTMLButtonElement, Props>(function FillInputField(
+    { id, value, ...rest },
+    ref
   ) {
     return (
-      <Container ref={ref} id={id} $flex={flex} {...rest}>
+      <FillButton ref={ref} id={id} {...rest}>
         <FillPreviewBackground value={value} />
-      </Container>
+      </FillButton>
     );
   })
 );

package/src/components/FillPreviewBackground.tsx

@@ -1,12 +1,12 @@
 import { Sketch } from "@noya-app/noya-file-format";
 // import { useSketchImage } from 'noya-renderer';
 import React, { memo, useMemo } from "react";
-import styled, { useTheme } from "styled-components";
 import { useImageData } from "../contexts/ImageDataContext";
 import { useObjectURL } from "../hooks/useObjectURL";
 import { getGradientBackground } from "../utils/getGradientBackground";
 import { sketchColorToRgbaString } from "../utils/sketchColor";
 import { SketchPattern } from "../utils/sketchPattern";
+import { cn } from "../utils/tailwind";
 
 const dotsHorizontalSvg = (fillColor: string) => `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${fillColor}'>
@@ -14,27 +14,15 @@ const dotsHorizontalSvg = (fillColor: string) => `
   </svg>
 `;
 
-const Background = styled.span<{ background: string }>(({ background }) => ({
-  background,
-  position: "absolute",
-  inset: 0,
-}));
-
-const HorizontalDotsBackground = memo(function HorizontalDotsBackground() {
-  const { inputBackground, placeholderDots } = useTheme().colors;
-
-  const background = useMemo(
-    () =>
-      [
-        `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
-          placeholderDots
-        )}") no-repeat`,
-        inputBackground,
-      ].join(","),
-    [inputBackground, placeholderDots]
+const Background = memo(function Background({background}: {background?: string}) {
+  return (
+    <span
+      className={cn(
+        "absolute inset-0",
+        background ? `bg-[${background}]` : "bg-input-background"
+      )}
+    />
   );
-
-  return <Background background={background} />;
 });
 
 function getPatternSizeAndPosition(
@@ -108,10 +96,18 @@ interface Props {
   value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
 
+const background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
+      "var(--placeholder-dots)"
+    )}") no-repeat`;
+    
 export const FillPreviewBackground = memo(function FillPreviewBackground({
   value,
 }: Props) {
-  if (!value) return <HorizontalDotsBackground />;
+  if (!value) return (
+    <Background
+      background={background}
+    />
+  );
 
   switch (value._class) {
     case "color":

package/src/components/FloatingWindow.tsx

@@ -3,7 +3,6 @@ import {
   IconButton,
   Small,
   useCurrentFloatingWindowInternal,
-  useDesignSystemTheme,
   useFloatingWindowManager,
 } from "@noya-app/noya-designsystem";
 import React, { useCallback, useRef, useState } from "react";
@@ -125,7 +124,7 @@ function defaultRenderToolbar({
 }) {
   return (
     <>
-      <Small flex="1" fontWeight="500" color="text">
+      <Small className="flex-1 font-medium text-text">
         {title}
       </Small>
       {toolbarContent}
@@ -269,8 +268,6 @@ export const FloatingWindow: React.FC<FloatingWindowProps> = ({
     };
   }, [handleMouseMove, handleMouseUp]);
 
-  const theme = useDesignSystemTheme();
-
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
 
@@ -288,14 +285,14 @@ export const FloatingWindow: React.FC<FloatingWindowProps> = ({
         left: position.x,
         width: size.width,
         height: size.height,
-        outline: `1px solid ${theme.colors.divider}`,
-        backgroundColor: theme.colors.canvas.background,
+        outline: `1px solid var(--divider)`,
+        backgroundColor: "var(--canvas-background)",
       }}
     >
       <div
         style={{
           ...styles.toolbar,
-          backgroundColor: theme.colors.sidebar.background,
+          backgroundColor: "var(--sidebar-background)",
         }}
         onMouseDown={handleMouseDown}
       >