@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/src/components/internal/MenuViewport.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { ChevronRightIcon } from "@noya-app/noya-icons";
-import {
-  ContextMenu as RadixContextMenu,
-  DropdownMenu as RadixDropdownMenu,
-} from "radix-ui";
-import React from "react";
-import {
-  portalScopeProps,
-  usePortalScopeId,
-} from "../../contexts/PortalScopeContext";
-import { cx } from "../../utils/classNames";
-import {
-  isSelectableMenuItem,
-  MenuItem,
-  SectionHeaderMenuItem,
-  styles,
-} from "./Menu";
-import { SelectItem } from "./SelectItem";
-
-type MenuSeparatorComponent = React.FC<{ className?: string }>;
-type MenuItemTextComponent = React.FC<{ children?: React.ReactNode }>;
-type MenuItemComponent = React.ForwardRefExoticComponent<
-  React.RefAttributes<HTMLDivElement> &
-    React.PropsWithoutRef<{
-      className?: string;
-      disabled?: boolean;
-      children?: React.ReactNode;
-      value: string;
-      onSelect?: (event: any) => void;
-      onClick?: (event: React.MouseEvent<any>) => void;
-    }>
->;
-type MenuCheckboxItemComponent = React.FC<{
-  checked?: boolean | "indeterminate";
-  disabled?: boolean;
-  onSelect?: (event: any) => void;
-  className?: string;
-  children?: React.ReactNode;
-}>;
-
-type MenuItemIndicatorComponent = React.FC<{
-  className?: string;
-  children?: React.ReactNode;
-}>;
-
-export type MenuComponents = {
-  Separator: MenuSeparatorComponent;
-  ItemText: MenuItemTextComponent;
-  Item: MenuItemComponent;
-  CheckboxItem?: MenuCheckboxItemComponent;
-  ItemIndicator?: MenuItemIndicatorComponent;
-  Sub?: typeof RadixDropdownMenu.Sub | typeof RadixContextMenu.Sub;
-  SubTrigger?:
-    | typeof RadixDropdownMenu.SubTrigger
-    | typeof RadixContextMenu.SubTrigger;
-  SubContent?:
-    | typeof RadixDropdownMenu.SubContent
-    | typeof RadixContextMenu.SubContent;
-  Portal?: typeof RadixDropdownMenu.Portal | typeof RadixContextMenu.Portal;
-};
-
-type MenuViewportProps<T extends string> = {
-  items: MenuItem<T>[];
-  Components: MenuComponents;
-  onSelect?: (value: any) => void;
-};
-
-export const MenuViewport = <T extends string>({
-  items,
-  Components,
-  onSelect,
-}: MenuViewportProps<T>) => {
-  const portalScopeId = usePortalScopeId();
-
-  const hasCheckedItem = items.some(
-    (item) => isSelectableMenuItem(item) && item.checked
-  );
-
-  return (
-    <>
-      {items.map((item, index) => {
-        switch (item.type) {
-          case "separator":
-            return (
-              <Components.Separator
-                key={index}
-                className={styles.separatorStyle}
-              />
-            );
-
-          case "sectionHeader":
-            return (
-              <SectionHeaderMenuItem
-                isFirst={index === 0}
-                key={item.id}
-                {...item}
-                indented={hasCheckedItem}
-              />
-            );
-          case "popover":
-            return null;
-          case "submenu":
-            if (
-              item.items &&
-              Components.Sub &&
-              Components.SubTrigger &&
-              Components.SubContent &&
-              Components.Portal
-            ) {
-              return (
-                <Components.Sub key={item.id}>
-                  <Components.SubTrigger
-                    className={cx(
-                      styles.itemStyle({ disabled: item.disabled }),
-                      styles.selectedItemStyle
-                    )}
-                    asChild
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                    }}
-                    disabled={item.disabled}
-                  >
-                    <SelectItem
-                      value={item.id}
-                      icon={item.icon}
-                      checked={item.checked}
-                      onSelect={onSelect}
-                      Components={Components}
-                      indented={hasCheckedItem}
-                      disabled={item.disabled}
-                    >
-                      <div className="n-flex n-items-center n-flex-1">
-                        {item.title}
-                      </div>
-                      <ChevronRightIcon className="-n-mr-1" />
-                    </SelectItem>
-                  </Components.SubTrigger>
-                  <Components.Portal>
-                    <Components.SubContent
-                      {...portalScopeProps(portalScopeId)}
-                      alignOffset={-5}
-                      className={styles.contentStyle}
-                    >
-                      <MenuViewport
-                        items={item.items}
-                        Components={Components}
-                        onSelect={onSelect}
-                      />
-                    </Components.SubContent>
-                  </Components.Portal>
-                </Components.Sub>
-              );
-            } else return null;
-          default:
-            return (
-              <SelectItem
-                key={item.value}
-                value={item.value}
-                icon={item.icon}
-                checked={item.checked}
-                shortcut={item.shortcut}
-                onSelect={onSelect}
-                Components={Components}
-                indented={hasCheckedItem}
-                testSelected={item.testSelected}
-                disabled={item.disabled}
-              >
-                {item.title ?? item.value}
-              </SelectItem>
-            );
-        }
-      })}
-    </>
-  );
-};

