@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/FillPreviewBackground.tsx

@@ -1,132 +0,0 @@
-import { Sketch } from "@noya-app/noya-file-format";
-// import { useSketchImage } from 'noya-renderer';
-import * as React from "react";
-import { useImageData } from "../contexts/ImageDataContext";
-import { useObjectURL } from "../hooks/useObjectURL";
-import { cssVars } from "../theme";
-import { getGradientBackground } from "../utils/getGradientBackground";
-import { sketchColorToRgbaString } from "../utils/sketchColor";
-import { SketchPattern } from "../utils/sketchPattern";
-
-const dotsHorizontalSvg = (fillColor: string) => `
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${fillColor}'>
-    <path d='M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z'></path>
-  </svg>
-`;
-
-const Background = React.memo(function Background({
-  background,
-}: {
-  background?: string;
-}) {
-  return (
-    <span
-      className={`${background ? `bg-[${background}]` : "bg-input-background"} absolute inset-0`}
-    />
-  );
-});
-
-function getPatternSizeAndPosition(
-  fillType: Sketch.PatternFillType,
-  tileScale: number
-) {
-  switch (fillType) {
-    case Sketch.PatternFillType.Fit:
-      return "center / contain";
-    case Sketch.PatternFillType.Tile:
-      return `top left / ${tileScale * 100}%`;
-    case Sketch.PatternFillType.Fill:
-      return "center / cover";
-    case Sketch.PatternFillType.Stretch:
-      return "center / 100% 100%";
-  }
-}
-
-export const PatternPreviewBackground = React.memo(
-  function PatternPreviewBackground({
-    fillType,
-    tileScale,
-    imageRef,
-  }: {
-    fillType: Sketch.PatternFillType;
-    tileScale: number;
-    imageRef: string;
-  }) {
-    const image = useImageData(imageRef);
-
-    const url = useObjectURL(image);
-
-    const size = getPatternSizeAndPosition(fillType, tileScale);
-
-    const background = React.useMemo(
-      () =>
-        [
-          size,
-          `url(${url})`,
-          fillType === Sketch.PatternFillType.Tile ? "repeat" : "no-repeat",
-        ].join(" "),
-      [fillType, size, url]
-    );
-
-    return <Background background={background} />;
-  }
-);
-
-const ColorPreviewBackground = React.memo(function ColorPreviewBackground({
-  color,
-}: {
-  color: Sketch.Color;
-}) {
-  const background = React.useMemo(
-    () => sketchColorToRgbaString(color),
-    [color]
-  );
-
-  return <Background background={background} />;
-});
-
-const GradientPreviewBackground = React.memo(
-  function GradientPreviewBackground({
-    gradient,
-  }: {
-    gradient: Sketch.Gradient;
-  }) {
-    const background = React.useMemo(
-      () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
-      [gradient.gradientType, gradient.stops]
-    );
-
-    return <Background background={background} />;
-  }
-);
-
-interface Props {
-  value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-}
-
-const background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
-  cssVars.colors.placeholderDots
-)}") no-repeat`;
-
-export const FillPreviewBackground = React.memo(function FillPreviewBackground({
-  value,
-}: Props) {
-  if (!value) return <Background background={background} />;
-
-  switch (value._class) {
-    case "color":
-      return <ColorPreviewBackground color={value} />;
-    case "gradient":
-      return <GradientPreviewBackground gradient={value} />;
-    case "pattern":
-      if (!value.image) return null;
-
-      return (
-        <PatternPreviewBackground
-          fillType={value.patternFillType}
-          tileScale={value.patternTileScale}
-          imageRef={value.image._ref}
-        />
-      );
-  }
-});

package/src/components/GradientPicker.tsx

