experimental: Proof of concept of the Animation component using ScrollTimeline

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

@@ -0,0 +1,46 @@
+name: CI setup
+
+description: |
+  Sets up the CI environment for the project.
+
+inputs:
+  submodules-ssh-key:
+    description: "The SSH key to private submodules to use for the checkout"
+    required: true
+
+runs:
+  using: "composite"
+
+  steps:
+    - name: Set up SSH for Git
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        mkdir -p ~/.ssh
+        echo "${{ inputs.submodules-ssh-key }}" > ~/.ssh/id_ed25519
+        chmod 600 ~/.ssh/id_ed25519
+        ssh-keyscan github.com >> ~/.ssh/known_hosts
+      shell: bash
+
+    - name: Verify SSH Connection (Optional)
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        ssh -T [email protected] || true
+      shell: bash
+
+    - name: Verify SSH Connection (Optional)
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        echo Branch is ${{ github.event.pull_request.head.ref || github.ref_name }}
+      shell: bash
+
+    - name: Try checkout submodules to the same branch as main repo
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        ./submodules.sh ${{ github.event.pull_request.head.ref || github.ref_name }}
+      shell: bash
+
+    - name: Show main readme
+      if: ${{ inputs.submodules-ssh-key }}
+      run: |
+        cat ./packages/sdk-components-animation/private-src/README.md || echo "No README found"
+      shell: bash

.github/workflows/check-submodules.yml

@@ -0,0 +1,67 @@
+name: Check submodules
+
+on:
+  pull_request:
+
+# cancel in-progress runs on new commits to same PR (gitub.event.number)
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
+jobs:
+  checks:
+    timeout-minutes: 20
+
+    environment:
+      name: development
+
+    env:
+      DATABASE_URL: postgres://
+      AUTH_SECRET: test
+
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
+
+      - name: Check if any submodule branch matches github.ref_name
+        run: |
+          echo "C ${{ github.workflow }}-${{ github.event.number || github.sha }}"
+          # Get the current branch or tag name
+          REF_NAME="${{ github.event.pull_request.head.ref || github.ref_name }}"
+
+          echo "Branch is:" $REF_NAME
+
+          # List all submodule paths
+          SUBMODULES=$(git submodule status | awk '{print $2}')
+
+          # Check each submodule's branch
+          for SUBMODULE in $SUBMODULES; do
+            echo "Checking submodule: $SUBMODULE"
+            (
+              cd "$SUBMODULE"
+              # Get the current branch of the submodule
+              SUBMODULE_BRANCH=$(git rev-parse --abbrev-ref HEAD)
+              echo "Submodule branch: $SUBMODULE_BRANCH"
+
+              # Compare the submodule branch to the ref_name
+              if [ "$SUBMODULE_BRANCH" = "$REF_NAME" ]; then
+                echo "::error::Submodule '$SUBMODULE' is on branch '$SUBMODULE_BRANCH', which matches the current ref '$REF_NAME'."
+                exit 1
+              fi
+            )
+            if [ $? -ne 0 ]; then
+              exit 1 # Fail the workflow if any submodule branch matches
+            fi
+          done
+
+          echo "No submodule is on the same branch as the current ref '$REF_NAME'."

.github/workflows/chromatic.yml

@@ -20,12 +20,20 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    environment:
+      name: development
+
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 2 # we need to fetch at least parent commit to satisfy Chromatic
           ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
 
+      # Storybook with submodules
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
+
       - uses: ./.github/actions/ci-setup
 
       - name: Chromatic

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

@@ -30,6 +30,8 @@ jobs:
         with:
           ref: ${{ github.sha }} # HEAD commit instead of merge commit
 
+      # Do not checkout submodules, they are not needed for this workflow
+
       - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4

.github/workflows/cli-r2.yaml

@@ -31,6 +31,11 @@ jobs:
         with:
           ref: ${{ github.sha }} # HEAD commit instead of merge commit
 
+      # We need submodules here as this is used for the cloudflare build
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
+
       - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4

.github/workflows/fixtures-test.yml

@@ -9,6 +9,12 @@ on:
       builder-host:
         required: true
         type: string
+      environment:
+        required: true
+        type: string
+    secrets:
+      PRIVATE_GITHUB_DEPLOY_TOKEN:
+        required: true
 
 permissions:
   contents: read # to fetch code (actions/checkout)
@@ -23,6 +29,9 @@ jobs:
 
     runs-on: ${{ matrix.os }}
 
+    environment:
+      name: ${{ inputs.environment }}
+
     env:
       DATABASE_URL: postgres://
       AUTH_SECRET: test
@@ -32,7 +41,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+      # Test that everything is working with submodules
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: ./.github/actions/ci-setup
 

.github/workflows/main.yml

@@ -18,6 +18,15 @@ jobs:
   checks:
     timeout-minutes: 20
 
