From 8fa3c43de912f8ef0f8dbca118c18e4c750de54b Mon Sep 17 00:00:00 2001 From: "alexander.andriishin" Date: Fri, 1 May 2026 01:32:43 +0300 Subject: [PATCH] docs: migrate README.md / README.ru.md to a single NRG template Replaces the two hand-maintained READMEs with a single README.src.md, regenerated in CI by nanolaba/nrg-action@v1 (NRG 1.2) on push to v7. Both outputs are byte-identical to the originals (modulo a 2-line auto-generated header NRG injects at the top). Drift-check job runs in mode: check on PRs that touch the template or either README, failing the build with a unified diff when a contributor edits a generated file directly. --- .github/workflows/nrg.yml | 45 ++++ README.md | 2 + README.ru.md | 2 + README.src.md | 445 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 494 insertions(+) create mode 100644 .github/workflows/nrg.yml create mode 100644 README.src.md diff --git a/.github/workflows/nrg.yml b/.github/workflows/nrg.yml new file mode 100644 index 000000000..5f6e0b033 --- /dev/null +++ b/.github/workflows/nrg.yml @@ -0,0 +1,45 @@ +name: Regenerate READMEs +on: + push: + branches: [v7] + paths: + - 'README.src.md' + - '.github/workflows/nrg.yml' + pull_request: + paths: + - 'README.md' + - 'README.ru.md' + - 'README.src.md' +permissions: + contents: write +jobs: + regenerate: + if: github.event_name == 'push' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + token: ${{ secrets.GITHUB_TOKEN }} + - uses: nanolaba/nrg-action@v1 + with: + file: README.src.md + nrg-version: '1.2' + - name: Commit regenerated READMEs + run: | + if [ -n "$(git status --porcelain README.md README.ru.md)" ]; then + git config user.name "github-actions[bot]" + git config user.email "41898282+github-actions[bot]@users.noreply.github.com" + git add README.md README.ru.md + git commit -m "docs: regenerate READMEs from README.src.md" + git push + fi + drift-check: + if: github.event_name == 'pull_request' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: nanolaba/nrg-action@v1 + with: + file: README.src.md + mode: check + nrg-version: '1.2' diff --git a/README.md b/README.md index ffcc6eeb6..bc3262215 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ + + # BEM Components Library `bem-components` is an open-source library that provides a set of ready-made visual components ([blocks](https://en.bem.info/methodology/key-concepts/#block)) for creating web interfaces. diff --git a/README.ru.md b/README.ru.md index 4b84974d5..e89ad05a4 100644 --- a/README.ru.md +++ b/README.ru.md @@ -1,3 +1,5 @@ + + # Библиотека BEM Components `bem-components` — это библиотека с открытым кодом, которая предоставляет набор готовых визуальных компонентов ([блоков](https://ru.bem.info/methodology/key-concepts/#Блок)). Содержит контролы форм и другие базовые компоненты для построения интерфейсов. diff --git a/README.src.md b/README.src.md new file mode 100644 index 000000000..71114127d --- /dev/null +++ b/README.src.md @@ -0,0 +1,445 @@ + + +# BEM Components Library + +`bem-components` is an open-source library that provides a set of ready-made visual components ([blocks](https://en.bem.info/methodology/key-concepts/#block)) for creating web interfaces. + +The library provides design themes. This version introduces the `islands` theme, which implements the new Yandex design. Features include supporting multiple themes at once, and creating new themes. + +[![GitHub Release](https://img.shields.io/github/release/bem/bem-components.svg?style=flat)](https://github.com/bem/bem-components/releases) + +## Contents + +* [Levels](#levels) +* [Blocks](#blocks) +* [Supported browsers](#supported-browsers) +* [Technologies](#technologies) +* [Tools](#tools) +* [Usage](#usage) +* [Development](#development) +* [Maintainers](#maintainers) +* [Workflow](#workflow) + +**Additional information** + +* [Changelog](./CHANGELOG.md) +* [Migration to future versions](./MIGRATION.md) + +## Levels + +* `common.blocks` — support of any devices and browsers. +* `desktop.blocks` — support of desktop browsers. +* `touch.blocks` — implementation of specific features for touch platforms. +* `touch-phone.blocks` — implementation of specific features for smartphones. +* `touch-pad.blocks` — implementation of specific features for tablets. +* `design/.blocks` — implementation of various designs (themes). + +## Blocks + +* [attach](common.blocks/attach/attach.en.md) +* [button](common.blocks/button/button.en.md) +* [checkbox](common.blocks/checkbox/checkbox.en.md) +* [checkbox-group](common.blocks/checkbox-group/checkbox-group.en.md) +* [control](common.blocks/control/control.en.md) +* [control-group](common.blocks/control-group/control-group.en.md) +* [dropdown](common.blocks/dropdown/dropdown.en.md) +* [icon](common.blocks/icon/icon.en.md) +* [image](common.blocks/image/image.en.md) +* [input](common.blocks/input/input.en.md) +* [link](common.blocks/link/link.en.md) +* [menu](common.blocks/menu/menu.en.md) +* [menu-item](common.blocks/menu-item/menu-item.en.md) +* [modal](common.blocks/modal/modal.en.md) +* [popup](common.blocks/popup/popup.en.md) +* [progressbar](common.blocks/progressbar/progressbar.en.md) +* [radio](common.blocks/radio/radio.en.md) +* [radio-group](common.blocks/radio-group/radio-group.en.md) +* [select](common.blocks/select/select.en.md) +* [spin](common.blocks/spin/spin.en.md) +* [textarea](common.blocks/textarea/textarea.en.md) +* [z-index-group](common.blocks/z-index-group/z-index-group.en.md) + +## Supported browsers + +* **Desktop** + * Firefox *(the last two stable versions)* + * Chrome *(the last two stable versions)* + * Safari *(the last two stable versions)* + * Yandex *(the last two stable versions)* + +* **Touch** + * Android 5+ + * iOS 12+ + + +## Technologies + +* [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) +* [i-bem.js](https://en.bem.info/tutorials/bem-js-tutorial/) +* [BEMHTML](https://en.bem.info/technology/bemhtml/current/reference/) +* [DEPS](https://en.bem.info/technology/deps/about/) +* [PostCSS](http://postcss.org/) + +## Tools + +**Build** + +* [Vite](https://vite.dev/) — build tool and dev server +* [PostCSS](http://postcss.org/) — CSS processing (via Vite) +* [Autoprefixer](https://github.com/ai/autoprefixer/) — vendor prefixes + +**Code analysis** + +* [ESLint 10](https://eslint.org/) — JavaScript linting + +**Testing** + +* [Playwright](https://playwright.dev/) — browser regression testing + +## Usage + +### Installation + +```bash +npm install bem-components +``` + +**Requirements:** Node.js >= 20 + +**Peer dependencies:** +* `bem-core` ^5.0.0 +* `jquery` ^4.0.0 + +### Building from source + +```bash +git clone https://github.com/bem/bem-components.git +cd bem-components +npm install +npm run build +``` + +The build produces output for three platforms in the `dist/` directory: +* `dist/desktop/` +* `dist/touch-pad/` +* `dist/touch-phone/` + +### Library concepts + +#### The block and its states + +The library consists of blocks, which you can see represented visually in the [`bem-components` showcase](https://ru.bem.info/libs/bem-components/current/showcase/). Blocks have states that determine the behavioral model. A block’s state is expressed through modifiers and specialized fields. Changing a modifier creates an event that can be used for working with the block. + +There is no need to create a special BEM event if you can work with the modifier change event. Depending on what is used for changing a component’s state (a modifier or a field), different events are used: + +* To respond to changing the "state" of `value` fields, the `change` event is used. +* To respond to setting or removing a modifier, various modifier change events are used. + +#### Controls in `bem-components` + +The controls in `bem-components` can be used as the basis for creating other library components. Such controls don't have models as in HTML, and they can be used for tasks that don't require the semantics of a specific HTML model. + +As an example, think of the "behavioral model" for the [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement), which is a higher-level interface designed specifically for editing data. What is different about `bem-components` blocks is that they can be used as the basis of a block in another library that will solve the same problem. But along with that, they can serve other purposes in the interface that don't require `HTML input` semantics. + +#### Implementation details + +##### `focused` modifier + +Controls in bem-components have two types of focus, which are set using the modifiers `focused` and `focused-hard`. The type of focus determines the appearance of the control. + +The modifier is chosen automatically based on how the focus is set: +* `focused` — Set for a mouse click on the control. +* `focused-hard` — Set when the control is selected using the keyboard or through JavaScript. It highlights the component more obviously when it gets the focus. For example, in the `Islands` theme, most of the controls get an extra border when `focused-hard` is set. + +## Development + +* [Working copy](#working-copy) +* [How to contribute](./CONTRIBUTING.md) +* [Testing](#testing) + +### Working copy + +Get sources: + +```bash +git clone git://github.com/bem/bem-components.git +cd bem-components +``` + +Install dependencies: + +```bash +npm install +``` + +Build all platforms: + +```bash +npm run build +``` + +Start the development server: + +```bash +npm run dev +``` + +Code analysis: + +```bash +npm run lint +``` + +### Testing + +#### Browser regression tests + +[Playwright](https://playwright.dev/) is used for browser testing. + +```bash +npm run test:browser # run tests headless +npm run test:browser:ui # run tests with Playwright UI +``` + +#### Run all checks + +```bash +npm test # runs lint + test:browser +``` + +Tests are run automatically on GitHub Actions for each pull request. + +## Maintainers + +* [veged](https://github.com/veged) +* [dfilatov](https://github.com/dfilatov) +* [tadatuta](https://github.com/tadatuta) + +## Workflow + +Current tasks are tracked via [GitHub Issues](https://github.com/bem/bem-components/issues). + +## License + +Code and documentation © 2012 YANDEX LLC. Code released under the [Mozilla Public License 2.0](LICENSE.txt). +# Библиотека BEM Components + +`bem-components` — это библиотека с открытым кодом, которая предоставляет набор готовых визуальных компонентов ([блоков](https://ru.bem.info/methodology/key-concepts/#Блок)). Содержит контролы форм и другие базовые компоненты для построения интерфейсов. + +Библиотека предоставляет темы оформления. В данной версии представлена тема `islands`, реализующая дизайн Яндекса. Предусмотрена одновременная поддержка нескольких тем и возможность создания новых. + +[![GitHub Release](https://img.shields.io/github/release/bem/bem-components.svg?style=flat)](https://github.com/bem/bem-components/releases) + +## Содержание + +* [Уровни](#Уровни-переопределения) +* [Блоки](#Блоки) +* [Поддерживаемые браузеры](#Поддерживаемые-браузеры) +* [Технологии](#Технологии) +* [Инструменты](#Инструменты) +* [Принципы работы](#Принципы-работы-библиотеки) +* [Использование](#Использование) +* [Разработка](#Разработка) +* [Команда основной разработки](#Команда-основной-разработки) +* [Рабочий процесс](#Рабочий-процесс) + +**Дополнительная информация** + +* [История изменений](./CHANGELOG.ru.md) +* [Миграция на последующие версии](./MIGRATION.ru.md) + +## Уровни переопределения + +Библиотека поддерживает следующие [Зачем нужны уровни переопределения](https://ru.bem.info/methodology/redefinition-levels/): + +* `common.blocks` — поддержка всех устройств и браузеров. +* `desktop.blocks` — поддержка браузеров для настольных устройств. +* `touch.blocks` — реализация специфических особенностей для touch-платформ. +* `touch-phone.blocks` — реализация специфических особенностей для смартфонов. +* `touch-pad.blocks` — реализация специфических особенностей для планшетов. +* `design/.blocks` — реализация различных дизайнов (тем). + +## Блоки + +* [attach](common.blocks/attach/attach.ru.md) +* [button](common.blocks/button/button.ru.md) +* [checkbox](common.blocks/checkbox/checkbox.ru.md) +* [checkbox-group](common.blocks/checkbox-group/checkbox-group.ru.md) +* [control](common.blocks/control/control.ru.md) +* [control-group](common.blocks/control-group/control-group.ru.md) +* [dropdown](common.blocks/dropdown/dropdown.ru.md) +* [icon](common.blocks/icon/icon.ru.md) +* [image](common.blocks/image/image.ru.md) +* [input](common.blocks/input/input.ru.md) +* [link](common.blocks/link/link.ru.md) +* [menu](common.blocks/menu/menu.ru.md) +* [menu-item](common.blocks/menu-item/menu-item.ru.md) +* [modal](common.blocks/modal/modal.ru.md) +* [popup](common.blocks/popup/popup.ru.md) +* [progressbar](common.blocks/progressbar/progressbar.ru.md) +* [radio](common.blocks/radio/radio.ru.md) +* [radio-group](common.blocks/radio-group/radio-group.ru.md) +* [select](common.blocks/select/select.ru.md) +* [spin](common.blocks/spin/spin.ru.md) +* [textarea](common.blocks/textarea/textarea.ru.md) +* [z-index-group](common.blocks/z-index-group/z-index-group.ru.md) + +## Поддерживаемые браузеры + +* **Desktop** + * Firefox *(две последние стабильные версии)* + * Chrome *(две последние стабильные версии)* + * Safari *(две последние стабильные версии)* + * Yandex *(две последние стабильные версии)* + +* **Touch** + * Android 5+ + * iOS 12+ + +## Технологии + +* [ES-модули](https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Modules) +* [i-bem.js](https://ru.bem.info/technology/i-bem/current/i-bem-js/) +* [BEMHTML](https://ru.bem.info/technology/bemhtml/current/reference/) +* [DEPS](https://ru.bem.info/technology/deps/about/) +* [PostCSS](http://postcss.org/) + +## Инструменты + +**Сборка** + +* [Vite](https://vite.dev/) — сборка и сервер разработки +* [PostCSS](http://postcss.org/) — обработка CSS (через Vite) +* [Autoprefixer](https://github.com/ai/autoprefixer/) — вендорные префиксы + +**Проверка кода** + +* [ESLint 10](https://eslint.org/) — линтинг JavaScript + +**Тестирование** + +* [Playwright](https://playwright.dev/) — регрессионное тестирование в браузере + +### Принципы работы библиотеки + +#### Блок и его состояния + +Библиотека состоит из блоков, у которых есть состояния. Состояния блока определяют его поведенческую модель и выражаются с помощью [модификаторов](https://ru.bem.info/methodology/key-concepts/#Модификатор) и специализированных полей. Установка/снятие модификатора создает событие, которое можно использовать для работы с блоком. + +В зависимости от того, что изменяет состояние компонента (модификатор или поле), используются разные события: + +* Для реакции на изменения «состояния» полей `value` применяется событие `change`. +* Для реакции на установку/снятие модификатора применяются события на изменение модификатора. + +#### Контролы в `bem-components` + +Контролы в `bem-components` могут использоваться как базовая часть для создания других компонентов библиотек. Такие контролы не имеют моделей, как в HTML, и могут использоваться для решения задач, в которых не нужна семантика конкретной HTML-модели. + +В качестве примера можно рассмотреть «поведенческую модель» [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement), которая представляет собой высокоуровневый интерфейс, специально созданный для редактирования данных. Блоки в `bem-components` отличаются тем, что могут использоваться как базовая часть блока другой библиотеки, который будет решать эту же задачу. Но, помимо этого, они могут решать и другие интерфейсные задачи, в которых не нужна семантика `HTML input`. + +#### Особенности реализации модификатора `focused` + +Контролы в bem-components имеют два типа фокуса, которые выставляются с помощью модификаторов `focused` и `focused-hard`. Тип фокуса определяет внешний вид контрола. + +Выбор модификатора происходит автоматически в зависимости от способа установки фокуса: +* `focused` — выставляется при клике на контрол курсором мыши. +* `focused-hard` — выставляется при переходе на контрол с помощью клавиатуры или через JavaScript. Создан для более явного визуального выделения компонента при получении фокуса. Например, в теме `islands` большинство контролов получают дополнительную рамку при установке модификатора `focused-hard`. + +## Использование + +### Установка + +```bash +npm install bem-components +``` + +**Требования:** Node.js >= 20 + +**Зависимости (peerDependencies):** +* `bem-core` ^5.0.0 +* `jquery` ^4.0.0 + +### Сборка из исходного кода + +```bash +git clone https://github.com/bem/bem-components.git +cd bem-components +npm install +npm run build +``` + +Результат сборки для трёх платформ будет в директории `dist/`: +* `dist/desktop/` +* `dist/touch-pad/` +* `dist/touch-phone/` + +## Разработка + +* [Рабочая копия](#Рабочая-копия) +* [Внесение изменений](./CONTRIBUTING.ru.md) +* [Тестирование](#Тестирование) + +### Рабочая копия + +Получение исходников: + +```bash +git clone git://github.com/bem/bem-components.git +cd bem-components +``` + +Установка зависимостей: + +```bash +npm install +``` + +Сборка всех платформ: + +```bash +npm run build +``` + +Запуск сервера для разработки: + +```bash +npm run dev +``` + +Проверка кода: + +```bash +npm run lint +``` + +### Тестирование + +#### Регрессионное тестирование в браузере + +Для тестирования в браузере используется [Playwright](https://playwright.dev/). + +```bash +npm run test:browser # запуск тестов в headless-режиме +npm run test:browser:ui # запуск тестов с UI Playwright +``` + +#### Запуск всех проверок + +```bash +npm test # запускает lint + test:browser +``` + +Тесты автоматически запускаются на GitHub Actions для каждого pull request. + +## Команда основной разработки + +* [veged](https://github.com/veged) +* [dfilatov](https://github.com/dfilatov) +* [tadatuta](https://github.com/tadatuta) + +## Рабочий процесс + +Текущие задачи отслеживаются через [GitHub Issues](https://github.com/bem/bem-components/issues). + +## Лицензия +© 2012 YANDEX LLC. Код лицензирован [Mozilla Public License 2.0](LICENSE.txt).