@storybook/nextjs 8.2.2 → 8.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +6 -6
  2. package/template/cli/js/Configure.mdx +10 -10
  3. package/template/cli/ts-3-8/Configure.mdx +10 -10
  4. package/template/cli/ts-4-9/Configure.mdx +10 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/nextjs",
3
- "version": "8.2.2",
3
+ "version": "8.2.3",
4
4
  "description": "Storybook for Next.js",
5
5
  "keywords": [
6
6
  "storybook",
@@ -139,10 +139,10 @@
139
139
  "@babel/preset-typescript": "^7.24.1",
140
140
  "@babel/runtime": "^7.24.4",
141
141
  "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
142
- "@storybook/builder-webpack5": "8.2.2",
143
- "@storybook/preset-react-webpack": "8.2.2",
144
- "@storybook/react": "8.2.2",
145
- "@storybook/test": "8.2.2",
142
+ "@storybook/builder-webpack5": "8.2.3",
143
+ "@storybook/preset-react-webpack": "8.2.3",
144
+ "@storybook/react": "8.2.3",
145
+ "@storybook/test": "8.2.3",
146
146
  "@types/node": "^18.0.0",
147
147
  "@types/semver": "^7.3.4",
148
148
  "babel-loader": "^9.1.3",
@@ -180,7 +180,7 @@
180
180
  "next": "^13.5.0 || ^14.0.0",
181
181
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
182
182
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
183
- "storybook": "^8.2.2",
183
+ "storybook": "^8.2.3",
184
184
  "webpack": "^5.0.0"
185
185
  },
