Форма входа

Что делаем: добавляем форму входа LoginForm и первую историю — пустую форму. Компонент и история снова появляются вместе.

Компонент с поведением

Кнопка и карточка только показывают данные. Форма живая: хранит введённый текст, проверяет его и вызывает onSubmit, когда всё в порядке. В этом уроке ничего нового из Storybook нет: пропс onSubmit получает fn() в метаданных, как onClick у кнопки.

История Empty совсем короткая:

 
export const Empty: Story = {};

Пустой объект — тоже история: у неё нет своих args, и форма рисуется со значениями из метаданных.

Попробуйте

Введите в форму адрес без символа @ и нажмите Войти. Появилась ошибка. Теперь введите правильный адрес и посмотрите в панель Actions. Каждый раз повторять это руками утомительно — следующий урок научит Storybook делать это самому.