@@ -1,88 +0,0 @@
-import {
-  Alpha,
-  ColorModel,
-  Gradient,
-  Hue,
-  ColorPicker as NoyaColorPicker,
-  RgbaColor,
-  Saturation,
-  equalColorObjects,
-  hsvaToRgba,
-  rgbaToHsva,
-} from "@noya-app/noya-colorpicker";
-import type { Sketch } from "@noya-app/noya-file-format";
-import * as React from "react";
-import { Spacer } from "../components/Spacer";
-import { rgbaToSketchColor, sketchColorToRgba } from "../utils/sketchColor";
-
-interface Props {
-  value: Sketch.GradientStop[];
-  selectedStop: number;
-  onChangeColor: (color: Sketch.Color) => void;
-  onChangePosition: (position: number) => void;
-  onAdd: (color: Sketch.Color, position: number) => void;
-  onDelete: () => void;
-  onSelectStop: (index: number) => void;
-}
-
-export const GradientPicker = React.memo(function GradientPicker({
-  value,
-  selectedStop,
-  onChangeColor,
-  onChangePosition,
-  onAdd,
-  onDelete,
-  onSelectStop,
-}: Props) {
-  const colorModel: ColorModel<RgbaColor> = React.useMemo(
-    () => ({
-      defaultColor: { r: 0, g: 0, b: 0, a: 1 },
-      toHsva: rgbaToHsva,
-      fromHsva: hsvaToRgba,
-      equal: equalColorObjects,
-    }),
-    []
-  );
-
-  const rgbaColor = React.useMemo(
-    () => sketchColorToRgba(value[selectedStop].color),
-    [value, selectedStop]
-  );
-
-  const handleChangeColor = React.useCallback(
-    (value: RgbaColor) => {
-      onChangeColor(rgbaToSketchColor(value));
-    },
-    [onChangeColor]
-  );
-
-  const handleAddGradientStop = React.useCallback(
-    (value: RgbaColor, position: number) => {
-      onAdd(rgbaToSketchColor(value), position);
-    },
-    [onAdd]
-  );
-
-  return (
-    <NoyaColorPicker
-      onChange={handleChangeColor}
-      colorModel={colorModel}
-      color={rgbaColor}
-    >
-      <Gradient
-        gradients={value}
-        selectedStop={selectedStop}
-        onSelectStop={onSelectStop}
-        onChangePosition={onChangePosition}
-        onAdd={handleAddGradientStop}
-        onDelete={onDelete}
-      />
-      <Spacer.Vertical size={10} />
-      <Saturation />
-      <Spacer.Vertical size={12} />
-      <Hue />
-      <Spacer.Vertical size={5} />
-      <Alpha />
-    </NoyaColorPicker>
-  );
-});

package/src/hooks/usePreservePanelSize.tsx

@@ -1,183 +0,0 @@
-import { useWindowSize } from "@noya-app/react-utils";
-import React, { useLayoutEffect, useRef } from "react";
-import { ImperativePanelGroupHandle } from "react-resizable-panels";
-import { PanelLayoutState } from "../components/workspace/types";
-
-export const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
-export const LEFT_SIDEBAR_ID = "editor-left-sidebar";
-export const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
-export const CONTENT_AREA_ID = "editor-content-area";
-
-export function usePreservePanelSize(
-  panelGroupRef: React.RefObject<ImperativePanelGroupHandle | null>,
-  setPanelLayoutState?: (state: PanelLayoutState) => void
-) {
-  const windowSize = useWindowSize();
-  const layoutRef = useRef<
-    { windowWidth: number; panelPercentages: number[] } | undefined
-  >();
-
-  useLayoutEffect(() => {
-    const panelGroup = document.querySelector(
-      `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
-    ) as HTMLElement;
-
-    function observePanels() {
-      const panels = [
-        ...panelGroup.querySelectorAll<HTMLElement>("[data-panel]"),
-      ];
-
-      const panelObserver = new ResizeObserver(() => {
-        const layout = {
-          windowWidth: panelGroup.offsetWidth,
-          panelPercentages: panelGroupRef.current?.getLayout() ?? [],
-        };
-        layoutRef.current = layout;
-
-        const leftSidebar = panels.find(
-          (panel) => panel.id === LEFT_SIDEBAR_ID
-        );
-        const rightSidebar = panels.find(
-          (panel) => panel.id === RIGHT_SIDEBAR_ID
-        );
-
-        setPanelLayoutState?.({
-          leftSidebarCollapsed: leftSidebar?.offsetWidth === 0,
-          rightSidebarCollapsed: rightSidebar?.offsetWidth === 0,
-        });
-      });
-
-      panels.forEach((panel) => panelObserver.observe(panel));
-
-      return () => {
-        panelObserver.disconnect();
-      };
-    }
-
-    let disconnectPanelObserver = observePanels();
-
-    const panelGroupObserver = new MutationObserver(() => {
-      disconnectPanelObserver();
-      disconnectPanelObserver = observePanels();
-    });
-
-    panelGroupObserver.observe(panelGroup, {
-      childList: true,
-    });
-
-    return () => {
-      disconnectPanelObserver();
-      panelGroupObserver.disconnect();
-    };
-  }, [panelGroupRef, setPanelLayoutState]);
-
-  useLayoutEffect(() => {
-    if (!layoutRef.current) return;
-
-    // Preserve the pixel values of the left and right sidebar when the window is resized.
-    // To do this we convert the percentage values to pixel values based on the old window width,
-    // then convert the pixel values to percentage values based on the new window width.
-    const {
-      windowWidth: oldWindowWidth,
-      panelPercentages: oldPanelPercentages,
-    } = layoutRef.current;
-
-    // Check the types of the values in the array
-    if (
-      oldPanelPercentages.some(
-        (value) => typeof value !== "number" || isNaN(value)
-      ) ||
-      oldWindowWidth === 0
-    ) {
-      return;
-    }
-
-    const currentLayout = panelGroupRef.current?.getLayout();
-
-    // Ensure we have the same number of panels
-    if (!currentLayout || currentLayout.length !== oldPanelPercentages.length) {
-      return;
-    }
-
-    if (currentLayout.length === 3) {
-      const leftSidebarWidth = (oldPanelPercentages[0] / 100) * oldWindowWidth;
-      const rightSidebarWidth = (oldPanelPercentages[2] / 100) * oldWindowWidth;
-
-      const newLeftSidebarPercentage =
-        (leftSidebarWidth / windowSize.width) * 100;
-      const newRightSidebarPercentage =
-        (rightSidebarWidth / windowSize.width) * 100;
-
-      const newLayout = [
-        newLeftSidebarPercentage,
-        100 - newLeftSidebarPercentage - newRightSidebarPercentage,
-        newRightSidebarPercentage,
-      ];
-
-      try {
-        panelGroupRef.current?.setLayout(newLayout);
-      } catch (e) {
-        console.error(e);
-        console.info("snapshot on error", {
-          oldWindowWidth,
-          oldPanelPercentages,
-          newLayout,
-          currentLayout,
-        });
-      }
-    } else if (currentLayout.length === 2) {
-      // Check if this is a right sidebar layout by looking at the panel IDs
-      const panelGroup = document.querySelector(
-        `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
-      );
-      const panels = [
-        ...(panelGroup?.querySelectorAll<HTMLElement>("[data-panel]") ?? []),
-      ];
-      const isRightSidebarLayout = panels[1]?.id === RIGHT_SIDEBAR_ID;
-
-      if (isRightSidebarLayout) {
-        const rightSidebarWidth =
-          (oldPanelPercentages[1] / 100) * oldWindowWidth;
-        const newRightSidebarPercentage =
-          (rightSidebarWidth / windowSize.width) * 100;
-        const newLayout = [
-          100 - newRightSidebarPercentage,
-          newRightSidebarPercentage,
-        ];
-
-        try {
-          panelGroupRef.current?.setLayout(newLayout);
-        } catch (e) {
-          console.error(e);
-          console.info("snapshot on error", {
-            oldWindowWidth,
-            oldPanelPercentages,
-            newLayout,
-            currentLayout,
-          });
-        }
-      } else {
-        const leftSidebarWidth =
-          (oldPanelPercentages[0] / 100) * oldWindowWidth;
-        const newLeftSidebarPercentage =
-          (leftSidebarWidth / windowSize.width) * 100;
-        const newLayout = [
-          newLeftSidebarPercentage,
-          100 - newLeftSidebarPercentage,
-        ];
-
-        try {
-          panelGroupRef.current?.setLayout(newLayout);
-        } catch (e) {
-          console.error(e);
-          console.info("snapshot on error", {
-            oldWindowWidth,
-            oldPanelPercentages,
-            newLayout,
-            currentLayout,
-          });
-        }
-      }
-    }
-  }, [panelGroupRef, windowSize.width]);
-}

