@webstudio-is/react-sdk 0.46.0 → 0.48.0

package/lib/app/custom-components/index.js

@@ -1,11 +1,13 @@
 import { Image } from "./image";
 import { Link } from "./link";
+import { LinkBlock } from "./link-block";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
 const customComponents = {
   Image,
   Link,
-  RichTextLink
+  RichTextLink,
+  LinkBlock
 };
 const customComponentPropsMetas = {
   Image: { props: imageProps }

package/lib/app/custom-components/link-block.js

@@ -0,0 +1,6 @@
+import { LinkBlock as BaseLink } from "../../components/link-block";
+import { wrapLinkComponent } from "./shared/remix-link";
+const LinkBlock = wrapLinkComponent(BaseLink);
+export {
+  LinkBlock
+};

package/lib/cjs/app/custom-components/index.cjs

@@ -25,12 +25,14 @@ __export(custom_components_exports, {
 module.exports = __toCommonJS(custom_components_exports);
 var import_image = require("./image");
 var import_link = require("./link");
+var import_link_block = require("./link-block");
 var import_rich_text_link = require("./rich-text-link");
 var import_image2 = require("@webstudio-is/image");
 const customComponents = {
   Image: import_image.Image,
   Link: import_link.Link,
-  RichTextLink: import_rich_text_link.RichTextLink
+  RichTextLink: import_rich_text_link.RichTextLink,
+  LinkBlock: import_link_block.LinkBlock
 };
 const customComponentPropsMetas = {
   Image: { props: import_image2.imageProps }

package/lib/cjs/app/custom-components/link-block.cjs

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var link_block_exports = {};
+__export(link_block_exports, {
+  LinkBlock: () => LinkBlock
+});
+module.exports = __toCommonJS(link_block_exports);
+var import_link_block = require("../../components/link-block");
+var import_remix_link = require("./shared/remix-link");
+const LinkBlock = (0, import_remix_link.wrapLinkComponent)(import_link_block.LinkBlock);

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

@@ -127,8 +127,7 @@ const backgrounds = [
   "backgroundColor",
   "backgroundImage",
   "backgroundOrigin",
-  "backgroundPositionX",
-  "backgroundPositionY",
+  "backgroundPosition",
   "backgroundRepeat",
   "backgroundSize",
   "backgroundBlendMode"

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

@@ -103,8 +103,7 @@ const backgrounds = [
   "backgroundColor",
   "backgroundImage",
   "backgroundOrigin",
-  "backgroundPositionX",
-  "backgroundPositionY",
+  "backgroundPosition",
   "backgroundRepeat",
   "backgroundSize",
   "backgroundBlendMode"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -12,12 +12,10 @@
     "@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",
+    "@storybook/react": "^6.5.16",
     "@types/node": "^18.11.18",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "babel-loader": "^9.1.2",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
     "jest": "^29.3.1",
@@ -46,17 +44,18 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.46.0",
-    "@webstudio-is/css-data": "^0.46.0",
-    "@webstudio-is/css-vars": "^0.46.0",
-    "@webstudio-is/generate-arg-types": "^0.46.0",
-    "@webstudio-is/icons": "^0.46.0",
-    "@webstudio-is/image": "^0.46.0",
-    "@webstudio-is/prisma-client": "^0.46.0",
-    "@webstudio-is/project-build": "^0.46.0"
+    "@webstudio-is/asset-uploader": "^0.48.0",
+    "@webstudio-is/css-data": "^0.48.0",
+    "@webstudio-is/css-vars": "^0.48.0",
+    "@webstudio-is/generate-arg-types": "^0.48.0",
+    "@webstudio-is/icons": "^0.48.0",
+    "@webstudio-is/image": "^0.48.0",
+    "@webstudio-is/prisma-client": "^0.48.0",
+    "@webstudio-is/project-build": "^0.48.0"
   },
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": "./lib/index.js",
       "require": "./lib/cjs/index.cjs"
     }

package/src/app/custom-components/index.ts

@@ -1,5 +1,6 @@
 import { Image } from "./image";
 import { Link } from "./link";
+import { LinkBlock } from "./link-block";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
 import type { WsComponentPropsMeta } from "../../components/component-type";
@@ -8,6 +9,7 @@ export const customComponents = {
   Image,
   Link,
   RichTextLink,
+  LinkBlock,
 };
 
 export const customComponentPropsMetas: Record<string, WsComponentPropsMeta> = {

package/src/app/custom-components/link-block.tsx

@@ -0,0 +1,4 @@
+import { LinkBlock as BaseLink } from "../../components/link-block";
+import { wrapLinkComponent } from "./shared/remix-link";
+
+export const LinkBlock = wrapLinkComponent(BaseLink);

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

@@ -120,8 +120,7 @@ const backgrounds = [
   "backgroundColor",
   "backgroundImage",
   "backgroundOrigin",
-  "backgroundPositionX",
-  "backgroundPositionY",
+  "backgroundPosition",
   "backgroundRepeat",
   "backgroundSize",
   "backgroundBlendMode",