@noya-app/noya-designsystem 0.1.77 → 0.1.79

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,
-  };
-}