@noya-app/noya-designsystem 0.1.62 → 0.1.64

package/src/components/workspace/panelStorage.ts

@@ -0,0 +1,216 @@
+import { clientStorage, IClientStorage } from "@noya-app/react-utils";
+import { PanelGroupStorage } from "react-resizable-panels";
+import {
+  CONTENT_AREA_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+} from "./constants";
+import {
+  PercentageSidebarOptions,
+  WorkspaceLayoutGroup,
+  WorkspaceLayoutState,
+} from "./types";
+
+// Workspace sizes are stored as percentages (e.g. layout: [78.7224911972, 21.2775088028])
+// we need to convert them to pixels relative to the window width before storing
+// and convert them back to percentages when getting the item
+export const panelStorage: PanelGroupStorage = {
+  getItem: (name) => {
+    const item = clientStorage.getItem(name);
+
+    if (item) {
+      const parsed = JSON.parse(item);
+      const percentageSize = mapWorkspaceLayoutState(parsed, (size) =>
+        toPercentageSize(size)
+      );
+      const stringified = JSON.stringify(percentageSize);
+      // console.log("getItem", name, stringified);
+      return stringified;
+    }
+
+    return item;
+  },
+
+  setItem: (name, value) => {
+    const parsed = JSON.parse(value);
+    const pixelSize = mapWorkspaceLayoutState(parsed, (size) =>
+      toPixelSize(size)
+    );
+    // console.log("setItem", name, pixelSize);
+    clientStorage.setItem(name, JSON.stringify(pixelSize));
+  },
+};
+
+export const toPixelSize = (size: number, windowWidth = window.innerWidth) =>
+  Math.round((size * windowWidth) / 100);
+export const toPercentageSize = (
+  size: number,
+  windowWidth = window.innerWidth
+) => (size * 100) / windowWidth;
+
+export function mapWorkspaceLayoutState(
+  layout: WorkspaceLayoutState,
+  f: (size: number) => number
+): WorkspaceLayoutState {
+  return Object.fromEntries(
+    Object.entries(layout).map(
+      ([key, value]): [string, WorkspaceLayoutGroup] => {
+        const expandToSizes = Object.fromEntries(
+          Object.entries(value.expandToSizes).map(([key, value]) => [
+            key,
+            f(value),
+          ])
+        );
+
+        return [
+          key,
+          {
+            expandToSizes,
+            layout: value.layout.map(f),
+          },
+        ];
+      }
+    )
+  );
+}
+
+export function getLayoutIds({
+  hasLeftPanel,
+  hasRightPanel,
+  hasCenterPanel,
+}: {
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+  hasCenterPanel: boolean;
+}) {
+  return [
+    hasLeftPanel && LEFT_SIDEBAR_ID,
+    hasCenterPanel && CONTENT_AREA_ID,
+    hasRightPanel && RIGHT_SIDEBAR_ID,
+  ].flatMap((id) => (id ? [id] : []));
+}
+
+export function getPropertyKey(layoutIds: string[]) {
+  return layoutIds.sort().join(",");
+}
+
+export function getStorageKey(autoSaveId: string) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
+export function getInitialLayout({
+  layoutIds,
+  leftSidebarOptions,
+  rightSidebarOptions,
+  centerPanelPercentage,
+  hasLeftPanel,
+  hasRightPanel,
+  hasCenterPanel,
+  windowWidth = window.innerWidth,
+}: {
+  layoutIds: string[];
+  leftSidebarOptions: PercentageSidebarOptions;
+  rightSidebarOptions: PercentageSidebarOptions;
+  centerPanelPercentage: number;
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+  hasCenterPanel: boolean;
+  windowWidth?: number;
+}) {
+  return layoutIds.map((id) => {
+    if (id === LEFT_SIDEBAR_ID && hasLeftPanel) {
+      return leftSidebarOptions.defaultCollapsed
+        ? 0
+        : toPixelSize(leftSidebarOptions.initialSize ?? 0, windowWidth);
+    } else if (id === RIGHT_SIDEBAR_ID && hasRightPanel) {
+      return rightSidebarOptions.defaultCollapsed
+        ? 0
+        : toPixelSize(rightSidebarOptions.initialSize ?? 0, windowWidth);
+    } else if (id === CONTENT_AREA_ID && hasCenterPanel) {
+      const shouldShowLeftSidebar =
+        hasLeftPanel && !leftSidebarOptions.defaultCollapsed;
+      const shouldShowRightSidebar =
+        hasRightPanel && !rightSidebarOptions.defaultCollapsed;
+
+      if (!shouldShowLeftSidebar && !shouldShowRightSidebar) {
+        return toPixelSize(100, windowWidth);
+      }
+
+      return toPixelSize(centerPanelPercentage, windowWidth);
+    }
+    return 0;
+  });
+}
+
+export function setInitialLayout({
+  storageKey,
+  propertyKey,
+  calculateLayout,
+  storage = clientStorage,
+}: {
+  storageKey: string;
+  propertyKey: string;
+  calculateLayout: () => number[];
+  storage?: IClientStorage;
+}) {
+  const savedLayout = storage.getItem(storageKey);
+
+  if (!savedLayout) {
+    const layoutObject: WorkspaceLayoutState = {
+      [propertyKey]: {
+        layout: calculateLayout(),
+        expandToSizes: {},
+      },
+    };
+
+    storage.setItem(storageKey, JSON.stringify(layoutObject));
+  } else {
+    let parsedLayout: WorkspaceLayoutState;
+
+    try {
+      parsedLayout = JSON.parse(savedLayout);
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+
+    if (!(propertyKey in parsedLayout)) {
+      const layoutObject: WorkspaceLayoutState = {
+        ...parsedLayout,
+        [propertyKey]: {
+          layout: calculateLayout(),
+          expandToSizes: {},
+        },
+      };
+
+      storage.setItem(storageKey, JSON.stringify(layoutObject));
+    }
+  }
+}
+
+export function getLayoutCollapsedState({
+  layoutGroup,
+  layoutIds,
+  hasLeftPanel,
+  hasRightPanel,
+}: {
+  layoutGroup: WorkspaceLayoutGroup;
+  propertyKey: string;
+  layoutIds: string[];
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+}) {
+  const propertySize = Object.fromEntries(
+    layoutIds.map((id, index) => [id, layoutGroup.layout?.[index]])
+  );
+
+  const leftSize = propertySize?.[LEFT_SIDEBAR_ID];
+  const leftSidebarCollapsed = hasLeftPanel && leftSize === 0 ? true : false;
+  const rightSize = propertySize?.[RIGHT_SIDEBAR_ID];
+  const rightSidebarCollapsed = hasRightPanel && rightSize === 0 ? true : false;
+
+  return {
+    leftSidebarCollapsed,
+    rightSidebarCollapsed,
+  };
+}

package/src/components/workspace/renderPanelChildren.tsx

@@ -0,0 +1,12 @@
+import { RenderPanel } from "./types";
+
+export function renderPanelChildren<TabValue extends string>(
+  fn: RenderPanel<TabValue>,
+  activeTabValue: TabValue
+) {
+  if (typeof fn === "function") {
+    return fn({ activeTabValue });
+  }
+
+  return fn;
+}

package/src/components/workspace/types.ts

@@ -1,3 +1,6 @@
+import { ReactNode } from "react";
+import { MenuItem } from "../internal/Menu";
+
 export type SidebarRef = {
   expand: () => void;
   collapse: () => void;
@@ -9,6 +12,8 @@ export type PercentageSidebarOptions = {
   maxSize?: number;
   initialSize?: number;
   resizable?: boolean;
+  defaultCollapsed?: boolean;
+  showTabs?: boolean;
 };
 
 export type PanelLayoutState = {
@@ -16,16 +21,34 @@ export type PanelLayoutState = {
   rightSidebarCollapsed: boolean;
 };
 
-export type LayoutProps = {
-  leftPanel: React.ReactNode;
-  rightPanel: React.ReactNode;
+export type RenderPanel<TabValue extends string> =
+  | ReactNode
+  | ((props: { activeTabValue: TabValue }) => ReactNode);
+
+export type LayoutProps<
+  LeftTab extends string = string,
+  RightTab extends string = string,
+> = {
+  leftPanel: ReactNode;
+  leftTabItems?: MenuItem<LeftTab>[];
+  leftTabValue?: LeftTab;
+  onChangeLeftTab?: (value: LeftTab) => void;
+  rightPanel: ReactNode;
+  rightTabItems?: MenuItem<RightTab>[];
+  rightTabValue?: RightTab;
+  onChangeRightTab?: (value: RightTab) => void;
   centerPanel: React.ReactNode;
   leftSidebarOptions: PercentageSidebarOptions;
   rightSidebarOptions: PercentageSidebarOptions;
   centerPanelPercentage: number;
   autoSavePrefix?: string;
-  internalLayoutState: PanelLayoutState | null;
-  leftSidebarRef: React.RefObject<SidebarRef>;
-  rightSidebarRef: React.RefObject<SidebarRef>;
-  handleChangeLayoutState: (state: PanelLayoutState) => void;
+  leftSidebarRef: React.RefObject<SidebarRef | null>;
+  rightSidebarRef: React.RefObject<SidebarRef | null>;
 };
+
+export type WorkspaceLayoutGroup = {
+  expandToSizes: Record<string, number>;
+  layout: number[];
+};
+
+export type WorkspaceLayoutState = Record<string, WorkspaceLayoutGroup>;

package/src/contexts/DesignSystemConfiguration.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import { getCurrentPlatform, PlatformName } from "@noya-app/noya-keymap";
 import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
+import { LinkComponent, LinkComponentProvider } from "./LinkComponentContext";
 import { OpenPortalsProvider } from "./OpenPortalsContext";
 
 export type DesignSystemConfigurationContextValue = {
@@ -18,9 +21,11 @@ export const DesignSystemConfigurationProvider = React.memo(
   function DesignSystemConfigurationProvider({
     children,
     platform,
+    LinkComponent,
   }: {
     children: React.ReactNode;
     platform?: PlatformName;
+    LinkComponent?: LinkComponent;
   }) {
     const [internalPlatform, setInternalPlatform] =
       React.useState<PlatformName>(platform ?? "key");
@@ -41,11 +46,13 @@ export const DesignSystemConfigurationProvider = React.memo(
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
         <OpenPortalsProvider>
-          <DialogProvider>
-            <ToastProvider>
-              <FloatingWindowProvider>{children}</FloatingWindowProvider>
-            </ToastProvider>
-          </DialogProvider>
+          <LinkComponentProvider value={LinkComponent}>
+            <DialogProvider>
+              <ToastProvider>
+                <FloatingWindowProvider>{children}</FloatingWindowProvider>
+              </ToastProvider>
+            </DialogProvider>
+          </LinkComponentProvider>
         </OpenPortalsProvider>
       </DesignSystemConfigurationContext.Provider>
     );

package/src/contexts/DialogContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   createContext,
   ReactNode,

package/src/contexts/FloatingWindowContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { uuid } from "@noya-app/noya-utils";
 import React, { createContext, useContext, useMemo, useState } from "react";
 import { createPortal } from "react-dom";

package/src/contexts/GlobalInputBlurContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, useContext, useEffect } from 'react';
 
 export type GlobalInputBlurContextValue = {

package/src/contexts/ImageDataContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type ImageDataContextValue = {

package/src/contexts/LinkComponentContext.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+export type LinkComponent = React.ComponentType<React.ComponentProps<"a">>;
+
+const LinkComponentContext = createContext<LinkComponent | undefined>(
+  undefined
+);
+
+export const LinkComponentProvider = LinkComponentContext.Provider;
+
+export const useLinkComponent = () => {
+  const Link = useContext(LinkComponentContext);
+
+  return Link ?? "a";
+};

package/src/contexts/OpenPortalsContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type OpenPortalsContextValue = {

package/src/contexts/PortalScopeContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type PortalScopeContextValue = string;

package/src/hooks/mergeEventHandlers.ts

@@ -1,7 +1,7 @@
 import { unique } from "@noya-app/noya-utils";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
-function composeAllEventHandlers<E>(...handlers: ((e: E) => void)[]) {
+function composeAllEventHandlers<E extends { defaultPrevented: boolean }>(...handlers: ((e: E) => void)[]) {
   const [first, ...rest] = handlers;
 
   return rest.reduce(

package/src/hooks/useHover.ts

@@ -1,3 +1,5 @@
+"use client";
+
 // From: https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/useHover.ts
 // MIT License
 
@@ -8,13 +10,13 @@
 // @see https://github.com/adobe/react-spectrum/tree/452d1cb6a49f9f493757737edaf2b64014108de6/packages/%40react-aria
 // @see https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import * as React from 'react';
+import * as React from "react";
 
 export interface HoverEvent {
   /** The type of hover event being fired. */
-  type: 'hoverstart' | 'hoverend';
+  type: "hoverstart" | "hoverend";
   /** The pointer type that triggered the hover event. */
-  pointerType: 'mouse' | 'pen';
+  pointerType: "mouse" | "pen";
   /** The target element of the hover event. */
   target: HTMLElement;
 }
@@ -58,17 +60,17 @@ function setGlobalIgnoreEmulatedMouseEvents() {
 }
 
 function handleGlobalPointerEvent(event: PointerEvent) {
-  if (event.pointerType === 'touch') {
+  if (event.pointerType === "touch") {
     setGlobalIgnoreEmulatedMouseEvents();
   }
 }
 
 function setupGlobalTouchEvents() {
-  if (typeof document === 'undefined') {
+  if (typeof document === "undefined") {
     return;
   }
 
-  document.addEventListener('pointerup', handleGlobalPointerEvent);
+  document.addEventListener("pointerup", handleGlobalPointerEvent);
 
   hoverCount++;
   return function teardownGlobalTouchEvents() {
@@ -76,7 +78,7 @@ function setupGlobalTouchEvents() {
     if (hoverCount > 0) {
       return;
     }
-    document.removeEventListener('pointerup', handleGlobalPointerEvent);
+    document.removeEventListener("pointerup", handleGlobalPointerEvent);
   };
 }
 
@@ -98,10 +100,14 @@ export function useHover(props: HoverProps = {}): HoverResult {
   const hoverProps = React.useMemo(
     function getHoverProps() {
       function triggerHoverStart(
-        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
-        pointerType: 'mouse' | 'pen' | 'touch'
+        event:
+          | PointerEvent
+          | React.PointerEvent
+          | MouseEvent
+          | React.MouseEvent,
+        pointerType: "mouse" | "pen" | "touch"
       ) {
-        if (isDisabled || pointerType === 'touch' || state.isHovered) {
+        if (isDisabled || pointerType === "touch" || state.isHovered) {
           return;
         }
 
@@ -110,7 +116,7 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
         if (onHoverStart) {
           onHoverStart({
-            type: 'hoverstart',
+            type: "hoverstart",
             target,
             pointerType,
           });
@@ -124,10 +130,14 @@ export function useHover(props: HoverProps = {}): HoverResult {
       }
 
       function triggerHoverEnd(
-        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
-        pointerType: 'mouse' | 'pen' | 'touch'
+        event:
+          | PointerEvent
+          | React.PointerEvent
+          | MouseEvent
+          | React.MouseEvent,
+        pointerType: "mouse" | "pen" | "touch"
       ) {
-        if (isDisabled || pointerType === 'touch' || !state.isHovered) {
+        if (isDisabled || pointerType === "touch" || !state.isHovered) {
           return;
         }
 
@@ -136,7 +146,7 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
         if (onHoverEnd) {
           onHoverEnd({
-            type: 'hoverend',
+            type: "hoverend",
             target,
             pointerType,
           });
@@ -151,7 +161,10 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
       const hoverProps: React.HTMLAttributes<HTMLElement> = {
         onPointerEnter(event: React.PointerEvent<HTMLElement>) {
-          if (globalIgnoreEmulatedMouseEvents && event.pointerType === 'mouse') {
+          if (
+            globalIgnoreEmulatedMouseEvents &&
+            event.pointerType === "mouse"
+          ) {
             return;
           }
           triggerHoverStart(event, event.pointerType);
@@ -170,4 +183,4 @@ export function useHover(props: HoverProps = {}): HoverResult {
     hoverProps,
     isHovered,
   };
-}
+}

package/src/hooks/useIndent.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 export const IndentContext = React.createContext<{

package/src/hooks/useLabel.ts

@@ -1,5 +1,8 @@
+"use client";
+
 import React, { ReactNode } from "react";
-import { LabelPosition } from "../components/Label";
+
+export type LabelType = "inset" | "start" | "end" | "above" | "none";
 
 export const LabelContext = React.createContext<{
   fieldId?: string;
@@ -24,18 +27,17 @@ export const useLabel = ({ label, fieldId }: UseLabelParams) => {
   };
 };
 
-export const LabelPositionContext =
-  React.createContext<LabelPositionContextValue>({
-    position: "start",
-  });
+export const LabelTypeContext = React.createContext<LabelTypeContextValue>({
+  type: "start",
+});
 
-export const useLabelPosition = () => {
-  const { position } = React.useContext(LabelPositionContext);
-  return position;
+export const useLabelType = () => {
+  const { type } = React.useContext(LabelTypeContext);
+  return type;
 };
 
-export type LabelPositionContextValue = {
-  position: LabelPosition;
+export type LabelTypeContextValue = {
+  type: LabelType;
 };
 
 export type LabelWidthContextValue = {

package/src/hooks/useObjectURL.ts

@@ -1,4 +1,6 @@
-import { useLayoutEffect, useMemo } from 'react';
+"use client";
+
+import { useLayoutEffect, useMemo } from "react";
 
 export function useObjectURL(object?: ArrayBuffer | Uint8Array | Blob) {
   const objectURL = useMemo(() => {
@@ -8,8 +10,8 @@ export function useObjectURL(object?: ArrayBuffer | Uint8Array | Blob) {
       object instanceof Uint8Array
         ? object
         : object !== undefined
-        ? new Uint8Array(object)
-        : new Uint8Array();
+          ? new Uint8Array(object)
+          : new Uint8Array();
 
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);

package/src/hooks/usePlatform.ts

@@ -1,4 +1,6 @@
-import { useDesignSystemConfiguration } from '../contexts/DesignSystemConfiguration';
+"use client";
+
+import { useDesignSystemConfiguration } from "../contexts/DesignSystemConfiguration";
 
 export function usePlatform() {
   return useDesignSystemConfiguration().platform;
@@ -7,7 +9,7 @@ export function usePlatform() {
 /**
  * Either ctrl or meta, depending on the platform
  */
-export function usePlatformModKey(): 'ctrlKey' | 'metaKey' {
+export function usePlatformModKey(): "ctrlKey" | "metaKey" {
   const platform = useDesignSystemConfiguration().platform;
-  return platform === 'mac' ? 'metaKey' : 'ctrlKey';
+  return platform === "mac" ? "metaKey" : "ctrlKey";
 }

package/src/hooks/useTheme.ts

@@ -1,4 +1,6 @@
-import { useState, useEffect } from "react";
+"use client";
+
+import { useEffect, useState } from "react";
 
 /** @default light */
 export type UseThemeReturnType = "dark" | "light";

package/src/index.css

@@ -11,6 +11,7 @@
   --n-primary-150: rgb(225, 219, 255);
   --n-primary-100: rgb(234, 230, 255); /* --n-primary-pastel */
   --n-primary-50: rgb(243, 242, 255);
+  --n-primary-25: rgb(250, 248, 255);
 
   --n-indigo-950: rgb(18, 26, 37);
   --n-indigo-900: rgb(30, 40, 60);
@@ -58,6 +59,13 @@
   --n-button-background-active-hover: var(--n-primary-50);
   --n-button-text: var(--n-text);
   --n-button-text-active: var(--n-primary);
+  --n-toolbar-drawer-background: var(--n-primary-25);
+  --n-toolbar-drawer-border: color-mix(
+    in srgb,
+    var(--n-primary) 30%,
+    transparent
+  );
+  --n-toolbar-drawer-shadow: rgba(153, 153, 153, 0.25);
   --n-canvas-background: var(--n-indigo-25);
   --n-canvas-grid: rgba(0, 0, 0, 0.05);
   --n-sidebar-background: rgb(255, 255, 255);
@@ -69,6 +77,7 @@
   --n-list-view-thumbnail-background: var(--n-input-background);
   --n-slider-thumb-background: white;
   --n-slider-border: #9698ac;
+  --n-slider-active-background: var(--n-primary-600);
   --n-mask: rgb(12, 193, 67);
   --n-transparent-checker: rgba(255, 255, 255, 0.8);
   --n-scrollbar: rgba(199, 199, 199, 0.8);
@@ -150,17 +159,28 @@
   --n-primary: var(--n-primary-500);
   --n-primary-light: var(--n-primary-300);
   --n-icon: var(--n-text-muted);
-  --n-selected-list-item-background: var(--n-primary-900);
+  --n-selected-list-item-background: var(--n-primary-700);
   --n-selected-list-item-text: var(--n-primary-100);
-  --n-selected-list-item-icon-background: var(--n-primary-900);
+  --n-selected-list-item-icon-background: var(--n-primary-800);
   --n-button-background: var(--n-input-background);
   --n-button-background-hover: var(--n-input-background-light);
-  --n-button-background-active: var(--n-primary-900);
-  --n-button-background-active-hover: var(--n-primary-800);
+  --n-button-background-active: var(--n-primary-700);
+  --n-button-background-active-hover: var(--n-primary-600);
   --n-button-text: var(--n-text);
   --n-button-text-active: var(--n-primary-100);
   --n-secondary-bright: #36fe91;
   --n-code-background: rgb(20, 19, 23);
+  --n-toolbar-drawer-background: color-mix(
+    in srgb,
+    var(--n-primary-900) 50%,
+    var(--n-background)
+  );
+  --n-toolbar-drawer-border: color-mix(
+    in srgb,
+    var(--n-primary-700) 30%,
+    transparent
+  );
+  --n-toolbar-drawer-shadow: rgba(255, 255, 255, 0.1);
   --n-canvas-background: rgb(20, 19, 23);
   --n-canvas-grid: rgba(0, 0, 0, 0.1);
   --n-sidebar-background: rgb(34, 33, 39);
@@ -172,6 +192,7 @@
   --n-list-view-thumbnail-background: var(--n-input-background);
   --n-slider-thumb-background: var(--n-input-background-light);
   --n-slider-border: var(--n-divider);
+  --n-slider-active-background: var(--n-primary-700);
   --n-segmented-control-item-active-text: var(--n-text);
   --n-segmented-control-item-active-background: var(--n-input-background-light);
   --n-mask: rgb(102, 187, 106);