Skip to content

Commit 68a28b4

Browse files
istarkovistarkov
authored
experimental: Proof of concept of the Animation component using ScrollTimeline (#4797)
## Description ref #2645 Proof of Concept for the Animation Component Using ScrollTimeline For FF and Safari `scroll-timeline-polyfill` is used. SSR Support https://animate.development.webstudio.is/playground Storybook Part 1. https://6382151c8b47d4399fb9fc69-limlyrmprp.chromatic.com/?path=/story/sdk-components-animation-scroll-animations--in-out Next steps: - Add stories with additional examples i.e. closest usage, images etc. https://scroll-driven-animations.style/ - Add support to view animations - Add view animations examples - Add enter/leave actions and animations support - Builder UI - Add lottie, rive etc compatibility (should work through context.getAnimations()[0].effect.getComputedTiming().progress) ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file
1 parent 65e9e80 commit 68a28b4

24 files changed

+581
-24
lines changed

‎.github/actions/submodules-checkout/action.yml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: CI setup
2+
3+
description: |
4+
Sets up the CI environment for the project.
5+
6+
inputs:
7+
submodules-ssh-key:
8+
description: "The SSH key to private submodules to use for the checkout"
9+
required: true
10+
11+
runs:
12+
using: "composite"
13+
14+
steps:
15+
- name: Set up SSH for Git
16+
if: ${{ inputs.submodules-ssh-key }}
17+
run: |
18+
mkdir -p ~/.ssh
19+
echo "${{ inputs.submodules-ssh-key }}" > ~/.ssh/id_ed25519
20+
chmod 600 ~/.ssh/id_ed25519
21+
ssh-keyscan github.com >> ~/.ssh/known_hosts
22+
shell: bash
23+
24+
- name: Verify SSH Connection (Optional)
25+
if: ${{ inputs.submodules-ssh-key }}
26+
run: |
27+
ssh -T [email protected] || true
28+
shell: bash
29+
30+
- name: Verify SSH Connection (Optional)
31+
if: ${{ inputs.submodules-ssh-key }}
32+
run: |
33+
echo Branch is ${{ github.event.pull_request.head.ref || github.ref_name }}
34+
shell: bash
35+
36+
- name: Try checkout submodules to the same branch as main repo
37+
if: ${{ inputs.submodules-ssh-key }}
38+
run: |
39+
./submodules.sh ${{ github.event.pull_request.head.ref || github.ref_name }}
40+
shell: bash
41+
42+
- name: Show main readme
43+
if: ${{ inputs.submodules-ssh-key }}
44+
run: |
45+
cat ./packages/sdk-components-animation/private-src/README.md || echo "No README found"
46+
shell: bash

‎.github/workflows/check-submodules.yml‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
name: Check submodules
2+
3+
on:
4+
pull_request:
5+
6+
# cancel in-progress runs on new commits to same PR (gitub.event.number)
7+
concurrency:
8+
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
9+
cancel-in-progress: true
10+
11+
permissions:
12+
contents: read # to fetch code (actions/checkout)
13+
14+
jobs:
15+
checks:
16+
timeout-minutes: 20
17+
18+
environment:
19+
name: development
20+
21+
env:
22+
DATABASE_URL: postgres://
23+
AUTH_SECRET: test
24+
25+
runs-on: ubuntu-24.04-arm
26+
27+
steps:
28+
- uses: actions/checkout@v4
29+
with:
30+
ref: ${{ github.event.pull_request.head.sha || github.sha }}
31+
32+
- uses: ./.github/actions/submodules-checkout
33+
with:
34+
submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
35+
36+
- name: Check if any submodule branch matches github.ref_name
37+
run: |
38+
echo "C ${{ github.workflow }}-${{ github.event.number || github.sha }}"
39+
# Get the current branch or tag name
40+
REF_NAME="${{ github.event.pull_request.head.ref || github.ref_name }}"
41+
42+
echo "Branch is:" $REF_NAME
43+
44+
# List all submodule paths
45+
SUBMODULES=$(git submodule status | awk '{print $2}')
46+
47+
# Check each submodule's branch
48+
for SUBMODULE in $SUBMODULES; do
49+
echo "Checking submodule: $SUBMODULE"
50+
(
51+
cd "$SUBMODULE"
52+
# Get the current branch of the submodule
53+
SUBMODULE_BRANCH=$(git rev-parse --abbrev-ref HEAD)
54+
echo "Submodule branch: $SUBMODULE_BRANCH"
55+
56+
# Compare the submodule branch to the ref_name
57+
if [ "$SUBMODULE_BRANCH" = "$REF_NAME" ]; then
58+
echo "::error::Submodule '$SUBMODULE' is on branch '$SUBMODULE_BRANCH', which matches the current ref '$REF_NAME'."
59+
exit 1
60+
fi
61+
)
62+
if [ $? -ne 0 ]; then
63+
exit 1 # Fail the workflow if any submodule branch matches
64+
fi
65+
done
66+
67+
echo "No submodule is on the same branch as the current ref '$REF_NAME'."

‎.github/workflows/chromatic.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,20 @@ jobs:
2020

2121
runs-on: ubuntu-latest
2222

23+
environment:
24+
name: development
25+
2326
steps:
2427
- uses: actions/checkout@v4
2528
with:
2629
fetch-depth: 2 # we need to fetch at least parent commit to satisfy Chromatic
2730
ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
2831

32+
# Storybook with submodules
33+
- uses: ./.github/actions/submodules-checkout
34+
with:
35+
submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
36+
2937
- uses: ./.github/actions/ci-setup
3038

3139
- name: Chromatic

‎.github/workflows/cli-r2-static.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ jobs:
3030
with:
3131
ref: ${{ github.sha }} # HEAD commit instead of merge commit
3232

33+
# Do not checkout submodules, they are not needed for this workflow
34+
3335
- uses: pnpm/action-setup@v4
3436

3537
- uses: actions/setup-node@v4

‎.github/workflows/cli-r2.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ jobs:
3131
with:
3232
ref: ${{ github.sha }} # HEAD commit instead of merge commit
3333

34+
# We need submodules here as this is used for the cloudflare build
35+
- uses: ./.github/actions/submodules-checkout
36+
with:
37+
submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
38+
3439
- uses: pnpm/action-setup@v4
3540

3641
- uses: actions/setup-node@v4

‎.github/workflows/fixtures-test.yml‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ on:
99
builder-host:
1010
required: true
1111
type: string
12+
environment:
13+
required: true
14+
type: string
15+
secrets:
16+
PRIVATE_GITHUB_DEPLOY_TOKEN:
17+
required: true
1218

1319
permissions:
1420
contents: read # to fetch code (actions/checkout)
@@ -23,6 +29,9 @@ jobs:
2329

2430
runs-on: ${{ matrix.os }}
2531

32+
environment:
33+
name: ${{ inputs.environment }}
34+
2635
env:
2736
DATABASE_URL: postgres://
2837
AUTH_SECRET: test
@@ -32,7 +41,11 @@ jobs:
3241
steps:
3342
- uses: actions/checkout@v4
3443
with:
35-
ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
44+
ref: ${{ github.event.pull_request.head.sha || github.sha }}
45+
# Test that everything is working with submodules
46+
- uses: ./.github/actions/submodules-checkout
47+
with:
48+
submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
3649

3750
- uses: ./.github/actions/ci-setup
3851

‎.github/workflows/main.yml‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,15 @@ jobs:
1818
checks:
1919
timeout-minutes: 20
2020

21+
strategy:
22+
matrix:
23+
environment:
24+
- empty
25+
- development
26+
27+
environment:
28+
name: ${{ matrix.environment }}
29+
2130
env:
2231
DATABASE_URL: postgres://
2332
AUTH_SECRET: test
@@ -27,7 +36,12 @@ jobs:
2736
steps:
2837
- uses: actions/checkout@v4
2938
with:
30-
ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
39+
ref: ${{ github.event.pull_request.head.sha || github.sha }}
40+
41+
# Will not checkout submodules on empty environment, and will on development
42+
- uses: ./.github/actions/submodules-checkout
43+
with:
44+
submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
3145

3246
- uses: ./.github/actions/ci-setup
3347

@@ -41,21 +55,35 @@ jobs:
4155

4256
- run: echo ===SHA USED=== ${{ github.event.pull_request.head.sha || github.sha }} # todo: remove after check whats happening on main
4357

44-
- run: pnpm prettier --cache --check "**/*.{js,md,ts,tsx}"
58+
- run: |
59+
pnpm prettier --cache --check "**/*.{js,md,ts,tsx}"
60+
61+
- name: Lint
62+
run: |
63+
pnpm lint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
4564
46-
- run: pnpm lint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
65+
- name: Test
66+
run: |
67+
pnpm -r test
4768
48-
- run: pnpm -r test
49-
- run: pnpm --filter=@webstudio-is/prisma-client build
50-
- run: pnpm -r typecheck
69+
- name: Typecheck
70+
run: |
71+
pnpm -r typecheck
5172
5273
check-size:
53-
runs-on: ubuntu-latest
74+
runs-on: ubuntu-24.04-arm
75+
76+
environment:
77+
name: development
5478

5579
steps:
5680
- uses: actions/checkout@v4
5781
with:
58-
ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
82+
ref: ${{ github.event.pull_request.head.sha || github.sha }}
83+
84+
- uses: ./.github/actions/submodules-checkout
85+
with:
86+
submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
5987

6088
- uses: ./.github/actions/ci-setup
6189

‎.github/workflows/vercel-deploy-staging.yml‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ on:
55

66
# cancel in-progress runs on new commits to same PR (gitub.event.number)
77
concurrency:
8-
group: vercel-deploy-${{ github.workflow }}-${{ github.event.number || github.sha }}
8+
group: vercel-deploy-${{ github.workflow }}-${{ github.sha }}
99
cancel-in-progress: true
1010

1111
permissions:
@@ -38,9 +38,14 @@ jobs:
3838
steps:
3939
- uses: actions/checkout@v4
4040
with:
41-
ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
41+
ref: ${{ github.sha }}
42+
43+
- uses: ./.github/actions/submodules-checkout
44+
with:
45+
submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
4246

4347
- uses: pnpm/action-setup@v4
48+
4449
- uses: actions/setup-node@v4
4550
with:
4651
node-version: 20
@@ -85,6 +90,11 @@ jobs:
8590
with:
8691
builder-url: ${{ needs.deployment.outputs.builder-url }}
8792
builder-host: ${{ needs.deployment.outputs.builder-host }}
93+
environment: development
94+
secrets:
95+
# We are not passing the secret here (as it does not exist in the current environment).
96+
# Instead, this serves as a signal to the calling workflow that it has permission to extract it from the environment.
97+
PRIVATE_GITHUB_DEPLOY_TOKEN: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
8898

8999
delete-github-deployments:
90100
needs: fixtures-test

‎.gitmodules‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
[submodule "packages/sdk-components-animation/private-src"]
2+
path = packages/sdk-components-animation/private-src
3+
url = [email protected]:webstudio-is/sdk-components-animation.git
4+
branch = main

‎.storybook/main.ts‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
import * as path from "node:path";
22
import type { StorybookConfig } from "@storybook/react-vite";
3+
import { existsSync, readdirSync } from "node:fs";
4+
5+
const isFolderEmpty = (folderPath: string) => {
6+
if (!existsSync(folderPath)) {
7+
return true; // Folder does not exist
8+
}
9+
const contents = readdirSync(folderPath);
10+
11+
return contents.length === 0;
12+
};
13+
14+
const hasPrivateFolders = !isFolderEmpty(
15+
path.join(__dirname, "../../packages/sdk-components-animation/private-src")
16+
);
317

418
const visualTestingStories: StorybookConfig["stories"] = [
519
{
@@ -37,6 +51,10 @@ export default {
3751
directory: "../packages/sdk-components-react-radix",
3852
titlePrefix: "SDK Components React Radix",
3953
},
54+
{
55+
directory: "../packages/sdk-components-animation",
56+
titlePrefix: "SDK Components Animation",
57+
},
4058
],
4159
framework: {
4260
name: "@storybook/react-vite",
@@ -50,6 +68,10 @@ export default {
5068
async viteFinal(config) {
5169
return {
5270
...config,
71+
optimizeDeps: {
72+
exclude: ["scroll-timeline-polyfill"],
73+
},
74+
5375
define: {
5476
...config.define,
5577
// storybook use "util" package internally which is bundled with stories
@@ -59,7 +81,17 @@ export default {
5981
},
6082
resolve: {
6183
...config.resolve,
62-
conditions: ["webstudio", "import", "module", "browser", "default"],
84+
conditions: hasPrivateFolders
85+
? [
86+
"webstudio-private",
87+
"webstudio",
88+
"import",
89+
"module",
90+
"browser",
91+
"default",
92+
]
93+
: ["webstudio", "import", "module", "browser", "default"],
94+
6395
alias: [
6496
{
6597
find: "~",

0 commit comments

Comments
 (0)