186
186
  "peerDependenciesMeta": {
package/template/cli/js/Configure.mdx CHANGED
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
52
52
  <h4 className="sb-section-item-heading">Add styling and CSS</h4>
53
53
  <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
54
54
  <a
55
- href="https://storybook.js.org/docs/configure/styling-and-css"
55
+ href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
56
56
  target="_blank"
57
57
  >Learn more<RightArrow /></a>
58
58
  </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
67
67
  <h4 className="sb-section-item-heading">Provide context and mocking</h4>
68
68
  <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
69
69
  <a
70
- href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
70
+ href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
71
71
  target="_blank"
72
72
  >Learn more<RightArrow /></a>
73
73
  </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
85
85
  `staticDirs` configuration option to specify folders to load when
86
86
  starting Storybook.</p>
87
87
  <a
88
- href="https://storybook.js.org/docs/configure/images-and-assets"
88
+ href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
89
89
  target="_blank"
90
90
  >Learn more<RightArrow /></a>
91
91
  </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
113
113
  <p className="sb-section-item-paragraph">Auto-generate living,
114
114
  interactive reference documentation from your components and stories.</p>
115
115
  <a
116
- href="https://storybook.js.org/docs/writing-docs/autodocs"
116
+ href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
117
117
  target="_blank"
118
118
  >Learn more<RightArrow /></a>
119
119
  </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
128
128
  <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
129
129
  <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
130
130
  <a
131
- href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
131
+ href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
132
132
  target="_blank"
133
133
  >Learn more<RightArrow /></a>
134
134
  </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
144
144
  <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
145
145
  implementation in one place.</p>
146
146
  <a
147
- href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
147
+ href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
148
148
  target="_blank"
149
149
  >Learn more<RightArrow /></a>
150
150
  </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
160
160
  <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
161
161
  complex.</p>
162
162
  <a
163
- href="https://storybook.js.org/docs/writing-tests"
163
+ href="https://storybook.js.org/docs/writing-tests/?renderer=react"
164
164
  target="_blank"
165
165
  >Learn more<RightArrow /></a>
166
166
  </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
175
175
  <h4 className="sb-section-item-heading">Accessibility</h4>
176
176
  <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
177
177
  <a
178
- href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
178
+ href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
179
179
  target="_blank"
180
180
  >Learn more<RightArrow /></a>
181
181
  </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
190
190
  <h4 className="sb-section-item-heading">Theming</h4>
191
191
  <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
192
192
  <a
193
- href="https://storybook.js.org/docs/configure/theming"
193
+ href="https://storybook.js.org/docs/configure/theming/?renderer=react"
194
194
  target="_blank"
195
195
  >Learn more<RightArrow /></a>
196
196
  </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
202
202
  <h4>Addons</h4>
203
203
  <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
204
204
  <a
205
- href="https://storybook.js.org/integrations/"
205
+ href="https://storybook.js.org/addons/"
206
206
  target="_blank"
207
207
  >Discover all addons<RightArrow /></a>
208
208
  </div>
package/template/cli/ts-3-8/Configure.mdx CHANGED
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
52
52
  <h4 className="sb-section-item-heading">Add styling and CSS</h4>
53
53
  <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
54
54
  <a
55
- href="https://storybook.js.org/docs/configure/styling-and-css"
55
+ href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
56
56
  target="_blank"
57
57
  >Learn more<RightArrow /></a>
58
58
  </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
67
67
  <h4 className="sb-section-item-heading">Provide context and mocking</h4>
68
68
  <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
69
69
  <a
70
- href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
70
+ href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
71
71
  target="_blank"
72
72
  >Learn more<RightArrow /></a>
73
73
  </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
85
85
  `staticDirs` configuration option to specify folders to load when
86
86
  starting Storybook.</p>
87
87
  <a
88
- href="https://storybook.js.org/docs/configure/images-and-assets"
88
+ href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
89
89
  target="_blank"
90
90
  >Learn more<RightArrow /></a>
91
91
  </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
113
113
  <p className="sb-section-item-paragraph">Auto-generate living,
114
114
  interactive reference documentation from your components and stories.</p>
115
115
  <a
116
- href="https://storybook.js.org/docs/writing-docs/autodocs"
116
+ href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
117
117
  target="_blank"
118
118
  >Learn more<RightArrow /></a>
119
119
  </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
128
128
  <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
129
129
  <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
130
130
  <a
131
- href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
131
+ href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
132
132
  target="_blank"
133
133
  >Learn more<RightArrow /></a>
134
134
  </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
144
144
  <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
145
145
  implementation in one place.</p>
146
146
  <a
147
- href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
147
+ href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
148
148
  target="_blank"
149
149
  >Learn more<RightArrow /></a>
150
150
  </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
160
160
  <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
161
161
  complex.</p>
162
162
  <a
163
- href="https://storybook.js.org/docs/writing-tests"
163
+ href="https://storybook.js.org/docs/writing-tests/?renderer=react"
164
164
  target="_blank"
165
165
  >Learn more<RightArrow /></a>
166
166
  </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
175
175
  <h4 className="sb-section-item-heading">Accessibility</h4>
176
176
  <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
177
177
  <a
178
- href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
178
+ href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
179
179
  target="_blank"
180
180
  >Learn more<RightArrow /></a>
181
181
  </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
190
190
  <h4 className="sb-section-item-heading">Theming</h4>
191
191
  <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
192
192
  <a
193
- href="https://storybook.js.org/docs/configure/theming"
193
+ href="https://storybook.js.org/docs/configure/theming/?renderer=react"
194
194
  target="_blank"
195
195
  >Learn more<RightArrow /></a>
196
196
  </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
202
202
  <h4>Addons</h4>
203
203
  <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
204
204
  <a
205
- href="https://storybook.js.org/integrations/"
205
+ href="https://storybook.js.org/addons/"
206
206
  target="_blank"
207
207
  >Discover all addons<RightArrow /></a>
208
208
  </div>
package/template/cli/ts-4-9/Configure.mdx CHANGED
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
52
52
  <h4 className="sb-section-item-heading">Add styling and CSS</h4>
53
53
  <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
54
54
  <a
55
- href="https://storybook.js.org/docs/configure/styling-and-css"
55
+ href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
56
56
  target="_blank"
57
57
  >Learn more<RightArrow /></a>
58
58
  </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
67
67
  <h4 className="sb-section-item-heading">Provide context and mocking</h4>
68
68
  <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
69
69
  <a
70
- href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
70
+ href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
71
71
  target="_blank"
72
72
  >Learn more<RightArrow /></a>
73
73
  </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
85
85
  `staticDirs` configuration option to specify folders to load when
86
86
  starting Storybook.</p>
87
87
  <a
88
- href="https://storybook.js.org/docs/configure/images-and-assets"
88
+ href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
89
89
  target="_blank"
90
90
  >Learn more<RightArrow /></a>
91
91
  </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
113
113
  <p className="sb-section-item-paragraph">Auto-generate living,
114
114
  interactive reference documentation from your components and stories.</p>
115
115
  <a
116
- href="https://storybook.js.org/docs/writing-docs/autodocs"
116
+ href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
117
117
  target="_blank"
118
118
  >Learn more<RightArrow /></a>
119
119
  </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
128
128
  <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
129
129
  <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
130
130
  <a
131
- href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
131
+ href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
132
132
  target="_blank"
133
133
  >Learn more<RightArrow /></a>
134
134
  </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
144
144
  <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
145
145
  implementation in one place.</p>
146
146
  <a
147
- href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
147
+ href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
148
148
  target="_blank"
149
149
  >Learn more<RightArrow /></a>
150
150
  </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
160
160
  <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
161
161
  complex.</p>
162
162
  <a
163
- href="https://storybook.js.org/docs/writing-tests"
163
+ href="https://storybook.js.org/docs/writing-tests/?renderer=react"
164
164
  target="_blank"
165
165
  >Learn more<RightArrow /></a>
166
166
  </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
175
175
  <h4 className="sb-section-item-heading">Accessibility</h4>
176
176
  <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
177
177
  <a
178
- href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
178
+ href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
179
179
  target="_blank"
180
180
  >Learn more<RightArrow /></a>
181
181
  </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
190
190
  <h4 className="sb-section-item-heading">Theming</h4>
191
191
  <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
192
192
  <a
193
- href="https://storybook.js.org/docs/configure/theming"
193
+ href="https://storybook.js.org/docs/configure/theming/?renderer=react"
194
194
  target="_blank"
195
195
  >Learn more<RightArrow /></a>
196
196
  </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
202
202
  <h4>Addons</h4>
203
203
  <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
204
204
  <a
205
- href="https://storybook.js.org/integrations/"
205
+ href="https://storybook.js.org/addons/"
206
206
  target="_blank"
207
207
  >Discover all addons<RightArrow /></a>
208
208
  </div>