@webstudio-is/react-sdk 0.45.0 → 0.47.0

package/lib/cjs/components/__generated__/button.props.cjs

@@ -426,5 +426,11 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  innerText: {
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "Edit Inner Text in Properties"
   }
 };

package/lib/cjs/components/__generated__/link-block.props.cjs

@@ -35,7 +35,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    options: ["self", "blank", "parent", "top"]
+    options: ["_self", "_blank", "_parent", "_top"]
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/lib/cjs/components/__generated__/link.props.cjs

@@ -35,8 +35,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    defaultValue: "self",
-    options: ["self", "blank", "parent", "top"]
+    options: ["_self", "_blank", "_parent", "_top"]
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/lib/cjs/components/__generated__/rich-text-link.props.cjs

@@ -35,7 +35,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    options: ["self", "blank", "parent", "top"]
+    options: ["_self", "_blank", "_parent", "_top"]
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/lib/cjs/components/button.cjs

@@ -25,12 +25,16 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "button";
 const Button = (0, import_react.forwardRef)(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+  ({
+    type = "submit",
+    innerText = "Edit Inner Text in Properties",
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+    type,
     ...props,
-    ref
+    ref,
+    children: children ? children : innerText
   })
 );
-Button.defaultProps = {
-  type: "submit"
-};
 Button.displayName = "Button";

package/lib/cjs/components/button.ws.cjs

