feat: add links to mdn documentation inside tooltips for sections and properties (#4416)

## Description

fixes #4383 
Tweaked the `__generated__/properties.ts` that is generated at build
time to store `mdn_url` in it. And use these url's to show on the
tooltips for the properties and sections.

## Steps for reproduction
- Open any property, and the tooltip opens
- Inside the tooltip, you should be able to click on the external link
icon.
- The link should take you to a mdn link of the same.


![external-links](https://github.com/user-attachments/assets/9b81d2da-7d5f-4d7f-abdb-e0eaa5902a14)


## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
 
## Before requesting a review

- [x] made a self-review

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)

Author: JayaKrishnaNamburu

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -17,6 +17,7 @@ import {
   Text,
   theme,
   Tooltip,
+  IconLink,
 } from "@webstudio-is/design-system";
 import { humanizeString } from "~/shared/string-utils";
 import {
@@ -34,6 +35,7 @@ import { useComputedStyles } from "./shared/model";
 import { StyleSourceBadge } from "./style-source";
 import { createBatchUpdate } from "./shared/use-style-data";
 import { $virtualInstances } from "~/shared/awareness";
+import { styleConfigByName } from "./shared/configs";
 
 const $isAltPressed = atom(false);
 if (typeof window !== "undefined") {
@@ -67,12 +69,14 @@ const renderCss = (styles: ComputedStyleDecl[], isComputed: boolean) => {
 export const PropertyInfo = ({
   title,
   code,
+  link,
   description,
   styles,
   onReset,
 }: {
   title: string;
   code?: string;
+  link?: string;
   description: ReactNode;
   styles: ComputedStyleDecl[];
   onReset: () => void;
@@ -133,7 +137,21 @@ export const PropertyInfo = ({
 
   return (
     <Flex direction="column" gap="2" css={{ maxWidth: theme.spacing[28] }}>
-      <Text variant="titles">{title}</Text>
+      <Flex justify="between">
+        <Text variant="titles" truncate>
+          {title}
+        </Text>
+        {link && (
+          <IconLink
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+            color="inherit"
+            variant="inherit"
+            size={13}
+          />
+        )}
+      </Flex>
       <Text
         variant="monoBold"
         color="moreSubtle"
@@ -232,6 +250,8 @@ export const PropertyLabel = ({
     }
     batch.publish();
   };
+  const styleConfig = styleConfigByName(properties[0]);
+
   return (
     <Flex align="center">
       <Tooltip
@@ -258,6 +278,7 @@ export const PropertyLabel = ({
               resetProperty();
               setIsOpen(false);
             }}
+            link={styleConfig?.mdnUrl}
           />
         }
       >
@@ -290,6 +311,8 @@ export const PropertySectionLabel = ({
     }
     batch.publish();
   };
+  const styleConfig = styleConfigByName(properties[0]);
+
   return (
     <Flex align="center">
       <Tooltip
@@ -316,6 +339,7 @@ export const PropertySectionLabel = ({
               resetProperty();
               setIsOpen(false);
             }}
+            link={styleConfig?.mdnUrl}
           />
         }
       >
@@ -414,6 +438,8 @@ export const PropertyValueTooltip = ({
     }
     batch.publish();
   };
+  const styleConfig = styleConfigByName(properties[0]);
+
   return (
     <Tooltip
       open={isOpen}
@@ -448,6 +474,7 @@ export const PropertyValueTooltip = ({
             resetProperty();
             setIsOpen(false);
           }}
+          link={styleConfig?.mdnUrl}
         />
       }
     >

apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx

@@ -69,9 +69,9 @@ const advancedProperties = [
 ] satisfies [StyleProperty, ...StyleProperty[]];
 
 export const properties = [
+  "transform",
   "translate",
   "scale",
-  "transform",
   ...advancedProperties,
 ] satisfies [StyleProperty, ...StyleProperty[]];
 

apps/builder/app/builder/features/style-panel/shared/configs.ts

@@ -1,11 +1,12 @@
 import type { StyleProperty } from "@webstudio-is/css-engine";
-import { keywordValues } from "@webstudio-is/css-data";
+import { keywordValues, properties } from "@webstudio-is/css-data";
 import { humanizeString } from "~/shared/string-utils";
 import type * as Controls from "../controls";
 
 type BaseStyleConfig = {
   label: string;
   property: StyleProperty;
+  mdnUrl?: string;
 };
 
 export type Control = keyof typeof Controls;
@@ -53,12 +54,14 @@ export const styleConfigByName = (propertyName: StyleProperty): StyleConfig => {
 
   const keywords = keywordValues[property] || [];
   const label = humanizeString(property);
+  const propertyData = properties[property];
 
   const result = {
     label,
     property,
     control: getControl(property),
     items: keywords.map((keyword) => ({ label: keyword, name: keyword })),
+    ...("mdnUrl" in propertyData && { mdnUrl: propertyData.mdnUrl }),
   };
 
   styleConfigCache.set(propertyName, result);

packages/css-data/bin/mdn-data.ts

@@ -330,6 +330,7 @@ for (property in filteredProperties) {
     unitGroups: Array.from(unitGroups),
     inherited: config.inherited,
     initial: parseInitialValue(property, config.initial, unitGroups),
+    ...("mdn_url" in config && { mdnUrl: config.mdn_url }),
   };
 }