@webstudio-is/react-sdk 0.29.0 → 0.31.0

package/src/components/rich-text-link.ws.tsx

@@ -1,12 +1,13 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/rich-text-link.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Link",
   Icon: Link2Icon,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/span.ws.tsx

@@ -1,12 +1,13 @@
 import { BrushIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/span.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Styled Text",
   Icon: BrushIcon,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/subscript.ws.tsx

@@ -1,12 +1,13 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/subscript.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Subscript Text",
   Icon: SubscriptIcon,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/superscript.ws.tsx

@@ -1,12 +1,13 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/superscript.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Superscript Text",
   Icon: SuperscriptIcon,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/text-block.ws.tsx

@@ -1,5 +1,5 @@
 import { TextIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/text-block.props.json";
 
 const presetStyle = {
@@ -10,13 +10,14 @@ const presetStyle = {
   },
 } as const;
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Text Block",
   Icon: TextIcon,
   presetStyle,
   children: ["Block of text you can edit"],
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/css/breakpoints.ts

@@ -1,4 +1,4 @@
-import type { Breakpoint } from "@webstudio-is/css-data";
+import type { Breakpoint } from "@webstudio-is/project-build";
 
 export type BaseBreakpoint = Pick<Breakpoint, "label" | "minWidth">;
 

package/src/index.ts

@@ -5,6 +5,10 @@ export * from "./pubsub";
 export * from "./app";
 export {
   customComponents,
-  customComponentsMeta,
+  customComponentMetas,
+  customComponentPropsMetas,
 } from "./app/custom-components";
-export type { MetaProps, WsComponentMeta } from "./components/component-type";
+export type {
+  WsComponentPropsMeta,
+  WsComponentMeta,
+} from "./components/component-type";

package/src/props.ts

@@ -39,7 +39,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
   return instancePropsObject;
 };
 
-// this utility is be used for image component in both designer and preview
+// this utility is be used for image component in both builder and preview
 // so need to optimize rerenders with computed
 export const usePropAsset = (instanceId: Instance["id"], name: string) => {
   const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);

package/src/tree/create-elements-tree.tsx

@@ -1,10 +1,10 @@
 import { type ComponentProps, Fragment } from "react";
-import { ReadableAtom } from "nanostores";
+import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Instance } from "@webstudio-is/project-build";
 import { ReactSdkContext } from "../context";
-import { Assets, PropsByInstanceId } from "../props";
-import { WrapperComponent } from "./wrapper-component";
+import type { Assets, PropsByInstanceId } from "../props";
+import type { WrapperComponent } from "./wrapper-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
 export type ChildrenUpdates = Array<

package/src/tree/session-storage-polyfill.tsx

@@ -8,7 +8,7 @@ const polyfill = function () {
     sessionStorage.removeItem(key); // cleanup
   } catch (error) {
     alert(
-      'It looks like you have disabled cookies in your browser. Webstudio designer may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647'
+      'It looks like you have disabled cookies in your browser. Webstudio builder may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647'
     );
     const data = new Map();
     Object.defineProperty(window, "sessionStorage", {