refactor: merge base and animation props with component metas

apps/builder/app/canvas/canvas.tsx

@@ -8,12 +8,10 @@ import { wsImageLoader } from "@webstudio-is/image";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import * as baseComponents from "@webstudio-is/sdk-components-react";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
-import * as baseComponentPropsMetas from "@webstudio-is/sdk-components-react/props";
 import { hooks as baseComponentHooks } from "@webstudio-is/sdk-components-react/hooks";
 import * as baseComponentTemplates from "@webstudio-is/sdk-components-react/templates";
 import * as animationComponents from "@webstudio-is/sdk-components-animation";
 import * as animationComponentMetas from "@webstudio-is/sdk-components-animation/metas";
-import * as animationComponentPropsMetas from "@webstudio-is/sdk-components-animation/props";
 import * as animationTemplates from "@webstudio-is/sdk-components-animation/templates";
 import { hooks as animationComponentHooks } from "@webstudio-is/sdk-components-animation/hooks";
 import * as radixComponents from "@webstudio-is/sdk-components-react-radix";
@@ -248,7 +246,7 @@ export const Canvas = () => {
     registerComponentLibrary({
       components: baseComponents,
       metas: baseComponentMetas,
-      propsMetas: baseComponentPropsMetas,
+      propsMetas: {},
       hooks: baseComponentHooks,
       templates: baseComponentTemplates,
     });
@@ -274,7 +272,7 @@ export const Canvas = () => {
       namespace: "@webstudio-is/sdk-components-animation",
       components: animationComponents,
       metas: animationComponentMetas,
-      propsMetas: animationComponentPropsMetas,
+      propsMetas: {},
       hooks: animationComponentHooks,
       templates: animationTemplates,
     });

packages/sdk-components-animation/package.json

@@ -24,11 +24,6 @@
       "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js"
     },
-    "./props": {
-      "webstudio": "./src/props.ts",
-      "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js"
-    },
     "./hooks": {
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",

packages/sdk-components-animation/src/animate-children.ws.ts

@@ -1,5 +1,5 @@
 import { AnimationGroupIcon } from "@webstudio-is/icons/svg";
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { animation } from "./shared/meta";
 
 export const meta: WsComponentMeta = {
@@ -17,9 +17,7 @@ export const meta: WsComponentMeta = {
       animation.VideoAnimation,
     ],
   },
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["action"],
   props: {
     action: {
       required: false,
@@ -28,5 +26,4 @@ export const propsMeta: WsComponentPropsMeta = {
       description: "Animation Action",
     },
   },
-  initialProps: ["action"],
 };

packages/sdk-components-animation/src/animate-text.ws.ts

@@ -1,5 +1,5 @@
 import { TextAnimationIcon } from "@webstudio-is/icons/svg";
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { div } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/animate-text.props";
 
@@ -14,12 +14,7 @@ export const meta: WsComponentMeta = {
     category: "none",
     children: ["instance"],
   },
-  presetStyle: {
-    div,
-  },
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
+  presetStyle: { div },
   initialProps: ["slidingWindow", "easing", "splitBy"],
+  props,
 };

packages/sdk-components-animation/src/stagger-animation.ws.ts

@@ -1,5 +1,5 @@
 import { StaggerAnimationIcon } from "@webstudio-is/icons/svg";
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { div } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/stagger-animation.props";
 
@@ -14,12 +14,7 @@ export const meta: WsComponentMeta = {
     category: "none",
     children: ["instance"],
   },
-  presetStyle: {
-    div,
-  },
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
+  presetStyle: { div },
   initialProps: ["slidingWindow", "easing"],
+  props,
 };

packages/sdk-components-animation/src/video-animation.ws.ts

@@ -1,5 +1,5 @@
 import { PlayIcon } from "@webstudio-is/icons/svg";
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { props } from "./__generated__/video-animation.props";
 import { div } from "@webstudio-is/sdk/normalize.css";
 
@@ -10,12 +10,7 @@ export const meta: WsComponentMeta = {
     category: "none",
     children: ["instance"],
   },
-  presetStyle: {
-    div,
-  },
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  presetStyle: { div },
   props,
   initialProps: ["timeline"],
 };

packages/sdk-components-react/package.json

@@ -23,11 +23,6 @@
       "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js"
     },
