GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove docs on default router and navigation contexts

Browse Source
This commit is contained in:
Jeppe Reinhold 2024-04-18 13:14:20 +02:00
parent 5bab73ae83
commit 46c31ebbd9
5 changed files with 2 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
docs/get-started/nextjs.md
View File

@ -301,41 +301,6 @@ The default values on the stubbed router are as follows (see [globals](../essent
```ts
// Default router
const defaultRouter = {
push(...args) {
action('nextRouter.push')(...args);
return Promise.resolve(true);
},
replace(...args) {
action('nextRouter.replace')(...args);
return Promise.resolve(true);
},
reload(...args) {
action('nextRouter.reload')(...args);
},
back(...args) {
action('nextRouter.back')(...args);
},
forward() {
action('nextRouter.forward')();
},
prefetch(...args) {
action('nextRouter.prefetch')(...args);
return Promise.resolve();
},
beforePopState(...args) {
action('nextRouter.beforePopState')(...args);
},
events: {
on(...args) {
action('nextRouter.events.on')(...args);
},
off(...args) {
action('nextRouter.events.off')(...args);
},
emit(...args) {
action('nextRouter.events.emit')(...args);
},
},
// The locale should be configured globally: https://storybook.js.org/docs/essentials/toolbars-and-globals#globals
locale: globals?.locale,
asPath: '/',
@ -350,20 +315,7 @@ const defaultRouter = {
};
```
### Actions integration caveats
If you override a function, you lose the automatic action tab integration and have to build it out yourself, which looks something like this (make sure you install the `@storybook/addon-actions` package):
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'react/nextjs-router-push-override-in-preview.js.mdx',
'react/nextjs-router-push-override-in-preview.ts.mdx'
]}
/>
<!-- prettier-ignore-end -->
All the functions (such as `back()`, `push()`) are mock functions that can be manipulated and asserted on using [regular mock APIs](https://vitest.dev/api/mock.html).
## Next.js navigation
@ -493,43 +445,12 @@ The default values on the stubbed navigation context are as follows:
```ts
// Default navigation context
const defaultNavigationContext = {
push(...args) {
action('nextNavigation.push')(...args);
},
replace(...args) {
action('nextNavigation.replace')(...args);
},
forward(...args) {
action('nextNavigation.forward')(...args);
},
back(...args) {
action('nextNavigation.back')(...args);
},
prefetch(...args) {
action('nextNavigation.prefetch')(...args);
},
refresh: () => {
action('nextNavigation.refresh')();
},
pathname: '/',
query: {},
};
```
### Actions integration caveats
If you override a function, you lose the automatic action tab integration and have to build it out yourself, which looks something like this (make sure you install the `@storybook/addon-actions` package):
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'react/nextjs-navigation-push-override-in-preview.js.mdx',
'react/nextjs-navigation-push-override-in-preview.ts.mdx'
]}
/>
<!-- prettier-ignore-end -->
All the functions (such as `back()`, `push()`) are mock functions that can be manipulated and asserted on using [regular mock APIs](https://vitest.dev/api/mock.html).
## Next.js Head

21
docs/snippets/react/nextjs-navigation-push-override-in-preview.js.mdx
View File

@ -1,21 +0,0 @@
```js
// .storybook/preview.js
export default {
// ...
parameters: {
// ...
nextjs: {
navigation: {
push(...args) {
// Custom logic can go here
// This logs to the Actions panel
action('nextNavigation.push')(...args);
// Return whatever you want here
return Promise.resolve(true);
},
},
},
},
};
```

24
docs/snippets/react/nextjs-navigation-push-override-in-preview.ts.mdx
View File

@ -1,24 +0,0 @@
```ts
// .storybook/preview.ts
import { Preview } from '@storybook/react';
const preview: Preview = {
// ...
parameters: {
// ...
nextjs: {
navigation: {
push(...args) {
// Custom logic can go here
// This logs to the Actions panel
action('nextNavigation.push')(...args);
// Return whatever you want here
return Promise.resolve(true);
},
},
},
},
};
export default preview;
```

21
docs/snippets/react/nextjs-router-push-override-in-preview.js.mdx
View File

@ -1,21 +0,0 @@
```js
// .storybook/preview.js
export default {
// ...
parameters: {
// ...
nextjs: {
router: {
push(...args) {
// Custom logic can go here
// This logs to the Actions panel
action('nextRouter.push')(...args);
// Return whatever you want here
return Promise.resolve(true);
},
},
},
},
};
```

24
docs/snippets/react/nextjs-router-push-override-in-preview.ts.mdx
View File

@ -1,24 +0,0 @@
```ts
// .storybook/preview.ts
import { Preview } from '@storybook/react';
const preview: Preview = {
// ...
parameters: {
// ...
nextjs: {
router: {
push(...args) {
// Custom logic can go here
// This logs to the Actions panel
action('nextRouter.push')(...args);
// Return whatever you want here
return Promise.resolve(true);
},
},
},
},
};
export default preview;
```