`string` | Значение поля ввода | ➖ | - |\n| codeChecking
`boolean` | Флаг состояния обработки введенного кода | `state = CODE_CHECKING` | Состояние проверки кода |\n| codeSending
`boolean` | Флаг состояния отправки кода. | `state = CODE_SENDING` | Состояние повторной отправки кода |\n| error
`boolean` | Состояние ошибки подписания | `state = \'CODE_ERROR\'`
`string` | Состояние ошибки, когда ввели неверный код |\n| errorOverlimit
`boolean` | Состояние ошибки лимитов - превышено кол-во попыток ввода или запросов кода | `screen = \'TEMP_BLOCK\'`
`string` | Экран временной блокировки |\n| errorOverlimitIsFatal
`boolean` | Состояние критической ошибки лимитов - превышены все лимиты и попытки, пользователя блокируют | `screen = \'FATAL_ERROR\'`
`string` | Экран критической ошибки |\n| errorText
`string` | Текст ошибки подписания | texts.codeError
`string` | Ошибка проверки кода |\n| additionalContent
`React.Node` | Дополнительный контент | ➖ | - |\n| errorIsFatal
`boolean` | Флаг критичности ошибки подписания.
Если true - ошибка подписания рисуется на экране без поля ввода,
но с кнопкой "Запросить код".
Если false - ошибка подписания рисуется под полем ввода кода | `screen = \'FATAL_ERROR\'`
`string` | Экран критической ошибки |\n| className
`string` | Дополнительный класс | className
`string` | Дополнительный класс для стилизации общей обёртки |\n| phone
`string` | Номер телефона, на который отправляется сообщение | phone
`string` | Номер телефона, на который отправлен код |\n| hasPhoneMask
`boolean` | Управление необходимостью маскировать номер телефона | ➖ | Настраивается через пропс `phone` |\n| requiredCharAmount
`number` | Количество символов, которое можно ввести
в поле ввода подписания до того, как произойдет автоотправка | requiredCharAmount
`number` | Количество символов, которое можно ввести
в поле ввода подписания до того, как произойдет автоотправка |\n| hasSmsCountdown
`boolean` | Управление отображением таймера с кнопкой "Запросить код" | ➖ | |\n| countdownDuration
`number` | Длительность обратного отсчета
на кнопке повторного запроса сообщения, в милисекундах | countdownDuration
`number` | Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах |\n| signTitle
`React.Node` | Заголовок экрана подписания | texts.title
`string` | Текст заголовока начального экрана `INITIAL` |\n| overlimitTitle
`string` | Заголовок экрана ошибки лимитов | ➖ | - |\n| overlimitText
`string` | Текстовое описание блокировки формы при превышении лимитов | texts.fatalErrorDescription | Текст описания на экране критической ошибки `FATAL_ERROR` |\n| overlimitCountdownDuration
`number` | Длительность блокировки при превышении лимитов (ms) | tempBlockDuration
`number` | Продолжительность блокировки формы (ms) |\n| errorTitle
`string` | Заголовок экрана блокирующей ошибки | texts.fatalErrorTitle
`ReactNode` | Заголовок экрана `FATAL_ERROR` |\n| dataTestId
`string` | Идентификатор для систем автоматизированного тестирования | dataTestId
`string` | Идентификатор для систем автоматизированного тестирования |\n| codeCheckingText
`string` | Текст лоадера при проверке кода | texts.codeChecking
`string` | код проверяется |\n| codeSendingText
`string` | Текст лоадера при отправке кода | texts.codeSending
`string` | код отправляется |\n| buttonErrorText
`string` | Текст кнопки при блокирующей ошибке | texts.fatalErrorButton
`string` | Текст кнопки на экране `FATAL_ERROR` |\n| buttonReturnText
`string` | Текст кнопки "Вернуться назад" на экране помощи | texts.hintButton
`string` | Текст кнопки на экране `HINT` (\'Вернуться к вводу кода\') |\n| buttonRetryText
`string` | Текст кнопки "Запросить новый код" | texts.buttonRetry
`string` | Текст кнопки повторной отправки кода |\n| alignContent
`left center` | Позиционирование контента | alignContent
`left center` | Позиционирование контента |\n| noAttemptsLeftMessagegnContent
`string` | Сообщение, если не осталось попыток ввода кода.
Кнопка повторной отправки смс при этом скрывается. | text.noAttemptsLeft | Текст, когда не осталось попыток запроса кода |\n| countdownContent
`React.Node` | Кастомный контент для компонента Countdown | texts.countdown
`string` | Текст таймера "запросить повторно можно через" |\n| onInputFinished
`({ code }: { code: string; }) => void` | Обработчик события завершения ввода кода подписания | onInputFinished
`(code: string) => void` | Обработчик события завершения ввода кода подписания |\n| onInputChange
`({ code }: { code: string; }) => void` | Обработчик события изменения значения поля ввода кода подписания | ➖ | - |\n| onSmsRetryClick
`() => void` | Обработчик события нажатия на кнопку "Запросить код" | onSmsRetryClick
`(code: string) => void` | Обработчик события нажатия на кнопку "Запросить код" |\n| onOverlimitSmsRetryClick
`() => void` | Обработчик события нажатия на кнопку "Запросить код" в блоке превышение лимитов | ➖ | - |\n| onCountdownFinished
`() => void` | Обработчик события завершения обратного отсчета для повторного запроса сообщения | onTempBlockFinished
`(code: string) => void` | Временная блокировка формы закончилась |\n| onOverlimitCountdownFinished
`() => void` | Обработчик события завершения обратного отсчета для блокировки формы | ➖ | - |\n| onSmsHintLinkClick
`() => void` | Обработчик события нажатия на ссылку "не приходит сообщение?" | ➖ | - |\n| onActionWithFatalError
`() => void` | Обработчик события нажатия на кнопку buttonErrorText (по дефолту "Понятно"),
которая появляется при критической ошибке.
Если не передан, то вызывается onSmsRetryClick | onFatalErrorOkButtonClick
`(code: string) => void` | Клик по кнопке "Понятно" на экране фатальной ошибки |\n| | | screen
`\'INITIAL\', \'HINT\', \'FATAL_ERROR\', \'TEMP_BLOCK\', key of screenMap` | Экран компонента (Начальное состояние, экран "Не приходит смс?",
экран критической ошибки, экран временной блокировки) |\n| | | state
`ConfirmationState string` | Состояние компонента (Начальное состояние,
проверка кода,
повторная отправка кода,
ошибка, когда ввели неверный код) |\n| | | texts | Объект с кастомными текстами для всех экранов |\n| | | onChangeState
`(state: string) => void` | Функция обновления состояния компонента |\n| | | onChangeScreen
`(state: string) => void` | Функция обновления экрана компонента |\n| | | getScreensMap
`(defaulScreensMap: ScreensMap) => ScreensMap` | Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана |\n| | | texts.codeSended
`string` | Текст после отправки кода (код отправлен) |\n| | | texts.linkToHint
`string` | Текст ссылки на экран `HINT` ("Не приходит смс?") |\n| | | texts.tempBlockTitle
`ReactNode` | Текст заголовка на экране `TEMP_BLOCK` |\n| | | texts.tempBlockDescription
`ReactNode` | Текст описания на экране временной блокировки `TEMP_BLOCK` |\n| | | blockSmsRetry
`boolean` | Скрытие кнопки повторного запроса sms когда, Не осталось попыток ввода кода |\n'}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["В компоненте полностью переосмыслен подход к состоянию.\nТеперь нет необходимости прокидывать множество пропсов для получения желаемого вида компонента.\nНужно использовать экраны ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"screen"})," и состояние ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"state"}),". Можно использовать как заложенные в компонент экраны, так и кастомные.\nЗаложенные в компонент экраны ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"screen"}),":"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["Экран начального состояния ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"INITIAL"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:['Экран "Не приходит смс?" ',(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"HINT"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["Экран критической ошибки ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"FATAL_ERROR"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["Экран временной блокировки ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"TEMP_BLOCK"})]}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["Заложенные в компонент состояния ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"state"}),":"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["начальное состояние ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"INITIAL"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["проверка кода ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"CODE_CHECKING"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["повторная отправка кода ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"CODE_SENDING"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:["ошибка, когда ввели неверный код ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"CODE_ERROR"})]}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"В новой версии есть как новые пропсы, так и аналогичные старым.\nРассмотрим те, которых нет в новой версии и чем их можно заменить."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"code"})," В старой версии стейт поля ввода находился снаружи компонента, сейчас эта логика находится внутри.\nУправлять значениями поля сейчас нет возможности."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"additionalContent"})," - Для унификации в существующие экраны нельзя добавлять дополнительный контент."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"hasPhoneMask"})," - В текущей версии маскировка номера телефона производится снаружи компонента, а в поле ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"phone"})," прокидывается уже замаскированный номер телефона вида ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"+7 ··· ··· 07-24"}),";"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"hasSmsCountdown"})," - Управление отображением кнопки осуществляется через пропс ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"blockSmsRetry"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"countdownContent"})," - Убрали возможность управления контентом для унификации во всех продуктах."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"onInputChange"})," - Убрали, т.к. нет необходимости проверять промежуточные зачения поля ввода. Финальное значение нужно получать через ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"onInputFinished"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"onOverlimitSmsRetryClick"})," - Убран, на экране критической ошибки нет контролов."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"onOverlimitCountdownFinished"})," - Необходимо обрабатывать собственной логикой, при завершении таймера, когда ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"timeLeft === 0"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.li,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"onSmsHintLinkClick"})," - Убран, клик по ссылке всегда меняет экран на ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"HINT"})]}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h4,{id:"кастомные-экраны",children:"Кастомные экраны"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:['Если вам недостаточно встроенных экранов, копонент позволяет использовать кастомные экраны.\nДля этого вам может понадобиться "ConfirmationContext" из которого можно получить:\n',(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"alignContent, texts, state, screen, requiredCharAmount, onInputFinished, countdownDuration, onChangeState, onSmsRetryClick, onChangeScreen, onFatalErrorOkButtonClick, tempBlockDuration, phone, blockSmsRetry, onTempBlockFinished, timeLeft"})]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Пример простого кастомного экрана успешной отправки заявки;"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{live:!0,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-jsx",children:"// import { Confirmation, ConfirmationContext } from '@alfalab/core-components-confirmation';\n\nrender(() => {\n const CodeSuccesScreen = () => {\n const { texts, onChangeScreen, onChangeState } = React.useContext(ConfirmationContext);\n return (\n
\n \n
\n );\n});\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h2,{id:"валидация-по-потере-фокуса",children:"Валидация по потере фокуса"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Валидация срабатывает сразу после потери валидируемым компонентом фокуса.\nЕсли найдена ошибка, компонент переходит в состояние ошибки, но фокус к нему не возвращается.\nСостояние ошибки должно быть снято как только пользователь начнет изменять значение."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Паттерн хорошо подходит для всех случаев, кроме проверки на заполненность обязательных полей.\nУ пользователя может быть свой план заполнения полей, которого он придерживается.\nТолько после отправки формы мы можем с уверенностью сказать, что какие-то из обязательных полей не заполнены и это ошибка."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{live:!0,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-jsx",children:"const InputWrapper = ({ patronymic, placeholder, errMsg }) => {\n const [value, setValue] = React.useState('');\n const [error, setError] = React.useState(false);\n\n const validate = () => {\n if (value.toLowerCase() !== patronymic) {\n setError(errMsg);\n }\n };\n\n const handleChange = (e) => {\n setValue(e.target.value);\n setError(false);\n };\n\n const handleBlur = () => validate();\n\n return (\n \n
\n );\n});\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h2,{id:"валидация-по-отправке-формы",children:"Валидация по отправке формы"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Проверка происходит после того, как пользователь нажал кнопку отправки данных:\nвсе поля с ошибками на форме переходят в состояние ошибки, первый контрол с ошибкой получает фокус,\nстраница прокручивается к нему."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Подобный паттерн хорошо подходит для проверки на заполненность обязательных полей,\nтак как в случае отправки формы мы уверены что пользователь считает форму заполненной."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{live:!0,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-jsx",children:"const data = {\n pushkin: {\n patronymic: 'сергеевич',\n desc: 'Отчество Александра Пушкина',\n errMsg: 'Александр Сергеевич – наше всё',\n },\n fet: {\n patronymic: 'афанасьевич',\n desc: 'Отчество Афанасия Фета',\n errMsg: 'Отца Афанасия тоже звали Афанасием',\n },\n};\n\nconst dataKeys = Object.keys(data);\n\nconst validateForm = (form) => {\n let errors = {};\n\n dataKeys.forEach((key) => {\n if (data[key].patronymic !== form.values[key].toLowerCase()) {\n errors[key] = data[key].errMsg;\n }\n });\n\n return Object.keys(errors).length > 0 ? errors : null;\n};\n\nconst getInitialState = () => {\n const initialValues = dataKeys.reduce((result, key) => {\n result[key] = '';\n return result;\n }, {});\n\n return { values: initialValues, errors: initialValues };\n};\n\nrender(() => {\n const [form, setForm] = React.useState(getInitialState);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const errors = validateForm(form);\n if (errors) {\n setForm((prevState) => ({ ...prevState, errors: { ...prevState.errors, ...errors } }));\n }\n };\n\n const handleChange = (e) => {\n const name = e.target.name;\n\n setForm((prevState) => ({\n ...prevState,\n values: { ...prevState.values, ...{ [name]: e.target.value } },\n errors: { ...prevState.errors, ...{ [name]: '' } },\n }));\n };\n\n return (\n \n\n## Библиотека React компонентов для создания веб-интерфейсов\n\n[](https://github.com/core-ds/core-components/actions/workflows/release.yml)\n[](https://github.com/core-ds/core-components/actions/workflows/build.yml)\n[](https://coveralls.io/github/core-ds/core-components)\n[](https://github.com/core-ds/core-components/actions/workflows/main.yml)\n[](http://commitizen.github.io/cz-cli/)\n\n[Cторибук](https://core-ds.github.io/core-components/) с документацией и песочницей.\n\n
\n\n## Установка\n\nУстановка всех компонентов:\n\n```bash\nyarn add @alfalab/core-components\n```\n\nКаждый компонент публикуется отдельным пакетом, поэтому вы можете подключить только нужный, не устанавливая библиотеку целиком:\n\n```bash\nyarn add @alfalab/core-components-button\n```\n\n## Использование\n\n```jsx\nimport { Button } from \'@alfalab/core-components/button\';\n```\n\n## Темизация\n\n[Гайд по настройке темизации](https://core-ds.github.io/core-components/master/?path=/docs/for-users-темизация--docs)\n\n## Разработка\n\n```bash\n$ git clone git@github.com:core-ds/core-components.git\n$ cd core-components\n$ yarn install\n$ yarn start\n```\n\nСторибук будет доступен по адресу http://localhost:9009/\n\n### Сигнатуры коллбэков\n\n> Компоненты передают в функции обратного вызова два аргумента:\n>\n> 1. `event: SyntheticEvent` - объект события, инициировавшего вызов.\n> 2. `payload: {}` - объект с дополнительными данными. Например `{ amount: 5000 }`\n\n### Импорт компонентов внутри компонентов\n\nТак как у нас монорепозиторий, то все пакеты должны быть независимы. Если при разработке компонента вам потребовался другой компонент, то его нужно добавить как зависимость. Пример можно посмотреть в [Тултипе](https://github.com/core-ds/core-components/tree/master/packages/tooltip). Также нужно добавить пару опций в `tsconfig.json`:\n\n```json\n{\n "compilerOptions": {\n "paths": {\n "@alfalab/core-components-popover": ["../popover/src"] // для корректоной сборки rollup\n }\n },\n "references": [{ "path": "../popover" }] // для корректной работы IDE\n}\n```\n\n### Выставление Pull request-а\n\nДля версионирования и публикации пакетов используется инструмент [Changesets](https://github.com/changesets/changesets).\nЕсли PR затрагивает функциональность одного из пакетов, то он должен включать в себя набор изменений.\nНабор изменений представляет собой файл формата md, который находится внутри директории .changeset и содержит описание сделанных изменений.\n\nФайл с набором изменений можно сгенерировать двумя способами:\n\n1. с помощью CLI команды `yarn changeset add`.\n После ввода команды будет предложено выбрать пакет, в котором было произведено изменение, тип релиза (major, minor, patch) и ввести описание изменения.\n2. с помощью [changeset bot](https://github.com/changesets/bot).\n В этом случае на странице с pull request-ом будет отображено сообщение с баннером \'No Changeset\'\n и ниже ссылка для создания набора изменений - Click here if you\'re a maintainer who wants to add a changeset to this PR.\n По клику на нее генерируется и открывается на редактирование md-файл. В нем нужно ввести понятное описание сделанных изменений на русском языке,\n а также добавить или удалить названия пакетов (только в случае если бот неверно их определил).\n\nОписание изменения может состоять из произвольного количества строк в формате md.\nВот несколько особенностей, на которые стоит обращать внимание:\n\n1. форматируется только первая строка описания (добавляется дефис "-", если его не было),\n вторая и последующие строки попадут в CHANGELOG так, как вы их запишете (сохранится разметка md)\n2. при добавлении нового компонента нужно указать \'0.0.0\' версию пакета в package.json,\n в наборе изменений указать мажорный (\'major\') тип релиза, а в описание обязательно добавить фразу \'новый компонент ${name}\'.\n Пример приведен ниже.\n\n ```\n ---\n \'@alfalab/core-components-gap\': major\n ---\n\n Добавлен новый компонент Gap\n ```\n\n## Запуск bash скриптов на Windows\n\nДля запуска bash скриптов на OS Windows необходимо сперва установить WSL\n(как это сделать можно почитать [тут](https://docs.microsoft.com/ru-ru/windows/wsl/)).\nДалее в PowerShell или CMD ввести команду bash, после чего уже запускать npm команды, использующие bash скрипты.\n\n## Релизы\n\nДля выпуска новой версии нужно запустить workflow "Release".\nДля этого нужно перейти во вкладку Actions на Github, выбрать "Release" и нажать "Run", оставив ветку без изменений (master)\n\n### Как выпустить бета-версию:\n\n1. Собираем пакет\n\n```bash\n$ yarn build\n```\n\n2. Переходим в папку с собранным пакетом и обновляем версию\n\n```bash\n$ cd dist\n$ npm version 2.0.0-beta.0 // подставить нужную версию\n```\n\n3. Публикуем пакет\n\n```bash\nnpm publish --tag beta\n```\n\nТакже можно воспользоваться экшеном "Beta release".\nДля этого нужно перейти во вкладку Actions на Github, выбрать workflow "Beta release",\nуказать ветку, из которой будет выпущена бетка, а также версию выпускаемого пакета.\n\n## Коммиты\n\nНа проекте подключен `commitlint` для линтинга коммитов. На основании коммитов формируется `CHANGELOG.MD`.\nМы придерживаемся [AngularJS commit conventions.](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)\nКоммиты можно делать с помощью утилиты `commitizen`:\n\n```bash\n$ git add .\n$ yarn cm # запустит утилиту commitizen для создания коммита\n$ git push\n```\n\n## Сборка компонентов\n\nКомпоненты поставляются в трех видах:\n\n1. `ES5`\n\n2. `ES5 с css-модулями`\n\n3. `ES2020`\n\nИмпорт `ES5`:\n\n```tsx\nimport { Button } from \'@alfalab/core-components/button\';\n// или\nimport { Button } from \'@alfalab/core-components-button\';\n```\n\nИмпорт `ES5` с css-модулями:\n\n```tsx\nimport { Button } from \'@alfalab/core-components/button/cssm\';\n// или\nimport { Button } from \'@alfalab/core-components-button/cssm\';\n```\n\nИмпорт `ES2020`:\n\n```tsx\nimport { Button } from \'@alfalab/core-components/button/modern\';\n// или\nimport { Button } from \'@alfalab/core-components-button/modern\';\n```\n\n## Правила контрибьютинга\n\nМы открыты к любым предложениям по развитию библиотеки.\nОтправляйте свои идеи и вопросы через [pull requests](https://github.com/core-ds/core-components/pulls) или [issues](https://github.com/core-ds/core-components/issues).\n\n- Уважаем тех, кто видит проблему и кидает PR.\n- Не знаете что делать – можно брать любую задачу без Assignee, назначив её на себя.\n- Знаете что делать и есть возможность – кидайте PR.\n- Знаете что делать, но нет времени – добавьте задачу (issue).\n\n\n\n## Мейнтейнеры\n\n- [Александр Яценко](https://github.com/reme3d2y)\n- [Владимир Гевак](https://github.com/Lacronts)\n- [Евгений Купава](https://github.com/EGNKupava)\n- [Валерия Чуричева](https://github.com/Valeri8888)\n- [Евгений Сергеев](https://github.com/SiebenSieben)\n',jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h1:"h1"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"For contributors/Создание компонентов",parameters:{previewTabs:{canvas:{hidden:!0}}},id:"Instructions/contributing"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"создание-компонентов",children:"Создание компонентов"}),"\n",(0,jsx_runtime.jsx)(dist.UG,{children:READMEraw_namespaceObject})]})}const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"For contributors/Создание компонентов",id:"Instructions/contributing",parameters:{previewTabs:{canvas:{hidden:!0}}},tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};var _22_contributing_stories=componentMeta}}]);
\ No newline at end of file
diff --git a/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/23-users-faq-stories-mdx.0dd4451c.iframe.bundle.js b/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/23-users-faq-stories-mdx.0dd4451c.iframe.bundle.js
new file mode 100644
index 0000000000..4691da14d3
--- /dev/null
+++ b/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/23-users-faq-stories-mdx.0dd4451c.iframe.bundle.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_alfalab_core_components=self.webpackChunk_alfalab_core_components||[]).push([[6251],{"./node_modules/@mdx-js/react/lib/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{NF:function(){return withMDXComponents},Zo:function(){return MDXProvider},ah:function(){return useMDXComponents},pC:function(){return MDXContext}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents:allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components:components,children:children,disableParentContext:disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./node_modules/@storybook/addon-docs/dist/chunk-S4VUQJ4A.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{r:function(){return DocsRenderer}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-18.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException:showException}=this.props;showException(err)}render(){let{hasError:hasError}=this.state,{children:children}=this.props;return hasError?null:children}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(9433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider:MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components:components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context:context,docsParameter:docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{$4:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.$4},UG:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG},h_:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_},oG:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG}});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-S4VUQJ4A.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/23.users-faq.stories.mdx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__page:function(){return __page}});__webpack_require__("./node_modules/react/index.js");var _storybook_addon_docs_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",p:"p",code:"code",pre:"pre"},(0,_storybook_addon_docs_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__.ah)(),props.components);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_1__.h_,{title:"For users/Вопросы и ответы",parameters:{previewTabs:{canvas:{hidden:!0}}},id:"Instructions/users_faq"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h2,{id:"специфичность",children:"Специфичность"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.p,{children:["Если стили, переданные через ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{children:"className"}),", не перебивают дефолтные стили компонента,\nто необходимо повысить специфичность передаваемых стилей."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-css",children:".yourClassName.yourClassName {\n ...\n}\n"})})]})}const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"For users/Вопросы и ответы",id:"Instructions/users_faq",parameters:{previewTabs:{canvas:{hidden:!0}}},tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,_storybook_addon_docs_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__.ah)(),props.components);return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(MDXLayout,{...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}},__webpack_exports__.default=componentMeta}}]);
\ No newline at end of file
diff --git a/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/238.801c2863.iframe.bundle.js b/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/238.801c2863.iframe.bundle.js
new file mode 100644
index 0000000000..8944111cb1
--- /dev/null
+++ b/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/238.801c2863.iframe.bundle.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_alfalab_core_components=self.webpackChunk_alfalab_core_components||[]).push([[238],{"./node_modules/@storybook/components/dist/WithTooltip-YBG737T3.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{WithToolTipState:function(){return _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__.WA},WithTooltip:function(){return _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__.WA},WithTooltipPure:function(){return _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__.DG}});var _chunk_OCF3KO2R_mjs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/components/dist/chunk-OCF3KO2R.mjs")}}]);
\ No newline at end of file
diff --git a/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/3-development-faq-stories-mdx.00bbe3d4.iframe.bundle.js b/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/3-development-faq-stories-mdx.00bbe3d4.iframe.bundle.js
new file mode 100644
index 0000000000..a9f8e48003
--- /dev/null
+++ b/chore_update_docs_input_8421c33b9c0e8e66f84bb6479140fe690f8c33e8/3-development-faq-stories-mdx.00bbe3d4.iframe.bundle.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_alfalab_core_components=self.webpackChunk_alfalab_core_components||[]).push([[1496],{"./node_modules/@mdx-js/react/lib/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{NF:function(){return withMDXComponents},Zo:function(){return MDXProvider},ah:function(){return useMDXComponents},pC:function(){return MDXContext}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents:allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components:components,children:children,disableParentContext:disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./node_modules/@storybook/addon-docs/dist/chunk-S4VUQJ4A.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{r:function(){return DocsRenderer}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-18.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException:showException}=this.props;showException(err)}render(){let{hasError:hasError}=this.state,{children:children}=this.props;return hasError?null:children}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(9433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider:MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components:components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context:context,docsParameter:docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{$4:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.$4},UG:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG},h_:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_},oG:function(){return _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG}});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-S4VUQJ4A.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/3.development-faq.stories.mdx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__page:function(){return __page}});__webpack_require__("./node_modules/react/index.js");var _storybook_addon_docs_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",p:"p",ul:"ul",li:"li",a:"a",h3:"h3",pre:"pre",code:"code"},(0,_storybook_addon_docs_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__.ah)(),props.components);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_1__.h_,{title:"For contributors/Вопросы и ответы",parameters:{previewTabs:{canvas:{hidden:!0}}},id:"Instructions/Faq"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h2,{id:"разработка",children:"Разработка"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Мы стараемся придерживаться следующих базовых принципов разработки:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_components.ul,{children:["\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.li,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://ru.wikipedia.org/wiki/KISS_%28%D0%BF%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF%29",target:"_blank",rel:"nofollow noopener noreferrer",children:"KISS"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.li,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://ru.wikipedia.org/wiki/YAGNI",target:"_blank",rel:"nofollow noopener noreferrer",children:"YAGNI"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.li,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.a,{href:"https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself",target:"_blank",rel:"nofollow noopener noreferrer",children:"DRY"})}),"\n"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Максимально простой код с низком порогом входа."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.h3,{id:"колбэки",children:"Колбэки"}),"\n","\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.p,{children:"Колбэки в компонентах, как правило, имеют следующий вид:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components.code,{className:"language-tsx",children:"onSomeEvent(event, payload) => void;\n//\nonChange?: (\n event?: ChangeEvent