Публикации по теме 'storybook'
Создайте свою собственную библиотеку компонентов React с помощью lerna и сборника рассказов
Мы будем создавать нашу собственную библиотеку компонентов в React. Затем мы опубликуем их в NPM, чтобы они были доступны для всех.
Вот несколько библиотек, которые мы собираемся использовать.
Lerna: для публикации модулей npm Storybook и его дополнения для независимой разработки компонентов шутка для тестирования
Настроить проект
git clone https://github.com/ankur-kushwaha/react-component-library.git
cd react-component-library
yarn
//after the installation complete
yarn..
Добавление React To Angular с помощью Storybook
Здесь, в SalesLoft, мы активно переносим наше приложение AngularJS в приложение React. Процесс объединения одного внешнего фреймворка с другим при постепенном удалении первого может быть довольно сложным. Одним из инструментов, облегчающих рефакторинг, является Storybook . Следующей тирадой будут мои открытия и знания о том, как добавить React в angular с помощью Storybook.
Этот пост не о том, как писать React или Angular, он о том, как их интегрировать вместе!
Первый шаг - это..
Сборник рассказов — Библиотека компонентов React
Сборник рассказов упрощает жизнь всему проекту, разрабатывая и проектируя общий компонент за пределами вашего приложения в изолированной среде.
Сборник рассказов React поможет разработчику создать компонент и поделиться им в нескольких проектах.
Установить сборник рассказов
npx storybook init
Приведенная выше команда внесет следующие изменения в вашу локальную среду:
📦 Установите необходимые зависимости. 🛠 Настройте необходимые сценарии для запуска и сборки Storybook. 🛠..
Начало работы с Next.js + Storybook
Недавно я начал поиски Next.js (v10) для работы с Storybook. Сначала это казалось простым, но оказалось довольно сложной задачей. Как только у меня все заработало, я решил написать это в надежде помочь следующему бедолаге, который пойдет по этому пути.
Зачем беспокоиться?
Хороший вопрос. Это должен быть ваш первый вопрос. Сборник рассказов не всегда имеет смысл для вашего проекта. Работаете над небольшим сайтом или приложением без множества компонентов? Может, это не стоит..
Изменение значений / состояния аргументов в Storybook (без хука useState)
Изменение значений / состояния аргументов в Storybook (без хука useState) + ReactJS
Краткий обзор того, как изменить значения аргументов историй в Storybook и ReactJs. Для объединения с элементами управления сборником рассказов.
Если вы задаетесь вопросом, как добавить функциональность к компонентам Storybook, что подразумевает изменение значений ваших реквизитов, ознакомьтесь с информацией ниже.
В этой статье я предполагаю, что вы уже знаете, что такое StoryBook и используете..
Вопросы по теме 'storybook'
Сборник рассказов React не перезагружается при изменениях
У меня есть приложение для реагирования, которое я создал с помощью create-react-app , и я добавил к нему сборник рассказов. Когда я запускаю yarn run storybook , он не перезагружается при изменении файлов.
Мое приложение выложено как
src...
5355 просмотров
schedule
15.06.2022
Тестирование взаимодействия Storybook JS с ферментом - скрытые изменения состояния
Я использую сборник рассказов для визуализации изменений компонентов React после моделирования взаимодействия пользователя с ферментом. В качестве небольшого примера я хочу, чтобы история отображала компонент после нажатия одной из его кнопок....
1329 просмотров
schedule
08.03.2024
Как настроить VueJS + PostCss + Tailwind с помощью Storybook
У кого-нибудь есть успех в настройке проекта с использованием VueJS, PostCss и Tailwind с разработкой компонентов в Storybook?
Я зашел так далеко:
Новый vue проект ( vue-cli 3.0.5 )
@ storybook / vue (4.0.0-альфа.25)
попутный ветерcss...
6533 просмотров
schedule
23.04.2024
Могу ли я создать ручку в React Storybook, чтобы изменить массив с 4 значениями, где каждое значение имеет раскрывающийся список?
Я использую React Storybook ( https://github.com/storybooks/storybook/tree/next/app/react ), чтобы писать истории для моих компонентов пользовательского интерфейса, и я использую надстройку knobs (...
6637 просмотров
schedule
15.02.2023
При использовании Angular 7 истории не отображаются.
Я использую Storybook Version: 4.1.12 и Angular 7.2.4 . Сборник рассказов загружен успешно (я использую Angular 7), но на панели инструментов отображается это сообщение: «Извините, но у вас либо нет историй, либо они каким-то образом не выбраны»....
440 просмотров
schedule
06.04.2023
StoryBook для Vue: [предупреждение Vue]: не удалось подключить компонент: шаблон или функция рендеринга не определены
Я хочу создать свой интерфейс, используя Gridsome и StoryBook , чтобы предложить нашим разработчикам и менеджерам продуктов веб-библиотеку компонентов.
Gridsome работает как надо. Запуск StoryBook через npm run storybook работает. Но когда я...
740 просмотров
schedule
21.12.2023
Как правильно стилизовать область холста - это сборник рассказов
В сборнике рассказов все истории плотно прилегают к верхнему левому углу контейнера.
Это вызывает проблемы при отображении элементов, которые имеют внешний вид за пределами соответствующего контейнера, например. тень коробки.
Поэтому мне...
975 просмотров
schedule
01.07.2022
Применить глобальные шрифты, установленные в scss, к компонентам пользовательского интерфейса материалов в Storybook?
Я пытаюсь заставить местный шрифт отображаться в сборнике рассказов. В настоящее время шрифт загружается через глобальный scss и применяется к любому текстовому объекту. Однако я не могу заставить шрифт отображаться в компонентах пользовательского...
960 просмотров
schedule
09.08.2022
Глобальный контекст для побитового компонента React
Я разрабатываю библиотеку компонентов React для веб-сайта. Для локальной разработки я использую Storybook. Я думаю, bit может быть хорошим инструментом (лучше, чем ссылка npm) для экспорта компонентов библиотеки и импорта их в репозиторий...
171 просмотров
schedule
05.03.2022
Застрял загрузка React Storybook
Я не могу запустить приложение "Сборник рассказов". Загружает только состояние загрузки (история загрузки). В консоли ошибок нет. Что я делаю неправильно? снимок экрана
storybook / main.js
const path = require('path')
const...
986 просмотров
schedule
08.08.2022
Не удается найти компонент templateUrl и stylesUrl в Storybook с пользовательской библиотекой Angular и ссылкой NPM
Я пытаюсь создать новую библиотеку Angular 10 и отдельный сборник рассказов в виде документации и представления для разработки. Все работает, как ожидалось, когда HTML и стили встроены в файл * .component.ts. Но всякий раз, когда я пытаюсь создать...
541 просмотров
schedule
05.02.2022
установить параметры компонентов в сборнике рассказов
Я создал простую историю в angular, но параметры истории не отображаются в компоненте. История:
export const myStory = (args: FileExplorerComponent) => ({
component: FileExplorerComponent,
template: `
<div...
52 просмотров
schedule
09.03.2022
Транспортир + Сборник рассказов: Ошибка: элемент не найден с помощью локатора: Автор (селектор css)
Я пытаюсь реализовать e2e-тестирование компонентов пользовательского интерфейса для Storybook с помощью Protractor. Любая попытка использовать локатор для поиска элемента на странице приводит к ошибке в терминале, в которой говорится, что элемент не...
188 просмотров
schedule
02.04.2022
Как настроить Storybook.js Webpack для работы с абсолютными путями к изображениям в модулях CSS в проекте Next.js?
Я пытаюсь настроить Storybook для работы с Next.js, Ant Design, Less и TypeScript. В Next.js изображения должны храниться в папке public/ и ссылаться на них с абсолютными путями, которые будут использоваться во всем проекте. У меня возникли...
1186 просмотров
schedule
01.08.2022
В сборнике рассказов не отображаются стили
У меня есть компонент диалога, который внутренне использует диалог Primereact. Когда я создаю сборник рассказов для этого же, пользовательский CSS для кнопки импортируется, поскольку он импортируется внутри dialog.jsx. Но стандартный CSS диалогового...
539 просмотров
schedule
15.02.2022
Как переписать URL-адрес в файле scss до того, как файл будет создан сборником рассказов
У меня проблема при настройке сборника рассказов. Когда я запускаю сборник рассказов, я получаю этот вывод ошибки
Ошибка сборки модуля (из ./node_modules/css-loader/dist/cjs.js): ошибка: не удается разрешить '/images/icons/triangle-right.svg' в...
113 просмотров
schedule
18.03.2022
Как использовать пользовательские компоненты сборника рассказов в приложении React admin?
Я новичок, чтобы реагировать на админ и сборник рассказов.
Я пишу приложение для реагирования на админ.
Помимо компонентов реагирования администратора, я хотел бы повторно использовать некоторые пользовательские компоненты, которые я уже...
42 просмотров
schedule
08.03.2022
есть ли какие-либо конфигурации, мне нужно добавить следующие js для обработки файлов .less и файлов с помощью @import '../lib/antd.less/
введите здесь описание изображения
Это сообщение об ошибке появляется после того, как я установил в свой проект настроенную библиотеку сборников рассказов и компонент кнопки импорта. Компонент кнопки содержит кнопку antd. Пожалуйста, помогите...
10 просмотров
schedule
18.11.2022
