Разработать примеры использования bemponent

[belodpav]

Для начала необходимо разработать несколько примеров отображающих основную суть подхода bemponent. Например, для начала можно разработать примеры подобным ниже:

• Компонент без динамически состояний. e.g. Кнопка имеющая размер s, тему primary, ....

      <Button size="s" theme="primary">Open the door</Button>

• Компонент c динамическим состоянием, e.g. Кнопка имеющая размер s, тему primary, ....
  а так же меняет свои свойства как ответ на насобытие. (Добавляется className к компоненту)
  Например ниже мы хотим добовлять строку Button_Hovered к className при наведении
  указателем мыши на компонент(отработка события onMouseEnter в React)

     ...
     import {merge} from 'lodash';
     ...
     class Button extends Component {
      constructor() {
        super();
        ...
        this.state = {
           ...,
           mods: {
               hovered: false,
               ....
          }
        }
        ...
        handleMouseEnter() {
        .... 
         this.setState(
           merge({}, this.state, {mods: { hovered: true}})
          );
         ....
        }
      }
  
       ...
      // usage
      <Button 
           size="s"
          theme="primary"
     >Open the door</Button>

Таким образом при наведени мышкой на кнопку будет добовляться модификатор Button_Hovered к className компонeнта
Функция merge библиотеки lodash используется для сохранения иммутабельности состояния компонента.(Придерживаемся философии Reactа)

Термины:

• Компонет с динамическим состоянием - компонент имеющий состояния. (Компонент имеющий state в React терминах)

• Компонет без динамического состояния - компонент не являющийся Компонентом с динамическим состоянием.

[JorJeG]

Стоит ли подтягивать в папку examples storybook-create-react-app, чтобы эта ядерная смесь показала быстроту и лёгкость в верстке независимых компонентов?

[belodpav]

@JorJeG Кажется, bemponent может прекрасно работать без create-react-app, если сделать cdn версию. "storybook-create-react-app" - все таки мы сейчас говорим про bemponent, примеры быстрой верстки с использованием storebook, наверняка есть на сайте storebook.

Плюс не хочется засорять этот репозиторий "тяжелым" функционалом. Однако, возможно, стоит отдельно от bemponent создать такую библиотеку-пример подхода в разработке компонентов реакта.