@noya-app/noya-designsystem 0.1.39 → 0.1.40

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

@@ -38,7 +38,7 @@
   --listview-raised-background: rgba(0, 0, 0, 0.03);
   --listview-editing-background: #fff;
   --slider-background: white;
-  --slider-border: #bbb;
+  --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"] {
@@ -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;
+}

package/tailwind.config.ts

@@ -74,6 +74,7 @@ const config = {
         "chip-secondary-shadow": "var(--chip-secondary-shadow)",
         "chip-error-shadow": "var(--chip-error-shadow)",
         "chip-default-shadow": "var(--chip-default-shadow)",
+        "floating-button": "var(--floating-button)",
       },
       fontFamily: {
         sans: [
@@ -95,79 +96,79 @@ const config = {
       // old:  typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
       fontSize: {
         title: [
-          "3.052rem",
+          "3.052rem", // 48.83px
           {
             lineHeight: "1.4",
             letterSpacing: "-0.05em",
           },
         ],
         subtitle: [
-          "1.563rem",
+          "1.563rem", // 25px
           {
             lineHeight: "1.75",
             letterSpacing: "-0.05em",
           },
         ],
         heading1: [
-          "1.953rem",
+          "1.953rem", // 31.25px
           {
             lineHeight: "1.6",
             letterSpacing: "-0.025em",
           },
         ],
         heading2: [
-          "1.563rem",
+          "1.563rem", // 25px
           {
             lineHeight: "1.5",
             letterSpacing: "-0.025em",
           },
         ],
         heading3: [
-          "1.25rem",
+          "1.25rem", // 20px
           {
             lineHeight: "1.4",
             letterSpacing: "-0.025em",
           },
         ],
         heading4: [
-          "1rem",
+          "1rem", // 16px
           {
             lineHeight: "1.4",
           },
         ],
         heading5: [
-          "0.85rem",
+          "0.85rem", // 13.6px
           {
             lineHeight: "1.4",
           },
         ],
         body: [
-          "1",
+          "1", // 16px (1 = 1rem)
           {
             lineHeight: "1.4",
           },
         ],
         small: [
-          "1",
+          "1", // 16px (1 = 1rem)
           {
             lineHeight: "19px",
           },
         ],
         code: [
-          "90%",
+          "90%", // 14.4px
           {
             lineHeight: "1.5",
           },
         ],
         button: [
-          "0.8rem",
+          "0.8rem", // 12.8px
           {
             lineHeight: "1.4",
             letterSpacing: "-0.2px",
           },
         ],
         label: [
-          "0.62rem",
+          "0.62rem", // 9.92px
           {
             lineHeight: "19px",
             letterSpacing: "-0.3px",
@@ -211,7 +212,8 @@ const config = {
       zIndex: {
         interactable: "var(--interactable-z-index)",
         label: "var(--label-z-index)",
-      }
+        menu: "var(--menu-z-index)",
+      },
     },
   },
   safelist: [
@@ -231,6 +233,7 @@ const config = {
     "border-gray-200",
     "gap-1.5",
     "gap-toolbar-separator",
+    "-mr-1",
   ],
 } satisfies Config;
 

package/src/hooks/useDarkMode.ts

@@ -1,14 +0,0 @@
-import { useState, useEffect } from "react"
-
-export function useDarkMode(elementRef: React.RefObject<HTMLElement>) {
-  const [isDark, setIsDark] = useState(false)
-
-  useEffect(() => {
-    if (!elementRef.current) return;
-    
-    const hasDarkTheme = elementRef.current.closest('[data-theme="dark"]') !== null
-    setIsDark(hasDarkTheme)
-  }, [elementRef])
-
-  return { isDark, elementRef }
-}

package/src/utils/tailwind.ts

@@ -1,9 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-/**
- * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
- * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
- * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
- */
-export const cn = (...classes: (string | boolean | undefined | null)[]) =>
-  twMerge(classes.filter(Boolean) as string[]);