package/src/mediaQuery.ts

@@ -1,13 +0,0 @@
-export const size = {
-  medium: '800px',
-  large: '1280px',
-  xlarge: '1550px',
-  xxlarge: '1680px',
-};
-
-export const mediaQuery = {
-  small: `@media (max-width: ${size.medium})`,
-  medium: `@media (max-width: ${size.large}) and (min-width: ${size.medium})`,
-  large: `@media (max-width: ${size.xlarge}) and (min-width: ${size.large})`,
-  xlarge: `@media (min-width: ${size.xlarge})`,
-};

package/src/utils/getGradientBackground.tsx

@@ -1,31 +0,0 @@
-import { Sketch } from "@noya-app/noya-file-format";
-import { sketchColorToRgbaString } from "./sketchColor";
-
-const getRGBAColor = (value: Sketch.GradientStop[], num: 100 | 360) =>
-  [...value]
-    .sort((a, b) => a.position - b.position)
-    .map(
-      (g) =>
-        `${sketchColorToRgbaString(g.color)} ${g.position * num}${
-          num === 100 ? "%" : "deg"
-        }`
-    )
-    .join(", \n");
-
-export function getGradientBackground(
-  value: Sketch.GradientStop[],
-  type: Sketch.GradientType,
-  direction?: number
-) {
-  if (type === Sketch.GradientType.Angular) {
-    return `conic-gradient(${getRGBAColor(value, 360)})`;
-  }
-
-  const color = getRGBAColor(value, 100);
-  const position =
-    type === Sketch.GradientType.Radial
-      ? "radial-gradient(circle"
-      : `linear-gradient(${direction !== undefined ? direction : 180}deg`;
-
-  return `${position}, ${color})`;
-}