@noya-app/noya-designsystem 0.0.15 → 0.1.0

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
     "build": "tsup src/index.tsx --format cjs,esm --dts --sourcemap",
-    "dev": "npm run build -- --watch"
+    "dev": "npm run build -- --watch",
+    "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.0.9",
-    "@noya-app/noya-utils": "0.0.12",
-    "@noya-app/noya-geometry": "0.0.13",
-    "@noya-app/noya-icons": "0.0.6",
-    "@noya-app/noya-keymap": "0.0.8",
+    "@noya-app/noya-colorpicker": "0.1.0",
+    "@noya-app/noya-utils": "0.1.0",
+    "@noya-app/noya-geometry": "0.1.0",
+    "@noya-app/noya-icons": "0.1.0",
+    "@noya-app/noya-keymap": "0.1.0",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/Chip.tsx

@@ -56,6 +56,7 @@ const ChipElement = styled.span<{
       : {
           fontSize: "9px",
           padding: "0px 4px",
+          lineHeight: "15px",
         }),
     ...(monospace && {
       fontFamily: theme.fonts.monospace,
@@ -80,6 +81,9 @@ const ChipElement = styled.span<{
     },
     ...(isInteractive && {
       cursor: "pointer",
+      "&:hover": {
+        opacity: 0.85,
+      },
     }),
   };
 });
@@ -116,19 +120,19 @@ const AddElement = styled(PlusIcon).withConfig({
   isOnlyChild: boolean;
 }>(({ size, isOnlyChild }) => ({
   position: "relative",
-  marginRight: "-2px",
+  marginLeft: "-2px",
   cursor: "pointer",
   opacity: 0.5,
 
   ...(size === "medium"
     ? {
-        marginLeft: "2px",
+        marginRight: "2px",
         top: "-1px",
         transform: "scale(0.75)",
       }
     : {
+        marginRight: "-2px",
         transform: "scale(0.6)",
-        ...(isOnlyChild && { marginLeft: "-2px" }),
       }),
 
   "&:hover": {
@@ -193,20 +197,34 @@ export const Chip = memo(function Chip({
       isInteractive={!!handleClick}
       tabIndex={tabIndex}
     >
-      {children}
-      {deletable && (
-        <DeleteElement
+      {addable && (
+        <AddElement
           size={size}
-          {...(hoverDeleteProps as any)}
-          onClick={onDelete}
+          isOnlyChild={!children && !deletable}
+          onClick={
+            onAdd
+              ? (event) => {
+                  event.stopPropagation();
+                  onAdd?.();
+                }
+              : undefined
+          }
           color={color}
         />
       )}
-      {addable && (
-        <AddElement
+      {children}
+      {deletable && (
+        <DeleteElement
           size={size}
-          isOnlyChild={!children && !deletable}
-          onClick={onAdd}
+          {...(hoverDeleteProps as any)}
+          onClick={
+            onDelete
+              ? (event) => {
+                  event.stopPropagation();
+                  onDelete?.();
+                }
+              : undefined
+          }
           color={color}
         />
       )}

package/src/components/DraggableMenuButton.tsx

@@ -0,0 +1,116 @@
+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 { 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 TriggerElement = styled.div({
+  pointerEvents: "none",
+  height: "15px",
+});
+
+/**
+ * A button that opens a menu when clicked, but also allows dragging the
+ */
+export const DraggableMenuButton = memo(function DraggableMenuButton<
+  T extends string,
+>({
+  items,
+  onSelect,
+  isVisible = true,
+}: {
+  items: MenuItem<T>[];
+  onSelect: (value: T) => void;
+  isVisible?: boolean;
+}) {
+  const color = useDesignSystemTheme().colors.icon;
+  const [open, setOpen] = useState(false);
+  const [downPosition, setDownPosition] = React.useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const handlePointerDownCapture = useCallback(
+    (event: React.PointerEvent) => {
+      if (open) {
+        setDownPosition(null);
+        return;
+      }
+
+      setDownPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+    },
+    [open]
+  );
+
+  const handlePointerUp = useCallback(
+    (event: React.PointerEvent) => {
+      if (open || !downPosition) {
+        setDownPosition(null);
+        return;
+      }
+
+      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) {
+        setOpen(true);
+      }
+
+      setDownPosition(null);
+    },
+    [downPosition, open]
+  );
+
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      if (!isOpen) setOpen(false);
+    },
+    [setOpen]
+  );
+
+  return (
+    <DotButtonElement
+      onPointerDownCapture={handlePointerDownCapture}
+      onPointerUp={handlePointerUp}
+      onClick={(event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      }}
+    >
+      <DropdownMenu
+        open={open}
+        onOpenChange={handleOpenChange}
+        items={items}
+        onSelect={onSelect}
+        shouldBindKeyboardShortcuts={false}
+      >
+        <TriggerElement>
+          <DragHandleDots2Icon
+            color={isVisible || open ? color : "transparent"}
+          />
+        </TriggerElement>
+      </DropdownMenu>
+    </DotButtonElement>
+  );
+});