Если вы занимаетесь фронтенд-разработкой, то наверняка работали со Storybook — удобной витриной компонентов, на которой красиво лежат компоненты и примеры их использования. Его любят за интерактивную документацию, возможность визуального контроля и изолированной разработки. Но замечали ли вы, сколько действий приходится делать, чтобы взять компонент из Storybook и вставить его в реальный проект?
Наверняка вы сталкивались с ситуацией: нашли компонент в Storybook, затем переключились обратно в IDE, скопировали код, вставили, адаптировали, проверили, и повторили снова. Кажется, многовато действий для простой вставки компонента, правда? Постоянные переключения между браузером и IDE, ручной копипаст и отсутствие связи с уже написанным кодом делают этот процесс неудобным и медленным.
Storybook Studio: всё в одном месте
Мы решили исправить подход к разработке и рады представить вам Storybook Studio. Он делает так, что вся мощь Storybook оказывается прямо в вашей IDE. Вместо того чтобы переключаться между вкладками браузера и редактором кода, вы получаете цельную среду разработки.
Представьте: вы выбираете компонент в боковой панели IDE и простым перетаскиванием (drag’n’drop) вставляете его в код. Всё готово мгновенно — никакого копипаста и долгой адаптации кода под существующие реалии проекта.
Такой подход ведет к меньшему количеству переключений между браузером и IDE, значительному сокращению рутинных действий и улучшению общего опыта работы: вы можете взаимодействовать с компонентами визуально, не выходя из редактора.
Что умеет Storybook Studio?
Палитра компонентов в IDE
Storybook Studio добавляет в IDE удобную боковую панель, где компоненты сгруппированы по иерархии. Вы можете просматривать их прямо в редакторе, выполнять поиск, и вставлять в код с помощью drag’n’drop. Палитра объединяет внешние UI-киты и локальные компоненты, позволяя забыть о ручном копировании и поиске примеров.
Инспектор компонентов в IDE
Нажав на компонент в коде, вы получаете удобный инспектор с полной информацией: доступны props, callbacks (например, onClick, onChange), а также сложные типы и вложенные структуры. Storybook Studio позволяет вам легко и интерактивно менять параметры, не редактируя код вручную. Особенно удобно при работе с плохо документированными компонентами.
Дополнительно вы можете расширять инспектор, описывая свойства в интерфейсе истории, и в последующем уже редактировать компоненты из панели инспектора.
Генерация компонентов по OpenAPI
Для различных доменных объектов существует множество повторяющихся компонентов. Storybook Studio умеет автоматически создавать истории для компонентов, используя OpenAPI-спецификации и доменные модели. Если у вас есть swagger.json или openapi.yaml, вы моментально получите набор переиспользуемых компонентов для ваших задач: формы, таблицы, комбобоксы. Сейчас истории генерируются на основе одного из самых популярных UI китов — MUI. Однако в наших ближайших планах — предоставить возможность разработчикам самим создавать подобные генерации для своих UI китов.
В отличие от OpenAPI Generator, Storybook Studio не навязывает использование сгенерированных компонентов и не пытается решить в общем случае нерешаемую задачу по связыванию компонентов с вызовом API, а дает гибкость выбора и использования компонентов.
Также доступна удобная палитра эндпоинтов — вы можете визуально связывать компоненты с API прямо в редакторе.
В ближайших планах поддержка GraphQL, а также произвольных схем данных, например Protobuf. Но окончательный выбор направления развития зависит от вашего фидбека — пишите, что было бы полезно именно вам.
Время попробовать!
Попробуйте Storybook Studio уже сегодня:
Установите расширение для VSCode.
Исследуйте возможности на демо-проекте.
Присоединяйтесь к обсуждению в Telegram-чате бета-тестеров.
Расскажите о своем опыте, предложите идеи, и вместе мы сделаем этот инструмент ещё лучше. Storybook Studio — ваш новый подход к эффективной фронтенд-разработке!