From 20072df2680fa2dbccd01a48f06e499e3eedc659 Mon Sep 17 00:00:00 2001 From: AMAGI / Jun Yuri Date: Sat, 8 Feb 2025 12:43:00 -0800 Subject: [PATCH] docs: storybook (#87) * feat: storybook init in vfx-js/core * Revert "feat: storybook init in vfx-js/core" This reverts commit 1d17afc9739a8321e82486602434a98831ce069e. * feat: storybook init in docs * docs: add preset stories * chore: update gitignore * chore: dark theme * docs: static build settings for storybook * chore: use npm-run-all2 * chore: chromatic config * fix: add outColor declaration in Tritone * chore: fix type declarations for images * docs: add time slider * refactor: move storybook to a dedicated package * chore: remove unused file * chore: add typedef * chore: build setting * feat: add seekbar * refactor: tidy * chore: tidy * test: add layout test * docs: add tests for zIndex * docs: add overlay and wrap tests * fix: build settings * chore: fmt * ci: add workflow for VRT on Chromatic --- .github/workflows/ci.yml | 41 +- .github/workflows/vrt.yml | 38 + package-lock.json | 2016 ++++++++++++++++- packages/docs/.gitignore | 5 +- packages/docs/package.json | 8 +- packages/docs/vite.config.ts | 5 +- packages/storybook/.gitignore | 3 + packages/storybook/.storybook/main.ts | 25 + packages/storybook/.storybook/manager.ts | 6 + packages/storybook/.storybook/preview.ts | 14 + packages/storybook/chromatic.config.json | 6 + packages/storybook/package.json | 27 + packages/storybook/src/Layout.stories.ts | 283 +++ packages/storybook/src/Presets.stories.ts | 83 + packages/storybook/src/Timer.css | 27 + packages/storybook/src/Timer.ts | 107 + packages/storybook/src/assets/jellyfish.webp | Bin 0 -> 15000 bytes .../storybook/src/assets/logo-640w-20p.svg | 8 + packages/storybook/src/preset.css | 50 + packages/storybook/src/types.d.ts | 8 + packages/storybook/tsconfig.json | 20 + packages/vfx-js/.gitignore | 1 + packages/vfx-js/package.json | 4 +- packages/vfx-js/src/constants.ts | 1 + turbo.json | 9 +- 25 files changed, 2742 insertions(+), 53 deletions(-) create mode 100644 .github/workflows/vrt.yml create mode 100644 packages/storybook/.gitignore create mode 100644 packages/storybook/.storybook/main.ts create mode 100644 packages/storybook/.storybook/manager.ts create mode 100644 packages/storybook/.storybook/preview.ts create mode 100644 packages/storybook/chromatic.config.json create mode 100644 packages/storybook/package.json create mode 100644 packages/storybook/src/Layout.stories.ts create mode 100644 packages/storybook/src/Presets.stories.ts create mode 100644 packages/storybook/src/Timer.css create mode 100644 packages/storybook/src/Timer.ts create mode 100644 packages/storybook/src/assets/jellyfish.webp create mode 100644 packages/storybook/src/assets/logo-640w-20p.svg create mode 100644 packages/storybook/src/preset.css create mode 100644 packages/storybook/src/types.d.ts create mode 100644 packages/storybook/tsconfig.json create mode 100644 packages/vfx-js/.gitignore diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b617376d..9dce6977 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,26 +1,21 @@ name: Test - on: - push: - branches: - - main - pull_request: - + push: + branches: + - main + pull_request: jobs: - test: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - node-version: "20" - cache: "npm" - cache-dependency-path: "**/package-lock.json" - - - name: Install dependencies - run: npm ci - - - name: Test - run: npm test + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: "20" + cache: "npm" + cache-dependency-path: "**/package-lock.json" + - name: Install dependencies + run: npm ci + - name: Test + run: npm test diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml new file mode 100644 index 00000000..35c0699f --- /dev/null +++ b/.github/workflows/vrt.yml @@ -0,0 +1,38 @@ +name: "Visual Regression Test" +on: + issue_comment: + types: [created] +jobs: + vrt: + # Trigger by PullRequest comments + if: ${{ github.event.issue.pull_request && github.event.comment.body == '/vrt' }} + runs-on: ubuntu-latest + steps: + - name: Get PR details + uses: actions/github-script@v7 + id: get-pr + with: + script: | + const { owner, repo } = context.repo; + const pr = await github.rest.pulls.get({ + owner, + repo, + pull_number: context.issue.number + }); + return pr.data; + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + cache-dependency-path: "**/package-lock.json" + - name: Install dependencies + run: npm ci + - name: Publish to Chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} diff --git a/package-lock.json b/package-lock.json index b2b60bc1..35ed5fba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,13 @@ "turbo": "^2.3.3" } }, + "node_modules/@adobe/css-tools": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.1.tgz", + "integrity": "sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@ampproject/remapping": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", @@ -725,6 +732,79 @@ "prettier": "^2.7.1" } }, + "node_modules/@chromatic-com/storybook": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-3.2.4.tgz", + "integrity": "sha512-5/bOOYxfwZ2BktXeqcCpOVAoR6UCoeART5t9FVy22hoo8F291zOuX4y3SDgm10B1GVU/ZTtJWPT2X9wZFlxYLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "chromatic": "^11.15.0", + "filesize": "^10.0.12", + "jsonfile": "^6.1.0", + "react-confetti": "^6.1.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=16.0.0", + "yarn": ">=1.22.18" + }, + "peerDependencies": { + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" + } + }, + "node_modules/@chromatic-com/storybook/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@chromatic-com/storybook/node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@chromatic-com/storybook/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/@chromatic-com/storybook/node_modules/universalify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -925,6 +1005,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -1384,6 +1465,24 @@ "node": ">=6 <7 || >=8" } }, + "node_modules/@mdx-js/react": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz", + "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/mdx": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "@types/react": ">=16", + "react": ">=16" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1702,46 +1801,1159 @@ ], "dev": true, "license": "MIT", - "optional": true, - "os": [ - "win32" - ] + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@shikijs/engine-oniguruma": { + "version": "1.26.1", + "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.26.1.tgz", + "integrity": "sha512-F5XuxN1HljLuvfXv7d+mlTkV7XukC1cawdtOo+7pKgPD83CAB1Sf8uHqP3PK0u7njFH0ZhoXE1r+0JzEgAQ+kg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@shikijs/types": "1.26.1", + "@shikijs/vscode-textmate": "^10.0.1" + } + }, + "node_modules/@shikijs/types": { + "version": "1.26.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.26.1.tgz", + "integrity": "sha512-d4B00TKKAMaHuFYgRf3L0gwtvqpW4hVdVwKcZYbBfAAQXspgkbWqnFfuFl3MDH6gLbsubOcr+prcnsqah3ny7Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.1", + "@types/hast": "^3.0.4" + } + }, + "node_modules/@shikijs/vscode-textmate": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.1.tgz", + "integrity": "sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@storybook/addon-actions": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.5.2.tgz", + "integrity": "sha512-g0gLesVSFgstUq5QphsLeC1vEdwNHgqo2TE0m+STM47832xbxBwmK6uvBeqi416xZvnt1TTKaaBr4uCRRQ64Ww==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "@types/uuid": "^9.0.1", + "dequal": "^2.0.2", + "polished": "^4.2.2", + "uuid": "^9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-backgrounds": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.5.2.tgz", + "integrity": "sha512-l9WkI4QHfINeFQkW9K0joaM7WweKktwIIyUPEvyoupHT4n9ccJHAlWjH4SBmzwI1j1Zt0G3t+bq8mVk/YK6Fsg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "memoizerific": "^1.11.3", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-controls": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.5.2.tgz", + "integrity": "sha512-wkzw2vRff4zkzdvC/GOlB2PlV0i973u8igSLeg34TWNEAa4bipwVHnFfIojRuP9eN1bZL/0tjuU5pKnbTqH7aQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "dequal": "^2.0.2", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-docs": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.5.2.tgz", + "integrity": "sha512-pRLJ/Qb/3XHpjS7ZAMaOZYtqxOuI8wPxVKYQ6n5rfMSj2jFwt5tdDsEJdhj2t5lsY8HrzEZi8ExuW5I5RoUoIQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@mdx-js/react": "^3.0.0", + "@storybook/blocks": "8.5.2", + "@storybook/csf-plugin": "8.5.2", + "@storybook/react-dom-shim": "8.5.2", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-docs/node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@storybook/addon-docs/node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/@storybook/addon-docs/node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/@storybook/addon-essentials": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.5.2.tgz", + "integrity": "sha512-MfojJKxDg0bnjOE0MfLSaPweAud1Esjaf1D9M8EYnpeFnKGZApcGJNRpHCDiHrS5BMr8hHa58RDVc7ObFTI4Dw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/addon-actions": "8.5.2", + "@storybook/addon-backgrounds": "8.5.2", + "@storybook/addon-controls": "8.5.2", + "@storybook/addon-docs": "8.5.2", + "@storybook/addon-highlight": "8.5.2", + "@storybook/addon-measure": "8.5.2", + "@storybook/addon-outline": "8.5.2", + "@storybook/addon-toolbars": "8.5.2", + "@storybook/addon-viewport": "8.5.2", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-highlight": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.5.2.tgz", + "integrity": "sha512-QjJfY+8e1bi6FeGfVlgxzv/I8DUyC83lZq8zfTY7nDUCVdmKi8VzmW0KgDo5PaEOFKs8x6LKJa+s5O0gFQaJMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-interactions": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.5.2.tgz", + "integrity": "sha512-Gn9Egk2OS0BkkHd671Y0pIqBr4noAOLUfnpxhHE8r0Tt7FmJFeVSN+dqK7hQeUmKL5jdSY25FTYROg65JmtGOA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "@storybook/instrumenter": "8.5.2", + "@storybook/test": "8.5.2", + "polished": "^4.2.2", + "ts-dedent": "^2.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-measure": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.5.2.tgz", + "integrity": "sha512-g7Kvrx8dqzeYWetpWYVVu4HaRzLAZVlOAlZYNfCH/aJHcFKp/p5zhPXnZh8aorxeCLHW1QSKcliaA4BNPEvTeg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-outline": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.5.2.tgz", + "integrity": "sha512-laMVLT1xluSqMa2mMzmS1kdKcjX0HI9Fw+7pM3r4drtGWtxpyBT32YFqKfWFIBhcd364ti2tDUz9FlygGQ1rKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-toolbars": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.5.2.tgz", + "integrity": "sha512-gHQtVCiq7HRqdYQLOmX8nhtV1Lqz4tOCj4BVodwwf8fUcHyNor+2FvGlQjngV2pIeCtxiM/qmG63UpTBp57ZMA==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/addon-viewport": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.5.2.tgz", + "integrity": "sha512-W+7nrMQmxHcUNGsXjmb/fak1mD0a5vf4y1hBhSM7/131t8KBsvEu4ral8LTUhc4ZzuU1eIUM0Qth7SjqHqm5bA==", + "dev": true, + "license": "MIT", + "dependencies": { + "memoizerific": "^1.11.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/blocks": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.5.2.tgz", + "integrity": "sha512-C6Bz/YTG5ZuyAzglqgqozYUWaS39j1PnkVuMNots6S3Fp8ZJ6iZOlQ+rpumiuvnbfD5rkEZG+614RWNyNlFy7g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/csf": "0.1.12", + "@storybook/icons": "^1.2.12", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "storybook": "^8.5.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/@storybook/builder-vite": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.5.2.tgz", + "integrity": "sha512-5YWCHmWtZ6oBEqpcGvAmBXVfeX+zssIGWE/UUUnjkmlXO7tHvFccikOLV7/p5VCHH21AbXN8F6mnptEsMPbqqg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/csf-plugin": "8.5.2", + "browser-assert": "^1.2.1", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2", + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" + } + }, + "node_modules/@storybook/components": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.5.2.tgz", + "integrity": "sha512-o5vNN30sGLTJBeGk5SKyekR4RfTpBTGs2LDjXGAmpl2MRhzd62ix8g+KIXSR0rQ55TCvKUl5VR2i99ttlRcEKw==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" + } + }, + "node_modules/@storybook/core": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.5.2.tgz", + "integrity": "sha512-rCOpXZo2XbdKVnZiv8oC9FId/gLkStpKGGL7hhdg/RyjcyUyTfhsvaf7LXKZH2A0n/UpwFxhF3idRfhgc1XiSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/csf": "0.1.12", + "better-opn": "^3.0.2", + "browser-assert": "^1.2.1", + "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0", + "esbuild-register": "^3.5.0", + "jsdoc-type-pratt-parser": "^4.0.0", + "process": "^0.11.10", + "recast": "^0.23.5", + "semver": "^7.6.2", + "util": "^0.12.5", + "ws": "^8.2.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/aix-ppc64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz", + "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/android-arm": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz", + "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/android-arm64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz", + "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/android-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz", + "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/darwin-arm64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz", + "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/darwin-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz", + "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/freebsd-arm64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz", + "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/freebsd-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz", + "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-arm": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz", + "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-arm64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz", + "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-ia32": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz", + "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-loong64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz", + "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-mips64el": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz", + "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-ppc64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz", + "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-riscv64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz", + "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-s390x": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz", + "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/linux-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz", + "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/netbsd-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz", + "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/openbsd-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz", + "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/sunos-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz", + "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/win32-arm64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz", + "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/win32-ia32": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz", + "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/@esbuild/win32-x64": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz", + "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@storybook/core/node_modules/esbuild": { + "version": "0.24.2", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz", + "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.24.2", + "@esbuild/android-arm": "0.24.2", + "@esbuild/android-arm64": "0.24.2", + "@esbuild/android-x64": "0.24.2", + "@esbuild/darwin-arm64": "0.24.2", + "@esbuild/darwin-x64": "0.24.2", + "@esbuild/freebsd-arm64": "0.24.2", + "@esbuild/freebsd-x64": "0.24.2", + "@esbuild/linux-arm": "0.24.2", + "@esbuild/linux-arm64": "0.24.2", + "@esbuild/linux-ia32": "0.24.2", + "@esbuild/linux-loong64": "0.24.2", + "@esbuild/linux-mips64el": "0.24.2", + "@esbuild/linux-ppc64": "0.24.2", + "@esbuild/linux-riscv64": "0.24.2", + "@esbuild/linux-s390x": "0.24.2", + "@esbuild/linux-x64": "0.24.2", + "@esbuild/netbsd-arm64": "0.24.2", + "@esbuild/netbsd-x64": "0.24.2", + "@esbuild/openbsd-arm64": "0.24.2", + "@esbuild/openbsd-x64": "0.24.2", + "@esbuild/sunos-x64": "0.24.2", + "@esbuild/win32-arm64": "0.24.2", + "@esbuild/win32-ia32": "0.24.2", + "@esbuild/win32-x64": "0.24.2" + } + }, + "node_modules/@storybook/csf": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.12.tgz", + "integrity": "sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==", + "dev": true, + "license": "MIT", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@storybook/csf-plugin": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.5.2.tgz", + "integrity": "sha512-EEQ3Vc9qIUbLH8tunzN/GSoyP3zPpNPKegZooYQbgVqA582Pel4Jnpn4uxGaOWtFCLhXMETV05X/7chGZtEujA==", + "dev": true, + "license": "MIT", + "dependencies": { + "unplugin": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/global": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz", + "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@storybook/html": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/html/-/html-8.5.2.tgz", + "integrity": "sha512-TGUnjXsZUTem0uY2ILuOaz3U2+p+ULXMQ2L11aMzXJR1wIL624XlVhVT/rzopqa239fMFdaeiJA5TootGuYKmw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/components": "8.5.2", + "@storybook/global": "^5.0.0", + "@storybook/manager-api": "8.5.2", + "@storybook/preview-api": "8.5.2", + "@storybook/theming": "8.5.2", + "ts-dedent": "^2.0.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/html-vite": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/html-vite/-/html-vite-8.5.2.tgz", + "integrity": "sha512-r5HKmZTSIX0SxPaZKfQ3wwLVgYHMI9hBpURuIsdwggkw8a4wwU2vhDaQbolFFQfSngFc/mVNZJrQH7JkEnlf4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/builder-vite": "8.5.2", + "@storybook/html": "8.5.2", + "magic-string": "^0.30.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/icons": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.3.2.tgz", + "integrity": "sha512-t3xcbCKkPvqyef8urBM0j/nP6sKtnlRkVgC+8JTbTAZQjaTmOjes3byEgzs89p4B/K6cJsg9wLW2k3SknLtYJw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" + } + }, + "node_modules/@storybook/instrumenter": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.5.2.tgz", + "integrity": "sha512-BbaUw9GXVzRg3Km95t2mRu4W6C1n1erjzll5maBaVe2+lV9MbCvBcdYwGUgjFNlQ/ETgq6vLfLOEtziycq/B6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "@vitest/utils": "^2.1.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/manager-api": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.5.2.tgz", + "integrity": "sha512-Cn+oINA6BOO2GmGHinGsOWnEpoBnurlZ9ekMq7H/c1SYMvQWNg5RlELyrhsnyhNd83fqFZy9Asb0RXI8oqz7DQ==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" + } + }, + "node_modules/@storybook/preview-api": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.5.2.tgz", + "integrity": "sha512-AOOaBjwnkFU40Fi68fvAnK0gMWPz6o/AmH44yDGsHgbI07UgqxLBKCTpjCGPlyQd5ezEjmGwwFTmcmq5dG8DKA==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" + } + }, + "node_modules/@storybook/react-dom-shim": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.5.2.tgz", + "integrity": "sha512-lt7XoaeWI8iPlWnWzIm/Wam9TpRFhlqP0KZJoKwDyHiCByqkeMrw5MJREyWq626nf34bOW8D6vkuyTzCHGTxKg==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/test": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.5.2.tgz", + "integrity": "sha512-F5WfD75m25ZRS19cSxCzHWJ/rH8jWwIjhBlhU+UW+5xjnTS1cJuC1yPT/5Jw0/0Aj9zG1atyfBUYnNHYtsBDYQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/csf": "0.1.12", + "@storybook/global": "^5.0.0", + "@storybook/instrumenter": "8.5.2", + "@testing-library/dom": "10.4.0", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/user-event": "14.5.2", + "@vitest/expect": "2.0.5", + "@vitest/spy": "2.0.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.5.2" + } + }, + "node_modules/@storybook/test/node_modules/@vitest/expect": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz", + "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/spy": "2.0.5", + "@vitest/utils": "2.0.5", + "chai": "^5.1.1", + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@storybook/test/node_modules/@vitest/pretty-format": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz", + "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@storybook/test/node_modules/@vitest/spy": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz", + "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==", + "dev": true, + "license": "MIT", + "dependencies": { + "tinyspy": "^3.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@storybook/test/node_modules/@vitest/utils": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz", + "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "2.0.5", + "estree-walker": "^3.0.3", + "loupe": "^3.1.1", + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@storybook/theming": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.5.2.tgz", + "integrity": "sha512-vro8vJx16rIE0UehawEZbxFFA4/VGYS20PMKP6Y6Fpsce0t2/cF/U9qg3jOzVb/XDwfx+ne3/V+8rjfWx8wwJw==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" + } + }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } }, - "node_modules/@shikijs/engine-oniguruma": { - "version": "1.26.1", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.26.1.tgz", - "integrity": "sha512-F5XuxN1HljLuvfXv7d+mlTkV7XukC1cawdtOo+7pKgPD83CAB1Sf8uHqP3PK0u7njFH0ZhoXE1r+0JzEgAQ+kg==", + "node_modules/@testing-library/jest-dom": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz", + "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==", "dev": true, "license": "MIT", "dependencies": { - "@shikijs/types": "1.26.1", - "@shikijs/vscode-textmate": "^10.0.1" + "@adobe/css-tools": "^4.4.0", + "aria-query": "^5.0.0", + "chalk": "^3.0.0", + "css.escape": "^1.5.1", + "dom-accessibility-api": "^0.6.3", + "lodash": "^4.17.21", + "redent": "^3.0.0" + }, + "engines": { + "node": ">=14", + "npm": ">=6", + "yarn": ">=1" } }, - "node_modules/@shikijs/types": { - "version": "1.26.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.26.1.tgz", - "integrity": "sha512-d4B00TKKAMaHuFYgRf3L0gwtvqpW4hVdVwKcZYbBfAAQXspgkbWqnFfuFl3MDH6gLbsubOcr+prcnsqah3ny7Q==", + "node_modules/@testing-library/jest-dom/node_modules/chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", "dev": true, "license": "MIT", "dependencies": { - "@shikijs/vscode-textmate": "^10.0.1", - "@types/hast": "^3.0.4" + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" } }, - "node_modules/@shikijs/vscode-textmate": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.1.tgz", - "integrity": "sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==", + "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz", + "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", "dev": true, "license": "MIT" }, + "node_modules/@testing-library/user-event": { + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "node_modules/@tweenjs/tween.js": { "version": "23.1.3", "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz", "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==", "license": "MIT" }, + "node_modules/@types/aria-query": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", + "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1840,6 +3052,13 @@ "@types/lodash": "*" } }, + "node_modules/@types/mdx": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", + "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/node": { "version": "22.10.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz", @@ -1927,6 +3146,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/uuid": { + "version": "9.0.8", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", + "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/webxr": { "version": "0.5.20", "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz", @@ -1937,6 +3163,10 @@ "resolved": "packages/vfx-js", "link": true }, + "node_modules/@vfx-js/storybook": { + "resolved": "packages/storybook", + "link": true + }, "node_modules/@vitejs/plugin-react": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz", @@ -2049,6 +3279,19 @@ "integrity": "sha512-eI883Nlag2hGIkhXxAnq8s4APpqXWuPL3Gbn2ghiU12UjLvfCbVqHK4XfXl3eLRTatqcMmeK7jws7IwWsGfbzw==", "license": "BSD-3-Clause" }, + "node_modules/acorn": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", + "dev": true, + "license": "MIT", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -2108,6 +3351,16 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/array-buffer-byte-length": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz", @@ -2166,6 +3419,19 @@ "node": ">=12" } }, + "node_modules/ast-types": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz", + "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.0.1" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -2209,6 +3475,19 @@ ], "license": "MIT" }, + "node_modules/better-opn": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz", + "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "open": "^8.0.4" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/better-path-resolve": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/better-path-resolve/-/better-path-resolve-1.0.0.tgz", @@ -2243,6 +3522,12 @@ "node": ">=8" } }, + "node_modules/browser-assert": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz", + "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==", + "dev": true + }, "node_modules/browserslist": { "version": "4.24.3", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz", @@ -2398,6 +3683,23 @@ "node": ">=12" } }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/chardet": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", @@ -2414,6 +3716,30 @@ "node": ">= 16" } }, + "node_modules/chromatic": { + "version": "11.25.1", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.25.1.tgz", + "integrity": "sha512-D0NdcGOSy84hqgNnSY7FM4TzB77RymRTowjm4hb1CV4wbk1djKTV4SJbbYVCzHFD+n/NOg/wtZ9Y7sjiRdy8dA==", + "dev": true, + "license": "MIT", + "bin": { + "chroma": "dist/bin.js", + "chromatic": "dist/bin.js", + "chromatic-cli": "dist/bin.js" + }, + "peerDependencies": { + "@chromatic-com/cypress": "^0.*.* || ^1.0.0", + "@chromatic-com/playwright": "^0.*.* || ^1.0.0" + }, + "peerDependenciesMeta": { + "@chromatic-com/cypress": { + "optional": true + }, + "@chromatic-com/playwright": { + "optional": true + } + } + }, "node_modules/ci-info": { "version": "3.9.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz", @@ -2536,6 +3862,13 @@ "node": ">= 8" } }, + "node_modules/css.escape": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", + "dev": true, + "license": "MIT" + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -2662,6 +3995,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/define-lazy-prop": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", + "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/define-properties": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", @@ -2680,6 +4023,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/detect-indent": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz", @@ -2709,6 +4062,13 @@ "resolved": "packages/docs-react-vfx", "link": true }, + "node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true, + "license": "MIT" + }, "node_modules/draco3d": { "version": "1.5.7", "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz", @@ -2990,6 +4350,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=12" } @@ -3007,6 +4368,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=12" } @@ -3024,6 +4386,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=12" } @@ -3041,6 +4404,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=12" } @@ -3058,6 +4422,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">=12" } @@ -3075,6 +4440,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">=12" } @@ -3092,6 +4458,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3109,6 +4476,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3126,6 +4494,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3143,6 +4512,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3160,6 +4530,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3177,6 +4548,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3194,6 +4566,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3211,6 +4584,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=12" } @@ -3228,6 +4602,7 @@ "os": [ "netbsd" ], + "peer": true, "engines": { "node": ">=12" } @@ -3245,10 +4620,24 @@ "os": [ "openbsd" ], + "peer": true, "engines": { "node": ">=12" } }, + "node_modules/esbuild-register": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz", + "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.3.4" + }, + "peerDependencies": { + "esbuild": ">=0.12 <1" + } + }, "node_modules/esbuild-sunos-64": { "version": "0.14.54", "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz", @@ -3262,6 +4651,7 @@ "os": [ "sunos" ], + "peer": true, "engines": { "node": ">=12" } @@ -3279,6 +4669,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=12" } @@ -3296,6 +4687,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=12" } @@ -3313,6 +4705,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=12" } @@ -3454,6 +4847,16 @@ "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", "license": "MIT" }, + "node_modules/filesize": { + "version": "10.1.6", + "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz", + "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 10.4.0" + } + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -3788,6 +5191,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/has-property-descriptors": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", @@ -3939,6 +5352,23 @@ "node": ">= 4" } }, + "node_modules/indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true, + "license": "ISC" + }, "node_modules/internal-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz", @@ -3954,6 +5384,23 @@ "node": ">= 0.4" } }, + "node_modules/is-arguments": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz", + "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "has-tostringtag": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-array-buffer": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz", @@ -4095,6 +5542,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true, + "license": "MIT", + "bin": { + "is-docker": "cli.js" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -4388,6 +5851,19 @@ "node": ">=0.10.0" } }, + "node_modules/is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-docker": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/isarray": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", @@ -4457,6 +5933,16 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsdoc-type-pratt-parser": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz", + "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/jsesc": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", @@ -4477,6 +5963,16 @@ "dev": true, "license": "MIT" }, + "node_modules/json-parse-even-better-errors": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-4.0.0.tgz", + "integrity": "sha512-lR4MXjGNgkJc7tkQ97kb2nuEMnNCyU//XYVH0MKTGcXEiSudQ5MKGKen3C5QubYy0vmq+JGitUg92uuywGEwIA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -4609,6 +6105,13 @@ "node": ">=8" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true, + "license": "MIT" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -4752,6 +6255,16 @@ "dev": true, "license": "MIT" }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "dev": true, + "license": "MIT", + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/maath": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/maath/-/maath-0.6.0.tgz", @@ -4772,6 +6285,13 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/map-or-similar": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz", + "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==", + "dev": true, + "license": "MIT" + }, "node_modules/markdown-it": { "version": "14.1.0", "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", @@ -4814,6 +6334,16 @@ "dev": true, "license": "MIT" }, + "node_modules/memoizerific": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", + "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==", + "dev": true, + "license": "MIT", + "dependencies": { + "map-or-similar": "^1.5.0" + } + }, "node_modules/memorystream": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", @@ -4884,6 +6414,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/min-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", + "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/minimatch": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", @@ -5013,6 +6553,16 @@ "semver": "bin/semver" } }, + "node_modules/npm-normalize-package-bin": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-4.0.0.tgz", + "integrity": "sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, "node_modules/npm-run-all": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz", @@ -5227,6 +6777,72 @@ "which": "bin/which" } }, + "node_modules/npm-run-all2": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-7.0.2.tgz", + "integrity": "sha512-7tXR+r9hzRNOPNTvXegM+QzCuMjzUIIq66VDunL6j60O4RrExx32XUhlrS7UK4VcdGw5/Wxzb3kfNcFix9JKDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "cross-spawn": "^7.0.6", + "memorystream": "^0.3.1", + "minimatch": "^9.0.0", + "pidtree": "^0.6.0", + "read-package-json-fast": "^4.0.0", + "shell-quote": "^1.7.3", + "which": "^5.0.0" + }, + "bin": { + "npm-run-all": "bin/npm-run-all/index.js", + "npm-run-all2": "bin/npm-run-all/index.js", + "run-p": "bin/run-p/index.js", + "run-s": "bin/run-s/index.js" + }, + "engines": { + "node": "^18.17.0 || >=20.5.0", + "npm": ">= 9" + } + }, + "node_modules/npm-run-all2/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/npm-run-all2/node_modules/isexe": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz", + "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16" + } + }, + "node_modules/npm-run-all2/node_modules/which": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz", + "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^3.1.1" + }, + "bin": { + "node-which": "bin/which.js" + }, + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, "node_modules/npm-run-path": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", @@ -5326,6 +6942,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/open": { + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", + "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "define-lazy-prop": "^2.0.0", + "is-docker": "^2.1.1", + "is-wsl": "^2.2.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", @@ -5562,6 +7196,19 @@ "node": ">=4" } }, + "node_modules/polished": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz", + "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.17.8" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", @@ -5631,6 +7278,41 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/pretty-format/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/pretty-format/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true, + "license": "MIT" + }, "node_modules/prism-react-renderer": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz", @@ -5659,6 +7341,16 @@ "node": ">=6" } }, + "node_modules/process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -5711,6 +7403,22 @@ "node": ">=0.10.0" } }, + "node_modules/react-confetti": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.2.2.tgz", + "integrity": "sha512-K+kTyOPgX+ZujMZ+Rmb7pZdHBvg+DzinG/w4Eh52WOB8/pfO38efnnrtEZNJmjTvLxc16RBYO+tPM68Fg8viBA==", + "dev": true, + "license": "MIT", + "dependencies": { + "tween-functions": "^1.2.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "react": "^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-dom": { "version": "19.0.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", @@ -5745,6 +7453,20 @@ "resolved": "packages/react-vfx", "link": true }, + "node_modules/read-package-json-fast": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-4.0.0.tgz", + "integrity": "sha512-qpt8EwugBWDw2cgE2W+/3oxC+KTez2uSVR8JU9Q36TXPAGCaozfQUs59v4j4GFpWTaw0i6hAZSvOmu1J0uOEUg==", + "dev": true, + "license": "ISC", + "dependencies": { + "json-parse-even-better-errors": "^4.0.0", + "npm-normalize-package-bin": "^4.0.0" + }, + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, "node_modules/read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -5797,6 +7519,37 @@ "node": ">=6" } }, + "node_modules/recast": { + "version": "0.23.9", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz", + "integrity": "sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ast-types": "^0.16.1", + "esprima": "~4.0.0", + "source-map": "~0.6.1", + "tiny-invariant": "^1.3.3", + "tslib": "^2.0.1" + }, + "engines": { + "node": ">= 4" + } + }, + "node_modules/redent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", + "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", + "dev": true, + "license": "MIT", + "dependencies": { + "indent-string": "^4.0.0", + "strip-indent": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -6302,6 +8055,16 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -6378,6 +8141,33 @@ "dev": true, "license": "MIT" }, + "node_modules/storybook": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.5.2.tgz", + "integrity": "sha512-pf84emQ7Pd5jBdT2gzlNs4kRaSI3pq0Lh8lSfV+YqIVXztXIHU+Lqyhek2Lhjb7btzA1tExrhJrgQUsIji7i7A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/core": "8.5.2" + }, + "bin": { + "getstorybook": "bin/index.cjs", + "sb": "bin/index.cjs", + "storybook": "bin/index.cjs" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } + } + }, "node_modules/string-argv": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", @@ -6594,6 +8384,32 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "min-indent": "^1.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", @@ -6657,6 +8473,13 @@ "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==", "license": "MIT" }, + "node_modules/tiny-invariant": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", + "dev": true, + "license": "MIT" + }, "node_modules/tinybench": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", @@ -6725,6 +8548,16 @@ "node": ">=8.0" } }, + "node_modules/ts-dedent": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", + "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.10" + } + }, "node_modules/tsconfig-to-dual-package": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/tsconfig-to-dual-package/-/tsconfig-to-dual-package-1.2.0.tgz", @@ -6744,6 +8577,13 @@ "typescript": ">=4.0.0" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "dev": true, + "license": "0BSD" + }, "node_modules/turbo": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/turbo/-/turbo-2.3.3.tgz", @@ -6846,6 +8686,26 @@ "win32" ] }, + "node_modules/tween-functions": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz", + "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==", + "dev": true, + "license": "BSD" + }, + "node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "dev": true, + "license": "(MIT OR CC0-1.0)", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/typed-array-buffer": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz", @@ -7013,6 +8873,20 @@ "node": ">= 4.0.0" } }, + "node_modules/unplugin": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz", + "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==", + "dev": true, + "license": "MIT", + "dependencies": { + "acorn": "^8.14.0", + "webpack-virtual-modules": "^0.6.2" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", @@ -7044,6 +8918,34 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/util": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", + "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "inherits": "^2.0.3", + "is-arguments": "^1.0.4", + "is-generator-function": "^1.0.7", + "is-typed-array": "^1.1.3", + "which-typed-array": "^1.1.2" + } + }, + "node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "dev": true, + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -7285,6 +9187,7 @@ "os": [ "aix" ], + "peer": true, "engines": { "node": ">=18" } @@ -7302,6 +9205,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=18" } @@ -7319,6 +9223,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=18" } @@ -7336,6 +9241,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=18" } @@ -7353,6 +9259,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=18" } @@ -7370,6 +9277,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=18" } @@ -7387,6 +9295,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -7404,6 +9313,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -7421,6 +9331,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7438,6 +9349,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7455,6 +9367,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7472,6 +9385,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7489,6 +9403,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7506,6 +9421,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7523,6 +9439,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7540,6 +9457,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7557,6 +9475,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -7574,6 +9493,7 @@ "os": [ "netbsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -7591,6 +9511,7 @@ "os": [ "openbsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -7608,6 +9529,7 @@ "os": [ "sunos" ], + "peer": true, "engines": { "node": ">=18" } @@ -7625,6 +9547,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=18" } @@ -7642,6 +9565,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=18" } @@ -7659,6 +9583,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=18" } @@ -7913,6 +9838,13 @@ } } }, + "node_modules/webpack-virtual-modules": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", + "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", + "dev": true, + "license": "MIT" + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -8144,6 +10076,28 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/ws": { + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -8185,6 +10139,7 @@ "version": "0.0.8", "dependencies": { "@vfx-js/core": "0.6.0", + "@vfx-js/storybook": "0.0.8", "dedent": "^1.5.3", "is-mobile": "^5.0.0", "lodash.debounce": "^4.0.8", @@ -8197,6 +10152,7 @@ "@types/dedent": "^0.7.2", "@types/lodash.debounce": "^4.0.9", "@types/node": "^22.10.5", + "npm-run-all2": "^7.0.2", "rimraf": "^6.0.1", "typescript": "^5.7.2", "vite": "^6.0.9" @@ -8470,6 +10426,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "packages/storybook": { + "name": "@vfx-js/storybook", + "version": "0.0.8", + "dependencies": { + "@vfx-js/core": "0.6.0" + }, + "devDependencies": { + "@chromatic-com/storybook": "^3.2.4", + "@storybook/addon-essentials": "^8.5.2", + "@storybook/addon-interactions": "^8.5.2", + "@storybook/blocks": "^8.5.2", + "@storybook/html": "^8.5.2", + "@storybook/html-vite": "^8.5.2", + "@storybook/manager-api": "^8.5.2", + "@storybook/test": "^8.5.2", + "@storybook/theming": "^8.5.2", + "@types/node": "^22.10.5", + "storybook": "^8.5.2" + } + }, "packages/vfx-js": { "name": "@vfx-js/core", "version": "0.6.0", diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore index a6940a8d..b18cddfb 100644 --- a/packages/docs/.gitignore +++ b/packages/docs/.gitignore @@ -13,4 +13,7 @@ dist .DS_Store # Typedoc outputs -docs/* +typedoc/ + +# Storybook static build +storybook/ diff --git a/packages/docs/package.json b/packages/docs/package.json index fe13c8c5..f40b7874 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -5,11 +5,16 @@ "type": "module", "scripts": { "dev": "vite --host", - "build": "tsc && vite build", + "build": "npm-run-all -p build:typedoc build:storybook build:tsc -s build:docs", + "build:tsc": "tsc", + "build:typedoc": "rm -rf typedoc && cp -a ../vfx-js/docs-build typedoc", + "build:storybook": "rm -rf storybook && cp -a ../storybook/docs-build storybook", + "build:docs": "vite build", "preview": "vite preview" }, "dependencies": { "@vfx-js/core": "0.6.0", + "@vfx-js/storybook": "0.0.8", "dedent": "^1.5.3", "is-mobile": "^5.0.0", "lodash.debounce": "^4.0.8", @@ -22,6 +27,7 @@ "@types/dedent": "^0.7.2", "@types/lodash.debounce": "^4.0.9", "@types/node": "^22.10.5", + "npm-run-all2": "^7.0.2", "rimraf": "^6.0.1", "typescript": "^5.7.2", "vite": "^6.0.9" diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts index b7a2c714..08f22c18 100644 --- a/packages/docs/vite.config.ts +++ b/packages/docs/vite.config.ts @@ -13,8 +13,11 @@ export default defineConfig(() => ({ rollupOptions: { input: { index: resolve(__dirname, "index.html"), - docs: resolve(__dirname, "docs/index.html"), + docs: resolve(__dirname, "typedoc/index.html"), + storybook: resolve(__dirname, "storybook/index.html"), }, }, }, + + define: { "process.env": {} }, })); diff --git a/packages/storybook/.gitignore b/packages/storybook/.gitignore new file mode 100644 index 00000000..c8c80110 --- /dev/null +++ b/packages/storybook/.gitignore @@ -0,0 +1,3 @@ +# Storybook +*storybook.log +docs-build/ diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts new file mode 100644 index 00000000..d2443d17 --- /dev/null +++ b/packages/storybook/.storybook/main.ts @@ -0,0 +1,25 @@ +import type { StorybookConfig } from "@storybook/html-vite"; + +import { join, dirname } from "node:path"; + +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value: string): any { + return dirname(require.resolve(join(value, "package.json"))); +} +const config: StorybookConfig = { + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], + addons: [ + getAbsolutePath("@storybook/addon-essentials"), + getAbsolutePath("@chromatic-com/storybook"), + getAbsolutePath("@storybook/addon-interactions"), + ], + framework: { + name: getAbsolutePath("@storybook/html-vite"), + options: {}, + }, + viteFinal: async (config) => ({ ...config, define: { "process.env": {} } }), +}; +export default config; diff --git a/packages/storybook/.storybook/manager.ts b/packages/storybook/.storybook/manager.ts new file mode 100644 index 00000000..1543066e --- /dev/null +++ b/packages/storybook/.storybook/manager.ts @@ -0,0 +1,6 @@ +import { addons } from "@storybook/manager-api"; +import { themes } from "@storybook/theming"; + +addons.setConfig({ + theme: themes.dark, +}); diff --git a/packages/storybook/.storybook/preview.ts b/packages/storybook/.storybook/preview.ts new file mode 100644 index 00000000..e30466a0 --- /dev/null +++ b/packages/storybook/.storybook/preview.ts @@ -0,0 +1,14 @@ +import type { Preview } from "@storybook/html"; + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/packages/storybook/chromatic.config.json b/packages/storybook/chromatic.config.json new file mode 100644 index 00000000..c52ca385 --- /dev/null +++ b/packages/storybook/chromatic.config.json @@ -0,0 +1,6 @@ +{ + "onlyChanged": true, + "projectId": "Project:67992f1d238fd1d9851e6032", + "storybookBaseDir": "packages/storybook", + "zip": true +} diff --git a/packages/storybook/package.json b/packages/storybook/package.json new file mode 100644 index 00000000..a16b9560 --- /dev/null +++ b/packages/storybook/package.json @@ -0,0 +1,27 @@ +{ + "name": "@vfx-js/storybook", + "private": true, + "version": "0.0.8", + "type": "module", + "scripts": { + "dev": "storybook dev -p 6006", + "build": "npm run build-storybook", + "build-storybook": "storybook build -o docs-build" + }, + "dependencies": { + "@vfx-js/core": "0.6.0" + }, + "devDependencies": { + "@chromatic-com/storybook": "^3.2.4", + "@storybook/addon-essentials": "^8.5.2", + "@storybook/addon-interactions": "^8.5.2", + "@storybook/blocks": "^8.5.2", + "@storybook/html": "^8.5.2", + "@storybook/html-vite": "^8.5.2", + "@storybook/manager-api": "^8.5.2", + "@storybook/test": "^8.5.2", + "@storybook/theming": "^8.5.2", + "@types/node": "^22.10.5", + "storybook": "^8.5.2" + } +} diff --git a/packages/storybook/src/Layout.stories.ts b/packages/storybook/src/Layout.stories.ts new file mode 100644 index 00000000..6f0963a6 --- /dev/null +++ b/packages/storybook/src/Layout.stories.ts @@ -0,0 +1,283 @@ +import { VFX, type VFXProps, type shaders } from "@vfx-js/core"; +import type { Meta, StoryObj } from "@storybook/html"; + +import Logo from "./assets/logo-640w-20p.svg"; +import "./preset.css"; + +const shader = ` +precision highp float; +uniform vec2 offset; +uniform vec2 resolution; +uniform sampler2D src; +out vec4 outColor; + +void main() { + vec2 uv = (gl_FragCoord.xy - offset) / resolution; + outColor = texture(src, uv); + + // Show the UV coordinate + outColor += vec4(fract(uv), 0, 0.25); + + // Show the center + vec2 p = uv * 2. - 1.; + p.x *= resolution.x / resolution.y; + outColor += (fract(length(p)) * .5 + .5) * 0.25; +} +`; + +interface LayoutProps { + src?: string; + overflow?: number; + uniforms?: VFXProps["uniforms"]; + + preset: keyof typeof shaders; + defaultTime?: number; +} + +export default { + title: "Layout", + parameters: { + layout: "fullscreen", + }, +} satisfies Meta; + +export const fullscreen: StoryObj<{ padding: number }> = { + render: ({ padding }) => { + const img = document.createElement("img"); + img.src = Logo; + + const wrapper = document.createElement("div"); + wrapper.style.padding = `${padding}px`; + wrapper.appendChild(img); + + const vfx = new VFX(); + vfx.add(img, { + shader, + overflow: true, + }); + + return wrapper; + }, + args: { + padding: 100, + }, +}; + +export const overflowSingle: StoryObj<{ overflow: number }> = { + render: ({ overflow }) => { + const img = document.createElement("img"); + img.src = Logo; + + const wrapper = document.createElement("div"); + wrapper.style.padding = `${overflow * 2}px`; + wrapper.appendChild(img); + + const vfx = new VFX(); + vfx.add(img, { + shader, + overflow, + }); + + return wrapper; + }, + args: { + overflow: 100, + }, +}; + +export const overflowArray: StoryObj<{ + overflow: [number, number, number, number]; +}> = { + render: ({ overflow }) => { + const img = document.createElement("img"); + img.src = Logo; + + const [o1, o2, o3, o4] = overflow; + const wrapper = document.createElement("div"); + wrapper.style.padding = `${o1}px ${o2}px ${o3}px ${o4}px`; + wrapper.appendChild(img); + + const vfx = new VFX(); + vfx.add(img, { + shader, + overflow, + }); + + return wrapper; + }, + args: { + overflow: [50, 100, 150, 200], + }, +}; + +export const pixelRatio: StoryObj<{ pixelRatio: number }> = { + render: ({ pixelRatio }) => { + const img = document.createElement("img"); + img.src = Logo; + + const vfx = new VFX({ pixelRatio }); + vfx.add(img, { shader }); + + return img; + }, + args: { + pixelRatio: 0.1, + }, +}; + +type ZIndexProps = { + zIndex: number; + fgZIndex: number; +}; + +const zIndexBase = ({ zIndex, fgZIndex }: ZIndexProps) => { + const img = document.createElement("img"); + img.src = Logo; + + const wrapper = document.createElement("div"); + wrapper.className = "wrapper"; + wrapper.appendChild(img); + + const z0 = document.createElement("div"); + z0.className = "fg"; + z0.innerText = "Hello"; + z0.style.zIndex = fgZIndex.toString(); + wrapper.appendChild(z0); + + const vfx = new VFX({ zIndex }); + vfx.add(img, { shader }); + + return wrapper; +}; + +export const zIndex: StoryObj = { + render: zIndexBase, + args: { + zIndex: 0, + fgZIndex: 1, + }, +}; + +export const zIndexNegative: StoryObj<{ zIndex: number; fgZIndex: number }> = { + render: zIndexBase, + args: { + zIndex: -1, + fgZIndex: 0, + }, +}; + +type ElementZIndexProps = { + zIndex: [number, number, number]; +}; + +const elementZIndexBase = ({ zIndex }: ElementZIndexProps) => { + const shader = ` +precision highp float; +uniform vec2 offset; +uniform vec2 resolution; +uniform sampler2D src; +uniform vec3 bg; +out vec4 outColor; + +void main() { + vec2 uv = (gl_FragCoord.xy - offset) / resolution; + outColor = texture(src, uv); + outColor += vec4(bg, 0.5); +} + `; + + const bg = [ + [1, 0, 0], + [0, 1, 0], + [0, 0, 1], + ] as [number, number, number][]; + + const wrapper = document.createElement("div"); + wrapper.className = "elementZIndexWrapper"; + + const vfx = new VFX(); + + for (let i = 0; i < 3; i++) { + const img = document.createElement("img"); + img.src = Logo; + wrapper.appendChild(img); + + vfx.add(img, { shader, zIndex: zIndex[i], uniforms: { bg: bg[i] } }); + } + + return wrapper; +}; + +export const elementZIndexDefault: StoryObj = { + render: elementZIndexBase, + args: { + zIndex: [0, 0, 0] as const, + }, +}; + +export const elementZIndexDefault132: StoryObj = { + render: elementZIndexBase, + args: { + zIndex: [1, 3, 2] as const, + }, +}; + +export const elementZIndexDefault321: StoryObj = { + render: elementZIndexBase, + args: { + zIndex: [3, 2, 1] as const, + }, +}; + +export const overlay: StoryObj = { + render: () => { + const shader = ` + precision highp float; + uniform vec2 offset; + uniform vec2 resolution; + uniform sampler2D src; + uniform vec3 bg; + out vec4 outColor; + + void main() { + vec2 uv = (gl_FragCoord.xy - offset) / resolution; + uv = (uv - .5) * 0.9 + .5; + outColor = texture(src, uv) * 0.5; + } + `; + + const img = document.createElement("img"); + img.src = Logo; + + const vfx = new VFX(); + vfx.add(img, { shader, overlay: true }); + + return img; + }, + args: null, +}; + +const wrapBase = ( + wrap: VFXProps["wrap"], // clamp, repeat, mirror +): StoryObj<{ wrap?: VFXProps["wrap"] }> => ({ + render: ({ wrap }) => { + const img = document.createElement("img"); + img.src = Logo; + + const vfx = new VFX(); + vfx.add(img, { shader, wrap, overflow: 200 }); + + return img; + }, + args: { wrap }, + argTypes: { + wrap: { + control: { type: "select" }, + options: ["repeat", "clamp", "mirror"], + }, + }, +}); + +export const wrapRepeat = wrapBase("repeat"); +export const wrapClamp = wrapBase("clamp"); +export const wrapMirror = wrapBase("mirror"); diff --git a/packages/storybook/src/Presets.stories.ts b/packages/storybook/src/Presets.stories.ts new file mode 100644 index 00000000..c14f99c0 --- /dev/null +++ b/packages/storybook/src/Presets.stories.ts @@ -0,0 +1,83 @@ +import { VFX, type VFXProps, type shaders } from "@vfx-js/core"; +import type { Meta } from "@storybook/html"; +import { Timer } from "./Timer"; + +import Logo from "./assets/logo-640w-20p.svg"; +import Jellyfish from "./assets/jellyfish.webp"; +import "./preset.css"; + +interface PresetProps { + src?: string; + overflow?: number; + uniforms?: VFXProps["uniforms"]; + + preset: keyof typeof shaders; + defaultTime?: number; +} + +export default { + title: "Presets", + render: (opts: PresetProps) => { + const timer = new Timer(opts.defaultTime ?? 0, [0, 10]); + document.body.append(timer.element); + + const img = document.createElement("img"); + img.src = opts.src ?? Logo; + + const vfx = new VFX(); + vfx.add(img, { + shader: opts.preset, + overflow: opts.overflow, + uniforms: { ...(opts.uniforms ?? {}), time: () => timer.time }, + }); + + return img; + }, + parameters: { + layout: "fullscreen", + }, + args: { + preset: "uvGradient", + }, +} satisfies Meta; + +const story = (props: PresetProps) => ({ args: props }); + +export const UvGradient = story({ preset: "uvGradient" }); +export const Glitch = story({ + preset: "glitch", + overflow: 100, + defaultTime: 2.5, +}); +export const RgbGlitch = story({ preset: "rgbGlitch", defaultTime: 1.0 }); +export const RgbShift = story({ preset: "rgbShift", defaultTime: 2.0 }); +export const Rainbow = story({ preset: "rainbow", defaultTime: 0.0 }); +export const Shine = story({ preset: "shine", defaultTime: 0.0 }); +export const Blink = story({ preset: "blink", defaultTime: 1.0 }); +export const spring = story({ preset: "spring", defaultTime: 1.0 }); +export const duotone = story({ + src: Jellyfish, + preset: "duotone", + uniforms: { + color1: [1, 0, 0, 1], + color2: [0, 0, 1, 1], + }, +}); +export const Tritone = story({ + src: Jellyfish, + preset: "tritone", + uniforms: { + color1: [1, 0, 0, 1], + color2: [0, 1, 0, 1], + color3: [0, 0, 1, 1], + }, +}); +export const hueShift = story({ + src: Jellyfish, + preset: "hueShift", + defaultTime: 1.0, + uniforms: { shift: 0.5 }, +}); +export const sinewave = story({ preset: "sinewave", defaultTime: 1.0 }); +export const pixelate = story({ preset: "pixelate", defaultTime: 1.0 }); +export const halftone = story({ src: Jellyfish, preset: "halftone" }); diff --git a/packages/storybook/src/Timer.css b/packages/storybook/src/Timer.css new file mode 100644 index 00000000..ade8dca7 --- /dev/null +++ b/packages/storybook/src/Timer.css @@ -0,0 +1,27 @@ +.timer { + position: fixed; + top: 16px; + left: 16px; + background: #333; + + display: flex; + gap: 8px; + flex-direction: column; + width: 320px; + padding: 8px; +} +.timer .row { + width: 100%; + display: flex; + gap: 8px; +} +.timer .btn { + width: 60px; + cursor: pointer; +} +.timer .seek { + flex: 1; +} +.timer .label { + color: white; +} diff --git a/packages/storybook/src/Timer.ts b/packages/storybook/src/Timer.ts new file mode 100644 index 00000000..1ff96a8e --- /dev/null +++ b/packages/storybook/src/Timer.ts @@ -0,0 +1,107 @@ +import "./Timer.css"; + +const RESOLUTION = 10; + +let INSTANCE: Timer | undefined; + +export class Timer { + #element: HTMLElement; + #inputEl: HTMLInputElement; + #buttonEl: HTMLInputElement; + #labelEl: HTMLSpanElement; + + #range: [number, number]; + #isPlaying = false; + #time = 0; + #lastNow = 0; + + constructor(defaultValue: number, range?: [number, number]) { + // Remove old instance + if (INSTANCE) { + INSTANCE.dispose(); + } + INSTANCE = this; + + // Setup options + this.#range = range ?? [0, 10]; + this.#time = defaultValue; + + // Setup elements + this.#element = document.createElement("div"); + this.#element.className = "timer"; + + this.#element.innerHTML = ` +
+ + +
+
+ +
+ `; + this.#buttonEl = this.#element.querySelector( + ".btn", + ) as HTMLInputElement; + this.#buttonEl.addEventListener("click", this.togglePlay); + + this.#inputEl = this.#element.querySelector( + ".seek", + ) as HTMLInputElement; + this.#inputEl.addEventListener("input", this.seek); + + this.#labelEl = this.#element.querySelector( + ".label", + ) as HTMLInputElement; + + this.#updateLabel(); + } + + get element() { + return this.#element; + } + + get time() { + if (this.#isPlaying) { + const now = Date.now() / 1000; + const deltaTime = now - this.#lastNow; + + this.#time += deltaTime; + if (this.#time > this.#range[1]) { + this.#time -= this.#range[1] - this.#range[0]; + } + + this.#inputEl.value = (this.#time * RESOLUTION).toString(); + this.#updateLabel(); + + this.#lastNow = now; + } + + return this.#time; + } + + dispose() { + this.#element.remove(); + } + + togglePlay = () => { + this.#isPlaying = !this.#isPlaying; + if (this.#isPlaying) { + this.#buttonEl.value = "STOP"; + this.#lastNow = Date.now() / 1000; + } else { + this.#buttonEl.value = "PLAY"; + } + }; + + seek = () => { + const v = Number.parseFloat(this.#inputEl.value) / RESOLUTION; + this.#time = v; + }; + + #updateLabel() { + this.#labelEl.innerText = `Time: ${this.#time.toFixed(1)} / ${this.#range[1]}`; + } +} diff --git a/packages/storybook/src/assets/jellyfish.webp b/packages/storybook/src/assets/jellyfish.webp new file mode 100644 index 0000000000000000000000000000000000000000..d64e15bbabbad36c5c7f0c7e597192434f5b759a GIT binary patch literal 15000 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 literal 0 HcmV?d00001 diff --git a/packages/storybook/src/assets/logo-640w-20p.svg b/packages/storybook/src/assets/logo-640w-20p.svg new file mode 100644 index 00000000..c35de74e --- /dev/null +++ b/packages/storybook/src/assets/logo-640w-20p.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/storybook/src/preset.css b/packages/storybook/src/preset.css new file mode 100644 index 00000000..0c152f37 --- /dev/null +++ b/packages/storybook/src/preset.css @@ -0,0 +1,50 @@ +html, body { + height: 100%; + margin: 0; +} +html { background: black; } +body { background: rgba(0, 0, 0, 0.5); } + +#storybook-root { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +img { + max-width: 90%; + max-height: 90%; +} + +.wrapper img { + max-width: 100%; + max-height: 100%; +} +.wrapper .fg { + width: 100px; + height: 100px; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: red; + text-align: center; +} + +.elementZIndexWrapper { + position: relative; +} +.elementZIndexWrapper img { + max-width: 100%; + max-height: 100%; +} +.elementZIndexWrapper img:nth-child(3n+1) { + position: absolute; + left: -50px; + top: -100px; +} +.elementZIndexWrapper img:nth-child(3n) { + position: absolute; + left: 50px; + top: 100px; +} diff --git a/packages/storybook/src/types.d.ts b/packages/storybook/src/types.d.ts new file mode 100644 index 00000000..b545c472 --- /dev/null +++ b/packages/storybook/src/types.d.ts @@ -0,0 +1,8 @@ +declare module "*.svg" { + const img: string; + export default img; +} +declare module "*.webp" { + const img: string; + export default img; +} diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json new file mode 100644 index 00000000..5669a457 --- /dev/null +++ b/packages/storybook/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], +} diff --git a/packages/vfx-js/.gitignore b/packages/vfx-js/.gitignore new file mode 100644 index 00000000..f5f81e68 --- /dev/null +++ b/packages/vfx-js/.gitignore @@ -0,0 +1 @@ +docs-build/ diff --git a/packages/vfx-js/package.json b/packages/vfx-js/package.json index a7bb5777..a4e85118 100644 --- a/packages/vfx-js/package.json +++ b/packages/vfx-js/package.json @@ -21,7 +21,7 @@ } }, "scripts": { - "build": "run-s clean build:cjs build:esm build:dual", + "build": "run-s clean build:cjs build:esm build:dual typedoc", "build:cjs": "tsc -d", "build:esm": "tsc -d -p tsconfig.esm.json", "build:dual": "tsconfig-to-dual-package", @@ -34,7 +34,7 @@ "lint-staged": "lint-staged", "test": "vitest --dir src --run", "test:watch": "vitest --dir src", - "typedoc": "typedoc --out ../docs/docs --excludeExternals" + "typedoc": "typedoc --out docs-build --excludeExternals" }, "dependencies": { "three": "^0.172.0" diff --git a/packages/vfx-js/src/constants.ts b/packages/vfx-js/src/constants.ts index f0ee02dc..2a880607 100644 --- a/packages/vfx-js/src/constants.ts +++ b/packages/vfx-js/src/constants.ts @@ -529,6 +529,7 @@ export const shaders: Record = { uniform vec4 color2; uniform vec4 color3; uniform float speed; + out vec4 outColor; void main (void) { vec2 uv = (gl_FragCoord.xy - offset) / resolution; diff --git a/turbo.json b/turbo.json index 0cdb28b4..8311fe12 100644 --- a/turbo.json +++ b/turbo.json @@ -3,13 +3,13 @@ "tasks": { "build": { "dependsOn": [ - "^build", - "^typedoc" + "^build" ], "outputs": [ "lib", "build", - "dist" + "dist", + "docs-build" ] }, "dev": { @@ -33,7 +33,6 @@ "lint" ], "outputs": [] - }, - "typedoc": {} + } } }