feat: add v5 storybook to github pages (#744)

* add nvmrc so npm start works

* add storybook build output directory & remove storybook-deployer

* add v5 storybook link

* add v5 storybook to github actions

* alphabetize

* add changeset

Author: nbierdeman

.changeset/red-buckets-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": patch
+---
+
+feat: add v5 storybook to github pages

.github/workflows/build-and-deploy-docs.yml

@@ -6,6 +6,8 @@ on:
         # Only run when documentation-related files change to avoid unnecessary builds
         paths:
             - "packages/paypal-js/types/v6/**/*.d.ts"
+            - "packages/react-paypal-js/.storybook/**"
+            - "packages/react-paypal-js/src/**/*.stories.*"
             - ".github/workflows/build-and-deploy-docs.yml"
             - "docs/index.html"
             - "docs/readmes/**"
@@ -38,9 +40,12 @@ jobs:
             - name: Install dependencies
               run: npm ci
 
-            - name: Build documentation
+            - name: Build v6 reference documentation
               run: npm run docs:v6
 
+            - name: Build v5 react storybook
+              run: npm run build-storybook:v5
+
             - name: Setup Pages
               uses: actions/configure-pages@v5
 

docs/index.html

@@ -96,6 +96,16 @@ <h3>JS SDK v6 Reference</h3>
                 </a>
             </div>
 
+            <div class="docs-grid">
+                <a href="./web-sdk-v5-react-storybook/" class="doc-card">
+                    <h3>JS SDK v5 React Storybook</h3>
+                    <p>
+                        Explore interactive React components for PayPal JS SDK
+                        v5.
+                    </p>
+                </a>
+            </div>
+
             <div class="footer">
                 <p>© 2025 PayPal, Inc. All rights reserved.</p>
             </div>

package.json

@@ -12,20 +12,21 @@
     },
     "scripts": {
         "build": "npm run build --workspaces --if-present",
-        "dev": "concurrently \"npm:dev:*\"",
-        "dev:paypal-js": "npm run dev --workspace=@paypal/paypal-js",
-        "dev:react-paypal-js": "npm run dev --workspace=@paypal/react-paypal-js",
+        "build-storybook:v5": "npm run build-storybook --workspace=@paypal/react-paypal-js",
         "changeset:add": "changeset add",
         "changeset:release": "npm run build && changeset publish",
         "changeset:version": "changeset version && npm i --package-lock-only",
         "clean": "npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules",
+        "dev": "concurrently \"npm:dev:*\"",
+        "dev:paypal-js": "npm run dev --workspace=@paypal/paypal-js",
+        "dev:react-paypal-js": "npm run dev --workspace=@paypal/react-paypal-js",
         "docs:v6": "npm run docs:v6 --workspace=@paypal/paypal-js",
         "format": "prettier --write --ignore-unknown .",
         "format:check": "prettier --check .",
         "lint": "npm run lint --workspaces --if-present",
+        "prepare": "husky install",
         "test": "npm run lint && npm run test --workspaces --if-present",
-        "test:e2e": "npm run test:e2e --workspaces --if-present",
-        "prepare": "husky install"
+        "test:e2e": "npm run test:e2e --workspaces --if-present"
     },
     "lint-staged": {
         "*": [

packages/react-paypal-js/.nvmrc

@@ -0,0 +1 @@
+20

packages/react-paypal-js/package.json

@@ -31,21 +31,20 @@
     },
     "scripts": {
         "build": "rollup --config --bundleConfigAsCjs",
-        "dev": "concurrently \"rollup --config --bundleConfigAsCjs --watch\" \"npm run type-declarations -- --watch\"",
+        "build-storybook": "build-storybook -o ../../docs/web-sdk-v5-react-storybook",
         "check-node-version": "node scripts/check-node-version.js",
+        "dev": "concurrently \"rollup --config --bundleConfigAsCjs --watch\" \"npm run type-declarations -- --watch\"",
         "lint": "eslint . && npm run typecheck",
+        "postrelease": "git push && git push --follow-tags && npm run build && npm publish",
         "prepack": "rimraf dist && npm run build && npm run type-declarations",
-        "test": "jest --env=jsdom",
-        "test:watch": "jest --env=jsdom --watch",
-        "start": "npm run check-node-version && npm run storybook",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook",
-        "deploy-storybook": "storybook-to-ghpages",
         "prerelease": "npm run validate",
         "release": "standard-version",
-        "postrelease": "git push && git push --follow-tags && npm run build && npm publish",
-        "typecheck": "tsc --noEmit",
+        "start": "npm run check-node-version && npm run storybook",
+        "storybook": "start-storybook -p 6006",
+        "test": "jest --env=jsdom",
+        "test:watch": "jest --env=jsdom --watch",
         "type-declarations": "tsc --emitDeclarationOnly --outDir dist/types --project tsconfig.declarations.json",
+        "typecheck": "tsc --noEmit",
         "validate": "npm run check-node-version && npm run typecheck && npm run build && npm run lint && npm test -- --coverage"
     },
     "files": [
@@ -80,7 +79,6 @@
         "@storybook/addon-essentials": "^6.4.9",
         "@storybook/addon-links": "^6.4.9",
         "@storybook/react": "^6.4.9",
-        "@storybook/storybook-deployer": "^2.8.10",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.3",
         "@testing-library/react-hooks": "^7.0.2",