React Storybook: разрабатывайте красивые пользовательские интерфейсы с легкостью
Когда вы начинаете новый интерфейсный проект, первое, что вы обычно делаете, это создаете красивый дизайн. Вы тщательно планируете и рисуете все свои компоненты пользовательского интерфейса, а также каждое состояние или эффект, который они могут иметь. Тем не менее, во время разработки вещи обычно начинают меняться. Здесь и там появляются новые требования, а также непредвиденные варианты использования. Исходная библиотека красивых компонентов не может покрыть все эти требования, и вы начинаете расширять ее новыми проектами.
Хорошо, если на этом этапе у вас все еще есть эксперт по дизайну, но слишком часто они уже переключились на другой проект и оставили разработчиков, чтобы справиться с этими изменениями. В результате последовательность дизайна начинает скользить. Становится трудно отследить, какие компоненты у вас уже есть в вашей библиотеке и какие состояния и внешний вид они могут иметь.
Зачем вам нужен сборник рассказов?
Так как же помогает эта витрина? Чтобы ответить на этот вопрос, давайте попробуем составить список людей, которые принимают участие в разработке компонентов пользовательского интерфейса и оценивают их потребности. В зависимости от вашего рабочего процесса этот список может отличаться, но обычно возникают следующие подозрения:
Дизайнер или эксперт по UX
Это человек, ответственный за внешний вид пользовательского интерфейса. После того, как фаза макета проекта закончена, дизайнер часто покидает команду. Когда возникают новые требования, им нужно быстро догнать текущее состояние пользовательского интерфейса.
разработчик
Разработчик — это тот, кто создает эти компоненты, и, вероятно, главный бенефициар руководства по стилю. Два основных варианта использования для разработчика — найти подходящий компонент из библиотеки и протестировать его во время разработки.
тестер
Это дотошный человек, который следит за тем, чтобы компоненты были реализованы как положено. Основная часть работы тестера — убедиться, что компонент ведет себя корректно во всех отношениях. И хотя это не устраняет необходимость в интеграционном тестировании, зачастую это удобнее делать отдельно от самого проекта.
Владелец продукта
Человек, который принимает проекты и реализацию. Владелец продукта должен убедиться, что каждая часть проекта выглядит так, как ожидалось, и чтобы стиль бренда был представлен последовательно.
Вы, наверное, заметили, что общим знаменателем для всех участников является наличие единого места, содержащего все компоненты одновременно. Найти их все в самом проекте может быть довольно утомительно. Подумайте об этом, сколько времени вам потребуется, чтобы найти все возможные варианты кнопок в вашем проекте, включая их состояния (отключены, первичные, вторичные и т. Д.)? Поэтому иметь отдельную галерею гораздо удобнее.
Если мне удалось убедить вас, давайте посмотрим, как мы можем настроить Storybook в проекте.
Настройка React Storybook
Чтобы создать сборник рассказов, установите getstorybook глобально
Затем перейдите к вашему проекту и запустите
Эта команда сделает три вещи:
Чтобы запустить Storybook, выполните npm run storybook и откройте отображаемый адрес ( http: // localhost: 9009 / ). Приложение должно выглядеть так:
Добавление нового контента
Теперь, когда у нас запущен React Storybook, давайте посмотрим, как мы можем добавлять новый контент. Каждая новая страница добавляется путем создания историй. Это фрагменты кода, которые визуализируют ваш компонент. Пример истории, созданной getstorybook выглядит следующим образом
Функция storiesOf создает новый раздел в меню навигации, а метод add создает новый подраздел. Вы можете структурировать сборник рассказов, как считаете нужным, но вы не можете создавать иерархии глубже двух уровней. Простым подходом к структурированию сборника рассказов является создание общих разделов верхнего уровня, таких как «Входы форм», «Навигация» или «Виджеты» для групп связанных элементов и подразделов для отдельных компонентов.
Вы можете сами выбирать, где разместить файлы истории: в отдельной папке историй или рядом с компонентами. Лично я предпочитаю последнее, поскольку поддержание историй вблизи компонентов помогает поддерживать их доступность и актуальность.
Написание новой истории
Теперь, когда мы немного адаптировали сборник рассказов к нашим потребностям, давайте напишем нашу первую историю. Но прежде всего нам нужно создать компонент для демонстрации. Давайте создадим простой компонент Name для отображения имени в цветном блоке. Компонент будет иметь следующие JavaScript и CSS.
Откройте сборник рассказов и взгляните на свой новый компонент. Результат должен выглядеть так:
Не стесняйтесь поиграть с тем, как отображается компонент, а также с его источником. Обратите внимание, что благодаря функции горячей перезагрузки React, когда вы редактируете историю или компонент, изменения сразу же появляются в вашей сборнике рассказов без необходимости вручную обновлять браузер. Однако обновление может потребоваться при добавлении или удалении файла. Сборник рассказов не всегда замечает такие изменения.
Что такое Storybook и как я могу использовать его для создания библиотеки компонентов в React?
Такие фреймворки, как React, Vue и Angular, помогают разработчикам создавать модульные системы с использованием компонентов, но обычно это не дает хорошего способа увидеть их все с более высокой точки зрения.
Итак, как мы можем использовать Storybook для создания библиотек и систем проектирования, которые самодокументируются по мере их создания?
Что такое сборник рассказов?
После создания компонента Storybook позволяет создать файл «истории», в который затем можно импортировать компонент и создавать различные примеры использования в песочнице iFramed с использованием этого компонента.
Это обеспечивает организованную и целенаправленную среду для создания новых компонентов и работы над существующими.
Что будем строить?
Мы собираемся загрузить новое приложение React JS с помощью Create React App.
Внутри этого приложения мы собираемся установить Storybook и создать несколько новых компонентов, которые помогут нам научиться создавать новые компоненты, над которыми мы можем работать в истории, а затем использовать их в приложении React.
Шаг 0: загрузка приложения
Для начала мы начнем с нуля с помощью приложения Create React. Это поможет нам сосредоточиться на работе с Storybook, а не на интеграции в текущее приложение.
Тем не менее, если вы уже работаете с приложением, созданным с помощью приложения Create React, которое не было извлечено, вы все равно сможете продолжить с Частью 1 и далее точно так же!
Итак, давайте начнем с перехода туда, где мы хотим создать наше новое приложение, и выполните команду Create React App:
Примечание: не стесняйтесь заменить my-storybook имя каталога по вашему выбору.
После завершения работы вы можете перейти в каталог:
И мы готовы к работе!
Шаг 1. Установка Storybook
К счастью, Storybook позволяет легко начать работу со стандартной установкой React. В частности, с приложением Create React, Storybook автоматически обнаруживает, что мы используем приложение, созданное с помощью CRA, и устанавливает зависимости и все для нас.
Инициализация сборника рассказов
Чтобы начать установку Storybook, запустите:
Если вы не используете приложение Create React или оно не сработало, вы можете ознакомиться с их доступными руководствами в их документации.
После этого должны быть установлены все наши зависимости Storybook.
Запуск сборника рассказов
Итак, теперь мы готовы двинуться в путь! Наконец, запустите:
И как только все загрузится, Storybook откроет новую вкладку в вашем браузере, и теперь вы должны увидеть приветственное сообщение внутри своей новой панели инструментов Storybook!
Следуйте за коммитом!
Шаг 2: Создание новой кнопки
Если вы потратили секунду, чтобы осмотреть панель управления, вы могли заметить, что она поставляется с предварительно загруженной кнопкой, доступной в качестве демонстрации.
Вы также должны заметить, что если вы нажмете кнопку, вы действительно увидите распечатанное действие внутри вкладки Действия внизу. Это показывает событие, зафиксированное нажатием кнопки.
It’s simple, but this is great to get a nice feel about what to expect in storybook. The only issue is, this is meant purely for demonstration purposes, so let’s build our own button to replace it.
Creating a new Button component
To get started, let’s first create a few directories:
Once you create those folders, create a new file called index.js inside of your src/components/Button folder and inside add:
Next, let’s create Button.js right next to our index.js file with the following content:
If you’ve followed along, your files should now look like this:
Using our new Button component
So now that we have our Button component, let’s use it!
Open up the file src/stories/1-Button.stories.js and replace the line that’s importing Button with:
And once you hit save, you can open back up your browser tab with your Storybook dashboard, and you can now see a button that looks mostly similar, but it uses the browser’s default styles for the element. You’ll even notice that if you click it, the event will still be logged under the Actions tab.
Styling our Button component
Finally, we probably don’t want to use the browser default styles, so let’s make it look nice.
In our src/components/Button directory, add a new file Button.css and add the following content:
But if you open Storybook, you’ll notice it didn’t do anything. To use it, we need to import it into our component.
Inside src/components/Button/Button.js add the following at the top under the React import:
And once you save that and open up your browser, you should now see our new button with our updated styles!
Follow along with the commit!
Step 3: Using our new Button component
The ultimate goal of our component is to use it right? So let’s add it to our app.
Switching over to the React app
First we’ll need to either start our React app in a new terminal tab or kill the Storybook process and start the React process there. To start the React app using Create React App, run:
Once that loads, we should have our standard Create React App if you’re following along with me:
Importing and using the new button
With Button imported, we can use it. Here, we can simply add it anywhere we want in the page. I’m going to replace the Learn React link with:
And if we save and reload the page, we should now see our Button on the page!
Follow along with the commit
Repeat: Creating a new Header component
The great thing about Storybook and React (or any of the supported frameworks) is that this process scales to as many components as you want.
So let’s build another component!
Creating our Header component
Similar to our Button, let’s start off by creating the set of directories and files that give us our component.
Since we already did this once, I’m going to provide the code without walking through what’s going on.
Let’s start off by spinning back up our Storybook server with:
Create a Header directory inside the src/components directory.
Create an index.js file inside of src/components/Header with the following content:
Create a Header.js file inside of src/components/Header with the following content:
Create a Header.css file inside of src/components/Header with the following content:
Now if you notice, if you try to open up Storybook, again, nothing will happen. This time we need to create a new story file.
Creating a new Story file
Here’s a breakdown of our story file:
And if you save this file and open up your Storybook dashboard in the browser, you should now see the new header!
Using the Header component
After starting your React server, first import our new Header:
Then add it to the top of the page:
And if you open the page, we’ll see our new Header!
Follow along with the commit!
Adding more components
As you’ve noticed with our second Repeat step – adding a new component is pretty much the same process for any type of component we want to add. Once we have it in our library, we can develop it in a focused environment and then import it to our app to use.
You can now use this to manage your library of components and better maintain an entire system for your project!
More Storybook features
Storybook doesn’t stop with just adding components, it provides the ability to configure Addons that enhance the core capabilities opening up a lot of possibilities.
Here are some of my favorites.
Story Source
When building a component system, the hope is that people can easily use these components. But if you don’t have documentation, someone would have to open up the file or try to find another use example.
Instead, Story Source shows the code source of the story file you created allowing someone browsing your Storybook dashboard to get an example right along with the component output!
Storyshots
If you’re a fan of automated testing, you might have heard of using Jest or another tool for adding snapshot testing to your app.
StoryShots is a way to easily add Jest snapshot testing to your component system. It creates snapshots based off of the stories you create so you can make sure that your components aren’t fundamentally changing (or breaking) during development.
What’s your favorite part of Storybook?
Share with me on Twitter!
Continue the conversation!
Я узнаю, что такое Storybook и как начать? #Webdev # 100DaysOfCode // t.co / 4TLFlmp4Df
— Колби Фэйок (@colbyfayock) 9 июня 2020 г.
Создание библиотеки компонентов с использованием Storybook
Введение
В наши дни разработка интерфейса является достаточно затратным процессом который требует усилий от множества людей, разработчиков, дизайнеров, тестировщиков продукт менеджеров и так далее.
Компании все чаще прибегают к написанию интерфейса состоящего из множества независимых компонентов, которые могут быть использованы повторно. Многие дизайнеры создают дизайн проект который описывает каждую деталь дизайна. Они используют ряд инструментов для документирования интерфейсов, первые которые приходят на ум это axshare.com и zeplin.com. Тот же фотошоп, в котором у них все разложено строго по папочкам. Это позволяет им с легкостью работать над дизайном проекта, обновлять и добавлять новые страницы, просто копируя уже имеющиеся наработки.
А что же касается разработчиков? Да у нас есть Angular, React, Vue, Ember, Polymer. Все эти инструменты в той или иной мере позволяют нам создавать компоненты с дальнейшим их повторным использованием. Но скажите мне каким образом, вы можете взглянуть на проект так же как это делает дизайнер? Где я могу увидеть все компоненты которые используются в проекте, узнать их свойства или же просто попробовать? Как я могу узнать реализован ли нужный мне компонент? Такие вопросы уже начинают возникать в проектах среднего масштаба. Разумеется я могу пойти и спросить коллегу, но это излишнии коммуникации, которые неэффективны ввиду множества причин. Коллега попросту может не вникнуть в суть вашей проблемы и указать вам на схожий компонент который вы будете еще долго доделывать.
Типичная ситуация когда вы находитесь на стадии оценки новой функциональности, пройдясь по документации новой страницы которую вам предстоит разработать, все компоненты выглядят знакомыми, все они уже где-то используются и вы оцениваете новую задачу делая ставку на то, что некоторые компоненты уже реализованы. Договорившись о сроках и начав новый спринт, немного покопавшись в коде, вы в ужасе осознаете, что переиспользовать компонент не получится, что он зависит сугубо от других компонентов и вообще это все концептуально неверно.
У вас есть только два выхода
Добросовестным выбором будет разработка нового компонента. Но тут вам передается эстафета того недобросовестного разработчика. Учитывая, что сроки горят, вы может быть и успеете разработать новый компонент, но сделать его общим у вас уже не будет времени.
На вопрос почему так произошло можно ответить следующим образом:
Storybook это окружения для разработки UI компонентов. Storybook позволяет просматривать библиотеку компонентов, увидеть различные состояния компонентов и интерактивно разрабатывать и тестировать компоненты.
Storybook запускается отдельно от вашего приложения. Это позволяет разрабатывать компоненты в изоляции, что улучшает возможность переиспользование компонентов, тестируемость и скорость их разработки. Вы можете создавать новый компоненты быстро и без каких либо зависимостей основного проекта.
Тут вы можете посмотреть примеры использования Storybook https://storybook.js.org/examples/
Storybook имеет множество расширений и богатый API для расширения его функциональных возможностей, а также поддержку React Native.
Давайте рассмотрим использование Storybook с позиции различных участников процесса создания и второстепенных процессов поддержки интерфейса приложения.
Как UI\UX дизайнер
У вас будет возможность попробовать в живую и проверить реализованный разработчиком компонент. Увидеть все возможные состояние компонента и предоставить полноценный фидбек.
Как разработчик
У вас будет библиотека компонентов, вы больше не будете биться в догадках, есть ли у вас такой-то компонент или нет, вы сможете попробовать, поиграться с компонентом и узнать возможности его использования в рамках вашей текущей задачи. Это очень важно как для разработчика, иметь возможность увидеть все компоненты которые используются в проекте и знать все их особенности. Вы конечно же можете потратить уйму времени на изучение исходного кода, но будет куда проще найти нужный компонент с нужными свойствами визуально, а потом уже вдаваться в подробности.
Вы сможете разрабатывать компоненты в изолированном окружении, которое не требует поднятие всего проекта локально. Изолированное окружение не явным образом стимулирует вас разрабатывать компоненты с более продуманным API и с мыслью о возможности его переиспользования в любой части проекта. Вы думаете о входящих параметрах, с точки зрения пользователя и понимаете какие параметры были бы удобны потенциальному пользователю. Также вы задумываетесь об изоляции стилей. Помимо всего прочего, вы получаете настоящий верстак для разработки компонентов. Вы можете настроить окружение Storybook как вам угодно и использование таких вещей как HMR вы получаете из коробки.
Как тестировщик
У вас будет возможность тестировать каждый компонент в отдельности и независимо от других. Нет необходимости в запуске целого проекта. Вы можете просто открыть Storybook с интересующим вас компонентов и проводить абсолютно любые E2E тесты.
Как продакт менеджер
Продакт менеджер зачастую работает совместно с дизайнером, ведь это именно он говорит, какой бы функционал он хотел бы видеть. Как продукт менеджеру, работая над новой страницей вам будет полезно знать уже существующие элементы и иметь возможность попробовать их интерактивно. И словно дизайнер набросать новый скетч из уже существующих кусочков.
Установка
Та как Storybook находит в экосистеме node/npm, это делается очень просто. Установить основной cli инструмент можно с помощью одного из ваших любимы пакетных менеджеров Yarn или NPM.
Теперь вы можете использовать этот инструмент для инициализации Stroybook’а в вашем проекте.
Для экспериментов нам понадобится проект. В качестве примера возьмем заготовку из create-react-app. Я опущу описание и особености create-react-app, это очень полезный и простой для понимания инструмент, детальней вы можете прочитать тут.
Установим и создадим новый проект с помощью create-react-app
Перейдем в директорию проекта
В браузере откроется свеженький проект созданный с использованием create-react-app.
Теперь у нас есть приложение для экспериментов со Storybook, что ж давайте приступим.
Для того, чтобы инициализировать Storybook выполните следующую команду находясь в корне проекта
Эта команда определяет тип проекта, делает необходимые проверки и устанавливает зависимости
После чего в проекте появится новосозданные папки .storybook и stories
Папка .storybook содержит всевозможные конфигурационные файлы. С ними мы разберемся позже. На данный момент нас интересует папка stories.
В ней хранится библиотека компонентов. После инициализации Storybook в проекте, по умолчанию создается файл с одним примером. Давайте запустим Storybook и посмотрим на него.
Storybook будет доступен по адресу http://localhost:6006/
Страница имеет простой интерфейс. Слева мы видим панель с иерархическими папками компонентов с возможностью поиска. Справа достаточно большая рабочая область, в которой будут отображаться ваши компоненты и прочая информация.
И панель снизу которая используется как интерактивный инструмент, на которую вы можете выводить различную информацию и элементы управления компонентов. Расположение этих панелей конфигурируется.
И так, давайте возьмем какой нибудь компонент за основу, чтобы не тратить время и не писать свой.
Я выбрал react-select
Создайте папку Select с файлом index.js в src следующего содержания
Это просто небольшая обертка для хранения состояния.
Теперь давайте добавим наш компонент в Storybook.
Делается это очень просто:
Код интуитивно понятен. storiesOf создает категорию, в которую вы можете добавлять различные компоненты.
Давайте добавим react-select в наш Storybook с возможностью мультивыбора
Сборка Storybook
Не маловажной особенностью является возможность собрать Storybook в статичные файлы, которые можно будет например опубликовать на каком либо сайте или использовать внутри компании в качестве документации.
По умолчанию файлы складываются в storybook-static. Вы можете открыть их в любом браузере.
Webpack и прочая конфигурация
По умолчанию Storybook пытается разобраться в вашем окружении и использовать ряд настроек которые позволяют собрать и отобразить Storybook. Но бывают случаи когда без дополнительной конфигурации не обойтись.
Зачастую такой конфиг будет очень простым
Как вы видите, это просто импорт конфига из основного проекта. В наших экспериментах вам данный конфиг не понадобится.
Использование дополнений
Storybook имеет ряд рекомендуемых дополнений
дополнение action, создает своего рода функцию, результат выполнения которой вы увидете в Action Logger. Это может быть удобно для логирования параметров по типу onApply или onClick.
Достаточно полезными являются так называемые knobs. Они позволяют редактировать передаваемые параметры в компонент.
Необходимо импортировать установленный модуль в addons.js в директории .storybook
И в stories/index.js импортировать необходимые нам knobs
Давайте добавим возможность интерактивного манипулирования кнопкой
Теперь мы можем изменять текст кнопки и с помощью boolean задавать состояние кнопки.
Еще одним очень полезным дополнением является Info, данное дополнение автоматически документирует внешний API компонента.
И давайте немного изменим код нашей кнопки
Справа появится кнопка, с помощью которой вы можете открыть подробную информацию о компоненте
Также можно отобразить эту информацию без необходимости ее открытия, прямо на рабочей области вместе с компонентом.