Руководство по быстрой и простой настройке Storybook и Tailwind в Gatsby. Суть: https://gist.github.com/romansorin/916cf914b90456f0ea584847d0db2db7
Один из моих текущих проектов посвящен документированию и описанию исследования UX, которое я проведу в ближайшие недели / месяцы. При создании этого проекта у меня возникла идея использовать Tailwind, Gatsby, Firebase и Storybook, чтобы запачкать руки, в то же время имея возможность создать приложение без особых усилий.
Пытаясь сделать это, мне было сложно найти какое-либо руководство, в котором рассказывается, как использовать Tailwind и Gatsby с Storybook, и я обнаружил, что традиционная установка привела к тому, что стиль Tailwind не работал правильно или не загружался. После того, как я перешел к рабочей настройке, я решил, что выпущу руководство, чтобы помочь другим, заинтересованным в их интеграции.
Начальная настройка
Начните с создания нового проекта Gatsby:
npm install -g gatsby-cli
gatsby new tailwind-gatsby-storybook
cd tailwind-gatsby-storybook
gatsby develop
Зависимости
Вам нужно будет установить связанные зависимости Tailwind и Storybook, как указано в документации Gatsby. Мы начнем с установки TailwindCSS, CSS-фреймворка в первую очередь утилит, который, на мой взгляд, является лучшим фреймворком ».
Настройка попутного ветра:
npm install tailwindcss --save-dev
npx tailwind init
Это установит фреймворк и создаст tailwind.config.js
файл, который можно использовать для темы и расширения фреймворка.
Затем мы настроим PostCSS для работы с загрузкой директив Gatsby и Tailwind:
npm install --save gatsby-plugin-postcss
В вашем gatsby-config.js
файле измените свойство plugins, чтобы включить этот плагин:
// gatsby-config.js
plugins: [`gatsby-plugin-postcss`],
Создайте postcss.config.js
файл в корне вашего проекта:
// postcss.config.js
module.exports = () => ({ plugins: [require("tailwindcss")], })
Теперь, когда начальная настройка завершена, мы можем установить Storybook для Gatsby. Позже в этом руководстве мы создадим / изменим наш app.css
файл (или то, что вы собираетесь использовать), чтобы использовать директивы Tailwind.
Сборник рассказов
Начните с того, что убедитесь, что у вас установлен CLI. В корне вашего проекта запустите:
npm install -g @storybook/cli
sb init
Это создаст папку .storybook
в корне вашего проекта, которая будет содержать файлы конфигурации сборника рассказов:
.storybook/
- addons.js
- config.js
Отредактируйте файл config.js
, находящийся в каталоге .storybook
:
import { configure } from '@storybook/react' import { action } from '@storybook/addon-actions'
// We will address this later. import '../src/components/layout.css'
// automatically import all files ending in *.stories.js configure(require.context('../src', true, /\\.stories\\.js$/), module)
// Gatsby's Link overrides: // Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here global.___loader = { enqueue: () => {}, hovering: () => {} } // Gatsby internal mocking to prevent unnecessary errors in storybook testing environment global.__PATH_PREFIX__ = '' // This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook window.___navigate = pathname => { action('NavigateTo:')(pathname) }
Примечание. Обратите внимание на каталог, указанный в заявлении configure(require.context(), module)
. Это рекурсивно просканирует указанный каталог и импортирует все *.stories.js
файлы. Для этого руководства (и в соответствии с рекомендациями документации Gatsby) мы переместили все истории в src
.
Затем создайте webpack.config.js
в каталоге .storybook
:
const path = require('path')
module.exports = ({ config }) => { config.module.rules.push({ test: /\\.css$/, use: [ // Loader for webpack to process CSS with PostCSS { loader: 'postcss-loader', options: { sourceMap: true, config: { path: './.storybook/' } } } ],
include: path.resolve(__dirname, '../') }) // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code. config.module.rules[0].exclude = [/node_modules\\/(?!(gatsby)\\/)/]
// use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7) config.module.rules[0].use[0].loader = require.resolve('babel-loader')
// use @babel/preset-react for JSX and env (instead of staged presets) config.module.rules[0].use[0].options.presets = [ require.resolve('@babel/preset-react'), require.resolve('@babel/preset-env') ]
config.module.rules[0].use[0].options.plugins = [ // use @babel/plugin-proposal-class-properties for class arrow functions require.resolve('@babel/plugin-proposal-class-properties'), // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook require.resolve('babel-plugin-remove-graphql-queries') ]
// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint config.resolve.mainFields = ['browser', 'module', 'main']
return config }
Это почти идентично конфигурации, представленной в документации Gatsby, но включает загрузчик PostCSS. Если вы используете Typescript в своем проекте, обратитесь к документации Gatsby о правильной настройке.
На этом этапе структура вашего проекта будет выглядеть примерно так (включая только соответствующие файлы):
tailwind-gatsby-storybook/
├── .storybook/
├── addons.js
├── config.js
├── taildwind.config.js
├── src/
├── components/
├── stories/
├── Examples.stories.js
├── tailwind.config.js
├── postcss.config.js
├── gatsby-config.js
Обратите внимание, что мы еще не создали необходимые файлы CSS для директив, поэтому здесь их нет.
Окончательная настройка
Теперь нам нужно создать основной файл CSS нашего приложения, в котором будут храниться наши директивы, и убедиться, что он правильно указан в наших файлах конфигурации.
Начните с создания файла layout.css
(или файла с аналогичным названием):
touch ./src/components/layout.css
Измените файл:
@tailwind base;
@tailwind components;
@tailwind utilities;
Убедитесь, что ссылка на этот файл в .storybook/config.js
установлена правильно:
import '../src/components/layout.css'
Это должно указывать прямо на файл.
Вот и все! Теперь вы можете создавать истории из сборников рассказов и использовать в них Tailwind + React.
Заключение
Учитывая популярность и недавний рост таких вещей, как Gatsby, Tailwind и Storybook, я подумал, что возможность правильно интегрировать все это окупится. Обнаружив, что и Tailwind, и Gatsby являются очень полезными, быстрыми инструментами для разработки и MVP в изолированных средах, эта интеграция с Storybook для тестирования пользовательского интерфейса / руководства по стилю может повысить воспринимаемую продуктивность в десять раз.
Вы можете найти меня на:
- Twitter: https://twitter.com/romansorinn
- Портфолио: https://romansorin.com
- GitHub: https://github.com/romansorin