@webstudio-is/sdk-components-react 0.75.0 → 0.77.0

package/src/__generated__/vimeo.props.ts

@@ -1,95 +1,8 @@
 import type { PropMeta } from "@webstudio-is/generate-arg-types";
 
 export const props: Record<string, PropMeta> = {
-  slot: { required: false, control: "text", type: "string" },
-  style: { required: false, control: "text", type: "string" },
-  title: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-  },
-  accessKey: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
-  className: { required: false, control: "text", type: "string" },
-  contentEditable: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
-  nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
-  tabIndex: { required: false, control: "number", type: "number" },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-  },
-  radioGroup: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
   about: { required: false, control: "text", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  datatype: { required: false, control: "text", type: "string" },
-  inlist: { required: false, control: "text", type: "string" },
-  prefix: { required: false, control: "text", type: "string" },
-  property: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
-  resource: { required: false, control: "text", type: "string" },
-  rev: { required: false, control: "text", type: "string" },
-  typeof: { required: false, control: "text", type: "string" },
-  vocab: { required: false, control: "text", type: "string" },
-  autoCapitalize: { required: false, control: "text", type: "string" },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoSave: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  itemID: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  security: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"],
-  },
-  inputMode: {
-    description:
-      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "url",
-      "none",
-      "search",
-      "tel",
-      "email",
-      "numeric",
-      "decimal",
-    ],
-  },
-  is: {
-    description:
-      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
-    required: false,
-    control: "text",
-    type: "string",
-  },
+  accessKey: { required: false, control: "text", type: "string" },
   "aria-activedescendant": {
     description:
       "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
@@ -440,13 +353,9 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  url: {
-    description:
-      "The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's privacy setting is Private, you must use the URL, and the URL must include the h parameter. For more information, see our introductory guide.",
-    required: false,
-    control: "text",
-    type: "string",
-  },
+  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCorrect: { required: false, control: "text", type: "string" },
+  autoFocus: { required: false, control: "boolean", type: "boolean" },
   autopause: {
     description:
       "Whether to pause the current video when another Vimeo video on the same page starts to play. Set this value to false to permit simultaneous playback of all the videos on the page. This option has no effect if you've disabled cookies in your browser, either through browser settings or with an extension or plugin.",
@@ -470,6 +379,76 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
     defaultValue: false,
   },
+  autoSave: { required: false, control: "text", type: "string" },
+  backgroundMode: {
+    description:
+      "Whether the player is in background mode, which hides the playback controls, enables autoplay, and loops the video.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false,
+  },
+  className: { required: false, control: "text", type: "string" },
+  color: { required: false, control: "color", type: "string" },
+  content: { required: false, control: "text", type: "string" },
+  contextMenu: { required: false, control: "text", type: "string" },
+  controlsColor: {
+    description:
+      "A color value of the playback controls, which is normally #00ADEF. The embed settings of the video might override this value.",
+    required: false,
+    control: "color",
+    type: "string",
+  },
+  datatype: { required: false, control: "text", type: "string" },
+  defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  dir: { required: false, control: "text", type: "string" },
+  doNotTrack: {
+    description:
+      "Whether to prevent the player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks video stats.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false,
+  },
+  draggable: { required: false, control: "boolean", type: "boolean" },
+  hidden: { required: false, control: "boolean", type: "boolean" },
+  id: { required: false, control: "text", type: "string" },
+  inputMode: {
+    description:
+      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "text",
+      "url",
+      "none",
+      "search",
+      "tel",
+      "email",
+      "numeric",
+      "decimal",
+    ],
+  },
+  interactiveParams: {
+    description:
+      "Key-value pairs representing dynamic parameters that are utilized on interactive videos with live elements, such as title=my-video,subtitle=interactive.",
+    required: false,
+    control: "text",
+    type: "string",
+  },
+  is: {
+    description:
+      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
+    required: false,
+    control: "text",
+    type: "string",
+  },
+  itemID: { required: false, control: "text", type: "string" },
+  itemProp: { required: false, control: "text", type: "string" },
+  itemRef: { required: false, control: "text", type: "string" },
+  itemScope: { required: false, control: "boolean", type: "boolean" },
+  itemType: { required: false, control: "text", type: "string" },
   keyboard: {
     description:
       "Whether to enable keyboard input to trigger player events. This setting doesn't affect tab control.",
@@ -478,6 +457,7 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
     defaultValue: true,
   },
