refactor: merge base and animation props with component metas

Related #5211

Author: TrySound

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/props.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/stagger-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"],
 };