package/src/components/internal/SelectItem.tsx

@@ -1,138 +0,0 @@
-"use client";
-
-import { renderIcon } from "../Icons";
-
-import { Select } from "radix-ui";
-import React, { useCallback } from "react";
-import { cx } from "../../utils/classNames";
-import { Spacer } from "../Spacer";
-import { Checkmark } from "./Checkmark";
-import {
-  CHECKBOX_INDENT_WIDTH,
-  CHECKBOX_RIGHT_INSET,
-  CHECKBOX_WIDTH,
-  KeyboardShortcut,
-  styles,
-} from "./Menu";
-import { MenuComponents } from "./MenuViewport";
-
-export const SelectItem = React.forwardRef(
-  (
-    {
-      children,
-      icon,
-      disabled,
-      checked,
-      Components,
-      value,
-      onSelect,
-      shortcut,
-      indented,
-      testSelected,
-      ...props
-    }: Select.SelectItemProps & {
-      icon?: React.ReactNode;
-      checked?: boolean | "indeterminate";
-      Components: MenuComponents;
-      onSelect?: (value: any) => void;
-      shortcut?: string;
-      indented?: boolean;
-      testSelected?: boolean;
-    },
-    forwardedRef: React.ForwardedRef<HTMLDivElement>
-  ) => {
-    const handleSelectItem = useCallback(() => {
-      if (!value) return;
-      onSelect?.(value);
-    }, [onSelect, value]);
-
-    // Prevent the click from propagating outside the menu
-    const cancelClickPropagation = useCallback(
-      (event: React.MouseEvent<HTMLDivElement>) => {
-        event.stopPropagation();
-      },
-      []
-    );
-
-    if (checked && Components.CheckboxItem) {
-      return (
-        <div className="n-px-1">
-          <Components.CheckboxItem
-            checked={checked}
-            disabled={disabled}
-            onSelect={handleSelectItem}
-            className={cx(
-              styles.itemStyle({ disabled }),
-              styles.selectedItemStyle,
-              testSelected && styles.testSelectedItemStyle
-            )}
-          >
-            <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />
-            {Components.ItemIndicator && (
-              <Components.ItemIndicator {...styles.itemIndicator}>
-                <Checkmark />
-              </Components.ItemIndicator>
-            )}
-            {icon && (
-              <>
-                {renderIcon(icon)}
-                <Spacer.Horizontal size={8} />
-              </>
-            )}
-            {children}
-            {shortcut && (
-              <>
-                <Spacer.Horizontal />
-                <Spacer.Horizontal size={24} />
-                <KeyboardShortcut shortcut={shortcut} />
-              </>
-            )}
-          </Components.CheckboxItem>
-        </div>
-      );
-    }
-
-    return (
-      <div className="n-px-1">
-        <Components.Item
-          className={cx(
-            styles.itemStyle({ disabled }),
-            styles.selectedItemStyle,
-            testSelected && styles.testSelectedItemStyle
-          )}
-          disabled={disabled}
-          value={value}
-          ref={forwardedRef}
-          onClick={cancelClickPropagation}
-          onSelect={handleSelectItem}
-          {...props}
-        >
-          <div className="n-flex n-flex-1 n-items-center">
-            {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
-            {checked ? (
-              <div {...styles.itemIndicator}>
-                <Checkmark />
-              </div>
-            ) : indented ? (
-              <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
-            ) : null}
-            {icon && (
-              <>
-                {renderIcon(icon)}
-                <Spacer.Horizontal size={8} />
-              </>
-            )}
-            <Components.ItemText>{children}</Components.ItemText>
-            {shortcut && (
-              <>
-                <Spacer.Horizontal />
-                <Spacer.Horizontal size={24} />
-                <KeyboardShortcut shortcut={shortcut} />
-              </>
-            )}
-          </div>
-        </Components.Item>
-      </div>
-    );
-  }
-);

package/src/components/workspace/panelStorage.ts

@@ -1,216 +0,0 @@
-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,
-  };
-}