@webstudio-is/sdk-components-animation 0.0.0-2738e1e → 0.0.0-50b8685

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,36 @@
1
+ const e = {
2
+ easing: {
3
+ required: !1,
4
+ control: "select",
5
+ type: "string",
6
+ defaultValue: "linear",
7
+ options: [
8
+ "linear",
9
+ "easeIn",
10
+ "easeInCubic",
11
+ "easeInQuart",
12
+ "easeOut",
13
+ "easeOutCubic",
14
+ "easeOutQuart",
15
+ "ease",
16
+ "easeInOutCubic",
17
+ "easeInOutQuart"
18
+ ]
19
+ },
20
+ slidingWindow: {
21
+ required: !1,
22
+ control: "number",
23
+ type: "number",
24
+ defaultValue: 5
25
+ },
26
+ splitBy: {
27
+ required: !1,
28
+ control: "select",
29
+ type: "string",
30
+ defaultValue: "char",
31
+ options: ["char", "space", 'symbol "#"', 'symbol "~"']
32
+ }
33
+ };
34
+ export {
35
+ e as props
36
+ };
@@ -0,0 +1,27 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { animationCanPlayOnCanvasAttribute as o } from "@webstudio-is/react-sdk";
3
+ import { forwardRef as m } from "react";
4
+ const c = m(
5
+ ({ debug: n = !1, action: t, ...e }, s) => /* @__PURE__ */ r("div", { ref: s, style: { display: "contents" }, ...e })
6
+ ), a = "AnimateChildren";
7
+ c.displayName = a;
8
+ const i = "@webstudio-is/sdk-components-animation", h = {
9
+ onNavigatorUnselect: (n, t) => {
10
+ t.instancePath.length > 0 && t.instancePath[0].component === `${i}:${a}` && n.setMemoryProp(
11
+ t.instancePath[0],
12
+ o,
13
+ void 0
14
+ );
15
+ },
16
+ onNavigatorSelect: (n, t) => {
17
+ t.instancePath.length > 0 && t.instancePath[0].component === `${i}:${a}` && n.setMemoryProp(
18
+ t.instancePath[0],
19
+ o,
20
+ !0
21
+ );
22
+ }
23
+ };
24
+ export {
25
+ c as AnimateChildren,
26
+ h as hooksAnimateChildren
27
+ };
@@ -0,0 +1,27 @@
1
+ import { SlotComponentIcon as n } from "@webstudio-is/icons/svg";
2
+ const o = {
3
+ category: "general",
4
+ type: "container",
5
+ description: "Animate Children",
6
+ icon: n,
7
+ order: 5,
8
+ label: "Animate Children",
9
+ constraints: {
10
+ relation: "child",
11
+ text: !1
12
+ }
13
+ }, i = {
14
+ props: {
15
+ action: {
16
+ required: !1,
17
+ control: "animationAction",
18
+ type: "animationAction",
19
+ description: "Animation Action"
20
+ }
21
+ },
22
+ initialProps: ["action"]
23
+ };
24
+ export {
25
+ o as meta,
26
+ i as propsMeta
27
+ };
@@ -0,0 +1,9 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { forwardRef as t } from "react";
3
+ const a = t(
4
+ ({ slidingWindow: o = 5, easing: m = "linear", splitBy: s = "char", ...i }, e) => /* @__PURE__ */ r("div", { ref: e, ...i })
5
+ ), n = "AnimateText";
6
+ a.displayName = n;
7
+ export {
8
+ a as AnimateText
9
+ };
@@ -0,0 +1,24 @@
1
+ import { TextIcon as t } from "@webstudio-is/icons/svg";
2
+ import { props as e } from "./__generated__/animate-text.props.js";
3
+ const o = {
4
+ category: "general",
5
+ type: "container",
6
+ description: "Animate Text",
7
+ icon: t,
8
+ order: 6,
9
+ label: "Animate Text",
10
+ constraints: [
11
+ { relation: "parent", component: { $eq: "AnimateChildren" } },
12
+ {
13
+ relation: "child",
14
+ text: !1
15
+ }
16
+ ]
17
+ }, r = {
18
+ props: e,
19
+ initialProps: ["slidingWindow", "easing", "splitBy"]
20
+ };
21
+ export {
22
+ o as meta,
23
+ r as propsMeta
24
+ };
package/lib/components.js CHANGED
@@ -1 +1,6 @@
1
-
1
+ import { AnimateChildren as t } from "./animate-children.js";
2
+ import { AnimateText as o } from "./animate-text.js";
3
+ export {
4
+ t as AnimateChildren,
5
+ o as AnimateText
6
+ };
package/lib/hooks.js CHANGED
@@ -1,4 +1,5 @@
1
- const o = [];
1
+ import { hooksAnimateChildren as o } from "./animate-children.js";
2
+ const t = [o];
2
3
  export {
3
- o as hooks
4
+ t as hooks
4
5
  };
