@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.
- package/lib/__generated__/animate-text.props.js +36 -0
- package/lib/animate-children.js +27 -0
- package/lib/animate-children.ws.js +27 -0
- package/lib/animate-text.js +9 -0
- package/lib/animate-text.ws.js +24 -0
- package/lib/components.js +6 -1
- package/lib/hooks.js +3 -2
- package/lib/metas.js +6 -1
- package/lib/props.js +6 -1
- package/lib/types/__generated__/animate-children.props.d.ts +2 -0
- package/lib/types/__generated__/animate-text.props.d.ts +2 -0
- package/lib/types/animate-children.d.ts +10 -0
- package/lib/types/animate-children.ws.d.ts +3 -0
- package/lib/types/animate-text.d.ts +26 -0
- package/lib/types/animate-text.ws.d.ts +3 -0
- package/lib/types/components.d.ts +2 -1
- package/lib/types/metas.d.ts +2 -1
- package/lib/types/props.d.ts +2 -1
- package/package.json +24 -8
- package/lib/types/shared/proxy.d.ts +0 -15
|
@@ -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
package/lib/hooks.js
CHANGED
package/lib/metas.js
CHANGED
package/lib/props.js
CHANGED
|
@@ -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,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 {};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export { AnimateChildren } from "./animate-children";
|
|
2
|
+
export { AnimateText } from "./animate-text";
|
package/lib/types/metas.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export { meta as AnimateChildren } from "./animate-children.ws";
|
|
2
|
+
export { meta as AnimateText } from "./animate-text.ws";
|
package/lib/types/props.d.ts
CHANGED
|
@@ -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-
|
|
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
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
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/
|
|
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/
|
|
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)>;
|