@storybook/nextjs-vite 9.1.2 → 9.1.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/README.md +3 -1
  2. package/package.json +12 -8
  3. package/template/cli/js/Configure.mdx +11 -11
  4. package/template/cli/ts/Configure.mdx +11 -11
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Storybook for Next.js with Vite Builder
2
2
 
3
- See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react) for installation instructions, usage examples, APIs, and more.
3
+ See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react&ref=readme) for installation instructions, usage examples, APIs, and more.
4
4
 
5
5
  ## Acknowledgements
6
6
 
@@ -8,3 +8,5 @@ This framework borrows heavily from these Storybook addons:
8
8
 
9
9
  - [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next) by [RyanClementsHax](https://github.com/RyanClementsHax/)
10
10
  - [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent)
11
+
12
+ Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
package/package.json CHANGED
@@ -1,11 +1,15 @@
1
1
  {
2
2
  "name": "@storybook/nextjs-vite",
3
- "version": "9.1.2",
4
- "description": "Storybook for Next.js and Vite",
3
+ "version": "9.1.3",
4
+ "description": "Storybook for Next.js and Vite: Develop, document, and test UI components in isolation",
5
5
  "keywords": [
6
6
  "storybook",
7
- "nextjs",
8
- "vite"
7
+ "storybook-framework",
8
+ "next",
9
+ "next.js",
10
+ "vite",
11
+ "component",
12
+ "components"
9
13
  ],
10
14
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs-vite",
11
15
  "bugs": {
@@ -104,9 +108,9 @@
104
108
  "prep": "jiti ../../../scripts/prepare/bundle.ts"
105
109
  },
106
110
  "dependencies": {
107
- "@storybook/builder-vite": "9.1.2",
108
- "@storybook/react": "9.1.2",
109
- "@storybook/react-vite": "9.1.2",
111
+ "@storybook/builder-vite": "9.1.3",
112
+ "@storybook/react": "9.1.3",
113
+ "@storybook/react-vite": "9.1.3",
110
114
  "styled-jsx": "5.1.6",
111
115
  "vite-plugin-storybook-nextjs": "^2.0.5"
112
116
  },
@@ -120,7 +124,7 @@
120
124
  "next": "^14.1.0 || ^15.0.0",
121
125
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
122
126
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
123
- "storybook": "^9.1.2",
127
+ "storybook": "^9.1.3",
124
128
  "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
125
129
  },
126
130
  "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/?renderer=react"
55
+ href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
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/?renderer=react#context-for-mocking"
70
+ href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#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/?renderer=react"
88
+ href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
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/?renderer=react"
116
+ href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
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/?renderer=react#publish-storybook-with-chromatic"
131
+ href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#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/?renderer=react#embed-storybook-in-figma-with-the-plugin"
147
+ href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#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/?renderer=react"
163
+ href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
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/?renderer=react"
178
+ href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
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/?renderer=react"
193
+ href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
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/addons/"
205
+ href="https://storybook.js.org/addons/?ref=configure"
206
206
  target="_blank"
207
207
  >Discover all addons<RightArrow /></a>
208
208
  </div>
@@ -281,7 +281,7 @@ export const RightArrow = () => <svg
281
281
  <p>Follow guided walkthroughs on for key workflows.</p>
282
282
 
283
283
  <a
284
- href="https://storybook.js.org/tutorials/"
284
+ href="https://storybook.js.org/tutorials/?ref=configure"
285
285
  target="_blank"
286
286
  >Discover tutorials<RightArrow /></a>
287
287
  </div>
package/template/cli/ts/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/?renderer=react"
55
+ href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
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/?renderer=react#context-for-mocking"
70
+ href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#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/?renderer=react"
88
+ href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
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/?renderer=react"
116
+ href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
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/?renderer=react#publish-storybook-with-chromatic"
131
+ href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#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/?renderer=react#embed-storybook-in-figma-with-the-plugin"
147
+ href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#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/?renderer=react"
163
+ href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
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/?renderer=react"
178
+ href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
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/?renderer=react"
193
+ href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
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/addons/"
205
+ href="https://storybook.js.org/addons/?ref=configure"
206
206
  target="_blank"
207
207
  >Discover all addons<RightArrow /></a>
208
208
  </div>
@@ -281,7 +281,7 @@ export const RightArrow = () => <svg
281
281
  <p>Follow guided walkthroughs on for key workflows.</p>
282
282
 
283
283
  <a
284
- href="https://storybook.js.org/tutorials/"
284
+ href="https://storybook.js.org/tutorials/?ref=configure"
285
285
  target="_blank"
286
286
  >Discover tutorials<RightArrow /></a>
287
287
  </div>