update stories to display the result

Author: JayaKrishnaNamburu

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

@@ -1,64 +1,65 @@
 import {
   parseLinearGradient,
+  reconstructLinearGradient,
   type ParsedGradient,
 } from "@webstudio-is/css-data";
 import { GradientControl } from "./gradient-control";
-import { toValue } from "@webstudio-is/css-engine";
+import { Flex, Text } from "@webstudio-is/design-system";
+import { useState } from "react";
 
 export default {
   title: "Library/GradientControl",
 };
 
 export const GradientWithoutAngle = () => {
+  const gradientString = "linear-gradient(#e66465 0%, #9198e5 100%)";
+  const [gradient, setGradient] = useState<string>(gradientString);
+
   return (
-    <GradientControl
-      gradient={
-        parseLinearGradient(
-          "linear-gradient(#e66465 0%, #9198e5 100%)"
-        ) as ParsedGradient
-      }
-      onChange={() => {}}
-    />
+    <Flex direction="column" gap="4">
+      <GradientControl
+        gradient={parseLinearGradient(gradientString) as ParsedGradient}
+        onChange={(value) => {
+          setGradient(reconstructLinearGradient(value));
+        }}
+      />
+      <Text>{gradient}</Text>
+    </Flex>
   );
 };
 
-// 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 = () => {
+export const GradientWithAngleAndHints = () => {
+  const gradientString =
+    "linear-gradient(145deg, #ff00fa 0%, #00f497 34% 34%, #ffa800 56% 56%, #00eaff 100%)";
+  const [gradient, setGradient] = useState<string>(gradientString);
+
   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)}`
-          );
-        }
-      }}
-    />
+    <Flex direction="column" gap="4">
+      <GradientControl
+        gradient={parseLinearGradient(gradientString) as ParsedGradient}
+        onChange={(value) => {
+          setGradient(reconstructLinearGradient(value));
+        }}
+      />
+      <Text>{gradient}</Text>
+    </Flex>
   );
 };
 
 export const GradientWithSideOrCorner = () => {
+  const gradientString = "linear-gradient(to left top, blue 0%, red 100%)";
+
+  const [gradient, setGradient] = useState<string>(gradientString);
+
   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)}`
-          );
-        }
-      }}
-    />
+    <Flex direction="column" gap="4">
+      <GradientControl
+        gradient={parseLinearGradient(gradientString) as ParsedGradient}
+        onChange={(value) => {
+          setGradient(reconstructLinearGradient(value));
+        }}
+      />
+      <Text>{gradient}</Text>
+    </Flex>
   );
 };

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

@@ -1,12 +1,13 @@
 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 { useState, useCallback } from "react";
 import {
   reconstructLinearGradient,
   type GradientStop,
   type ParsedGradient,
 } from "@webstudio-is/css-data";
 import { styled, theme, Flex } from "@webstudio-is/design-system";
+import { ChevronBigUpIcon } from "@webstudio-is/icons";
 
 type GradientControlProps = {
   gradient: ParsedGradient;
@@ -22,26 +23,16 @@ const defaultAngle: UnitValue = {
 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 positions = stops.map((stop) => stop.position?.value);
+  const hints = props.gradient.stops
+    .map((stop) => stop.hint?.value)
+    .filter(Boolean);
   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) => ({
@@ -52,7 +43,7 @@ export const GradientControl = (props: GradientControlProps) => {
       setStops(newStops);
       props.onChange({
         angle: props.gradient.angle,
-        stops,
+        stops: newStops,
         sideOrCorner: props.gradient.sideOrCorner,
       });
     },
@@ -101,6 +92,23 @@ export const GradientControl = (props: GradientControlProps) => {
             }}
           />
         ))}
+
+        {hints.map((hint) => {
+          return (
+            <Flex
+              key={hint}
+              align="center"
+              justify="center"
+              css={{
+                position: "absolute",
+                left: `${hint}%`,
+                top: theme.spacing[9],
+              }}
+            >
+              <ChevronBigUpIcon color={theme.colors.borderMain} />
+            </Flex>
+          );
+        })}
       </SliderRoot>
     </Flex>
   );

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

@@ -182,7 +182,7 @@ const getColor = (
 };
 
 export const reconstructLinearGradient = (parsed: ParsedGradient): string => {
-  const direction = parsed.angle || parsed.sideOrCorner;
+  const direction = parsed?.angle || parsed?.sideOrCorner;
   const stops = parsed.stops
     .map((stop: GradientStop) => {
       let result = toValue(stop.color);