package/lib/metas.js CHANGED
@@ -1 +1,6 @@
1
-
1
+ import { meta as a } from "./animate-children.ws.js";
2
+ import { meta as r } from "./animate-text.ws.js";
3
+ export {
4
+ a as AnimateChildren,
5
+ r as AnimateText
6
+ };
package/lib/props.js CHANGED
@@ -1 +1,6 @@
1
-
1
+ import { propsMeta as t } from "./animate-children.ws.js";
2
+ import { propsMeta as o } from "./animate-text.ws.js";
3
+ export {
4
+ t as AnimateChildren,
5
+ o as AnimateText
6
+ };
@@ -0,0 +1,2 @@
1
+ import type { PropMeta } from "@webstudio-is/sdk";
2
+ export declare const props: Record<string, PropMeta>;
@@ -0,0 +1,2 @@
1
+ import type { PropMeta } from "@webstudio-is/sdk";
2
+ export declare const props: Record<string, PropMeta>;
@@ -0,0 +1,10 @@
1
+ import { type Hook } from "@webstudio-is/react-sdk";
2
+ import type { AnimationAction } from "@webstudio-is/sdk";
3
+ type ScrollProps = {
4
+ debug?: boolean;
5
+ children?: React.ReactNode;
6
+ action: AnimationAction;
7
+ };
8
+ export declare const AnimateChildren: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;
9
+ export declare const hooksAnimateChildren: Hook;
10
+ export {};
@@ -0,0 +1,3 @@
1
+ import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
2
+ export declare const meta: WsComponentMeta;
3
+ export declare const propsMeta: WsComponentPropsMeta;
@@ -0,0 +1,26 @@
1
+ declare const easings: {
2
+ linear: boolean;
3
+ easeIn: boolean;
4
+ easeInCubic: boolean;
5
+ easeInQuart: boolean;
6
+ easeOut: boolean;
7
+ easeOutCubic: boolean;
8
+ easeOutQuart: boolean;
9
+ ease: boolean;
10
+ easeInOutCubic: boolean;
11
+ easeInOutQuart: boolean;
12
+ };
13
+ declare const split: {
14
+ char: boolean;
15
+ space: boolean;
16
+ 'symbol "#"': boolean;
17
+ 'symbol "~"': boolean;
18
+ };
19
+ type AnimateChildrenProps = {
20
+ slidingWindow?: number;
21
+ easing?: keyof typeof easings;
22
+ children: React.ReactNode;
23
+ splitBy?: keyof typeof split;
24
+ };
25
+ export declare const AnimateText: import("react").ForwardRefExoticComponent<AnimateChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
26
+ export {};
@@ -0,0 +1,3 @@
1
+ import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
2
+ export declare const meta: WsComponentMeta;
3
+ export declare const propsMeta: WsComponentPropsMeta;
@@ -1 +1,2 @@
1
- export {};
1
+ export { AnimateChildren } from "./animate-children";
2
+ export { AnimateText } from "./animate-text";
@@ -1 +1,2 @@
1
- export {};
1
+ export { meta as AnimateChildren } from "./animate-children.ws";
2
+ export { meta as AnimateText } from "./animate-text.ws";
@@ -1 +1,2 @@
1
- export {};
1
+ export { propsMeta as AnimateChildren } from "./animate-children.ws";
2
+ export { propsMeta as AnimateText } from "./animate-text.ws";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/sdk-components-animation",
3
- "version": "0.0.0-2738e1e",
3
+ "version": "0.0.0-50b8685",
4
4
  "description": "Webstudio components for animation",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -14,6 +14,7 @@
