@webstudio-is/react-sdk 0.65.0 → 0.67.0

package/lib/components/radio-button-field.ws.js

@@ -1,4 +1,4 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -14,7 +14,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Radio",
-  Icon: RadioCheckedIcon,
+  icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
   children: [

package/lib/components/radio-button.ws.js

@@ -1,4 +1,4 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -16,7 +16,7 @@ const presetStyle = {
 const meta = {
   type: "control",
   label: "Radio Input",
-  Icon: RadioCheckedIcon,
+  icon: RadioCheckedIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/separator.ws.js

@@ -1,4 +1,4 @@
-import { DashIcon } from "@webstudio-is/icons";
+import { DashIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -37,7 +37,7 @@ const meta = {
   category: "general",
   type: "embed",
   label: "Separator",
-  Icon: DashIcon,
+  icon: DashIcon,
   states: defaultStates,
   presetStyle,
   children: []

package/lib/components/slot.ws.js

@@ -1,9 +1,9 @@
-import { SlotComponentIcon } from "@webstudio-is/icons";
+import { SlotComponentIcon } from "@webstudio-is/icons/svg";
 const meta = {
   category: "general",
   type: "container",
   label: "Slot",
-  Icon: SlotComponentIcon
+  icon: SlotComponentIcon
 };
 const propsMeta = {
   props: {}

package/lib/components/span.ws.js

@@ -1,4 +1,4 @@
-import { PaintBrushIcon } from "@webstudio-is/icons";
+import { PaintBrushIcon } from "@webstudio-is/icons/svg";
 import { span } from "../css/normalize";
 import {
   defaultStates
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: PaintBrushIcon,
+  icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/subscript.ws.js

@@ -1,4 +1,4 @@
-import { SubscriptIcon } from "@webstudio-is/icons";
+import { SubscriptIcon } from "@webstudio-is/icons/svg";
 import { sub } from "../css/normalize";
 import {
   defaultStates
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
-  Icon: SubscriptIcon,
+  icon: SubscriptIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/success-message.ws.js

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import { props } from "./__generated__/success-message.props";
 import { div } from "../css/normalize";
 const presetStyle = {
@@ -7,7 +7,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Success Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/components/superscript.ws.js

@@ -1,4 +1,4 @@
-import { SuperscriptIcon } from "@webstudio-is/icons";
+import { SuperscriptIcon } from "@webstudio-is/icons/svg";
 import { sup } from "../css/normalize";
 import {
   defaultStates
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: SuperscriptIcon,
+  icon: SuperscriptIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/text-block.ws.js

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -17,7 +17,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: TextBlockIcon,
+  icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Block of text you can edit" }]

package/lib/components/textarea.ws.js

@@ -1,4 +1,4 @@
-import { FormTextAreaIcon } from "@webstudio-is/icons";
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
 import { textarea } from "../css/normalize";
 import {
   defaultStates
@@ -15,7 +15,7 @@ const meta = {
   category: "forms",
   type: "control",
   label: "Text Area",
-  Icon: FormTextAreaIcon,
+  icon: FormTextAreaIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/css/css.js

@@ -1,6 +1,4 @@
 import { createCssEngine } from "@webstudio-is/css-engine";
-import { getComponentNames } from "../components/components-utils";
-import { getComponentMeta } from "../components";
 import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
 import { getPresetStyleRules, getStyleRules } from "./style-rules";
@@ -37,9 +35,8 @@ const generateCssText = (data, options) => {
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
-  for (const component of getComponentNames()) {
-    const meta = getComponentMeta(component);
-    const presetStyle = meta?.presetStyle;
+  for (const [component, meta] of data.componentMetas) {
+    const presetStyle = meta.presetStyle;
     if (presetStyle === void 0) {
       continue;
     }

package/lib/css/normalize.js

@@ -1,9 +1,9 @@
-import { borders } from "./presets";
+import { borders, outline } from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-const baseStyle = [boxSizing, ...borders];
+const baseStyle = [boxSizing, ...borders, ...outline];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;

package/lib/css/presets.js

@@ -16,6 +16,13 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+const outline = [
+  {
+    property: "outlineWidth",
+    value: { type: "unit", value: 1, unit: "px" }
+  }
+];
 export {
-  borders
+  borders,
+  outline
 };

package/lib/tree/create-elements-tree.js

@@ -2,11 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import { ReactSdkContext } from "../context";
-import { SessionStoragePolyfill } from "./session-storage-polyfill";
 const createElementsTree = ({
+  renderer,
   instances,
   rootInstanceId,
-  sandbox,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
@@ -32,7 +31,6 @@ const createElementsTree = ({
     children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
         children,
-        sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
         /* @__PURE__ */ jsx(ScrollRestoration, {}),
         /* @__PURE__ */ jsx(Scripts, {})
       ] }, "children")
@@ -42,7 +40,7 @@ const createElementsTree = ({
   return /* @__PURE__ */ jsx(
     ReactSdkContext.Provider,
     {
-      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      value: { propsByInstanceIdStore, assetsStore, pagesStore, renderer },
       children: root
     }
   );

package/lib/types/app/params.d.ts

@@ -1,5 +1,26 @@
 export type Params = {
-    resizeOrigin?: string;
+    /**
+     * Base url ir base path for images with ending slash.
+     * Used for configuring image with different sizes.
+     * Concatinated with "name?width=&quality=&format=".
+     *
+     * For example
+     * /asset/image/ used by default in builder
+     * https://image-transform.wstd.io/cdn-cgi/image/
+     * https://webstudio.is/cdn-cgi/image/
+     */
+    imageBaseUrl: string;
+    /**
+     * Base url or base path for any asset with ending slash.
+     * Used to load assets like fonts or images in styles
+     * Concatinated with "name".
+     *
+     * For example
+     * /s/uploads/
+     * /asset/file/
+     * https://assets-dev.webstudio.is/
+     * https://assets.webstudio.is/
+     */
     assetBaseUrl: string;
 };
 export declare const getParams: () => Params;

package/lib/types/components/__generated__/html-embed.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/{code.d.ts → code-text.d.ts}

@@ -5,5 +5,5 @@ type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
     inline?: boolean;
     meta?: string;
 };
-export declare const Code: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const CodeText: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
 export {};

package/lib/types/components/{code.stories.d.ts → code-text.stories.d.ts}

@@ -5,7 +5,7 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     meta?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLElement>>>;
 export default _default;
-export declare const Code: ComponentStory<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "inline"> & {
+export declare const CodeText: ComponentStory<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "inline"> & {
     inline?: boolean | undefined;
     meta?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLElement>>>;