@webstudio-is/sdk-components-animation 0.203.0 → 0.205.0

package/lib/animate-children.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { animationCanPlayOnCanvasProperty as o } from "./shared/consts.js";
+const c = m(
+  ({ debug: t = !1, action: n, ...i }, s) => /* @__PURE__ */ r("div", { ref: s, style: { display: "contents" }, ...i })
+), a = "AnimateChildren";
+c.displayName = a;
+const e = "@webstudio-is/sdk-components-animation", h = {
+  onNavigatorUnselect: (t, n) => {
+    n.instancePath.length > 0 && n.instancePath[0].component === `${e}:${a}` && t.setMemoryProp(
+      n.instancePath[0],
+      o,
+      void 0
+    );
+  },
+  onNavigatorSelect: (t, n) => {
+    n.instancePath.length > 0 && n.instancePath[0].component === `${e}:${a}` && t.setMemoryProp(
+      n.instancePath[0],
+      o,
+      !0
+    );
+  }
+};
+export {
+  c as AnimateChildren,
+  h as hooksAnimateChildren
+};

package/lib/components.js

@@ -1,4 +1,4 @@
-import { Scroll as l } from "./scroll.js";
+import { AnimateChildren as i } from "./animate-children.js";
 export {
-  l as Scroll
+  i as AnimateChildren
 };

package/lib/hooks.js

@@ -1,4 +1,5 @@
-const o = [];
+import { hooksAnimateChildren as o } from "./animate-children.js";
+const t = [o];
 export {
-  o as hooks
+  t as hooks
 };

package/lib/metas.js

@@ -1 +1,4 @@
-
+import { meta as m } from "./scroll.ws.js";
+export {
+  m as AnimateChildren
+};

package/lib/props.js

@@ -1 +1,4 @@
-
+import { propsMeta as a } from "./scroll.ws.js";
+export {
+  a as AnimateChildren
+};

package/lib/scroll.ws.js

@@ -0,0 +1,23 @@
+import { SlotComponentIcon as n } from "@webstudio-is/icons/svg";
+const i = {
+  category: "general",
+  type: "container",
+  description: "Animate Children",
+  icon: n,
+  order: 5,
+  label: "Animate Children"
+}, t = {
+  props: {
+    action: {
+      required: !1,
+      control: "animationAction",
+      type: "animationAction",
+      description: "Animation Action"
+    }
+  },
+  initialProps: ["action"]
+};
+export {
+  i as meta,
+  t as propsMeta
+};

package/lib/shared/consts.js

@@ -0,0 +1,4 @@
+const a = "data-ws-animation-can-play-on-canvas";
+export {
+  a as animationCanPlayOnCanvasProperty
+};

package/lib/types/animate-children.d.ts

@@ -0,0 +1,10 @@
+import type { Hook } from "@webstudio-is/react-sdk";
+import type { AnimationAction } from "@webstudio-is/sdk";
+type ScrollProps = {
+    debug?: boolean;
+    children?: React.ReactNode;
+    action: AnimationAction;
+};
+export declare const AnimateChildren: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const hooksAnimateChildren: Hook;
+export {};

package/lib/types/components.d.ts

@@ -1 +1 @@
-export { Scroll } from "./scroll";
+export { AnimateChildren } from "./animate-children";

package/lib/types/metas.d.ts

@@ -1 +1 @@
-export {};
+export { meta as AnimateChildren } from "./scroll.ws";

package/lib/types/props.d.ts

@@ -1 +1 @@
-export {};
+export { propsMeta as AnimateChildren } from "./scroll.ws";

package/lib/types/scroll.ws.d.ts

@@ -0,0 +1,3 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/shared/consts.d.ts

@@ -0,0 +1 @@
+export declare const animationCanPlayOnCanvasProperty = "data-ws-animation-can-play-on-canvas";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-animation",
-  "version": "0.203.0",
+  "version": "0.205.0",
   "description": "Webstudio components for animation",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -45,32 +45,40 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
+    "change-case": "^5.4.4",
     "react-error-boundary": "^5.0.0",
     "scroll-timeline-polyfill": "^1.1.0",
