Bem Composition

index.jsx

import React from 'react';
import styled from "styled-components";
import { bemClassName } from 'bem-react-core';
import { react } from '@bem/sdk.naming.presets';

import logo from './logo.svg';
import './App.css';

const bemed = (block, mods) => (elemPure) => {
  const naming = bemClassName(react);
  const fn = (e, elemMods) => (Pure) => (props) => {
    return <Pure {...props} {...{ 
      block,
      elem: (e, eMods) => naming(block, e, eMods),
      className: e ? naming(block, e, elemMods) : naming(block, undefined, mods)
    }}/>
  }

  return fn(elemPure);
};


const app = mods => {
  const BApp = bemed('App', mods);
  const ELogo = BApp('Logo')(({ className }) => <img src={logo} className={className} alt="logo" />);
  const ETitle = BApp('Title')(({ className }) => <h1 className={className}>Welcome to React</h1>);

  const Header = ({ className }) => (
    <header className={className}>
      <ELogo />
      <ETitle /> 
    </header>
  );
  
  const StyledHeader = styled(Header)`
    background-color: #222;
    height: 150px;
    padding: 20px;
    color: white;
  `;

  return BApp()(({ className, elem, onClick }) => (
    <div className={className} onClick={onClick}>
      <StyledHeader/>
      <p className={elem('Intro')}>
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  ));
};

const mod = Block => {
  return (props) => <Block {...props} onClick={() => console.log('!!!')}/>
}

const App = mod(app({ theme: 'islands' }));

console.log(App);

export default App;