+  lang: { required: false, control: "text", type: "string" },
   loop: {
     description:
       "Whether to restart the video automatically after reaching the end.",
@@ -494,6 +474,7 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
     defaultValue: false,
   },
+  nonce: { required: false, control: "text", type: "string" },
   pip: {
     description:
       "Whether to include the picture-in-picture button among the player controls and enable the picture-in-picture API.",
@@ -502,6 +483,7 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
     defaultValue: false,
   },
+  placeholder: { required: false, control: "text", type: "string" },
   playsinline: {
     description:
       "Whether the video plays inline on supported mobile devices. To force the device to play the video in fullscreen mode instead, set this value to false.",
@@ -510,6 +492,8 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
     defaultValue: true,
   },
+  prefix: { required: false, control: "text", type: "string" },
+  property: { required: false, control: "text", type: "string" },
   quality: {
     description:
       "For videos on a Vimeo Plus account or higher: the playback quality of the video. Use auto for the best possible quality given available bandwidth and other factors. You can also specify 360p, 540p, 720p, 1080p, 2k, and 4k.",
@@ -519,6 +503,9 @@ export const props: Record<string, PropMeta> = {
     defaultValue: "auto",
     options: ["auto", "360p", "540p", "720p", "1080p", "2k", "4k"],
   },
+  radioGroup: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
+  resource: { required: false, control: "text", type: "string" },
   responsive: {
     description:
       "Whether to return a responsive embed code, or one that provides intelligent adjustments based on viewing conditions. We recommend this option for mobile-optimized sites.",
@@ -527,24 +514,28 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
     defaultValue: true,
   },
-  speed: {
-    description:
-      "Whether the player displays speed controls in the preferences menu and enables the playback rate API.",
+  results: { required: false, control: "number", type: "number" },
+  rev: { required: false, control: "text", type: "string" },
+  role: { required: false, control: "text", type: "string" },
+  security: { required: false, control: "text", type: "string" },
+  showByline: {
+    description: "Whether to display the video owner's name.",
     required: false,
     control: "boolean",
     type: "boolean",
     defaultValue: false,
   },
-  texttrack: {
+  showControls: {
     description:
-      "The text track to display with the video. Specify the text track by its language code (en), the language code and locale (en-US), or the language code and kind (en.captions). For this argument to work, the video must already have a text track of the given type; see our Help Center or Working with Text Track Uploads for more information.\nTo enable automatically generated closed captions instead, provide the value en-x-autogen. Please note that, at the present time, automatic captions are always in English.",
+      "Whether to display the player's interactive elements, including the play bar and sharing buttons. Set this option to false for a chromeless experience. To control playback when the play/pause button is hidden, set autoplay to true, use keyboard controls (which remain active), or implement our player SDK.",
     required: false,
-    control: "text",
-    type: "string",
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true,
   },
-  transparent: {
+  showPortrait: {
     description:
-      "Whether the responsive player and transparent background are enabled.",
+      "Whether to display the video owner's portrait. Only works if either title or byline are also enabled",
     required: false,
     control: "boolean",
     type: "boolean",
@@ -558,64 +549,69 @@ export const props: Record<string, PropMeta> = {
     type: "boolean",
     defaultValue: false,
   },
-  doNotTrack: {
-    description:
-      "Whether to prevent the player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks video stats.",
+  showTitle: {
+    description: "Whether the player displays the title overlay.",
     required: false,
     control: "boolean",
     type: "boolean",
     defaultValue: false,
   },
-  interactiveParams: {
+  slot: { required: false, control: "text", type: "string" },
+  speed: {
     description:
-      "Key-value pairs representing dynamic parameters that are utilized on interactive videos with live elements, such as title=my-video,subtitle=interactive.",
+      "Whether the player displays speed controls in the preferences menu and enables the playback rate API.",
     required: false,
-    control: "text",
-    type: "string",
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false,
   },
-  backgroundMode: {
-    description:
-      "Whether the player is in background mode, which hides the playback controls, enables autoplay, and loops the video.",
+  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  suppressContentEditableWarning: {
     required: false,
     control: "boolean",
     type: "boolean",
-    defaultValue: false,
   },
-  showControls: {
-    description:
-      "Whether to display the player's interactive elements, including the play bar and sharing buttons. Set this option to false for a chromeless experience. To control playback when the play/pause button is hidden, set autoplay to true, use keyboard controls (which remain active), or implement our player SDK.",
+  suppressHydrationWarning: {
     required: false,
     control: "boolean",
     type: "boolean",
-    defaultValue: true,
   },
-  controlsColor: {
+  tabIndex: { required: false, control: "number", type: "number" },
+  texttrack: {
     description:
-      "A color value of the playback controls, which is normally #00ADEF. The embed settings of the video might override this value.",
+      "The text track to display with the video. Specify the text track by its language code (en), the language code and locale (en-US), or the language code and kind (en.captions). For this argument to work, the video must already have a text track of the given type; see our Help Center or Working with Text Track Uploads for more information.\nTo enable automatically generated closed captions instead, provide the value en-x-autogen. Please note that, at the present time, automatic captions are always in English.",
     required: false,
-    control: "color",
+    control: "text",
     type: "string",
   },
-  showByline: {
-    description: "Whether to display the video owner's name.",
+  title: { required: false, control: "text", type: "string" },
+  translate: {
     required: false,
-    control: "boolean",
-    type: "boolean",
-    defaultValue: false,
+    control: "radio",
+    type: "string",
+    options: ["yes", "no"],
   },
-  showTitle: {
-    description: "Whether the player displays the title overlay.",
+  transparent: {
+    description:
+      "Whether the responsive player and transparent background are enabled.",
     required: false,
     control: "boolean",
     type: "boolean",
-    defaultValue: false,
+    defaultValue: true,
   },
-  showPortrait: {
+  typeof: { required: false, control: "text", type: "string" },
+  unselectable: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["on", "off"],
+  },
+  url: {
     description:
-      "Whether to display the video owner's portrait. Only works if either title or byline are also enabled",
+      "The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's privacy setting is Private, you must use the URL, and the URL must include the h parameter. For more information, see our introductory guide.",
     required: false,
-    control: "boolean",
-    type: "boolean",
-    defaultValue: true,
+    control: "text",
+    type: "string",
   },
+  vocab: { required: false, control: "text", type: "string" },
 };

package/src/blockquote.ws.tsx

@@ -5,58 +5,12 @@ import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
+import { blockquote } from "@webstudio-is/react-sdk/css-normalize";
 import type { defaultTag } from "./blockquote";
 import { props } from "./__generated__/blockquote.props";
 
 const presetStyle = {
-  blockquote: [
-    {
-      property: "marginTop",
-      value: { type: "unit", value: 0, unit: "number" },
-    },
-    {
-      property: "marginRight",
-      value: { type: "unit", value: 0, unit: "number" },
-    },
-    {
-      property: "marginBottom",
-      value: { type: "unit", value: 10, unit: "px" },
-    },
-    {
-      property: "marginLeft",
-      value: { type: "unit", value: 0, unit: "number" },
-    },
-
-    {
-      property: "paddingTop",
-      value: { type: "unit", value: 10, unit: "px" },
-    },
-    {
-      property: "paddingBottom",
-      value: { type: "unit", value: 10, unit: "px" },
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "unit", value: 20, unit: "px" },
-    },
-    {
-      property: "paddingRight",
-      value: { type: "unit", value: 20, unit: "px" },
-    },
-
-    {
-      property: "borderLeftWidth",
-      value: { type: "unit", value: 5, unit: "px" },
-    },
-    {
-      property: "borderLeftStyle",
-      value: { type: "keyword", value: "solid" },
-    },
-    {
-      property: "borderLeftColor",
-      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 },
-    },
-  ],
+  blockquote,
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {

package/src/body.ws.tsx

@@ -10,27 +10,7 @@ import { props } from "./__generated__/body.props";
 import type { defaultTag } from "./body";
 
 const presetStyle = {
-  body: [
-    ...body,
-    {
-      property: "fontFamily",
-      value: { type: "keyword", value: "Arial" },
-    },
-    {
-      property: "fontSize",
-      value: { type: "unit", unit: "px", value: 14 },
-    },
-    {
-      property: "lineHeight",
-      value: { type: "unit", unit: "number", value: 1.5 },
-    },
-    // temporary set root color
-    // until builder start to fallback "inherit" to black
-    {
-      property: "color",
-      value: { type: "keyword", value: "black" },
-    },
-  ],
+  body,
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {

package/src/code-text.tsx

@@ -8,10 +8,10 @@ import { cssVars } from "@webstudio-is/css-vars";
 
 export const defaultTag = "code";
 
-export const displayVarNamespace = cssVars.unique("code-display");
+export const displayVarNamespace = cssVars.define("code-display");
 
 const blockStyle = {
-  [cssVars.define(displayVarNamespace, true)]: "block",
+  [cssVars.define(displayVarNamespace)]: "block",
 };
 
 type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {

package/src/components.ts

@@ -23,8 +23,6 @@ export { ListItem } from "./list-item";
 export { Separator } from "./separator";
 export { CodeText } from "./code-text";
 export { Label } from "./label";
-export { SuccessMessage } from "./success-message";
-export { ErrorMessage } from "./error-message";
 export { Textarea } from "./textarea";
 export { RadioButton } from "./radio-button";
 export { Checkbox } from "./checkbox";

package/src/form.ws.tsx

@@ -19,6 +19,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
+  invalidAncestors: ["Form"],
   label: "Form",
   icon: FormIcon,
   states: defaultStates,

package/src/link.tsx

@@ -19,12 +19,17 @@ export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
   let url = "#";
 
   switch (href?.type) {
-    case "page":
+    case "page": {
       url = href.page.path === "" ? "/" : href.page.path;
+      const urlTo = new URL(url, "https://any-valid.url");
+      url = urlTo.pathname;
+
       if (href.hash !== undefined) {
-        url += `#${href.hash}`;
+        urlTo.hash = encodeURIComponent(href.hash);
+        url = `${urlTo.pathname}${urlTo.hash}`;
       }
       break;
+    }
     case "asset":
       url = `${assetBaseUrl}${href.asset.name}`;
       break;

package/src/list.ws.tsx

@@ -54,5 +54,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["ordered", "type", "starts", "reversed"],
+  initialProps: ["ordered", "type", "start", "reversed"],
 };

package/src/metas.ts

@@ -23,8 +23,6 @@ export { meta as ListItem } from "./list-item.ws";
 export { meta as Separator } from "./separator.ws";
 export { meta as CodeText } from "./code-text.ws";
 export { meta as Label } from "./label.ws";
-export { meta as SuccessMessage } from "./success-message.ws";
-export { meta as ErrorMessage } from "./error-message.ws";
 export { meta as Textarea } from "./textarea.ws";
 export { meta as RadioButton } from "./radio-button.ws";
 export { meta as Checkbox } from "./checkbox.ws";

package/src/props.ts

@@ -23,8 +23,6 @@ export { propsMeta as ListItem } from "./list-item.ws";
 export { propsMeta as Separator } from "./separator.ws";
 export { propsMeta as CodeText } from "./code-text.ws";
 export { propsMeta as Label } from "./label.ws";
-export { propsMeta as SuccessMessage } from "./success-message.ws";
-export { propsMeta as ErrorMessage } from "./error-message.ws";
 export { propsMeta as Textarea } from "./textarea.ws";
 export { propsMeta as RadioButton } from "./radio-button.ws";
 export { propsMeta as Checkbox } from "./checkbox.ws";

package/src/subscript.stories.tsx

@@ -1,16 +1,16 @@
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Bold as BoldPrimitive } from "./bold";
+import { Subscript as SubscriptPrimitive } from "./subscript";
 
 export default {
-  title: "Components/Bold",
-  component: BoldPrimitive,
-} as ComponentMeta<typeof BoldPrimitive>;
+  title: "Components/Subscript",
+  component: SubscriptPrimitive,
+} as ComponentMeta<typeof SubscriptPrimitive>;
 
-const Template: ComponentStory<typeof BoldPrimitive> = (args) => (
-  <BoldPrimitive {...args} />
+const Template: ComponentStory<typeof SubscriptPrimitive> = (args) => (
+  <SubscriptPrimitive {...args} />
 );
 
-export const Bold = Template.bind({});
-Bold.args = {
-  children: "some bold text",
+export const Subscript = Template.bind({});
+Subscript.args = {
+  children: "some subscript text",
 };