14
14
  ],
15
15
  "exports": {
16
16
  ".": {
17
+ "webstudio-private": "./private-src/components.ts",
17
18
  "webstudio": "./src/components.ts",
18
19
  "types": "./lib/types/components.d.ts",
19
20
  "import": "./lib/components.js"
@@ -44,26 +45,41 @@
44
45
  "react-dom": "18.3.0-canary-14898b6a9-20240318"
45
46
  },
46
47
  "dependencies": {
47
- "@webstudio-is/icons": "0.0.0-2738e1e",
48
- "@webstudio-is/react-sdk": "0.0.0-2738e1e",
49
- "@webstudio-is/sdk": "0.0.0-2738e1e"
48
+ "change-case": "^5.4.4",
49
+ "nanostores": "^0.11.3",
50
+ "react-error-boundary": "^5.0.0",
51
+ "shallow-equal": "^3.1.0",
52
+ "@webstudio-is/css-engine": "0.0.0-50b8685",
53
+ "@webstudio-is/icons": "0.0.0-50b8685",
54
+ "@webstudio-is/sdk": "0.0.0-50b8685",
55
+ "@webstudio-is/react-sdk": "0.0.0-50b8685"
50
56
  },
51
57
  "devDependencies": {
52
58
  "@types/react": "^18.2.70",
53
59
  "@types/react-dom": "^18.2.25",
60
+ "@vitest/browser": "^3.0.8",
61
+ "fast-glob": "^3.3.2",
62
+ "playwright": "^1.50.1",
54
63
  "react": "18.3.0-canary-14898b6a9-20240318",
55
64
  "react-dom": "18.3.0-canary-14898b6a9-20240318",
65
+ "type-fest": "^4.37.0",
66
+ "vitest": "^3.0.8",
67
+ "zod": "^3.24.2",
68
+ "@webstudio-is/css-data": "0.0.0",
69
+ "@webstudio-is/design-system": "0.0.0",
70
+ "@webstudio-is/generate-arg-types": "0.0.0",
56
71
  "@webstudio-is/sdk-cli": "^0.94.0",
57
- "@webstudio-is/sdk-components-react": "0.0.0-2738e1e",
58
- "@webstudio-is/template": "0.0.0-2738e1e",
72
+ "@webstudio-is/template": "0.0.0-50b8685",
59
73
  "@webstudio-is/tsconfig": "1.0.7",
60
- "@webstudio-is/generate-arg-types": "0.0.0"
74
+ "@webstudio-is/sdk-components-react": "0.0.0-50b8685"
61
75
  },
62
76
  "scripts": {
63
77
  "build": "vite build --config ../../vite.sdk-components.config.ts",
64
78
  "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\"",
65
79
  "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
66
80
  "dts": "tsc --project tsconfig.dts.json",
67
- "typecheck": "tsc"
81
+ "typecheck": "tsc",
82
+ "test": "vitest run",
83
+ "playwright-init": "playwright install --with-deps"
68
84
  }
69
85
  }
@@ -1,15 +0,0 @@
1
- export declare const animation: Record<string, {
2
- displayName: string;
3
- } & ((props: Record<string, unknown> & Record<`${string}:expression`, string> & {
4
- "ws:id"?: string;
5
- "ws:label"?: string;
6
- "ws:style"?: import("@webstudio-is/template").TemplateStyleDecl[];
7
- "ws:show"?: boolean | {
8
- chunks: string[];
9
- variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter | import("@webstudio-is/template").ResourceValue>;
10
- };
11
- children?: import("react").ReactNode | {
12
- chunks: string[];
13
- variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter | import("@webstudio-is/template").ResourceValue>;
14
- } | import("@webstudio-is/template").PlaceholderValue;
15
- }) => import("react").ReactNode)>;