-    "./props": {
-      "webstudio": "./src/props.ts",
-      "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js"
-    },
     "./hooks": {
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",

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

@@ -3,7 +3,6 @@ import {
   defaultStates,
   type PresetStyle,
   type WsComponentMeta,
-  type WsComponentPropsMeta,
 } from "@webstudio-is/sdk";
 import type { defaultTag } from "./blockquote";
 import { props } from "./__generated__/blockquote.props";
@@ -64,9 +63,6 @@ export const meta: WsComponentMeta = {
   icon: BlockquoteIcon,
   states: defaultStates,
   presetStyle,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["id", "class", "cite"],
   props,
-  initialProps: ["id", "className", "cite"],
 };

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

@@ -3,7 +3,6 @@ import {
   defaultStates,
   type PresetStyle,
   type WsComponentMeta,
-  type WsComponentPropsMeta,
 } from "@webstudio-is/sdk";
 import { body } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/body.props";
@@ -27,9 +26,6 @@ export const meta: WsComponentMeta = {
   icon: BodyIcon,
   states: defaultStates,
   presetStyle,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["id", "class"],
   props,
-  initialProps: ["id", "className"],
 };

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

@@ -1,26 +1,13 @@
 import { BoldIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import { defaultStates, type WsComponentMeta } from "@webstudio-is/sdk";
 import { b } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/bold.props";
-import type { defaultTag } from "./bold";
-
-const presetStyle = {
-  b,
-} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  presetStyle: { b },
+  initialProps: ["id", "class"],
   props,
-  initialProps: ["id", "className"],
 };

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

@@ -1,9 +1,5 @@
 import { BoxIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import { defaultStates, type WsComponentMeta } from "@webstudio-is/sdk";
 import {
   div,
   address,
@@ -37,9 +33,7 @@ export const meta: WsComponentMeta = {
     section,
   },
   order: 0,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["tag", "id", "class"],
   props: {
     ...props,
     tag: {
@@ -61,5 +55,4 @@ export const propsMeta: WsComponentPropsMeta = {
       ],
     },
   },
-  initialProps: ["tag", "id", "className"],
 };

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

@@ -3,7 +3,6 @@ import {
   defaultStates,
   type PresetStyle,
   type WsComponentMeta,
-  type WsComponentPropsMeta,
 } from "@webstudio-is/sdk";
 import { button } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/button.props";
@@ -21,9 +20,6 @@ export const meta: WsComponentMeta = {
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" },
   ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["id", "class", "type", "aria-label"],
   props,
-  initialProps: ["id", "className", "type", "aria-label"],
 };

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

@@ -1,7 +1,6 @@
 import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
-  type WsComponentPropsMeta,
   type PresetStyle,
   defaultStates,
 } from "@webstudio-is/sdk";
@@ -32,9 +31,6 @@ export const meta: WsComponentMeta = {
     { selector: ":read-only", label: "Read Only" },
     { selector: ":read-write", label: "Read Write" },
   ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
   props,
-  initialProps: ["id", "className", "name", "value", "required", "checked"],
 };

packages/sdk-components-react/src/code-text.ws.ts

@@ -3,7 +3,6 @@ import {
   defaultStates,
   type PresetStyle,
   type WsComponentMeta,
-  type WsComponentPropsMeta,
 } from "@webstudio-is/sdk";
 import { code } from "@webstudio-is/sdk/normalize.css";
 import type { defaultTag } from "./code-text";
@@ -51,9 +50,7 @@ export const meta: WsComponentMeta = {
   states: defaultStates,
   presetStyle,
   order: 5,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["id", "class", "lang", "code"],
   props: {
     ...props,
     code: {
@@ -62,5 +59,4 @@ export const propsMeta: WsComponentPropsMeta = {
       type: "string",
     },
   },
-  initialProps: ["id", "className", "lang", "code"],
 };

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

@@ -3,7 +3,6 @@ import {
   defaultStates,
   type PresetStyle,
   type WsComponentMeta,
-  type WsComponentPropsMeta,
 } from "@webstudio-is/sdk";
 import { form } from "@webstudio-is/sdk/normalize.css";
 import type { defaultTag } from "./form";
@@ -24,9 +23,6 @@ export const meta: WsComponentMeta = {
   states: defaultStates,
   presetStyle,
   order: 0,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
+  initialProps: ["id", "class", "action"],
   props,
-  initialProps: ["id", "className", "action"],
 };

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

@@ -1,9 +1,5 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 
 export const meta: WsComponentMeta = {
   icon: "",
 };
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {},
-};

packages/sdk-components-react/src/head-link.ws.ts

@@ -1,8 +1,5 @@
 import { ResourceIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { props } from "./__generated__/head-link.props";
 
 export const meta: WsComponentMeta = {
@@ -11,9 +8,6 @@ export const meta: WsComponentMeta = {
     category: "none",
     children: [],
   },
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
   initialProps: ["rel", "hrefLang", "href", "type", "as"],
+  props,
 };

packages/sdk-components-react/src/head-meta.ws.ts

@@ -1,8 +1,5 @@
 import { WindowInfoIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { props } from "./__generated__/head-meta.props";
 
 export const meta: WsComponentMeta = {
@@ -11,9 +8,6 @@ export const meta: WsComponentMeta = {
     category: "none",
     children: [],
   },
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
   initialProps: ["name", "property", "content"],
+  props,
 };

packages/sdk-components-react/src/head-slot.ws.ts

@@ -1,8 +1,5 @@
 import { HeaderIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { props } from "./__generated__/head-slot.props";
 
 export const meta: WsComponentMeta = {
@@ -12,9 +9,5 @@ export const meta: WsComponentMeta = {
     category: "instance",
     children: ["HeadLink", "HeadMeta", "HeadTitle"],
   },
-};
-
-export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: [],
 };