Skip to content

Commit

Permalink
docs(storybook): use ESM for Storybook configs (#18380)
Browse files Browse the repository at this point in the history
  • Loading branch information
@benmccann
benmccann committed Aug 1, 2023
1 parent 67bd9d7 commit fd6bccd
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 24 deletions.
24 changes: 12 additions & 12 deletions docs/generated/packages/storybook/documents/custom-builder-configs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ async viteFinal(config, { configType }) {
In the `viteFinal` case, you would have to import the `mergeConfig` function from `vite`. So, on the top of your root `.storybook/main.js|ts` file, you would have to add:

```ts {% fileName=".storybook/main.js" %}
const { mergeConfig } = require('vite');
import { mergeConfig } from 'vite';
```

## Project-specific configuration
Expand All @@ -57,7 +57,7 @@ const { mergeConfig } = require('vite');
You can customize the `webpack` configuration for a specific project by adding a `webpackFinal` field in your project-specific `.storybok/main.js|ts` file, like this:

```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %}
module.exports = {
export default {
...
webpackFinal: async (config, { configType }) => {

Expand All @@ -71,9 +71,9 @@ module.exports = {
If you are using a global, root-level, `webpack` configuration in your project, you can customize or extend that for a specific project like this:

```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %}
const rootMain = require('../../../.storybook/main');
import rootMain from '../../../.storybook/main';

module.exports = {
export default {
...rootMain,
...
webpackFinal: async (config, { configType }) => {
Expand All @@ -96,10 +96,10 @@ Take note how, in this case, we are first applying the global `webpack` configur
You can customize the `vite` configuration for a specific project by adding a `viteFinal` field in your project-specific `.storybok/main.js|ts` file, like this:

```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';

module.exports = {
export default {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
Expand All @@ -112,10 +112,10 @@ module.exports = {
If you are using a global, root-level, `vite` configuration in your workspace, you can customize or extend that for a specific project like this:

```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const rootMain = require('../../../.storybook/main');
import { mergeConfig } from 'vite';
import rootMain from '../../../.storybook/main';

module.exports = {
export default {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
Expand All @@ -128,9 +128,9 @@ module.exports = {
So, a full project-level `.storybook/main.js|ts` file for a Vite.js project would look like this:

```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
import { mergeConfig } from 'vite';

module.exports = {
export default {
stories: ['../src/app/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
framework: {
Expand Down
24 changes: 12 additions & 12 deletions docs/shared/packages/storybook/custom-builder-configs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ async viteFinal(config, { configType }) {
In the `viteFinal` case, you would have to import the `mergeConfig` function from `vite`. So, on the top of your root `.storybook/main.js|ts` file, you would have to add:

```ts {% fileName=".storybook/main.js" %}
const { mergeConfig } = require('vite');
import { mergeConfig } from 'vite';
```

## Project-specific configuration
Expand All @@ -57,7 +57,7 @@ const { mergeConfig } = require('vite');
You can customize the `webpack` configuration for a specific project by adding a `webpackFinal` field in your project-specific `.storybok/main.js|ts` file, like this:

```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %}
module.exports = {
export default {
...
webpackFinal: async (config, { configType }) => {

Expand All @@ -71,9 +71,9 @@ module.exports = {
If you are using a global, root-level, `webpack` configuration in your project, you can customize or extend that for a specific project like this:

```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %}
const rootMain = require('../../../.storybook/main');
import rootMain from '../../../.storybook/main';

module.exports = {
export default {
...rootMain,
...
webpackFinal: async (config, { configType }) => {
Expand All @@ -96,10 +96,10 @@ Take note how, in this case, we are first applying the global `webpack` configur
You can customize the `vite` configuration for a specific project by adding a `viteFinal` field in your project-specific `.storybok/main.js|ts` file, like this:

```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';

module.exports = {
export default {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
Expand All @@ -112,10 +112,10 @@ module.exports = {
If you are using a global, root-level, `vite` configuration in your workspace, you can customize or extend that for a specific project like this:

```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const rootMain = require('../../../.storybook/main');
import { mergeConfig } from 'vite';
import rootMain from '../../../.storybook/main';

module.exports = {
export default {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
Expand All @@ -128,9 +128,9 @@ module.exports = {
So, a full project-level `.storybook/main.js|ts` file for a Vite.js project would look like this:

```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
import { mergeConfig } from 'vite';

module.exports = {
export default {
stories: ['../src/app/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
framework: {
Expand Down

0 comments on commit fd6bccd

Please sign in to comment.