@webstudio-is/sdk-components-react-radix 0.85.0 → 0.87.0

package/src/sheet.ws.tsx

@@ -25,6 +25,7 @@ import {
 import { div, nav, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
 import type { SheetContent } from "./sheet";
 import type { ComponentProps } from "react";
+import { template as buttonTemplate } from "./button.ws";
 
 type ContentTags = NonNullable<ComponentProps<typeof SheetContent>["tag"]>;
 
@@ -53,7 +54,6 @@ const descriptionPresetStyle = {
 export const metaSheetTrigger: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  label: "Sheet Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false,
@@ -62,7 +62,6 @@ export const metaSheetTrigger: WsComponentMeta = {
 export const metaSheetContent: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  label: "Sheet Content",
   icon: ContentIcon,
   detachable: false,
   presetStyle: contentPresetStyle,
@@ -78,7 +77,6 @@ export const metaSheetOverlay: WsComponentMeta = {
   category: "hidden",
   type: "container",
   presetStyle,
-  label: "Sheet Overlay",
   icon: OverlayIcon,
   detachable: false,
 };
@@ -87,7 +85,6 @@ export const metaSheetTitle: WsComponentMeta = {
   category: "hidden",
   type: "container",
   presetStyle: titlePresetStyle,
-  label: "Sheet Title",
   icon: HeadingIcon,
 };
 
@@ -95,7 +92,6 @@ export const metaSheetDescription: WsComponentMeta = {
   category: "hidden",
   type: "container",
   presetStyle: descriptionPresetStyle,
-  label: "Sheet Description",
   icon: TextIcon,
 };
 
@@ -103,7 +99,6 @@ export const metaSheetClose: WsComponentMeta = {
   category: "hidden",
   type: "container",
   presetStyle: buttonPresetStyle,
-  label: "Sheet Close",
   icon: ButtonElementIcon,
 };
 
@@ -119,7 +114,6 @@ export const metaSheet: WsComponentMeta = {
   category: "radix",
 
   type: "container",
-  label: "Sheet",
   icon: HamburgerMenuIcon,
   order: 15,
   stylable: false,
@@ -128,27 +122,47 @@ export const metaSheet: WsComponentMeta = {
       type: "instance",
       component: "Sheet",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" },
+        sheetOpen: { type: "variable", initialValue: false },
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen",
+          name: "open",
+          dataSourceName: "sheetOpen",
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `sheetOpen = open` },
+          ],
         },
       ],
       children: [
         {
           type: "instance",
           component: "SheetTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
+          children: buttonTemplate({
+            props: [
+              { name: "variant", type: "string", value: "ghost" },
+              { name: "size", type: "string", value: "icon" },
+            ],
+            children: [
+              {
+                type: "instance",
+                component: "HtmlEmbed",
+                label: "Hamburger Menu Svg",
+                props: [
+                  {
+                    type: "string",
+                    name: "code",
+                    value: HamburgerMenuIcon,
+                  },
+                ],
+                children: [],
+              },
+            ],
+          }),
         },
         {
           type: "instance",
@@ -293,7 +307,7 @@ export const metaSheet: WsComponentMeta = {
 
 export const propsMetaSheet: WsComponentPropsMeta = {
   props: propsSheet,
-  initialProps: ["isOpen", "modal"],
+  initialProps: ["open", "modal"],
 };
 
 export const propsMetaSheetTrigger: WsComponentPropsMeta = {

package/src/tabs.tsx

@@ -10,7 +10,11 @@ import {
   Children,
 } from "react";
 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
-import { getIndexWithinAncestorFromComponentProps } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance,
+  getIndexWithinAncestorFromComponentProps,
+  type Hook,
+} from "@webstudio-is/react-sdk";
 
 export const Tabs: ForwardRefExoticComponent<
   Omit<ComponentPropsWithRef<typeof Root>, "asChild" | "defaultValue">
@@ -44,3 +48,30 @@ export const TabsContent = forwardRef<
   const index = getIndexWithinAncestorFromComponentProps(props);
   return <Content ref={ref} value={value ?? index} {...props} />;
 });
+
+/* BUILDER HOOKS */
+
+const namespace = "@webstudio-is/sdk-components-react-radix";
+
+// For each TabsContent component within the selection,
+// we identify its closest parent Tabs component
+// and update its open prop bound to variable.
+export const hooksTabs: Hook = {
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TabsContent`) {
+        const tabs = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Tabs`
+        );
+        const contentValue =
+          context.getPropValue(instance.id, "value") ??
+          context.indexesWithinAncestors.get(instance.id)?.toString();
+        if (tabs && contentValue) {
+          context.setPropVariable(tabs.id, "value", contentValue);
+        }
+      }
+    }
+  },
+};

