Skip to content

Commit 298f719

Browse files
mandariniFrozenPandaz
mandarini
authored and
FrozenPandaz
committed
fix(storybook): v7 vite settings docs remove rootMain (#14992)
(cherry picked from commit 1b64e17)
1 parent ed0e6c7 commit 298f719

File tree

15 files changed

+304
-554
lines changed

15 files changed

+304
-554
lines changed

‎.storybook/main.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎docs/generated/packages/storybook/documents/migrate-storybook-7.md

Lines changed: 58 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ The Storybook CLI will prompt you to run some code generators and modifiers.
5252

5353
Say `yes` to the following:
5454

55-
- `mainjsFramework`: It will add the `framework` field in your root `.storybook/main.js|ts` file. We are going to delete it since it's not needed in the root file, but it's handy to have it ready to copy. Also, it shows you an indication of what it looks like.
55+
- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file.
5656
- `eslintPlugin`: installs the `eslint-plugin-storybook`
5757
- `storybook-binary`: installs Storybook's `storybook` binary
5858
- `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`)
@@ -61,21 +61,6 @@ Say `no` to the following:
6161

6262
- `autodocsTrue`: we don't need it and it can potentially cause issues with missing dependencies on your Nx workspace
6363

64-
### 3. Restore the root `.storybook/main.js|ts` file
65-
66-
You will have noticed that the Storybook automigrator added the `framework` option to your root `.storybook/main.js|ts` file. Let's remove that.
67-
68-
So, remove:
69-
70-
```ts
71-
framework: {
72-
name: '@storybook/angular',
73-
options: {}
74-
}
75-
```
76-
77-
from your root `.storybook/main.js|ts` file.
78-
7964
### 3. Edit all the project-level `.storybook/main.js|ts` files
8065

8166
Find all your project-level `.storybook/main.js|ts` files and edit them to add the `framework` option. While you are at it, remove the `builder` from `core` options.
@@ -87,7 +72,7 @@ In your project-level `.storybook/main.js|ts` files, remove the `builder` from `
8772
Your core options most probably look like this:
8873

8974
```ts
90-
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
75+
core: { builder: '@storybook/builder-vite' },
9176
```
9277

9378
You must remove the `builder`, or you can also delete the `core` object entirely.
@@ -126,12 +111,16 @@ Choose the `@storybook/angular` framework. So add this in your project-level `.s
126111

127112
#### For React projects using `'@storybook/builder-vite'`
128113

129-
Choose the `@storybook/react-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
114+
Choose the `@storybook/react-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
130115

131116
```ts
132117
framework: {
133118
name: '@storybook/react-vite',
134-
options: {}
119+
options: {
120+
builder: {
121+
viteConfigPath: 'apps/my-app/vite.config.ts',
122+
},
123+
}
135124
}
136125
```
137126

@@ -159,12 +148,16 @@ Choose the `@storybook/nextjs` framework. So add this in your project-level `.st
159148

160149
#### For Web Components projects using `'@storybook/builder-vite'`
161150

162-
Choose the `@storybook/web-components-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
151+
Choose the `@storybook/web-components-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
163152

164153
```ts
165154
framework: {
166155
name: '@storybook/web-components-vite',
167-
options: {}
156+
options: {
157+
builder: {
158+
viteConfigPath: 'apps/my-app/vite.config.ts',
159+
},
160+
}
168161
}
169162
```
170163

@@ -183,79 +176,67 @@ Choose the `@storybook/web-components-webpack5` framework. So add this in your p
183176

184177
You can easily find the correct framework by looking at the `builder` option in your project-level `.storybook/main.js|ts` file.
185178

186-
#### Resulting project-level `.storybook/main.js|ts` file
179+
### 4. Check result of project-level `.storybook/main.js|ts` file
180+
181+
#### Full example for Angular projects
187182

188183
Here is an example of a project-level `.storybook/main.js|ts` file for an Angular project:
189184

190-
```ts
191-
// apps/my-angular-app/.storybook/main.js|ts
192-
193-
const rootMain = require('../../../.storybook/main');
194-
195-
module.exports = {
196-
...rootMain,
197-
stories: [
198-
...rootMain.stories,
199-
'../src/app/**/*.stories.mdx',
200-
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
201-
],
202-
addons: [...rootMain.addons],
185+
```ts {% fileName="apps/my-angular-app/.storybook/main.js" %}
186+
const config = {
187+
stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
188+
addons: ['@storybook/addon-essentials'],
203189
framework: {
204190
name: '@storybook/angular',
205191
options: {},
206192
},
207193
};
208-
```
209-
210-
### 4. For Vite.js projects
211194

212-
Make sure to add the `viteFinal` option to your project-level `.storybook/main.js|ts` files on projects that use Vite.js.
213-
214-
```ts
215-
async viteFinal(config, { configType }) {
216-
return mergeConfig(config, {
217-
plugins: [
218-
viteTsConfigPaths({
219-
root: '<PATH_TO_PROJECT_ROOT>',
220-
}),
221-
],
222-
});
223-
},
195+
export default config;
224196
```
225197

226-
This will take care of any path resolution issues.
198+
#### Full example for React projects with Vite
227199

228-
An example of a project-level `.storybook/main.js|ts` file for a React project that uses Vite.js:
200+
Here is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite:
229201

230-
```ts
231-
// apps/my-react-vite-app/.storybook/main.js|ts
232-
233-
const { mergeConfig } = require('vite');
234-
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
235-
const rootMain = require('../../../.storybook/main');
236-
237-
module.exports = {
238-
...rootMain,
239-
stories: [
240-
...rootMain.stories,
241-
'../src/app/**/*.stories.mdx',
242-
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
243-
],
244-
addons: [...rootMain.addons],
245-
async viteFinal(config, { configType }) {
246-
return mergeConfig(config, {
247-
plugins: [
248-
viteTsConfigPaths({
249-
root: '../../../',
250-
}),
251-
],
252-
});
253-
},
202+
```ts {% fileName="apps/my-react-app/.storybook/main.js" %}
203+
const config = {
204+
stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
205+
addons: ['@storybook/addon-essentials'],
254206
framework: {
255207
name: '@storybook/react-vite',
256-
options: {},
208+
options: {
209+
builder: {
210+
viteConfigPath: 'apps/rv1/vite.config.ts',
211+
},
212+
},
257213
},
258214
};
215+
216+
export default config;
217+
```
218+
219+
### 5. Remove `uiFramework` from `project.json`
220+
221+
You can now remove the `uiFramework` option from your `storybook` and `build-storybook` targets in your project's `project.json` file.
222+
223+
So, for example, this is what a resulting `storybook` target would look for a non-Angular project:
224+
225+
```json {% fileName="apps/my-react-app/project.json" %}
226+
{
227+
...
228+
"targets": {
229+
...
230+
"storybook": {
231+
"executor": "@nrwl/storybook:storybook",
232+
"options": {
233+
"port": 4400,
234+
"configDir": "apps/my-react-app/.storybook"
235+
},
236+
"configurations": {
237+
...
238+
}
239+
},
259240
```
260241

261242
## Use Storybook 7 beta

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy