Merge pull request #629 from webstudio-is/preset-style

Rename defaultStyle  to presetStyle

packages/project/src/shared/tree-utils/populate.ts

@@ -3,7 +3,7 @@ import { type Instance, getComponentMeta } from "@webstudio-is/react-sdk";
 
 /**
  * Populate instance with:
- * - defaultStyles
+ * - presetStyle
  * @todo rewrite using immer
  */
 export const populateInstance = (
@@ -12,10 +12,10 @@ export const populateInstance = (
 ): Instance => {
   const populatedInstance = { ...instance };
   const componentMeta = getComponentMeta(instance.component);
-  if (componentMeta !== undefined && "defaultStyle" in componentMeta) {
+  if (componentMeta !== undefined && "presetStyle" in componentMeta) {
     const cssRule = {
       breakpoint,
-      style: componentMeta.defaultStyle ?? {},
+      style: componentMeta.presetStyle ?? {},
     };
     populatedInstance.cssRules.push(cssRule);
   }

packages/react-sdk/src/components/body.ws.tsx

@@ -2,7 +2,7 @@ import { BodyIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/body.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   marginTop: {
     type: "unit",
     unit: "px",
@@ -57,7 +57,7 @@ const meta: WsComponentMeta = {
   label: "Body",
   Icon: BodyIcon,
   props: props as MetaProps,
-  defaultStyle,
+  presetStyle,
 };
 
 export default meta;

packages/react-sdk/src/components/box.ws.ts

@@ -2,7 +2,7 @@ import { SquareIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/box.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   boxSizing: {
     type: "keyword",
     value: "border-box",
@@ -13,7 +13,7 @@ const meta: WsComponentMeta = {
   type: "container",
   label: "Box",
   Icon: SquareIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
 };
 

packages/react-sdk/src/components/component-type.ts

@@ -23,7 +23,7 @@ export type WsComponentMeta = {
     | "rich-text-child";
   label: string;
   Icon: FunctionComponent<IconProps>;
-  defaultStyle?: Style;
+  presetStyle?: Style;
   children?: Array<string>;
   props: MetaProps;
   initialProps?: Array<string>;
@@ -83,7 +83,7 @@ export const WsComponentMeta = z.lazy(() =>
     ]),
     label: z.string(),
     Icon: z.any(),
-    defaultStyle: z.optional(z.any()),
+    presetStyle: z.optional(z.any()),
     children: z.optional(z.array(z.string())),
     props: Props,
     initialProps: z.optional(z.array(z.string())),

packages/react-sdk/src/components/form.ws.tsx

@@ -2,7 +2,7 @@ import { FormIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/form.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "px",
@@ -18,7 +18,7 @@ const meta: WsComponentMeta = {
   type: "container",
   label: "Form",
   Icon: FormIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
 };
 

packages/react-sdk/src/components/image.ws.tsx

@@ -2,7 +2,7 @@ import { ImageIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/image.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   // Otherwise on new image insert onto canvas it can overfit screen size multiple times
   maxWidth: {
     type: "unit",
@@ -21,7 +21,7 @@ const meta: WsComponentMeta = {
   type: "embed",
   label: "Image",
   Icon: ImageIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
   initialProps: ["src", "width", "height", "alt", "loading"],
 };

packages/react-sdk/src/components/italic.ws.tsx

@@ -2,7 +2,7 @@ import { FontItalicIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/italic.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   fontStyle: {
     type: "keyword",
     value: "italic",
@@ -13,7 +13,7 @@ const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: FontItalicIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
 };
 

packages/react-sdk/src/components/link.ws.tsx

@@ -2,7 +2,7 @@ import { Link2Icon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/link.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -18,7 +18,7 @@ const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Link",
   Icon: Link2Icon,
-  defaultStyle,
+  presetStyle,
   children: ["Link text you can edit"],
   props: props as MetaProps,
 };

packages/react-sdk/src/components/text-block.ws.tsx

@@ -2,7 +2,7 @@ import { TextIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/text-block.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -14,7 +14,7 @@ const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Text Block",
   Icon: TextIcon,
-  defaultStyle,
+  presetStyle,
   children: ["Block of text you can edit"],
   props: props as MetaProps,
 };