package/src/tabs.ws.ts

@@ -65,7 +65,6 @@ const tabsContentStyles: EmbedTemplateStyleDecl[] = [
 export const metaTabs: WsComponentMeta = {
   category: "radix",
   type: "container",
-  label: "Tabs",
   icon: TabsIcon,
   presetStyle,
   template: [
@@ -81,11 +80,7 @@ export const metaTabs: WsComponentMeta = {
           name: "onValueChange",
           type: "action",
           value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `tabsValue = value`,
-            },
+            { type: "execute", args: ["value"], code: `tabsValue = value` },
           ],
         },
       ],
@@ -154,7 +149,6 @@ export const metaTabsList: WsComponentMeta = {
   category: "hidden",
   detachable: false,
   type: "container",
-  label: "Tabs List",
   icon: HeaderIcon,
   requiredAncestors: ["Tabs"],
   presetStyle,
@@ -163,35 +157,19 @@ export const metaTabsList: WsComponentMeta = {
 export const metaTabsTrigger: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  label: "Tabs Trigger",
   icon: TriggerIcon,
   requiredAncestors: ["TabsList"],
   invalidAncestors: ["TabsTrigger"],
   indexWithinAncestor: "Tabs",
-  template: [
-    {
-      type: "instance",
-      component: "TabsTrigger",
-      children: [{ type: "text", value: "New Tab" }],
-    },
-  ],
 };
 
 export const metaTabsContent: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  label: "Tabs Content",
   icon: ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
   presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "TabsContent",
-      children: [{ type: "text", value: "New Tab Content" }],
-    },
-  ],
 };
 
 export const propsMetaTabs: WsComponentPropsMeta = {

package/src/textarea.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { Textarea as TextareaPrimitive } from "./textarea";
+import * as baseComponents from "@webstudio-is/sdk-components-react";
+import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
+import * as radixComponents from "./components";
+import * as radixMetas from "./metas";
+
+export default {
+  title: "Components/Textarea",
+  component: TextareaPrimitive,
+  argTypes: {
+    placeholder: {
+      type: "string",
+    },
+  },
+} satisfies Meta<typeof TextareaPrimitive>;
+
+export const Textarea: StoryObj<typeof TextareaPrimitive> = {
+  render: (props) =>
+    renderComponentTemplate({
+      name: "Textarea",
+      props: { ...props },
+      components: { ...baseComponents, ...radixComponents },
+      metas: { ...baseMetas, ...radixMetas },
+    }),
+};

package/src/textarea.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable react/display-name */
+// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  ComponentPropsWithoutRef<"textarea">
+  // Make sure children are not passed down to an input, because this will result in error.
+>(({ children: _children, ...props }, ref) => {
+  return <textarea ref={ref} {...props} />;
+});

package/src/textarea.ws.ts

@@ -0,0 +1,74 @@
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { textarea } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/textarea.props";
+import * as tc from "./theme/tailwind-classes";
+
+const presetStyle = {
+  textarea,
+} satisfies PresetStyle<"textarea">;
+
+export const meta: WsComponentMeta = {
+  category: "radix",
+  type: "control",
+  invalidAncestors: ["Button"],
+  icon: FormTextAreaIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: "::placeholder", label: "Placeholder" },
+    // @todo share https://github.com/webstudio-is/webstudio-builder/issues/2102
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" },
+  ],
+  order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Textarea",
+      styles: [
+        // flex min-h-[80px] w-full rounded-md
+        // border border-input bg-background
+        // px-3 py-2 text-sm ring-offset-background
+        // placeholder:text-muted-foreground
+        // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+        // focus-visible:ring-offset-2
+        // disabled:cursor-not-allowed disabled:opacity-50
+
+        tc.flex(),
+        tc.minH(20),
+        tc.w("full"),
+        tc.rounded("md"),
+        tc.border(),
+        tc.border("input"),
+        tc.bg("background"),
+        tc.px(3),
+        tc.py(2),
+        tc.text("sm"),
+        tc.state(tc.text("mutedForeground"), "::placeholder"),
+        tc.focusVisible(
+          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+        ),
+        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
+      ].flat(),
+
+      children: [],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["id", "name", "placeholder", "required", "autoFocus"],
+};