-    "@webstudio-is/css-engine": "0.203.0",
-    "@webstudio-is/icons": "0.203.0",
-    "@webstudio-is/react-sdk": "0.203.0",
-    "@webstudio-is/sdk": "0.203.0"
+    "@webstudio-is/css-engine": "0.205.0",
+    "@webstudio-is/react-sdk": "0.205.0",
+    "@webstudio-is/icons": "0.205.0",
+    "@webstudio-is/sdk": "0.205.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
+    "@vitest/browser": "^3.0.4",
+    "fast-glob": "^3.3.2",
+    "playwright": "^1.50.1",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "type-fest": "^4.32.0",
+    "vitest": "^3.0.4",
+    "zod": "^3.22.4",
+    "@webstudio-is/css-data": "0.0.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/sdk-components-react": "0.203.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/template": "0.203.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/css-data": "0.0.0",
-    "@webstudio-is/design-system": "0.0.0"
+    "@webstudio-is/design-system": "0.0.0",
+    "@webstudio-is/sdk-components-react": "0.205.0",
+    "@webstudio-is/template": "0.205.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.template.tsx !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test": "vitest run",
+    "playwright-init": "playwright install --with-deps"
   }
 }

package/lib/scroll.js

@@ -1,8 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-const n = e(
-  ({ debug: s = !1, action: f, ...o }, r) => /* @__PURE__ */ t("div", { ref: r, style: { display: "contents" }, ...o })
-);
-export {
-  n as Scroll
-};

package/lib/types/scroll.d.ts

@@ -1,8 +0,0 @@
-import type { AnimationAction } from "./shared/animation-types";
-type ScrollProps = {
-    debug?: boolean;
-    children?: React.ReactNode;
-    action: AnimationAction;
-};
-export declare const Scroll: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/lib/types/shared/animation-types.d.ts

@@ -1,49 +0,0 @@
-import type { StyleValue } from "@webstudio-is/css-engine";
-export type KeyframeStyles = {
-    [property: string]: StyleValue | undefined;
-};
-export type AnimationKeyframe = {
-    offset: number | undefined;
-    styles: KeyframeStyles;
-};
-declare const RANGE_UNITS: readonly ["%", "px", "cm", "mm", "q", "in", "pt", "pc", "em", "rem", "ex", "rex", "cap", "rcap", "ch", "rch", "lh", "rlh", "vw", "svw", "lvw", "dvw", "vh", "svh", "lvh", "dvh", "vi", "svi", "lvi", "dvi", "vb", "svb", "lvb", "dvb", "vmin", "svmin", "lvmin", "dvmin", "vmax", "svmax", "lvmax", "dvmax"];
-export type RangeUnit = (typeof RANGE_UNITS)[number];
-export declare const isRangeUnit: (value: unknown) => value is RangeUnit;
-export type RangeUnitValue = {
-    type: "unit";
-    value: number;
-    unit: RangeUnit;
-};
-type KeyframeEffectOptions = {
-    easing?: string;
-    fill?: FillMode;
-};
-/**
- * Scroll does not support https://drafts.csswg.org/scroll-animations/#named-ranges
- * However, for simplicity and type unification with the view, we will use the names "start" and "end,"
- * which will be transformed as follows:
- * - "start" → `calc(0% + range)`
- * - "end" → `calc(100% - range)`
- */
-type ScrollNamedRange = "start" | "end";
-/**
- * Scroll does not support https://drafts.csswg.org/scroll-animations/#named-ranges
- * However, for simplicity and type unification with the view, we will use the names "start" and "end,"
- * See ScrollNamedRange type for more information.
- */
-export type ScrollRangeValue = [name: ScrollNamedRange, value: RangeUnitValue];
-type ScrollRangeOptions = {
-    rangeStart?: ScrollRangeValue | undefined;
-    rangeEnd?: ScrollRangeValue | undefined;
-};
-type ScrollAction = {
-    type: "scroll";
-    source?: "closest" | "nearest" | "root";
-    axis?: "block" | "inline" | "x" | "y";
-    animations: {
-        timing: KeyframeEffectOptions & ScrollRangeOptions;
-        keyframes: AnimationKeyframe[];
-    }[];
-};
-export type AnimationAction = ScrollAction;
-export {};