+    strategy:
+      matrix:
+        environment:
+          - empty
+          - development
+
+    environment:
+      name: ${{ matrix.environment }}
+
     env:
       DATABASE_URL: postgres://
       AUTH_SECRET: test
@@ -27,7 +36,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      # Will not checkout submodules on empty environment, and will on development
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: ./.github/actions/ci-setup
 
@@ -41,21 +55,35 @@ jobs:
 
       - run: echo ===SHA USED=== ${{ github.event.pull_request.head.sha || github.sha }} # todo: remove after check whats happening on main
 
-      - run: pnpm prettier --cache --check "**/*.{js,md,ts,tsx}"
+      - run: |
+          pnpm prettier --cache --check "**/*.{js,md,ts,tsx}"
+
+      - name: Lint
+        run: |
+          pnpm lint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
 
-      - run: pnpm lint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
+      - name: Test
+        run: |
+          pnpm -r test
 
-      - run: pnpm -r test
-      - run: pnpm --filter=@webstudio-is/prisma-client build
-      - run: pnpm -r typecheck
+      - name: Typecheck
+        run: |
+          pnpm -r typecheck
 
   check-size:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
+
+    environment:
+      name: development
 
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: ./.github/actions/ci-setup
 

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

@@ -5,7 +5,7 @@ on:
 
 # cancel in-progress runs on new commits to same PR (gitub.event.number)
 concurrency:
-  group: vercel-deploy-${{ github.workflow }}-${{ github.event.number || github.sha }}
+  group: vercel-deploy-${{ github.workflow }}-${{ github.sha }}
   cancel-in-progress: true
 
 permissions:
@@ -38,9 +38,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }} # HEAD commit instead of merge commit
+          ref: ${{ github.sha }}
+
+      - uses: ./.github/actions/submodules-checkout
+        with:
+          submodules-ssh-key: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
       - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -85,6 +90,11 @@ jobs:
     with:
       builder-url: ${{ needs.deployment.outputs.builder-url }}
       builder-host: ${{ needs.deployment.outputs.builder-host }}
+      environment: development
+    secrets:
+      # We are not passing the secret here (as it does not exist in the current environment).
+      # Instead, this serves as a signal to the calling workflow that it has permission to extract it from the environment.
+      PRIVATE_GITHUB_DEPLOY_TOKEN: ${{ secrets.PRIVATE_GITHUB_DEPLOY_TOKEN }}
 
   delete-github-deployments:
     needs: fixtures-test

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "packages/sdk-components-animation/private-src"]
+	path = packages/sdk-components-animation/private-src
+	url = [email protected]:webstudio-is/sdk-components-animation.git
+	branch = main

.storybook/main.ts

@@ -1,5 +1,19 @@
 import * as path from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
+import { existsSync, readdirSync } from "node:fs";
+
+const isFolderEmptyOrNotExists = (folderPath: string) => {
+  if (!existsSync(folderPath)) {
+    return true; // Folder does not exist
+  }
+  const contents = readdirSync(folderPath);
+
+  return contents.length === 0;
+};
+
+const hasPrivateFolders = !isFolderEmptyOrNotExists(
+  path.join(__dirname, "../../packages/sdk-components-animation/private-src")
+);
 
 const visualTestingStories: StorybookConfig["stories"] = [
   {
@@ -37,6 +51,10 @@ export default {
           directory: "../packages/sdk-components-react-radix",
           titlePrefix: "SDK Components React Radix",
         },
+        {
+          directory: "../packages/sdk-components-animation",
+          titlePrefix: "SDK Components Animation",
+        },
       ],
   framework: {
     name: "@storybook/react-vite",
@@ -50,6 +68,10 @@ export default {
   async viteFinal(config) {
     return {
       ...config,
+      optimizeDeps: {
+        exclude: ["scroll-timeline-polyfill"],
+      },
+
       define: {
         ...config.define,
         // storybook use "util" package internally which is bundled with stories
@@ -59,7 +81,17 @@ export default {
       },
       resolve: {
         ...config.resolve,
-        conditions: ["webstudio", "import", "module", "browser", "default"],
+        conditions: hasPrivateFolders
+          ? [
+              "webstudio-private",
+              "webstudio",
+              "import",
+              "module",
+              "browser",
+              "default",
+            ]
+          : ["webstudio", "import", "module", "browser", "default"],
+
         alias: [
           {
             find: "~",

@types/scroll-timeline.d.ts

@@ -0,0 +1,14 @@
+type ScrollAxis = "block" | "inline" | "x" | "y";
+
+interface ScrollTimelineOptions {
+  source?: Element | Document | null;
+  axis?: ScrollAxis;
+}
+
+declare class ScrollTimeline extends AnimationTimeline {
+  constructor(options?: ScrollTimelineOptions);
+}
+
+declare class ViewTimeline extends ScrollTimeline {
+  constructor(options?: ScrollTimelineOptions);
+}