@webstudio-is/sdk-components-react 0.81.0 → 0.83.0

package/src/__generated__/vimeo.props.ts

@@ -25,13 +25,21 @@ export const props: Record<string, PropMeta> = {
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
-  "aria-busy": {
+  "aria-braillelabel": {
     description:
-      "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.",
+      "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
     required: false,
-    control: "boolean",
-    type: "boolean",
+    control: "text",
+    type: "string",
   },
+  "aria-brailleroledescription": {
+    description:
+      "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string",
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
   "aria-checked": {
     description:
       'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
@@ -53,6 +61,13 @@ export const props: Record<string, PropMeta> = {
     control: "number",
     type: "number",
   },
+  "aria-colindextext": {
+    description:
+      "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string",
+  },
   "aria-colspan": {
     description:
       "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
@@ -81,6 +96,13 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  "aria-description": {
+    description:
+      "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string",
+  },
   "aria-details": {
     description:
       "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
@@ -298,6 +320,13 @@ export const props: Record<string, PropMeta> = {
     control: "number",
     type: "number",
   },
+  "aria-rowindextext": {
+    description:
+      "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string",
+  },
   "aria-rowspan": {
     description:
       "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
@@ -420,10 +449,10 @@ export const props: Record<string, PropMeta> = {
     control: "select",
     type: "string",
     options: [
+      "search",
       "text",
       "url",
       "none",
-      "search",
       "tel",
       "email",
       "numeric",

package/src/body.ws.tsx

@@ -10,7 +10,17 @@ import { props } from "./__generated__/body.props";
 import type { defaultTag } from "./body";
 
 const presetStyle = {
-  body,
+  body: [
+    ...body,
+    {
+      property: "WebkitFontSmoothing",
+      value: { type: "keyword", value: "antialiased" },
+    },
+    {
+      property: "MozOsxFontSmoothing",
+      value: { type: "keyword", value: "grayscale" },
+    },
+  ],
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {

package/src/components.ts

@@ -30,3 +30,14 @@ export { Vimeo } from "./vimeo";
 export { VimeoPreviewImage } from "./vimeo-preview-image";
 export { VimeoPlayButton } from "./vimeo-play-button";
 export { VimeoSpinner } from "./vimeo-spinner";
+export { Tooltip, TooltipContent, TooltipTrigger } from "./radix-tooltip";
+export { Popover, PopoverContent, PopoverTrigger } from "./radix-popover";
+export {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  DialogOverlay,
+  DialogClose,
+  DialogDescription,
+  DialogTitle,
+} from "./radix-dialog";

package/src/image.tsx

@@ -44,7 +44,7 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
 type Props = Omit<ComponentPropsWithoutRef<typeof WebstudioImage>, "loader">;
 
 export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  (props, ref) => {
+  ({ loading = "lazy", ...props }, ref) => {
     const { imageBaseUrl } = useContext(ReactSdkContext);
     const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
 
@@ -56,7 +56,13 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
 
     if (asset == null || loader == null) {
       return (
-        <img key={src} {...props} src={src || imagePlaceholderSvg} ref={ref} />
+        <img
+          key={src}
+          loading={loading}
+          {...props}
+          src={src || imagePlaceholderSvg}
+          ref={ref}
+        />
       );
     }
 
@@ -72,6 +78,7 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
          * prevents showing outdated images on route change.
          **/
         key={src}
+        loading={loading}
         {...props}
         loader={loader}
         src={src}

package/src/label.ws.tsx

@@ -1,4 +1,4 @@
-import { TextIcon } from "@webstudio-is/icons/svg";
+import { LabelIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -21,7 +21,7 @@ export const meta: WsComponentMeta = {
   invalidAncestors: ["Button"],
   type: "container",
   label: "Input Label",
-  icon: TextIcon,
+  icon: LabelIcon,
   states: defaultStates,
   presetStyle,
   order: 2,

package/src/metas.ts

@@ -30,3 +30,24 @@ export { meta as Vimeo } from "./vimeo.ws";
 export { meta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { meta as VimeoSpinner } from "./vimeo-spinner.ws";
+export {
+  metaTooltip as Tooltip,
+  metaTooltipContent as TooltipContent,
+  metaTooltipTrigger as TooltipTrigger,
+} from "./radix-tooltip.ws";
+
+export {
+  metaPopover as Popover,
+  metaPopoverContent as PopoverContent,
+  metaPopoverTrigger as PopoverTrigger,
+} from "./radix-popover.ws";
+
+export {
+  metaDialog as Dialog,
+  metaDialogContent as DialogContent,
+  metaDialogTrigger as DialogTrigger,
+  metaDialogOverlay as DialogOverlay,
+  metaDialogClose as DialogClose,
+  metaDialogDescription as DialogDescription,
+  metaDialogTitle as DialogTitle,
+} from "./radix-dialog.ws";

package/src/props.ts

@@ -30,3 +30,22 @@ export { propsMeta as Vimeo } from "./vimeo.ws";
 export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";
+export {
+  propsMetaTooltip as Tooltip,
+  propsMetaTooltipContent as TooltipContent,
+  propsMetaTooltipTrigger as TooltipTrigger,
+} from "./radix-tooltip.ws";
+export {
+  propsMetaPopover as Popover,
+  propsMetaPopoverContent as PopoverContent,
+  propsMetaPopoverTrigger as PopoverTrigger,
+} from "./radix-popover.ws";
+export {
+  propsMetaDialog as Dialog,
+  propsMetaDialogContent as DialogContent,
+  propsMetaDialogTrigger as DialogTrigger,
+  propsMetaDialogOverlay as DialogOverlay,
+  propsMetaDialogClose as DialogClose,
+  propsMetaDialogDescription as DialogDescription,
+  propsMetaDialogTitle as DialogTitle,
+} from "./radix-dialog.ws";

package/src/radix-dialog.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable react/display-name */
+// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {
+  splitPropsWithWebstudioAttributes,
+  type WebstudioAttributes,
+} from "@webstudio-is/react-sdk";
+
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  Children,
+  type ReactNode,
+} from "react";
+
+/**
+ * We don't have support for boolean or undefined nor in UI not at Data variables,
+ * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Dialog in the builder
+ **/
+type BuilderDialogProps = {
+  isOpen: "initial" | "open" | "closed";
+};
+
+/**
+ * Dialog and DialogTrigger are HTML-less components.
+ * To make them work in our system, we wrap their attributes with a div that has a display: contents property.
+ *
+ * These divs function like fragments, with all web studio-related attributes attached to them.
+ */
+const DisplayContentsStyle = { display: "contents" };
+
+export const Dialog = forwardRef<
+  ElementRef<"div">,
+  WebstudioAttributes &
+    ComponentPropsWithoutRef<typeof DialogPrimitive.Root> &
+    BuilderDialogProps
+>(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] =
+    splitPropsWithWebstudioAttributes(props);
+
+  const open =
+    openProp ??
+    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
+
+  return (
+    <div ref={ref} style={DisplayContentsStyle} {...webstudioAttributes}>
+      <DialogPrimitive.Root open={open} {...restProps} />
+    </div>
+  );
+});
+
+/**
+ * We're not exposing the 'asChild' property for the Trigger.
+ * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
+ * This avoids situations where the Trigger inadvertently passes all styles to its child,
+ * which would prevent us from displaying styles properly in the builder.
+ */
+export const DialogTrigger = forwardRef<
+  ElementRef<"div">,
+  WebstudioAttributes & { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] =
+    splitPropsWithWebstudioAttributes(props);
+
+  return (
+    <div ref={ref} style={DisplayContentsStyle} {...webstudioAttributes}>
+      <DialogPrimitive.Trigger asChild={true} {...restProps}>
+        {firstChild ?? <button>Add button or link</button>}
+      </DialogPrimitive.Trigger>
+    </div>
+  );
+});
+
+export const DialogOverlay = forwardRef<
+  ElementRef<"div">,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>((props, ref) => {
+  return (
+    <DialogPrimitive.DialogPortal>
+      <DialogPrimitive.Overlay ref={ref} {...props} />
+    </DialogPrimitive.DialogPortal>
+  );
+});
+
+export const DialogContent = DialogPrimitive.Content;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogTitle = DialogPrimitive.Title;
+export const DialogDescription = DialogPrimitive.Description;

package/src/radix-dialog.ws.tsx

@@ -0,0 +1,291 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+
+import {
+  propsDialog,
+  propsDialogContent,
+  propsDialogTrigger,
+  propsDialogOverlay,
+  propsDialogClose,
+  propsDialogTitle,
+  propsDialogDescription,
+} from "./__generated__/radix-dialog.props";
+
+// @todo add [data-state] to button and link
+export const metaDialogTrigger: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogTrigger",
+  icon: RadioCheckedIcon,
+  stylable: false,
+  detachable: false,
+};
+
+export const metaDialogContent: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogContent",
+  icon: RadioCheckedIcon,
+  detachable: false,
+};
+
+export const metaDialogOverlay: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogOverlay",
+  icon: RadioCheckedIcon,
+  detachable: false,
+};
+
+export const metaDialogTitle: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogTitle",
+  icon: RadioCheckedIcon,
+};
+
+export const metaDialogDescription: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogDescription",
+  icon: RadioCheckedIcon,
+};
+
+export const metaDialogClose: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogClose",
+  icon: RadioCheckedIcon,
+};
+
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/dialog.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export const metaDialog: WsComponentMeta = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Dialog",
+  icon: RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Dialog",
+      label: "Dialog",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen",
+          },
+        },
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "DialogTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "DialogOverlay",
+          label: "Dialog Overlay",
+          props: [],
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            tc.fixed(),
+            tc.inset(0),
+            tc.z(50),
+            tc.bg("background", 80),
+            tc.backdropBlur("sm"),
+            // To allow positioning Content
+            tc.flex(),
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "DialogContent",
+              label: "Dialog Content",
+              props: [],
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                tc.w("full"),
+                tc.z(50),
+                tc.flex(),
+                tc.flex("col"),
+                tc.gap(4),
+                tc.m("auto"),
+                tc.maxW("lg"),
+                tc.border(),
+                tc.bg("background"),
+                tc.p(6),
+                tc.shadow("lg"),
+                tc.relative(),
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Dialog Header",
+                  props: [],
+                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "DialogTitle",
+                      label: "Dialog Title",
+                      props: [],
+                      /**
+                       * text-lg leading-none tracking-tight
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.leading("none"),
+                        tc.text("lg"),
+                        tc.tracking("tight"),
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog Title",
+                        },
+                      ],
+                    },
+                    {
+                      type: "instance",
+                      component: "DialogDescription",
+                      label: "Dialog Description",
+                      props: [],
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.text("sm"),
+                        tc.text("mutedForeground"),
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "dialog description text you can edit",
+                        },
+                      ],
+                    },
+                  ],
+                },
+
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }],
+                },
+
+                {
+                  type: "instance",
+                  component: "DialogClose",
+                  label: "Dialog Close",
+                  props: [],
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    tc.absolute(),
+                    tc.right(4),
+                    tc.top(4),
+                    tc.rounded("sm"),
+                    tc.opacity(70),
+                    tc.flex(),
+                    tc.items("center"),
+                    tc.justify("center"),
+                    tc.h(4),
+                    tc.w(4),
+                    tc.border(0),
+                    tc.bg("transparent"),
+                    tc.outline("none"),
+                    tc.hover(tc.opacity(100)),
+                    tc.focus(tc.ring("ring", 2, "background", 2)),
+                  ].flat(),
+                  children: [{ type: "text", value: "✕" }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const propsMetaDialog: WsComponentPropsMeta = {
+  props: propsDialog,
+  initialProps: ["isOpen", "modal"],
+};
+
+export const propsMetaDialogTrigger: WsComponentPropsMeta = {
+  props: propsDialogTrigger,
+};
+
+export const propsMetaDialogContent: WsComponentPropsMeta = {
+  props: propsDialogContent,
+  initialProps: [],
+};
+
+export const propsMetaDialogOverlay: WsComponentPropsMeta = {
+  props: propsDialogOverlay,
+  initialProps: [],
+};
+
+export const propsMetaDialogClose: WsComponentPropsMeta = {
+  props: propsDialogClose,
+  initialProps: [],
+};
+
+export const propsMetaDialogTitle: WsComponentPropsMeta = {
+  props: propsDialogTitle,
+  initialProps: [],
+};
+
+export const propsMetaDialogDescription: WsComponentPropsMeta = {
+  props: propsDialogDescription,
+  initialProps: [],
+};

package/src/radix-popover.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable react/display-name */
+// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+  splitPropsWithWebstudioAttributes,
+  type WebstudioAttributes,
+} from "@webstudio-is/react-sdk";
+
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  Children,
+  type ReactNode,
+} from "react";
+
+/**
+ * We don't have support for boolean or undefined nor in UI not at Data variables,
+ * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Popover in the builder
+ **/
+type BuilderPopoverProps = {
+  isOpen: "initial" | "open" | "closed";
+};
+
+/**
+ * Popover and PopoverTrigger are HTML-less components.
+ * To make them work in our system, we wrap their attributes with a div that has a display: contents property.
+ *
+ * These divs function like fragments, with all web studio-related attributes attached to them.
+ */
+const DisplayContentsStyle = { display: "contents" };
+
+export const Popover = forwardRef<
+  ElementRef<"div">,
+  WebstudioAttributes &
+    ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> &
+    BuilderPopoverProps
+>(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] =
+    splitPropsWithWebstudioAttributes(props);
+
+  const open =
+    openProp ??
+    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
+
+  return (
+    <div ref={ref} style={DisplayContentsStyle} {...webstudioAttributes}>
+      <PopoverPrimitive.Root open={open} {...restProps} />
+    </div>
+  );
+});
+
+/**
+ * We're not exposing the 'asChild' property for the Trigger.
+ * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
+ * This avoids situations where the Trigger inadvertently passes all styles to its child,
+ * which would prevent us from displaying styles properly in the builder.
+ */
+export const PopoverTrigger = forwardRef<
+  ElementRef<"div">,
+  WebstudioAttributes & { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] =
+    splitPropsWithWebstudioAttributes(props);
+
+  return (
+    <div ref={ref} style={DisplayContentsStyle} {...webstudioAttributes}>
+      <PopoverPrimitive.Trigger asChild={true} {...restProps}>
+        {firstChild ?? <button>Add button or link</button>}
+      </PopoverPrimitive.Trigger>
+    </div>
+  );
+});
+
+export const PopoverContent = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ sideOffset = 4, align = "center", ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align="center"
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));