@@ -25,12 +25,11 @@ module.exports = __toCommonJS(button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_button = require("./__generated__/button.props");
 const meta = {
-  type: "rich-text",
+  type: "container",
   label: "Button",
-  Icon: import_icons.ButtonIcon,
-  children: ["Button text you can edit"]
+  Icon: import_icons.ButtonIcon
 };
 const propsMeta = {
   props: import_button.props,
-  initialProps: ["type"]
+  initialProps: ["type", "innerText", "aria-label"]
 };

package/lib/cjs/components/link.cjs

@@ -24,10 +24,9 @@ module.exports = __toCommonJS(link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const Link = (0, import_react.forwardRef)(
-  ({ href = "", target = "self", ...props }, ref) => {
+  ({ href = "", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
       ...props,
-      target: `_${target}`,
       href,
       ref
     });

package/lib/cjs/css/categories.cjs

@@ -130,7 +130,8 @@ const backgrounds = [
   "backgroundPositionX",
   "backgroundPositionY",
   "backgroundRepeat",
-  "backgroundSize"
+  "backgroundSize",
+  "backgroundBlendMode"
 ];
 const borders = [
   "borderTopLeftRadius",

package/lib/components/__generated__/button.props.js

@@ -403,6 +403,12 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  innerText: {
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "Edit Inner Text in Properties"
   }
 };
 export {

package/lib/components/__generated__/link-block.props.js

@@ -12,7 +12,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    options: ["self", "blank", "parent", "top"]
+    options: ["_self", "_blank", "_parent", "_top"]
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/lib/components/__generated__/link.props.js

@@ -12,8 +12,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    defaultValue: "self",
-    options: ["self", "blank", "parent", "top"]
+    options: ["_self", "_blank", "_parent", "_top"]
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/lib/components/__generated__/rich-text-link.props.js

@@ -12,7 +12,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    options: ["self", "blank", "parent", "top"]
+    options: ["_self", "_blank", "_parent", "_top"]
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/lib/components/button.js

@@ -2,14 +2,18 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "button";
 const Button = forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx("button", {
+  ({
+    type = "submit",
+    innerText = "Edit Inner Text in Properties",
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx("button", {
+    type,
     ...props,
-    ref
+    ref,
+    children: children ? children : innerText
   })
 );
-Button.defaultProps = {
-  type: "submit"
-};
 Button.displayName = "Button";
 export {
   Button

package/lib/components/button.ws.js

@@ -1,14 +1,13 @@
 import { ButtonIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/button.props";
 const meta = {
-  type: "rich-text",
+  type: "container",
   label: "Button",
-  Icon: ButtonIcon,
-  children: ["Button text you can edit"]
+  Icon: ButtonIcon
 };
 const propsMeta = {
   props,
-  initialProps: ["type"]
+  initialProps: ["type", "innerText", "aria-label"]
 };
 export {
   meta,

package/lib/components/link.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const Link = forwardRef(
-  ({ href = "", target = "self", ...props }, ref) => {
+  ({ href = "", ...props }, ref) => {
     return /* @__PURE__ */ jsx("a", {
       ...props,
-      target: `_${target}`,
       href,
       ref
     });

package/lib/css/categories.js

@@ -106,7 +106,8 @@ const backgrounds = [
   "backgroundPositionX",
   "backgroundPositionY",
   "backgroundRepeat",
-  "backgroundSize"
+  "backgroundSize",
+  "backgroundBlendMode"
 ];
 const borders = [
   "borderTopLeftRadius",

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.21.0",
     "@esbuild-kit/esm-loader": "^2.4.2",
     "@jest/globals": "^29.3.1",
     "@remix-run/node": "1.12.0",
     "@remix-run/react": "1.12.0",
     "@remix-run/server-runtime": "1.12.0",
     "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.0.11",
     "@types/node": "^18.11.18",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.2",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
     "jest": "^29.3.1",
@@ -46,14 +45,14 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.45.0",
-    "@webstudio-is/css-data": "^0.45.0",
-    "@webstudio-is/css-vars": "^0.45.0",
-    "@webstudio-is/generate-arg-types": "^0.45.0",
-    "@webstudio-is/icons": "^0.45.0",
-    "@webstudio-is/image": "^0.45.0",
-    "@webstudio-is/prisma-client": "^0.45.0",
-    "@webstudio-is/project-build": "^0.45.0"
+    "@webstudio-is/asset-uploader": "^0.47.0",
+    "@webstudio-is/css-data": "^0.47.0",
+    "@webstudio-is/css-vars": "^0.47.0",
+    "@webstudio-is/generate-arg-types": "^0.47.0",
+    "@webstudio-is/icons": "^0.47.0",
+    "@webstudio-is/image": "^0.47.0",
+    "@webstudio-is/prisma-client": "^0.47.0",
+    "@webstudio-is/project-build": "^0.47.0"
   },
   "exports": {
     ".": {

package/src/components/__generated__/button.props.ts

@@ -452,4 +452,10 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  innerText: {
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "Edit Inner Text in Properties",
+  },
 };

package/src/components/__generated__/link-block.props.ts

@@ -14,7 +14,7 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "select",
     type: "string",
-    options: ["self", "blank", "parent", "top"],
+    options: ["_self", "_blank", "_parent", "_top"],
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/src/components/__generated__/link.props.ts

@@ -14,8 +14,7 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "select",
     type: "string",
-    defaultValue: "self",
-    options: ["self", "blank", "parent", "top"],
+    options: ["_self", "_blank", "_parent", "_top"],
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/src/components/__generated__/rich-text-link.props.ts

@@ -14,7 +14,7 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "select",
     type: "string",
-    options: ["self", "blank", "parent", "top"],
+    options: ["_self", "_blank", "_parent", "_top"],
   },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {

package/src/components/button.stories.tsx

@@ -11,7 +11,3 @@ const Template: ComponentStory<typeof ButtonPrimitive> = (args) => (
 );
 
 export const Button = Template.bind({});
-
-Button.args = {
-  children: "Test",
-};

package/src/components/button.tsx

@@ -2,13 +2,22 @@ import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
 const defaultTag = "button";
 
-type ButtonProps = ComponentProps<typeof defaultTag>;
+type ButtonProps = ComponentProps<typeof defaultTag> & { innerText?: string };
 
 export const Button = forwardRef<ElementRef<typeof defaultTag>, ButtonProps>(
-  (props, ref) => <button {...props} ref={ref} />
+  (
+    {
+      type = "submit",
+      innerText = "Edit Inner Text in Properties",
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <button type={type} {...props} ref={ref}>
+      {children ? children : innerText}
+    </button>
+  )
 );
 
-Button.defaultProps = {
-  type: "submit", // Match the platform default
-};
 Button.displayName = "Button";

package/src/components/button.ws.tsx

@@ -3,13 +3,12 @@ import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import { props } from "./__generated__/button.props";
 
 export const meta: WsComponentMeta = {
-  type: "rich-text",
+  type: "container",
   label: "Button",
   Icon: ButtonIcon,
-  children: ["Button text you can edit"],
 };
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["type"],
+  initialProps: ["type", "innerText", "aria-label"],
 };

package/src/components/link.tsx

@@ -3,15 +3,16 @@ import { forwardRef, type ElementRef, type ComponentProps } from "react";
 // @todo props that come from remix link, shouldn't be here at all
 // - prefetch should be only on remix component and it already is
 // - props meta should be generated from Remix link
+// - changing this requires update in app/canvas/custom-components/link.tsx
 type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
   href?: string;
-  target?: "self" | "blank" | "parent" | "top";
+  target?: "_self" | "_blank" | "_parent" | "_top";
   prefetch?: "none" | "intent" | "render";
 };
 
 export const Link = forwardRef<ElementRef<"a">, Props>(
-  ({ href = "", target = "self", ...props }, ref) => {
-    return <a {...props} target={`_${target}`} href={href} ref={ref} />;
+  ({ href = "", ...props }, ref) => {
+    return <a {...props} href={href} ref={ref} />;
   }
 );
 

package/src/css/categories.ts

@@ -124,6 +124,7 @@ const backgrounds = [
   "backgroundPositionY",
   "backgroundRepeat",
   "backgroundSize",
+  "backgroundBlendMode",
 ] as const;
 
 const borders = [