@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/GradientPicker.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-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/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})`;
-}