experimental: add gradient controller to update color stops using ui (#4159)

## Description

The `GradientControl` helps in displaying the colour stops that are
available in the linear-gradient that users added.

There are two knows issues at the moment.
- The only limitation is. We can't swap the colours when a colour stop
crosses an existing colour stop. In some
tools, the colours are swapped resulting in the swiping of the gradient
too.
This is because of a limitation/bug on the radix side, they pre-sort the
slider stops. So, we can never know which crosses an existing stop and
changed it's value. radix-ui/primitives#2247

## Steps for reproduction

- Passing a linear-gradient should show all the `color-stops` in the
gradient.
- The `color-hints` are displayed at the bottom of the gradient bar.
These can't be moved along, more info about it is in the code component.
Because, this basically changes the whole gradient just by moving.
- The `color-hints` are showed at the bottom of the gradient. Just to
notify users about the existence of the hints.
- Users should be able to move the color-stops along the slider track.
- The color-stops can be moved using the arrow keys from the keyboard.

<img width="299" alt="Screenshot 2024-09-25 at 10 32 47 AM"
src="https://github.com/user-attachments/assets/d65e6af5-bba9-490d-96ff-0e58b8fb93bc">
<img width="289" alt="Screenshot 2024-09-25 at 10 32 43 AM"
src="https://github.com/user-attachments/assets/a3ac83e1-d379-49dc-a5d8-42936960f761">
<img width="560" alt="Screenshot 2024-09-25 at 10 32 38 AM"
src="https://github.com/user-attachments/assets/fef11d9e-2d0c-4d71-8587-227f22551edb">


![color-change-gradients](https://github.com/user-attachments/assets/44f71bc5-1c52-4bf9-8458-c12bd355759f)


## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>

Author: JayaKrishnaNamburu

packages/css-data/src/index.ts

@@ -8,6 +8,7 @@ export {
 } from "./__generated__/property-value-descriptions";
 export * from "./__generated__/animatable-properties";
 export * from "./__generated__/pseudo-elements";
+export * from "./property-parsers";
 
 // shorthand property parsers
 export * from "./parse-css-value";

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

@@ -0,0 +1 @@
+export * from "./linear-gradient";

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

@@ -12,17 +12,17 @@ import namesPlugin from "colord/plugins/names";
 
 extend([namesPlugin]);
 
-interface GradientStop {
+export type GradientStop = {
   color?: RgbValue;
   position?: UnitValue;
   hint?: UnitValue;
-}
+};
 
-interface ParsedGradient {
+export type ParsedGradient = {
   angle?: UnitValue;
   sideOrCorner?: KeywordValue;
   stops: GradientStop[];
-}
+};
 
 const sideOrCorderIdentifiers = ["to", "top", "bottom", "left", "right"];
 
@@ -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);

packages/design-system/package.json

@@ -58,7 +58,10 @@
     "@react-aria/interactions": "^3.23.0",
     "@react-aria/utils": "^3.27.0",
     "@stitches/react": "1.3.1-1",
+    "@webstudio-is/css-data": "workspace:*",
+    "@webstudio-is/css-engine": "workspace:*",
     "@webstudio-is/icons": "workspace:*",
+    "colord": "^2.9.3",
     "change-case": "^5.4.4",
     "cmdk": "^1.1.1",
     "downshift": "^6.1.7",

packages/design-system/src/components/gradient-picker.stories.tsx

@@ -0,0 +1,68 @@
+import {
+  parseLinearGradient,
+  reconstructLinearGradient,
+  type ParsedGradient,
+} from "@webstudio-is/css-data";
+import { useState } from "react";
+import { GradientPicker } from "./gradient-picker";
+import { Flex } from "./flex";
+import { Text } from "./text";
+
+export default {
+  title: "Library/GradientPicker",
+};
+
+export const GradientWithoutAngle = () => {
+  const gradientString = "linear-gradient(black 0%, white 100%)";
+  const [gradient, setGradient] = useState<string>(gradientString);
+
+  return (
+    <Flex direction="column" gap="4">
+      <GradientPicker
+        gradient={parseLinearGradient(gradientString) as ParsedGradient}
+        onChange={(value) => {
+          setGradient(reconstructLinearGradient(value));
+        }}
+        onThumbSelected={() => {}}
+      />
+      <Text>{gradient}</Text>
+    </Flex>
+  );
+};
+
+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 (
+    <Flex direction="column" gap="4">
+      <GradientPicker
+        gradient={parseLinearGradient(gradientString) as ParsedGradient}
+        onChange={(value) => {
+          setGradient(reconstructLinearGradient(value));
+        }}
+        onThumbSelected={() => {}}
+      />
+      <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 (
+    <Flex direction="column" gap="4">
+      <GradientPicker
+        gradient={parseLinearGradient(gradientString) as ParsedGradient}
+        onChange={(value) => {
+          setGradient(reconstructLinearGradient(value));
+        }}
+        onThumbSelected={() => {}}
+      />
+      <Text>{gradient}</Text>
+    </Flex>
+  );
+};