@noya-app/noya-designsystem 0.1.39 → 0.1.41

package/src/components/UserPointer.tsx

@@ -0,0 +1,170 @@
+import React, { memo, useMemo } from "react";
+import { cx } from "../utils/classNames";
+import { colorFromString } from "../utils/colorFromString";
+
+type Point = { x: number; y: number };
+
+const UserPointerContainer = memo(function UserPointerContainer({
+  point,
+  visible,
+  children,
+  className,
+  style,
+}: {
+  point: Point;
+  visible?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div
+      style={{
+        transform: `translate(${Math.round(point.x)}px, ${Math.round(point.y)}px)`,
+        transition: "transform 0.075s, opacity 0.2s",
+        ...style,
+      }}
+      className={cx(
+        "pointer-events-none",
+        visible ? "opacity-100" : "opacity-0",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+const UserNameTag = memo(function UserNameTag({
+  backgroundColor,
+  className,
+  style,
+  children,
+}: {
+  backgroundColor: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      className={cx(
+        "relative inline-block rounded-full text-xs font-medium leading-none text-white shadow-sm px-2 py-1.5 border border-background",
+        className
+      )}
+      style={{
+        backgroundColor,
+        letterSpacing: "-0.3px",
+        ...style,
+      }}
+    >
+      {children}
+    </span>
+  );
+});
+
+const UserPointerIcon = memo(function PointerIcon({
+  size,
+  color = "black",
+  className,
+  style,
+}: {
+  size: number;
+  color?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  // Simple triangle shape: left point, top right, bottom right
+  const points = "0,5 10,0 10,10";
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      className={className}
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        transform: `translate(0, -${size / 2}px) rotate(45deg)`,
+        transformOrigin: "left center",
+        ...style,
+      }}
+    >
+      <polygon
+        points={points}
+        fill={color}
+        stroke="var(--background)"
+        strokeWidth="0.5"
+      />
+    </svg>
+  );
+});
+
+export type UserPointerProps = {
+  userId?: string;
+  name?: string;
+  /** label to display in the tooltip next to the Pointer */
+  visible?: boolean;
+  point: Point;
+  /** defaults to a random color based on the key, but can optionally be overridden */
+  backgroundColor?: string;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+const POINTER_SIZE = 12;
+const POINTER_OVERLAP = 6;
+
+export const UserPointer = memo(function UserPointer({
+  userId,
+  name,
+  visible = true,
+  point,
+  backgroundColor,
+  style,
+  className,
+}: UserPointerProps) {
+  const userBackgroundColor = useMemo(
+    () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
+    [backgroundColor, userId, name]
+  );
+
+  const pointerOverlapStyle = useMemo(
+    () => ({
+      marginRight: `-${POINTER_OVERLAP}px`,
+      marginBottom: `-${POINTER_OVERLAP}px`,
+    }),
+    []
+  );
+
+  const nameTagOverlapStyle = useMemo(
+    () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
+    []
+  );
+
+  return (
+    <UserPointerContainer
+      point={point}
+      visible={visible}
+      className={className}
+      style={style}
+    >
+      {name && (
+        <div className="relative">
+          <UserPointerIcon
+            size={POINTER_SIZE}
+            color={userBackgroundColor}
+            style={pointerOverlapStyle}
+          />
+          <UserNameTag
+            backgroundColor={userBackgroundColor}
+            style={nameTagOverlapStyle}
+          >
+            {name}
+          </UserNameTag>
+        </div>
+      )}
+    </UserPointerContainer>
+  );
+});

package/src/components/WorkspaceLayout.tsx

@@ -33,6 +33,7 @@ interface Props {
   hasLeftSidebar?: boolean;
   onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
   leftSidebarCanResize?: boolean;
+  rightSidebarCanResize?: boolean;
   id?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -74,6 +75,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
     leftSidebarMinSize,
     rightSidebarMinSize,
     leftSidebarCanResize = false,
+    rightSidebarCanResize = false,
     id,
     className,
     style,
@@ -261,6 +263,9 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
               ref={rightSidebarRef}
               minSize={rightSidebarMinPercentage ?? rightSidebarPercentage}
               defaultSize={rightSidebarPercentage}
+              {...(!rightSidebarCanResize && {
+                maxSize: rightSidebarPercentage,
+              })}
               collapsible
               style={{
                 display: "flex",

package/src/components/internal/Menu.tsx

@@ -3,7 +3,6 @@ import React, { memo, ReactNode } from "react";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
 import withSeparatorElements from "../../utils/withSeparatorElements";
 import { IconName } from "../Icons";
-import { cn } from "../../utils/tailwind";
 import { textStyles } from "../Text";
 
 export const SEPARATOR_ITEM = "separator";
@@ -108,7 +107,7 @@ export const styles = {
     shadow-[0_2px_4px_rgba(0,0,0,0.2),_0_0_12px_rgba(0,0,0,0.1)]
     p-1
     border border-popover-divider
-    z-50
+    z-menu
   `,
 };
 
@@ -135,9 +134,19 @@ export function getKeyboardShortcutsForMenuItems<T extends string>(
   );
 }
 
-const ShortcutElement = ({children, fixedWidth}: {children?: React.ReactNode; fixedWidth?: boolean}) => (
-  <kbd className={cn(textStyles.small, "text-text-disabled", fixedWidth && "w-[0.9rem] text-center")}>{children}</kbd>
-)
+const ShortcutElement = ({
+  children,
+  fixedWidth,
+}: {
+  children?: React.ReactNode;
+  fixedWidth?: boolean;
+}) => (
+  <kbd
+    className={`${textStyles.small} text-text-disabled ${fixedWidth && "w-[0.9rem] text-center"}`}
+  >
+    {children}
+  </kbd>
+);
 
 export const KeyboardShortcut = memo(function KeyboardShortcut({
   shortcut,

package/src/components/internal/TextInput.tsx

@@ -60,6 +60,8 @@ const ReadOnlyTextInput = forwardRef(function ReadOnlyTextInput(
 
 type ControlledProps = Props & {
   onChange: (value: string) => void;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
 };
 
 const ControlledTextInput = forwardRef(function ControlledTextInput(
@@ -70,6 +72,7 @@ const ControlledTextInput = forwardRef(function ControlledTextInput(
     onFocusChange,
     onBlur,
     onFocusCapture,
+    onFocus,
     ...rest
   }: ControlledProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
@@ -92,6 +95,15 @@ const ControlledTextInput = forwardRef(function ControlledTextInput(
     [onFocusCapture, onFocusChange]
   );
 
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onFocus?.(event);
+
+      onFocusChange?.(true);
+    },
+    [onFocus, onFocusChange]
+  );
+
   return (
     <input
       ref={forwardedRef}
@@ -105,6 +117,7 @@ const ControlledTextInput = forwardRef(function ControlledTextInput(
       )}
       onBlur={handleBlur}
       onFocusCapture={handleFocusCapture}
+      onFocus={handleFocus}
     />
   );
 });

package/src/contexts/DialogContext.tsx

@@ -26,8 +26,14 @@ function createDeferredPromise<T>() {
 
 export type DialogContextValue = {
   openInputDialog(
-    title: string,
-    inputValue?: string
+    options:
+      | string
+      | {
+          title: string;
+          description?: ReactNode;
+          placeholder?: string;
+          initialValue?: string;
+        }
   ): Promise<string | undefined>;
 
   containsElement(element: HTMLElement): boolean;
@@ -43,6 +49,8 @@ export const DialogProvider = function DialogProvider({
   const [contents, setContents] = useState<
     | {
         title: string;
+        description?: ReactNode;
+        placeholder?: string;
         inputValue: string;
         resolve: (value: string | undefined) => void;
       }
@@ -64,23 +72,25 @@ export const DialogProvider = function DialogProvider({
     setContents(undefined);
   }, [contents]);
 
-  const open: DialogContextValue["openInputDialog"] = useCallback(
-    (title, inputValue = "") => {
-      const { promise, resolve } = createDeferredPromise<string | undefined>();
+  const open: DialogContextValue["openInputDialog"] = useCallback((options) => {
+    const { promise, resolve } = createDeferredPromise<string | undefined>();
 
-      setContents({
-        title,
-        inputValue,
-        resolve: (value) => {
-          resolve(value);
-          setContents(undefined);
-        },
-      });
+    const { title, description, initialValue, placeholder } =
+      typeof options === "string" ? { title: options } : options;
 
-      return promise;
-    },
-    []
-  );
+    setContents({
+      title,
+      description,
+      inputValue: initialValue ?? "",
+      placeholder,
+      resolve: (value) => {
+        resolve(value);
+        setContents(undefined);
+      },
+    });
+
+    return promise;
+  }, []);
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -116,6 +126,7 @@ export const DialogProvider = function DialogProvider({
       <Dialog
         ref={dialogRef}
         title={contents?.title}
+        description={contents?.description}
         open={isOpen}
         onOpenChange={useCallback(
           (isOpen: boolean) => {
@@ -138,6 +149,7 @@ export const DialogProvider = function DialogProvider({
         <InputField.Root>
           <InputField.Input
             ref={inputRef}
+            placeholder={contents?.placeholder}
             value={contents?.inputValue ?? ""}
             onChange={(value) => {
               setContents((contents) =>
@@ -153,7 +165,7 @@ export const DialogProvider = function DialogProvider({
           />
         </InputField.Root>
         <Spacer.Vertical size={20} />
-        <div className="flex-1 flex-row items-center">
+        <div className="flex flex-1 flex-row items-center">
           <Spacer.Horizontal />
           <Button onClick={close}>Cancel</Button>
           <Spacer.Horizontal size={16} />

package/src/hooks/useTheme.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+
+/** @default light */
+export type UseThemeReturnType = "dark" | "light";
+
+/**
+ * Hook to get the current theme of the app via the `data-theme` attribute on the body element.
+ * @returns The current theme.
+ */
+export function useTheme() {
+  const [theme, setTheme] = useState<UseThemeReturnType>("light");
+
+  const checkTheme = () => {
+    const currentTheme = document.body.getAttribute("data-theme");
+    switch (currentTheme) {
+      case "dark":
+        setTheme("dark");
+        break;
+      case "light":
+        setTheme("light");
+        break;
+    }
+  };
+
+  useEffect(() => {
+    checkTheme();
+
+    // Setup observer for theme changes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "data-theme"
+        ) {
+          checkTheme();
+        }
+      });
+    });
+
+    // Observe body element for theme changes
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return theme;
+}

package/src/index.css

@@ -37,8 +37,8 @@
   --popover-divider: transparent;
   --listview-raised-background: rgba(0, 0, 0, 0.03);
   --listview-editing-background: #fff;
-  --slider-background: white;
-  --slider-border: #bbb;
+  --slider-thumb-background: white;
+  --slider-border: #9698ac;
   --radio-group-background: white;
   --mask: rgb(12, 193, 67);
   --transparent-checker: rgba(255, 255, 255, 0.8);
@@ -63,19 +63,21 @@
   --icon-selected: rgb(220, 220, 220);
   --warning: rgb(251, 211, 0);
   --radio-group-item: rgb(139, 139, 139);
-  --dot: rgba(0,0,0,0.25);
-  --row-highlight: #3390FF10;
+  --dot: rgba(0, 0, 0, 0.25);
+  --row-highlight: #3390ff10;
   --table-row-background: var(--background);
   --interactable-z-index: 2;
   --label-z-index: 3;
-  --chip-primary-bg: rgba(238,229,255,0.2);
-  --chip-secondary-bg: rgba(205,238,231,0.2);
-  --chip-error-bg: rgba(255,219,219,0.2);
-  --chip-default-bg: rgba(0,0,0,0.1);
-  --chip-primary-shadow: rgb(238,229,255);
-  --chip-secondary-shadow: rgb(205,238,231);
-  --chip-error-shadow: rgb(255,219,219);
-  --chip-default-shadow: rgb(0,0,0);
+  --menu-z-index: 5000;
+  --chip-primary-bg: rgba(238, 229, 255, 0.2);
+  --chip-secondary-bg: rgba(205, 238, 231, 0.2);
+  --chip-error-bg: rgba(255, 219, 219, 0.2);
+  --chip-default-bg: rgba(0, 0, 0, 0.1);
+  --chip-primary-shadow: rgb(238, 229, 255);
+  --chip-secondary-shadow: rgb(205, 238, 231);
+  --chip-error-shadow: rgb(255, 219, 219);
+  --chip-default-shadow: rgb(0, 0, 0);
+  --floating-button: rgb(248, 248, 250);
 }
 
 [data-theme="dark"] {
@@ -85,7 +87,7 @@
   --text: rgb(248, 248, 250);
   --text-muted: rgb(180, 179, 182);
   --text-subtle: rgb(180, 179, 182);
-  --text-disabled: rgb(100, 99, 102);
+  --text-disabled: rgb(115, 114, 126);
   --divider-subtle: rgba(255, 255, 255, 0.04);
   --divider: rgba(255, 255, 255, 0.08);
   --divider-strong: rgba(0, 0, 0, 1);
@@ -103,7 +105,7 @@
   --popover-divider: rgba(255, 255, 255, 0.08);
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
-  --slider-background: #bbb;
+  --slider-thumb-background: rgb(248, 248, 250);
   --radio-group-background: rgba(181, 178, 255, 0.08);
   --mask: rgb(102, 187, 106);
   --transparent-checker: rgba(255, 255, 255, 0.3);
@@ -113,6 +115,7 @@
   --active-background: rgba(181, 178, 255, 0.08);
   --thumbnail-background: #1f1d33;
   --thumbnail-shadow: #1f1d3366;
-  --dot: rgba(255,255,255,0.15);
+  --dot: rgba(255, 255, 255, 0.15);
   --table-row-background: var(--sidebar-background);
-}
+  --floating-button: #333333;
+}

package/src/index.tsx

@@ -1,24 +1,11 @@
-// 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/AnimatePresence";
 export * from "./components/Avatar";
 export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
+export * from "./components/Combobox";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
@@ -32,8 +19,13 @@ export * from "./components/GridView";
 export * from "./components/IconButton";
 export * from "./components/Icons";
 export * from "./components/InputField";
-export * from "./components/InputFieldWithCompletions";
 export * from "./components/InspectorContainer";
+export { KeyboardShortcut, SEPARATOR_ITEM } from "./components/internal/Menu";
+export type {
+  ExtractMenuItemType,
+  MenuItem,
+  RegularMenuItem,
+} from "./components/internal/Menu";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
 export * from "./components/ListView";
@@ -52,30 +44,26 @@ export * from "./components/TextArea";
 export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./components/TreeView";
+export * from "./components/UserPointer";
 export * from "./components/WorkspaceLayout";
-export { KeyboardShortcut, SEPARATOR_ITEM } from "./components/internal/Menu";
-export type {
-  ExtractMenuItemType,
-  MenuItem,
-  RegularMenuItem,
-} from "./components/internal/Menu";
 // Contexts
 export * from "./contexts/DesignSystemConfiguration";
 export * from "./contexts/DialogContext";
 export * from "./contexts/FloatingWindowContext";
-export * from "./contexts/ImageDataContext";
 export * from "./contexts/GlobalInputBlurContext";
+export * from "./contexts/ImageDataContext";
 // Hooks
 export * from "./hooks/useHover";
 export * from "./hooks/usePlatform";
+export * from "./hooks/usePreservePanelSize";
+export * from "./hooks/useTheme";
 export * from "./mediaQuery";
 export * from "./theme";
-export { cn } from './utils/tailwind';
+export * from "./utils/classNames";
 export * from "./utils/createSectionedMenu";
 export * from "./utils/getGradientBackground";
-export * from "./hooks/usePreservePanelSize";
-export * from './hooks/useDarkMode';
 // Utils
+export * from "./utils/colorFromString";
 export * from "./utils/completions";
 export * from "./utils/fuzzyScorer";
 export * from "./utils/sketchColor";

package/src/utils/classNames.ts

@@ -0,0 +1,5 @@
+export function cx(
+  ...args: Array<string | number | boolean | null | undefined>
+): string {
+  return args.filter(Boolean).join(" ").trim();
+}

package/src/utils/colorFromString.ts

@@ -0,0 +1,44 @@
+export const colorForStringValues: Record<string, string> = {
+  red: "#ef4444", // red-500
+  orange: "#f97316", // orange-500
+  amber: "#f59e0b", // amber-500
+  yellow: "#eab308", // yellow-500
+  lime: "#84cc16", // lime-500
+  green: "#22c55e", // green-500
+  emerald: "#10b981", // emerald-500
+  teal: "#14b8a6", // teal-500
+  cyan: "#06b6d4", // cyan-500
+  sky: "#0ea5e9", // sky-500
+  blue: "#3b82f6", // blue-500
+  indigo: "#6366f1", // indigo-500
+  violet: "#8b5cf6", // violet-500
+  purple: "#a855f7", // purple-500
+  fuchsia: "#d946ef", // fuchsia-500
+  pink: "#ec4899", // pink-500
+  rose: "#f43f5e", // rose-500
+};
+
+function hashCode(string: string) {
+  let hash = 0;
+  for (const char of string) {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  }
+  return hash;
+}
+
+function elementFromHash<T>(array: T[], hash: number): T {
+  return array[Math.abs(hash) % array.length];
+}
+
+/**
+ * Create a background color and initials from a name
+ * Adapted from (MIT) https://mui.com/material-ui/react-avatar/
+ */
+export function colorFromString(str: string) {
+  const hash = hashCode(str);
+  const backgroundColor = elementFromHash(
+    Object.values(colorForStringValues),
+    hash
+  );
+  return backgroundColor;
+}