experimental: add gradient control for updating the color stops using ui

Author: JayaKrishnaNamburu

apps/builder/app/builder/features/style-panel/sections/backgrounds/gradient-control.stories.tsx

@@ -0,0 +1,64 @@
+import {
+  parseLinearGradient,
+  type ParsedGradient,
+} from "@webstudio-is/css-data";
+import { GradientControl } from "./gradient-control";
+import { toValue } from "@webstudio-is/css-engine";
+
+export default {
+  title: "Library/GradientControl",
+};
+
+export const GradientWithoutAngle = () => {
+  return (
+    <GradientControl
+      gradient={
+        parseLinearGradient(
+          "linear-gradient(#e66465 0%, #9198e5 100%)"
+        ) as ParsedGradient
+      }
+      onChange={() => {}}
+    />
+  );
+};
+
+// The GradientControl is to just modify the stop values or add new ones.
+// It always shows the angle as 90deg, unless the stops can't be showin in a rectangle.
+// So, the gradient shouldn't modify even if the stop values are changed at the end,
+export const GradientWithAngle = () => {
+  return (
+    <GradientControl
+      gradient={
+        parseLinearGradient(
+          "linear-gradient(145deg, #ff00fa 0%, #00f497 34% 34%, #ffa800 56% 56%, #00eaff 100%)"
+        ) as ParsedGradient
+      }
+      onChange={(value) => {
+        if (toValue(value.angle) !== "145deg") {
+          throw new Error(
+            `Gradient control modified the angle that is passed. \nReceived ${JSON.stringify(value.angle, null, 2)}`
+          );
+        }
+      }}
+    />
+  );
+};
+
+export const GradientWithSideOrCorner = () => {
+  return (
+    <GradientControl
+      gradient={
+        parseLinearGradient(
+          "linear-gradient(to left top, blue 0%, red 100%)"
+        ) as ParsedGradient
+      }
+      onChange={(value) => {
+        if (toValue(value.sideOrCorner) !== "to left top") {
+          throw new Error(
+            `Gradient control modified the side-or-corner value that is passed. \nReceived ${JSON.stringify(value.sideOrCorner, null, 2)}`
+          );
+        }
+      }}
+    />
+  );
+};

apps/builder/app/builder/features/style-panel/sections/backgrounds/gradient-control.tsx

@@ -0,0 +1,135 @@
+import { toValue, UnitValue } from "@webstudio-is/css-engine";
+import { Root, Range, Thumb, Track } from "@radix-ui/react-slider";
+import { useEffect, useState, useCallback } from "react";
+import {
+  reconstructLinearGradient,
+  type GradientStop,
+  type ParsedGradient,
+} from "@webstudio-is/css-data";
+import { styled, theme, Flex } from "@webstudio-is/design-system";
+
+type GradientControlProps = {
+  gradient: ParsedGradient;
+  onChange: (value: ParsedGradient) => void;
+};
+
+const defaultAngle: UnitValue = {
+  type: "unit",
+  value: 90,
+  unit: "deg",
+};
+
+export const GradientControl = (props: GradientControlProps) => {
+  const [stops, setStops] = useState<Array<GradientStop>>(props.gradient.stops);
+  const [selectedStop, setSelectedStop] = useState<number | undefined>();
+  const positions = stops.map((stop) => stop.position?.value) as number[];
+  const background = reconstructLinearGradient({
+    stops,
+    sideOrCorner: props.gradient.sideOrCorner,
+    angle: defaultAngle,
+  });
+
+  useEffect(() => {
+    const newStops: Array<GradientStop> = [];
+    for (const stop of props.gradient.stops || []) {
+      if (stop.color !== undefined && stop.position?.value !== undefined) {
+        newStops.push({
+          color: stop.color,
+          position: stop.position,
+        });
+      }
+    }
+    setStops(newStops);
+  }, [props.gradient]);
+
+  const handleValueChange = useCallback(
+    (newPositions: number[]) => {
+      const newStops: GradientStop[] = stops.map((stop, index) => ({
+        ...stop,
+        position: { type: "unit", value: newPositions[index], unit: "%" },
+      }));
+
+      setStops(newStops);
+      props.onChange({
+        angle: props.gradient.angle,
+        stops,
+        sideOrCorner: props.gradient.sideOrCorner,
+      });
+    },
+    [stops, props]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === "Backspace" && selectedStop !== undefined) {
+        const newStops = stops;
+        newStops.splice(selectedStop, 1);
+        setStops(newStops);
+        setSelectedStop(undefined);
+      }
+    },
+    [stops, selectedStop]
+  );
+
+  return (
+    <Flex
+      align="end"
+      css={{
+        width: theme.spacing[28],
+        height: theme.spacing[14],
+      }}
+    >
+      <SliderRoot
+        css={{ background }}
+        max={100}
+        step={1}
+        value={positions}
+        onValueChange={handleValueChange}
+        onKeyDown={handleKeyDown}
+      >
+        <Track>
+          <SliderRange css={{ cursor: "copy" }} />
+        </Track>
+        {stops.map((stop, index) => (
+          <SliderThumb
+            key={index}
+            onClick={() => {
+              setSelectedStop(index);
+            }}
+            style={{
+              background: toValue(stop.color),
+            }}
+          />
+        ))}
+      </SliderRoot>
+    </Flex>
+  );
+};
+
+const SliderRoot = styled(Root, {
+  position: "relative",
+  width: "100%",
+  height: theme.spacing[9],
+  border: `1px solid ${theme.colors.borderInfo}`,
+  borderRadius: theme.borderRadius[3],
+  touchAction: "none",
+  userSelect: "none",
+});
+
+const SliderRange = styled(Range, {
+  position: "absolute",
+  background: "transparent",
+  borderRadius: theme.borderRadius[3],
+});
+
+const SliderThumb = styled(Thumb, {
+  position: "absolute",
+  width: theme.spacing[9],
+  height: theme.spacing[9],
+  border: `1px solid ${theme.colors.borderInfo}`,
+  borderRadius: theme.borderRadius[3],
+  top: `-${theme.spacing[11]}`,
+  translate: "-9px",
+});
+
+export default GradientControl;

apps/builder/package.json

@@ -40,6 +40,7 @@
     "@nanostores/react": "^0.7.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.0",
     "@react-aria/interactions": "^3.19.0",
     "@react-aria/utils": "^3.21.0",
     "@remix-run/node": "^2.11.0",

packages/css-data/src/property-parsers/index.ts

@@ -1,2 +1,3 @@
 export * from "./transition";
 export * from "./shadow-properties-extractor";
+export * from "./linear-gradient";

packages/css-data/src/property-parsers/linear-gradient.ts

@@ -12,13 +12,13 @@ import namesPlugin from "colord/plugins/names";
 
 extend([namesPlugin]);
 
-interface GradientStop {
+export interface GradientStop {
   color?: RgbValue;
   position?: UnitValue;
   hint?: UnitValue;
 }
 
-interface ParsedGradient {
+export interface ParsedGradient {
   angle?: UnitValue;
   sideOrCorner?: KeywordValue;
   stops: GradientStop[];