package/src/theme/tailwind-classes.ts

@@ -3,7 +3,11 @@
  */
 import type { EmbedTemplateStyleDecl } from "@webstudio-is/react-sdk";
 import { theme } from "./tailwind-theme";
-import { parseCssValue, parseBoxShadow } from "@webstudio-is/css-data";
+import {
+  parseCssValue,
+  parseBoxShadow,
+  StyleValue,
+} from "@webstudio-is/css-data";
 import type { EvaluatedDefaultTheme } from "./radix-common-types";
 
 // https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css
@@ -106,58 +110,127 @@ type NonNumeric<T extends string> = T extends `${infer Z extends number}`
   : T;
 
 export const border = (
-  borderWidth?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]>
+  borderWidthOrColor?:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]>
+    | keyof EvaluatedDefaultTheme["colors"]
 ): EmbedTemplateStyleDecl[] => {
-  const key = `${borderWidth ?? "DEFAULT"}` as const;
+  if (
+    typeof borderWidthOrColor === "number" ||
+    borderWidthOrColor === undefined
+  ) {
+    const key = `${borderWidthOrColor ?? "DEFAULT"}` as const;
 
-  const valueString = theme("borderWidth")?.[key] ?? "1px";
+    const valueString = theme("borderWidth")?.[key] ?? "1px";
+
+    const value = parseCssValue("borderTopWidth", valueString);
+    return [
+      ...preflight(),
+      { property: "borderTopWidth", value },
+      { property: "borderRightWidth", value },
+      { property: "borderBottomWidth", value },
+      { property: "borderLeftWidth", value },
+    ];
+  }
+
+  const value = parseCssValue("color", theme("colors")[borderWidthOrColor]);
 
-  const value = parseCssValue("borderTopWidth", valueString);
   return [
-    ...preflight(),
-    { property: "borderTopWidth", value },
-    { property: "borderRightWidth", value },
-    { property: "borderBottomWidth", value },
-    { property: "borderLeftWidth", value },
+    {
+      property: "borderTopColor",
+      value,
+    },
+    {
+      property: "borderRightColor",
+      value,
+    },
+    {
+      property: "borderBottomColor",
+      value,
+    },
+    {
+      property: "borderLeftColor",
+      value,
+    },
   ];
 };
 
-export const px = (
-  padding:
-    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]>
-    | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>
+export const borderB = (
+  borderWidthOrColor?:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]>
+    | keyof EvaluatedDefaultTheme["colors"]
 ): EmbedTemplateStyleDecl[] => {
-  const key = `${padding}` as const;
-  const valueString = theme("padding")?.[key] ?? "0";
-  const value = parseCssValue("paddingLeft", valueString);
+  let widthValue: StyleValue = { type: "unit", value: 1, unit: "number" };
+  let colorValue: StyleValue = parseCssValue(
+    "color",
+    theme("colors")["border"]
+  );
+  if (
+    typeof borderWidthOrColor === "number" ||
+    borderWidthOrColor === undefined
+  ) {
+    const key = `${borderWidthOrColor ?? "DEFAULT"}` as const;
+    const valueString = theme("borderWidth")[key] ?? "1px";
+    widthValue = parseCssValue("borderTopWidth", valueString);
+  } else {
+    colorValue = parseCssValue("color", theme("colors")[borderWidthOrColor]);
+  }
 
   return [
-    { property: "paddingLeft", value },
-    { property: "paddingRight", value },
+    {
+      property: "borderBottomWidth",
+      value: widthValue,
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" },
+    },
+    {
+      property: "borderBottomColor",
+      value: colorValue,
+    },
   ];
 };
 
-export const py = (
-  padding:
-    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]>
-    | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>
-): EmbedTemplateStyleDecl[] => {
-  const key = `${padding}` as const;
-  const valueString = theme("padding")[key];
-  const value = parseCssValue("paddingTop", valueString);
+const paddingProperty =
+  (property: "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft") =>
+  (
+    padding:
+      | StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]>
+      | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>
+  ): EmbedTemplateStyleDecl[] => {
+    const key = `${padding}` as const;
+    const valueString = theme("padding")?.[key] ?? "0";
+    const value = parseCssValue(property, valueString);
 
-  return [
-    { property: "paddingTop", value },
-    { property: "paddingBottom", value },
-  ];
+    return [{ property, value }];
+  };
+
+export const pt: ReturnType<typeof paddingProperty> = (padding) => {
+  return paddingProperty("paddingTop")(padding);
 };
 
