Руководство по быстрой и простой настройке 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 для тестирования пользовательского интерфейса / руководства по стилю может повысить воспринимаемую продуктивность в десять раз.

Вы можете найти меня на: