@noya-app/noya-designsystem 0.0.14 → 0.0.16

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "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.8",
-    "@noya-app/noya-utils": "0.0.11",
-    "@noya-app/noya-geometry": "0.0.12",
-    "@noya-app/noya-icons": "0.0.5",
-    "@noya-app/noya-keymap": "0.0.7",
+    "@noya-app/noya-colorpicker": "0.0.10",
+    "@noya-app/noya-utils": "0.0.13",
+    "@noya-app/noya-geometry": "0.0.14",
+    "@noya-app/noya-icons": "0.0.7",
+    "@noya-app/noya-keymap": "0.0.9",
     "@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

@@ -1,12 +1,12 @@
-import { Cross1Icon, PlusIcon } from '@noya-app/noya-icons';
-import React, { memo } from 'react';
-import styled from 'styled-components';
-import { useDesignSystemTheme } from '../contexts/DesignSystemConfiguration';
-import { useHover } from '../hooks/useHover';
+import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
+import React, { memo } from "react";
+import styled from "styled-components";
+import { useDesignSystemTheme } from "../contexts/DesignSystemConfiguration";
+import { useHover } from "../hooks/useHover";
 
-type ChipColorScheme = 'primary' | 'secondary' | 'error';
-type ChipSize = 'small' | 'medium';
-type ChipVariant = 'solid' | 'outlined' | 'ghost';
+type ChipColorScheme = "primary" | "secondary" | "error";
+type ChipSize = "small" | "medium";
+type ChipVariant = "solid" | "outlined" | "ghost";
 
 const ChipElement = styled.span<{
   colorScheme?: ChipColorScheme;
@@ -16,69 +16,74 @@ const ChipElement = styled.span<{
   isInteractive: boolean;
 }>(({ theme, colorScheme, size, variant, monospace, isInteractive }) => {
   const color =
-    colorScheme === 'primary'
+    colorScheme === "primary"
       ? theme.colors.primary
-      : colorScheme === 'secondary'
-      ? theme.colors.secondary
-      : theme.colors.text;
+      : colorScheme === "secondary"
+        ? theme.colors.secondary
+        : theme.colors.text;
 
   const backgroundColor =
-    colorScheme === 'primary'
-      ? 'rgb(238, 229, 255)'
-      : colorScheme === 'secondary'
-      ? 'rgb(205, 238, 231)'
-      : colorScheme === 'error'
-      ? 'rgb(255, 219, 219)'
-      : theme.colors.inputBackground;
+    colorScheme === "primary"
+      ? "rgb(238, 229, 255)"
+      : colorScheme === "secondary"
+        ? "rgb(205, 238, 231)"
+        : colorScheme === "error"
+          ? "rgb(255, 219, 219)"
+          : theme.colors.inputBackground;
 
   const subtleColor =
-    colorScheme === 'primary'
-      ? 'rgba(238, 229, 255, 0.2)'
-      : colorScheme === 'secondary'
-      ? 'rgba(205, 238, 231, 0.2)'
-      : colorScheme === 'error'
-      ? 'rgba(255, 219, 219, 0.2)'
-      : 'rgba(0, 0, 0, 0.1)';
+    colorScheme === "primary"
+      ? "rgba(238, 229, 255, 0.2)"
+      : colorScheme === "secondary"
+        ? "rgba(205, 238, 231, 0.2)"
+        : colorScheme === "error"
+          ? "rgba(255, 219, 219, 0.2)"
+          : "rgba(0, 0, 0, 0.1)";
 
   return {
-    textTransform: 'initial',
+    textTransform: "initial",
     borderRadius: 4,
-    userSelect: 'none',
-    display: 'inline-flex',
-    alignItems: 'center',
-    lineHeight: '1.4',
-    ...(size === 'medium'
+    userSelect: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    lineHeight: "1.4",
+    whiteSpace: "pre",
+    ...(size === "medium"
       ? {
-          fontSize: '11px',
-          padding: '4px 8px',
+          fontSize: "11px",
+          padding: "4px 8px",
         }
       : {
-          fontSize: '9px',
-          padding: '0px 4px',
+          fontSize: "9px",
+          padding: "0px 4px",
+          lineHeight: "15px",
         }),
     ...(monospace && {
       fontFamily: theme.fonts.monospace,
     }),
-    ...(variant === 'solid'
+    ...(variant === "solid"
       ? {
           color,
           backgroundColor,
         }
-      : variant === 'outlined'
-      ? {
-          color,
-          backgroundColor: 'transparent',
-          boxShadow: `0 0 0 1px ${subtleColor} inset`,
-        }
-      : {}),
-    '&:hover': {
-      ...(variant === 'outlined' && {
+      : variant === "outlined"
+        ? {
+            color,
+            backgroundColor: "transparent",
+            boxShadow: `0 0 0 1px ${subtleColor} inset`,
+          }
+        : {}),
+    "&:hover": {
+      ...(variant === "outlined" && {
         backgroundColor: subtleColor,
-        boxShadow: 'none',
+        boxShadow: "none",
       }),
     },
     ...(isInteractive && {
-      cursor: 'pointer',
+      cursor: "pointer",
+      "&:hover": {
+        opacity: 0.85,
+      },
     }),
   };
 });
@@ -86,27 +91,27 @@ const ChipElement = styled.span<{
 const DeleteElement = styled(Cross1Icon)<{
   size: ChipSize;
 }>(({ size }) => ({
-  position: 'relative',
-  marginRight: '-2px',
-  cursor: 'pointer',
+  position: "relative",
+  marginRight: "-2px",
+  cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === 'medium'
+  ...(size === "medium"
     ? {
-        marginLeft: '2px',
+        marginLeft: "2px",
         // top: '-1px',
-        transform: 'scale(0.75)',
+        transform: "scale(0.75)",
       }
     : {
-        transform: 'scale(0.6)',
+        transform: "scale(0.6)",
       }),
 
-  '&:hover': {
+  "&:hover": {
     opacity: 0.85,
   },
 }));
 
-const ignoredProps = new Set(['size', 'isOnlyChild']);
+const ignoredProps = new Set(["size", "isOnlyChild"]);
 
 const AddElement = styled(PlusIcon).withConfig({
   shouldForwardProp: (prop) => !ignoredProps.has(prop),
@@ -114,23 +119,23 @@ const AddElement = styled(PlusIcon).withConfig({
   size: ChipSize;
   isOnlyChild: boolean;
 }>(({ size, isOnlyChild }) => ({
-  position: 'relative',
-  marginRight: '-2px',
-  cursor: 'pointer',
+  position: "relative",
+  marginLeft: "-2px",
+  cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === 'medium'
+  ...(size === "medium"
     ? {
-        marginLeft: '2px',
-        top: '-1px',
-        transform: 'scale(0.75)',
+        marginRight: "2px",
+        top: "-1px",
+        transform: "scale(0.75)",
       }
     : {
-        transform: 'scale(0.6)',
-        ...(isOnlyChild && { marginLeft: '-2px' }),
+        marginRight: "-2px",
+        transform: "scale(0.6)",
       }),
 
-  '&:hover': {
+  "&:hover": {
     opacity: 0.85,
   },
 }));
@@ -157,8 +162,8 @@ export const Chip = memo(function Chip({
   deletable,
   addable,
   style,
-  size = 'medium',
-  variant = 'solid',
+  size = "medium",
+  variant = "solid",
   monospace = false,
   tabIndex,
   onDelete,
@@ -175,11 +180,11 @@ export const Chip = memo(function Chip({
   const handleClick = !children && !deletable && addable ? onAdd : onClick;
 
   const color =
-    colorScheme === 'primary'
+    colorScheme === "primary"
       ? theme.colors.primary
-      : colorScheme === 'secondary'
-      ? theme.colors.secondary
-      : theme.colors.text;
+      : colorScheme === "secondary"
+        ? theme.colors.secondary
+        : theme.colors.text;
 
   return (
     <ChipElement
@@ -192,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/Dialog.tsx

@@ -1,4 +1,4 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, {
   ComponentProps,
   ForwardedRef,
@@ -6,35 +6,35 @@ import React, {
   ReactNode,
   useImperativeHandle,
   useRef,
-} from 'react';
-import styled from 'styled-components';
-import { IconButton } from './IconButton';
-import { Spacer } from './Spacer';
+} from "react";
+import styled from "styled-components";
+import { IconButton } from "./IconButton";
+import { Spacer } from "./Spacer";
 
 const StyledOverlay = styled(DialogPrimitive.Overlay)({
-  backgroundColor: 'rgba(0,0,0,0.5)',
-  position: 'fixed',
+  backgroundColor: "rgba(0,0,0,0.5)",
+  position: "fixed",
   inset: 0,
 });
 
 const StyledContent = styled(DialogPrimitive.Content)(({ theme }) => ({
   boxShadow:
-    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
-  position: 'fixed',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '90vw',
-  maxWidth: '450px',
-  maxHeight: '85vh',
+    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90vw",
+  maxWidth: "450px",
+  maxHeight: "85vh",
   padding: theme.sizes.dialog.padding,
   borderRadius: 2,
   ...theme.textStyles.small,
   backgroundColor: theme.colors.popover.background,
-  overflowY: 'auto',
+  overflowY: "auto",
   color: theme.colors.textMuted,
-  '&:focus': { outline: 'none' },
-  pointerEvents: 'all',
+  "&:focus": { outline: "none" },
+  pointerEvents: "all",
   zIndex: 1000,
 }));
 
@@ -51,13 +51,13 @@ const StyledDescription = styled(DialogPrimitive.Description)(({ theme }) => ({
 }));
 
 export const CloseButtonContainer = styled.div(({ theme }) => ({
-  position: 'absolute',
+  position: "absolute",
   top: theme.sizes.dialog.padding,
   right: theme.sizes.dialog.padding,
   zIndex: 1,
   backgroundColor: theme.colors.popover.background,
-  padding: '4px 6px',
-  borderRadius: '2px',
+  padding: "4px 6px",
+  borderRadius: "2px",
   // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
   border: `1px solid rgba(128,128,128,0.2)`,
 }));
@@ -70,12 +70,12 @@ interface Props {
   title?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
-  style?: ComponentProps<typeof StyledContent>['style'];
-  open: ComponentProps<typeof DialogPrimitive.Root>['open'];
-  onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>['onOpenChange'];
+  style?: ComponentProps<typeof StyledContent>["style"];
+  open: ComponentProps<typeof DialogPrimitive.Root>["open"];
+  onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
   onOpenAutoFocus?: ComponentProps<
     typeof DialogPrimitive.Content
-  >['onOpenAutoFocus'];
+  >["onOpenAutoFocus"];
   closeOnInteractOutside?: boolean;
 }
 
@@ -90,7 +90,7 @@ export const Dialog = forwardRef(function Dialog(
     onOpenAutoFocus,
     closeOnInteractOutside = true,
   }: Props,
-  forwardedRef: ForwardedRef<IDialog>,
+  forwardedRef: ForwardedRef<IDialog>
 ) {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -141,3 +141,28 @@ export const Dialog = forwardRef(function Dialog(
     </DialogPrimitive.Root>
   );
 });
+
+export const FullscreenDialog = forwardRef(function FullscreenDialog(
+  { style, ...rest }: Props,
+  forwardedRef: ForwardedRef<IDialog>
+) {
+  return (
+    <Dialog
+      ref={forwardedRef}
+      style={{
+        width: "100%",
+        height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        top: "0",
+        left: "0",
+        transform: "none",
+        display: "flex",
+        flexDirection: "column",
+        padding: 0,
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+});

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>
+  );
+});