Skip to content

Commit e079afb

Browse files
HackTheW2dHackTheW2d
authored
Merge pull request #809 from paypal/feature/react-v6-storybook-update
Feature/react v6 storybook update
2 parents b4833c2 + 3e10c6a commit e079afb

23 files changed

+2502
-61
lines changed

‎.changeset/long-snakes-wear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@paypal/paypal-js": patch
3+
---
4+
5+
Add skipLibCheck to tsconfig.json to resolve chai type conflicts

‎package-lock.json‎

Lines changed: 1348 additions & 60 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"description": "Collection of libraries supporting PayPal's JS SDK",
44
"private": true,
55
"workspaces": [
6-
"packages/*"
6+
"packages/*",
7+
"packages/react-paypal-js-storybook/*"
78
],
89
"license": "Apache-2.0",
910
"repository": {
@@ -13,6 +14,8 @@
1314
"scripts": {
1415
"build": "npm run build --workspaces --if-present",
1516
"build-storybook:v5": "npm run build-storybook --workspace=@paypal/react-paypal-js",
17+
"build-storybook:v6": "npm run build-storybook --workspace=@paypal/react-paypal-js-storybook-v6",
18+
"storybook:v6": "npm run storybook --workspace=@paypal/react-paypal-js-storybook-v6",
1619
"changeset:add": "changeset add",
1720
"changeset:release": "npm run build && changeset publish",
1821
"changeset:version": "changeset version && npm i --package-lock-only",

‎packages/paypal-js/tsconfig.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
"moduleResolution": "bundler",
88
"target": "es5",
99
"strict": true,
10+
// TODO: Remove skipLibCheck once we upgrade react-paypal-js storybook to v10.
11+
// Currently there's a chai type conflict due to version mismatch and will cause CI/CD pipeline to fail:
12+
// - vitest@1.6.1 -> @vitest/expect@1.6.1
13+
// - storybook@10.2.6 -> @vitest/expect@3.2.4 -> @types/chai@5.2.2
14+
"skipLibCheck": true,
1015

1116
// these are overridden by the Rollup plugin
1217
"outDir": "./dist",

‎packages/react-paypal-js-storybook/v6/.storybook/main.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { StorybookConfig } from "@storybook/react-vite";
2+
3+
const config: StorybookConfig = {
4+
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
5+
addons: ["@storybook/addon-docs"],
6+
framework: {
7+
name: "@storybook/react-vite",
8+
options: {},
9+
},
10+
typescript: {
11+
check: false,
12+
reactDocgen: "react-docgen-typescript",
13+
reactDocgenTypescriptOptions: {
14+
compilerOptions: {
15+
allowSyntheticDefaultImports: true,
16+
esModuleInterop: true,
17+
},
18+
},
19+
},
20+
};
21+
22+
export default config;

‎packages/react-paypal-js-storybook/v6/.storybook/preview-head.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<style>
2+
/* styles for readme */
3+
.badges {
4+
margin-bottom: 16px !important;
5+
}
6+
7+
.badges > a {
8+
margin-right: 4px;
9+
}
10+
11+
/* styles for marks story */
12+
.mark {
13+
display: flex;
14+
align-items: center;
15+
}
16+
17+
.spinner {
18+
display: inline-block;
19+
height: 40px;
20+
width: 40px;
21+
box-sizing: border-box;
22+
border: 3px solid rgba(0, 0, 0, 0.2);
23+
border-top-color: rgba(33, 128, 192, 0.8);
24+
border-radius: 100%;
25+
animation: rotation 0.7s infinite linear;
26+
}
27+
28+
.spinner.tiny {
29+
height: 20px;
30+
width: 20px;
31+
border-top-color: #007bff;
32+
position: relative;
33+
top: 3px;
34+
}
35+
36+
@keyframes rotation {
37+
0% {
38+
transform: rotate(0deg);
39+
}
40+
100% {
41+
transform: rotate(359deg);
42+
}
43+
}
44+
45+
.table {
46+
width: 100%;
47+
max-width: 100%;
48+
margin-bottom: 1rem;
49+
background-color: transparent;
50+
border: 1px solid #dee2e6;
51+
border-collapse: collapse;
52+
text-align: left;
53+
}
54+
55+
.table th,
56+
.table td {
57+
padding: 0.75rem;
58+
vertical-align: top;
59+
border: 1px solid #dee2e6;
60+
}
61+
62+
.card-field {
63+
width: 100%;
64+
padding: 12px;
65+
border: 1px solid #ccc;
66+
border-radius: 4px;
67+
box-sizing: border-box;
68+
margin-top: 6px;
69+
margin-bottom: 16px;
70+
resize: vertical;
71+
height: 40px;
72+
background: white;
73+
font-size: 17px;
74+
color: #3a3a3a;
75+
font-family: helvetica, tahoma, calibri, sans-serif;
76+
}
77+
78+
.btn {
79+
display: inline-block;
80+
font-weight: 400;
81+
text-align: center;
82+
white-space: nowrap;
83+
vertical-align: middle;
84+
-webkit-user-select: none;
85+
-moz-user-select: none;
86+
-ms-user-select: none;
87+
user-select: none;
88+
border: 1px solid transparent;
89+
padding: 0.375rem 0.75rem;
90+
font-size: 1rem;
91+
line-height: 1.5;
92+
border-radius: 0.25rem;
93+
transition:
94+
color 0.15s ease-in-out,
95+
background-color 0.15s ease-in-out,
96+
border-color 0.15s ease-in-out,
97+
box-shadow 0.15s ease-in-out;
98+
cursor: pointer;
99+
}
100+
101+
.btn-primary {
102+
color: #fff;
103+
background-color: #007bff;
104+
border-color: #007bff;
105+
}
106+
107+
.code-json {
108+
margin-left: 2em;
109+
line-height: 2em;
110+
}
111+
</style>

‎packages/react-paypal-js-storybook/v6/.storybook/preview.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { Preview } from "@storybook/react";
2+
import { withPayPalProvider } from "../src/decorators";
3+
4+
const preview: Preview = {
5+
parameters: {
6+
controls: {
7+
matchers: {
8+
color: /(background|color)$/i,
9+
date: /Date$/i,
10+
},
11+
},
12+
options: {
13+
storySort: {
14+
order: [
15+
"V6",
16+
[
17+
"Buttons",
18+
[
19+
"PayPalOneTimePaymentButton",
20+
"PayLaterOneTimePaymentButton",
21+
"VenmoOneTimePaymentButton",
22+
"PayPalSavePaymentButton",
23+
"PayPalGuestPaymentButton",
24+
],
25+
],
26+
],
27+
},
28+
},
29+
},
30+
decorators: [withPayPalProvider],
31+
};
32+
33+
export default preview;

‎packages/react-paypal-js-storybook/v6/README.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# PayPal React SDK V6 Storybook
2+
3+
Storybook documentation for the PayPal React SDK V6 components.
4+
5+
This is a standalone package that:
6+
7+
- Installs `@paypal/react-paypal-js` from npm, just like a merchant would (in production)
8+
- Uses workspace linking for local development
9+
- Does not share any dependencies with the v5 storybook implementation
10+
- Has its own independent changelog/release process
11+
12+
## Getting Started
13+
14+
### Install dependencies
15+
16+
From the **root** of the paypal-js monorepo:
17+
18+
```bash
19+
npm install
20+
```
21+
22+
This will automatically link the local `@paypal/react-paypal-js` package via npm workspaces.
23+
24+
### Build react-paypal-js first (required for local development)
25+
26+
Before running Storybook, ensure the react-paypal-js package is built:
27+
28+
```bash
29+
npm run build --workspace=@paypal/react-paypal-js
30+
```
31+
32+
### Run Storybook locally
33+
34+
From the root:
35+
36+
```bash
37+
npm run storybook:v6
38+
```
39+
40+
Or from this directory:
41+
42+
```bash
43+
npm run storybook
44+
```
45+
46+
This will start Storybook at http://localhost:6006
47+
48+
### Build for production
49+
50+
```bash
51+
npm run build-storybook:v6
52+
```
53+
54+
This will build the static storybook to `docs/web-sdk-v6-react-storybook`.
55+
56+
## Structure
57+
58+
```
59+
v6/
60+
├── .storybook/ # Storybook configuration
61+
│ ├── main.ts # Main config (Vite builder, no webpack issues)
62+
│ ├── preview.ts # Preview config with PayPal decorator
63+
│ └── preview-head.html # CSS styles
64+
├── src/
65+
│ ├── components/ # Reusable components (V6DocPageStructure)
66+
│ ├── decorators/ # Storybook decorators (PayPalProvider)
67+
│ ├── shared/ # Shared utilities and code examples
68+
│ ├── stories/ # Story files
69+
│ │ └── buttons/ # Button component stories
70+
│ └── types/ # TypeScript type definitions
71+
├── package.json # Independent package configuration
72+
├── tsconfig.json # TypeScript configuration
73+
└── README.md
74+
```
75+
76+
## Available Stories
77+
78+
- **PayPalOneTimePaymentButton** - Standard PayPal checkout button
79+
- **PayLaterOneTimePaymentButton** - Pay Later / Buy Now Pay Later button
80+
- **VenmoOneTimePaymentButton** - Venmo checkout button
81+
- **PayPalSavePaymentButton** - Save payment method (vaulting) button
82+
- **PayPalGuestPaymentButton** - Guest checkout with credit/debit cards
83+
84+
## Environment Variables
85+
86+
- `STORYBOOK_PAYPAL_API_URL` - Override the sample integration server URL (defaults to `https://v6-web-sdk-sample-integration-server.fly.dev`)
87+
88+
## Technology Stack
89+
90+
- **Storybook 10.x** - Latest Storybook with Vite builder (solves webpack 4 exports field issue)
91+
- **Vite** - Fast build tool, no webpack configuration needed
92+
- **TypeScript** - Full type safety
93+
- **React 19** - Latest React version
94+
95+
## Local Development with Workspace Linking
96+
97+
This package uses npm workspaces to link the local `@paypal/react-paypal-js` package during development. This means:
98+
99+
1. **Automatic linking**: Changes to `packages/react-paypal-js` are reflected immediately after rebuilding
100+
2. **No npm install needed**: The dependency is resolved via symlink in the root `node_modules`
101+
102+
### Development Workflow
103+
104+
```bash
105+
# 1. Make changes to react-paypal-js
106+
# 2. Rebuild the package
107+
npm run build --workspace=@paypal/react-paypal-js
108+
109+
# 3. Storybook will pick up the changes
110+
npm run storybook:v6
111+
```
112+
113+
### Switching to npm package (for production testing)
114+
115+
To test with the published npm package instead of the local version, change `package.json`:
116+
117+
```json
118+
"dependencies": {
119+
"@paypal/react-paypal-js": "^X.Y.Z" // Replace * with specific version
120+
}
121+
```
122+
123+
Then run `npm install` from the v6 directory (not root) to install from npm.
124+
125+
## Publishing
126+
127+
This package has its own independent release process. Changes are tracked in its own CHANGELOG.md.

‎packages/react-paypal-js-storybook/v6/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "@paypal/react-paypal-js-storybook-v6",
3+
"version": "0.1.0",
4+
"private": true,
5+
"description": "Storybook for PayPal React SDK V6 components",
6+
"//": [
7+
"TODO: Remove NODE_PATH=./node_modules once we upgrade v5 SDK's storybook to v10. Currently needed because storybook CLI is hoisted to root node_modules/, but @storybook/react-vite is installed locally due to version conflict with storybook v6."
8+
],
9+
"scripts": {
10+
"storybook": "NODE_PATH=./node_modules storybook dev -p 6006",
11+
"build-storybook": "NODE_PATH=./node_modules storybook build -o ../../../docs/web-sdk-v6-react-storybook"
12+
},
13+
"keywords": [
14+
"paypal",
15+
"react",
16+
"storybook",
17+
"v6"
18+
],
19+
"author": "PayPal",
20+
"license": "Apache-2.0",
21+
"repository": {
22+
"type": "git",
23+
"url": "git://github.com/paypal/paypal-js.git",
24+
"directory": "packages/react-paypal-js-storybook/v6"
25+
},
26+
"dependencies": {
27+
"@paypal/react-paypal-js": "*",
28+
"react": "^19.2.4",
29+
"react-dom": "^19.2.4"
30+
},
31+
"devDependencies": {
32+
"@storybook/addon-docs": "^10.2.4",
33+
"@storybook/react": "^10.2.4",
34+
"@storybook/react-vite": "^10.2.4",
35+
"storybook": "^10.2.4",
36+
"typescript": "^5.9.3",
37+
"vite": "^6.4.1"
38+
}
39+
}

0 commit comments

Comments
 (0)