-export const p = (
-  padding:
-    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]>
-    | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>
-): EmbedTemplateStyleDecl[] => {
-  return [...px(padding), ...py(padding)];
+export const pb: ReturnType<typeof paddingProperty> = (padding) => {
+  return paddingProperty("paddingBottom")(padding);
+};
+
+export const pl: ReturnType<typeof paddingProperty> = (padding) => {
+  return paddingProperty("paddingLeft")(padding);
+};
+
+export const pr: ReturnType<typeof paddingProperty> = (padding) => {
+  return paddingProperty("paddingRight")(padding);
+};
+
+export const px: ReturnType<typeof paddingProperty> = (padding) => {
+  return [pl(padding), pr(padding)].flat();
+};
+
+export const py: ReturnType<typeof paddingProperty> = (padding) => {
+  return [pt(padding), pb(padding)].flat();
+};
+
+export const p: ReturnType<typeof paddingProperty> = (padding) => {
+  return [px(padding), py(padding)].flat();
 };
 
 const marginProperty =
@@ -226,6 +299,16 @@ export const h = (
   return [{ property: "height", value }];
 };
 
+export const minH = (
+  spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["height"]>
+): EmbedTemplateStyleDecl[] => {
+  const key = `${spacing}` as const;
+  const valueString = theme("height")?.[key] ?? "0";
+  const value = parseCssValue("minHeight", valueString);
+
+  return [{ property: "minHeight", value }];
+};
+
 export const opacity = (
   opacity: StringEnumToNumeric<keyof EvaluatedDefaultTheme["opacity"]>
 ): EmbedTemplateStyleDecl[] => {
@@ -241,6 +324,20 @@ export const opacity = (
   ];
 };
 
+export const cursor = (
+  cursor: keyof EvaluatedDefaultTheme["cursor"]
+): EmbedTemplateStyleDecl[] => {
+  const valueString = theme("cursor")?.[cursor] ?? "auto";
+  const value = parseCssValue("cursor", valueString);
+
+  return [
+    {
+      property: "cursor",
+      value,
+    },
+  ];
+};
+
 export const maxW = (
   spacing:
     | StringEnumToNumeric<keyof EvaluatedDefaultTheme["maxWidth"]>
@@ -396,11 +493,83 @@ export const inlineFlex = (): EmbedTemplateStyleDecl[] => {
 const flexDirection = { row: "row", col: "column" } as const;
 type FlexDirection = keyof typeof flexDirection;
 
-export const flex = (flexParam?: FlexDirection): EmbedTemplateStyleDecl[] => {
+type FlexSizing = 1 | "auto" | "initial" | "none";
+
+export const flex = (
+  flexParam?: FlexDirection | FlexSizing
+): EmbedTemplateStyleDecl[] => {
   if (flexParam === undefined) {
     return [{ property: "display", value: { type: "keyword", value: "flex" } }];
   }
 
+  if (flexParam === 1) {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" },
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" },
+      },
+      {
+        property: "flexBasis",
+        value: { type: "unit", value: 0, unit: "%" },
+      },
+    ];
+  }
+
+  if (flexParam === "auto") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" },
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" },
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" },
+      },
+    ];
+  }
+
+  if (flexParam === "initial") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" },
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" },
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" },
+      },
+    ];
+  }
+
+  if (flexParam === "none") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" },
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 0, unit: "number" },
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" },
+      },
+    ];
+  }
+
   return [
     {
       property: "flexDirection",
@@ -528,6 +697,32 @@ export const text = (
   ];
 };
 
+export const underline = (): EmbedTemplateStyleDecl[] => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "underline" },
+    },
+  ];
+};
+
+export const underlineOffset = (
+  offset: StringEnumToNumeric<
+    keyof EvaluatedDefaultTheme["textUnderlineOffset"]
+  >
+): EmbedTemplateStyleDecl[] => {
+  const key = `${offset}` as const;
+  const valueString = theme("textUnderlineOffset")[key];
+  const value = parseCssValue("textUnderlineOffset", valueString);
+
+  return [
+    {
+      property: "textUnderlineOffset",
+      value,
+    },
+  ];
+};
+
 const weights = {
   thin: "100",
   extralight: "200",