storybook addon next
v1.8.0
Этот аддон был устарел в пользу @storybook/nextjs, который является официальным аддоном «Сказку» для поддержки функций Next.js в сборнике рассказов. Он поддерживает все, что делает storybook-addon-next , и многое другое! Я даже работал над разработкой этого с ними, чтобы вы были в хороших руках.
Проконсультируйтесь с миграционными документами для получения подробной информации о том, как мигрировать.
? Нет поддержки конфигурации для следующего.JS : устало от написания и отладки конфигурации WebPack? Что Next.js поддерживает из коробки, этот аддон делает возможным в сборнике рассказов
Next.js's Image Component (частичная поддержка)
Next.js маршрутизация
Sass/scss
CSS/SASS/SCSS -модули
Стиль JSX
Postcss
Абсолютный импорт
Конфигурация времени выполнения
Пользовательская конфигурация WebPack
Машинопись
.js , а не расширение .mjs (то есть next.config.js не next.config.mjs )Чтобы запустить любой пример, сначала постройте аддон, запустив
yarn buildв корне этого репо.
Установите storybook-addon-next используя yarn :
yarn add --dev storybook-addon-next Или npm :
npm install --save-dev storybook-addon-next // .storybook/main.js
module . exports = {
// other config ommited for brevity
addons : [
// ...
'storybook-addon-next'
// ...
]
}?? Вот и все! Поддерживаемые функции должны работать из коробки.
См. Документацию для более подробной информации о том, как поддерживаемые функции работают в этом аддоне.
Если что -то не работает, как вы ожидаете, не стесняйтесь открыть проблему.
Этот аддон может быть передан объектом параметров для Addional Configuration, если это необходимо.
Например:
// .storybook/main.js
const path = require ( 'path' )
module . exports = {
// other config ommited for brevity
addons : [
// ...
{
name : 'storybook-addon-next' ,
options : {
nextConfigPath : path . resolve ( __dirname , '../next.config.js' )
}
}
// ...
]
}nextConfigPath : абсолютный путь к next.config.js Следующее/Изображение, как известно, трудно работать с сборниками рассказов. Этот аддон позволяет использовать компонент Image Next.js без конфигурации!
Поскольку компонент изображения имеет функции, такие как оптимизация изображений, настроенные параметрами, которые требуют, чтобы файл конфигурации следующего.js для чтения и обрабатывался структурой, и нет никакой публичной функции, выявленной Next.js для разрешения и этих опций, невозможно стабильно поддерживать эти функции.
Если вы хотите увидеть это лучше, не стесняйтесь внести свой вклад в обсуждение на стороне Next.js или обсуждение на нашей стороне
Местные изображения отлично работают с этим дополнением! Имейте в виду, что эта функция была добавлена только в next.js v11.
import Image from 'next/image'
import profilePic from '../public/me.png'
function Home ( ) {
return (
< >
< h1 > My Homepage </ h1 >
< Image
src = { profilePic }
alt = "Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="../public/me.png" set to equal the image itself (for this addon)
// placeholder="blur" // Optional blur-up while loading
/>
< p > Welcome to my homepage! </ p >
</ >
)
} Удаленные изображения также работают просто отлично!
import Image from 'next/image'
export default function Home ( ) {
return (
< >
< h1 > My Homepage </ h1 >
< Image
src = "/me.png"
alt = "Picture of the author"
width = { 500 }
height = { 500 }
/>
< p > Welcome to my homepage! </ p >
</ >
)
} Все следующие Image S автоматически нептимизированы для вас.
Если используется Placehalder = "Blur", используемый Blurdataurl является SRC изображения (таким образом, эффективно отключение заполнителя).
Смотрите этот вопрос, чтобы узнать больше о том, как следующие Image .
Этот формат еще не поддерживается этим аддоном. Не стесняйтесь открыть проблему, если вы хотите увидеть это.
Это решение в значительной степени основано на сказочном образовании-нен-маршруте, так что большое спасибо lifeiscontent за предоставление хорошего решения, из которого может сработать этот аддон.
Следующий маршрутизатор JS автоматически загрязняется для вас, так что, когда маршрутизатор взаимодействует, все его взаимодействия автоматически регистрируются на вкладке «Действия», если у вас есть Adces Addon.
Переопределения в течение всего можно сделать, добавив свойство nextRouter в параметры истории. Аддон неявенно объединяет все, что вы вкладываете сюда в маршрутизатор.
import SomeComponentThatUsesTheRouter from "./SomeComponentThatUsesTheRouter" ;
export default {
title : "My Story" ,
} ;
// if you have the actions addon
// you can click the links and see the route change events there
export const Example = ( ) => < SomeComponentThatUsesTheRouter /> ;
Example . parameters : {
nextRouter : {
path : "/profile/[id]" ,
asPath : "/profile/ryanclementshax" ,
query : {
id : "ryanclementshax"
}
}
}Смотрите этот пример для ссылки.
Глобальные значения по умолчанию могут быть установлены в Preview.js и будут неявлены с помощью маршрутизатора по умолчанию.
export const parameters = {
nextRouter : {
path : '/some-default-path' ,
asPath : '/some-default-path' ,
query : { }
}
}Смотрите этот пример для ссылки.
Значения по умолчанию на заглушенном маршрутизаторе заключаются в следующем (см. Globals для получения более подробной информации о том, как работают глобалы)
const defaultRouter = {
locale : context ?. globals ?. locale ,
route : '/' ,
pathname : '/' ,
query : { } ,
asPath : '/' ,
push ( ... args : unknown [ ] ) {
action ( 'nextRouter.push' ) ( ... args )
return Promise . resolve ( true )
} ,
replace ( ... args : unknown [ ] ) {
action ( 'nextRouter.replace' ) ( ... args )
return Promise . resolve ( true )
} ,
reload ( ... args : unknown [ ] ) {
action ( 'nextRouter.reload' ) ( ... args )
} ,
back ( ... args : unknown [ ] ) {
action ( 'nextRouter.back' ) ( ... args )
} ,
prefetch ( ... args : unknown [ ] ) {
action ( 'nextRouter.prefetch' ) ( ... args )
return Promise . resolve ( )
} ,
beforePopState ( ... args : unknown [ ] ) {
action ( 'nextRouter.beforePopState' ) ( ... args )
} ,
events : {
on ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.on' ) ( ... args )
} ,
off ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.off' ) ( ... args )
} ,
emit ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.emit' ) ( ... args )
}
} ,
isFallback : false
} Если вы переопределяете функцию, вы теряете интеграцию вкладки «Автоматическое действие» и необходимо создать ее самостоятельно.
export const parameters = {
nextRouter : {
push ( ) {
// we lose the default implementation that logs the action into the action tab
}
}
} Сделав это самостоятельно выглядит примерно так (убедитесь, что вы установили пакет @storybook/addon-actions ):
import { action } from '@storybook/addon-actions'
export const parameters = {
nextRouter : {
push ( ... args ) {
// custom logic can go here
// this logs to the actions tab
action ( 'nextRouter.push' ) ( ... args )
// return whatever you want here
return Promise . resolve ( true )
}
}
}Глобальные таблицы стилей SASS/SCSS также поддерживаются без какой -либо дополнительной конфигурации. Просто импортируйте их в preview.js
import '../styles/globals.scss' Это автоматически будет включать любую из ваших пользовательских конфигураций SASS в вашем файле next.config.js .
Прямо сейчас поддерживается только расширение
.jsследующей конфигурации.mjsСм. Next.config.js для более подробной информации.
const path = require ( 'path' )
module . exports = {
// any options here are included in sass compilation for your stories
sassOptions : {
includePaths : [ path . join ( __dirname , 'styles' ) ]
}
}Next.js поддерживает модули CSS из коробки, так что этот аддон также поддерживает его.
// this import works just fine in Storybook now
import styles from './Button.module.css'
// sass/scss is also supported
// import styles from './Button.module.scss'
// import styles from './Button.module.sass'
export function Button ( ) {
return (
< button type = "button" className = { styles . error } >
Destroy
</ button >
)
}Встроенное решение CSS в JS для next.js является стилизованным JSX, и этот аддон также поддерживает это из коробки, Zero Config.
// This works just fine in Storybook with this addon
function HelloWorld ( ) {
return (
< div >
Hello world
< p > scoped! </ p >
< style jsx > { `
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
` } </ style >
< style global jsx > { `
body {
background: black;
}
` } </ style >
</ div >
)
}
export default HelloWorldВы также можете использовать свою собственную конфигурацию Babel. Это пример того, как вы можете настроить стиль-JSX.
// .babelrc or whatever config file you use
{
"presets" : [
[
" next/babel " ,
{
"styled-jsx" : {
"plugins" : [ " @styled-jsx/plugin-sass " ]
}
}
]
]
}Если вы используете MonorePo, вам может потребоваться добавить конфигурацию Babel самостоятельно в свой проект сборника рассказов. Просто добавьте конфигурацию Babel в свой проект сборника рассказов со следующим содержимым, чтобы начать работу.
{
"presets" : [ " next/babel " ]
}Next.js позволяет настроить конфигурацию PostCSS. Таким образом, этот аддон автоматически обрабатывает вашу конфигурацию PostCSS для вас.
Это позволяет для прохладных вещей, таких как Zero ConfigWindcss! Смотрите пример с TailWindcss для справки! Это клон примера Tailwindcss next.js, настроенный на сборник рассказов и этого аддона.
До свидания ../ ! Абсолютный импорт из корневого каталога работает отлично с этим дополнением.
// All good!
import Button from 'components/button'
// Also good!
import styles from 'styles/HomePage.module.css'
export default function HomePage ( ) {
return (
< >
< h1 className = { styles . title } > Hello World </ h1 >
< Button />
</ >
)
} // preview.js
// Also ok in preview.js!
import 'styles/globals.scss'
// ... Next.js позволяет создавать конфигурацию времени выполнения, которая позволяет импортировать удобную функцию getConfig , чтобы получить определенную конфигурацию, определенную в вашем файле next.config.js во время выполнения.
В контексте сборника рассказов с этим дополнением вы можете ожидать, что функция конфигурации времени выполнения следующей.
Обратите внимание, поскольку Storybook не визует ваши компоненты, ваши компоненты увидят только то, что они обычно видят на стороне клиента (то есть они не увидят serverRuntimeConfig , но увидят publicRuntimeConfig ).
Например, рассмотрим следующую конфигурацию следующего.js:
// next.config.js
module . exports = {
serverRuntimeConfig : {
mySecret : 'secret' ,
secondSecret : process . env . SECOND_SECRET // Pass through env variables
} ,
publicRuntimeConfig : {
staticFolder : '/static'
}
} Призывы к getConfig вернет следующий объект при вызове в рамках сборника рассказов:
{
"serverRuntimeConfig" : {},
"publicRuntimeConfig" : {
"staticFolder" : " /static "
}
}Next.js поставляется с множеством вещей бесплатно из коробки, такого как поддержка SASS, но иногда мы добавляем пользовательские модификации конфигурации WebPack в next.js. Этот аддон заботится о большинстве модификаций WebPack, которые вы хотели бы добавить. Если Next.js поддержит функцию из коробки, то этот аддон заставит эту функцию работать из коробки в сборнике рассказов. Если Next.js не поддерживает что -то из коробки, но облегчает настройку, то этот аддон сделает то же самое для этой вещи для сборника рассказов. Если вы найдете то, что вам все еще нужно настроить WebPack, чтобы получить функцию следующего.js для работы в сборнике рассказов после добавления этого дополнения, это, вероятно, ошибка, и, пожалуйста, не стесняйтесь открыть проблему.
Любые модификации Webpack, желаемые для сборника рассказов, должны быть внесены в .storybook/main.js в соответствии с документами Storybook.
Примечание. Не все изменения WebPack могут копировать/вставьте между next.config.js и .storybook/main.js . Рекомендуется сделать свой анализ о том, как правильно сделать модификацию в конфигурации WebPack Storybook и о том, как работает WebPack.
Пожалуйста, не стесняйтесь внести пример, чтобы помочь сообществу.
Ниже приведен пример того, как добавить поддержку SVGR в сборник рассказов с этим дополнением. Полный пример можно найти здесь.
// .storybook/main.js
module . exports = {
// other config omitted for brevity
webpackFinal : async config => {
// this modifies the existing image rule to exclude .svg files
// since we want to handle those files with @svgr/webpack
const imageRule = config . module . rules . find ( rule => rule . test . test ( '.svg' ) )
imageRule . exclude = / .svg$ /
// configure .svg files to be loaded with @svgr/webpack
config . module . rules . push ( {
test : / .svg$ / ,
use : [ '@svgr/webpack' ]
} )
return config
}
} Строительники обрабатывают большинство конфигураций TypeScript, но этот дополняет дополнительную поддержку для поддержки Next.js абсолютного импорта и псевдонимов модуля. Короче говоря, это учитывает Baseurl и пути вашего tsconfig.json . Таким образом, tsconfig.json , как приведенный ниже, будет работать из коробки.
{
"compilerOptions" : {
"baseUrl" : " . " ,
"paths" : {
"@/components/*" : [ " components/* " ]
}
}
} Прямо сейчас единственным поддерживаемым форматом конфигурации для letle.js, который поддерживает этот плагин, является версия Config Config (т.е. next.config.js ). Это в основном потому, что я не понял, как потребовать файла .mjs из аддона сборника рассказов (который связан с модулями CommonJS, насколько я знаю сейчас). Если вы можете помочь, я бы хотел, если бы вы могли внести свой вклад в это обсуждение, чтобы получить поддержку версии .mjs , если такая поддержка возможна.
Если вы используете пряжу V2 или V3, вы можете столкнуться с проблемами, где сборник рассказов не может разрешить style-loader или css-loader . Например, вы можете получить ошибки, такие как:
Module not found: Error: Can't resolve 'css-loader'
Module not found: Error: Can't resolve 'style-loader'
Это связано с тем, что эти версии пряжи имеют разные правила разрешения упаковки, чем пряжа V1.x. Если это так, просто установите пакет напрямую.
Убедитесь, что вы относитесь к импорту изображений так же, как и их относиться при использовании следующего изображения в нормальном развитии.
Перед storybook-addon-next импорт изображений только что импортировал необработанный путь к изображению (например 'static/media/stories/assets/plugin.svg' ). При использовании storybook-addon-next Image Import работает над «hearl.js Way», что означает, что теперь мы получаем объект, когда им импортируем изображение. Например:
{
"src" : " static/media/stories/assets/plugin.svg " ,
"height" : 48 ,
"width" : 48 ,
"blurDataURL" : " static/media/stories/assets/plugin.svg "
}Поэтому, если что -то в сборнике рассказов не показывает изображение должным образом, убедитесь, что вы ожидаете, что объект будет возвращен от импорта, а не только от пути актива.
Смотрите локальные изображения для получения более подробной информации о том, как Next.js относится к статическому импорту изображения.
Прямо сейчас используя next.config.mjs не поддерживается этим аддоном. См. Next.config.js для более подробной информации. Прямо сейчас вам необходимо использовать расширение .js . Не стесняйтесь помочь в этом обсуждении, чтобы получить это поддержание.
Вы можете получить это, если используете пряжу V2 или V3. См. Примечания для пользователей пряжи V2 и V3 для получения более подробной информации.
Я открыт для обсуждения. Не стесняйтесь открыть проблему.
Была ли для вас недостаточной документации недостаточно для вас?
Это было сбивающим с толку?
Было ли это ... Смею ли я сказать ... неточный?
Если какое -либо из вышеперечисленного описывает ваши чувства этой документации. Не стесняйтесь открыть проблему.
