refactor: rewrite radix label template with jsx (#4665)

- added radix templates to components panel
- support interpolations in css tagged template
- added theme with static values

Author: TrySound

apps/builder/app/canvas/canvas.tsx

@@ -17,6 +17,7 @@ import * as baseComponentTemplates from "@webstudio-is/sdk-components-react/temp
 import * as radixComponents from "@webstudio-is/sdk-components-react-radix";
 import * as radixComponentMetas from "@webstudio-is/sdk-components-react-radix/metas";
 import * as radixComponentPropsMetas from "@webstudio-is/sdk-components-react-radix/props";
+import * as radixTemplates from "@webstudio-is/sdk-components-react-radix/templates";
 import { hooks as radixComponentHooks } from "@webstudio-is/sdk-components-react-radix/hooks";
 import { ErrorMessage } from "~/shared/error";
 import { $publisher, publish } from "~/shared/pubsub";
@@ -244,7 +245,7 @@ export const Canvas = () => {
       metas: radixComponentMetas,
       propsMetas: radixComponentPropsMetas,
       hooks: radixComponentHooks,
-      templates: {},
+      templates: radixTemplates,
     });
   });
 

packages/sdk-components-react-radix/package.json

@@ -32,12 +32,17 @@
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
       "import": "./lib/hooks.js"
+    },
+    "./templates": {
+      "webstudio": "./src/templates.ts",
+      "types": "./lib/types/templates.d.ts",
+      "import": "./lib/templates.js"
     }
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
-    "build:tailwind": "tsx scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
+    "build:tailwind": "tsx --conditions=webstudio scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc"
@@ -73,6 +78,7 @@
     "@webstudio-is/generate-arg-types": "workspace:*",
     "@webstudio-is/sdk-cli": "workspace:^",
     "@webstudio-is/sdk-components-react": "workspace:*",
+    "@webstudio-is/template": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

packages/sdk-components-react-radix/src/label.template.tsx

@@ -0,0 +1,27 @@
+import {
+  css,
+  PlaceholderValue,
+  type TemplateMeta,
+} from "@webstudio-is/template";
+import { radix } from "./shared/proxy";
+import { fontSize, lineHeight, weights } from "./shared/theme";
+
+export const meta: TemplateMeta = {
+  category: "radix",
+  description:
+    "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
+  order: 102,
+  template: (
+    <radix.Label
+      // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
+      // We are not supporting peer like styles yet
+      ws:style={css`
+        font-size: ${fontSize.sm};
+        line-height: ${lineHeight.none};
+        font-weight: ${weights.medium};
+      `}
+    >
+      {new PlaceholderValue("Form Label")}
+    </radix.Label>
+  ),
+};

packages/sdk-components-react-radix/src/label.ws.ts

@@ -7,35 +7,16 @@ import {
 } from "@webstudio-is/react-sdk";
 import { label } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/label.props";
-import * as tc from "./theme/tailwind-classes";
 
 const presetStyle = {
   label,
 } satisfies PresetStyle<"label">;
 
 export const meta: WsComponentMeta = {
-  category: "radix",
-  order: 102,
   type: "container",
   icon: LabelIcon,
   presetStyle,
   states: defaultStates,
-  description:
-    "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      styles: [
-        // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
-        tc.text("sm"),
-        tc.font("medium"),
-        tc.leading("none"),
-        // We are not supporting peer like styles yet
-      ].flat(),
-      children: [{ type: "text", value: "Form Label", placeholder: true }],
-    },
-  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

packages/sdk-components-react-radix/src/shared/proxy.ts

@@ -0,0 +1,3 @@
+import { createProxy } from "@webstudio-is/template";
+
+export const radix = createProxy("@webstudio-is/sdk-components-react-radix:");

packages/sdk-components-react-radix/src/shared/theme.ts

@@ -0,0 +1,60 @@
+export const fontSize = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem",
+} as const;
+
+export const fontSizeLineHeight = {
+  xs: "1rem",
+  sm: "1.25rem",
+  base: "1.5rem",
+  lg: "1.75rem",
+  xl: "1.75rem",
+  "2xl": "2rem",
+  "3xl": "2.25rem",
+  "4xl": "2.5rem",
+  "5xl": "1",
+  "6xl": "1",
+  "7xl": "1",
+  "8xl": "1",
+  "9xl": "1",
+} as const;
+
+export const lineHeight = {
+  "3": "0.75rem",
+  "4": "1rem",
+  "5": "1.25rem",
+  "6": "1.5rem",
+  "7": "1.75rem",
+  "8": "2rem",
+  "9": "2.25rem",
+  "10": "2.5rem",
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  loose: "2",
+} as const;
+
+export const weights = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900",
+} as const;

packages/sdk-components-react-radix/src/templates.ts

@@ -0,0 +1 @@
+export { meta as Label } from "./label.template";

packages/template/src/css.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "vitest";
+import { css } from "./css";
+
+test("parse css", () => {
+  expect(css`
+    color: red;
+  `).toEqual([
+    {
+      property: "color",
+      value: { type: "keyword", value: "red" },
+    },
+  ]);
+});
+
+test("support interpolations in local styles", () => {
+  expect(css`
+    color: ${"red"};
+  `).toEqual([
+    {
+      property: "color",
+      value: { type: "keyword", value: "red" },
+    },
+  ]);
+});

packages/template/src/css.ts

@@ -7,8 +7,11 @@ export type TemplateStyleDecl = {
   value: StyleValue;
 };
 
-export const css = (strings: TemplateStringsArray): TemplateStyleDecl[] => {
-  const cssString = `.styles{ ${strings.join()} }`;
+export const css = (
+  strings: TemplateStringsArray,
+  ...values: string[]
+): TemplateStyleDecl[] => {
+  const cssString = `.styles{ ${String.raw({ raw: strings }, ...values)} }`;
   const styles: TemplateStyleDecl[] = [];
   for (const { state, property, value } of parseCss(cssString)) {
     styles.push({ state, property, value });