init

.babelrc

@@ -0,0 +1,4 @@
+{
+  presets: ["es2015", "react"],
+  plugins: ["transform-object-rest-spread"]
+}

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+npm-debug.log
+*.es5.js

.npmignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+npm-debug.log

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+
+node_js:
+  - stable

README.md

@@ -0,0 +1,39 @@
+# dumb-bem [![Build Status][travis-image]][travis-url]
+
+> Simple BEM react components generator
+
+## Install
+
+```sh
+npm install --save dumb-bem
+```
+
+## Usage
+
+```js
+import dumbBem from 'dumb-bem'
+import tx from 'transform-props-with'
+
+const dumbBemHeader = dumbBem('header')
+const Header = tx(dumbBemHeader)('div')
+const HeaderTitle = tx([dumbBemHeader, { element: 'title' }])('h1')
+
+ReactDOM.render(
+  <Header modifier='landingpage'>
+    <HeaderTitle>Lorem Ipsum</HeaderTitle>
+  </Header>
+, node)
+// Would render:
+// <div className='header header--landingpage'>
+//   <h1 className='header__title'>
+//     Lorem Ipsum
+//   </h1>
+// </div>
+```
+
+## License
+
+MIT © [Alexander Gudulin](http://gudulin.com)
+
+[travis-url]: https://travis-ci.org/agudulin/dumb-bem
+[travis-image]: https://travis-ci.org/agudulin/dumb-bem.svg?branch=master

index.js

@@ -0,0 +1,25 @@
+import cx from 'classnames'
+
+const makeBlockStyles = ({
+  active,
+  block,
+  className,
+  hidden,
+  modifier,
+  ...props
+}) => ({
+  className: cx(block, {
+    [`${block}--${modifier}`]: block && modifier,
+    [`${className}`]: className,
+    'is-active': active,
+    'is-hidden': hidden
+  }),
+  ...props
+})
+
+export default (block) => ({ element, ...props }) => {
+  if (element) {
+    return makeBlockStyles({ block: `${block}__${element}`, ...props })
+  }
+  return makeBlockStyles({ block, ...props })
+}

license

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Alexander Gudulin <alexandr.gudulin@gmail.com> (gudulin.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "dumb-bem",
+  "description": "Simple BEM react components generator",
+  "version": "0.0.1",
+  "keywords": [
+    "react", "bem"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/agudulin/dumb-bem.git"
+  },
+  "bugs": {
+    "url": "https://github.com/agudulin/dumb-bem/issues"
+  },
+  "homepage": "https://github.com/agudulin/dumb-bem#readme",
+  "dependencies": {
+    "classnames": "^2.2.3"
+  },
+  "devDependencies": {
+    "ava": "^0.9.1",
+    "babel-cli": "^6.3.15",
+    "babel-plugin-transform-object-rest-spread": "^6.5.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.5.0",
+    "expect": "^1.14.0",
+    "expect-jsx": "^2.3.0",
+    "react": "^0.14.7",
+    "react-addons-test-utils": "^0.14.7",
+    "rimraf": "^2.4.3",
+    "standard": "^6.0.5",
+    "transform-props-with": "^0.3.0"
+  },
+  "main": "index.es5.js",
+  "scripts": {
+    "transpile": "babel index.js --out-file index.es5.js",
+    "pretest": "npm run transpile",
+    "test": "standard && ava",
+    "prepush": "npm test",
+    "prepublish": "npm run transpile",
+    "postpublish": "rimraf index.es5.js"
+  },
+  "author": "Alexander Gudulin <alexandr.gudulin@gmail.com> (http://gudulin.com)",
+  "license": "MIT"
+}

test.js

@@ -0,0 +1,79 @@
+import test from 'ava'
+import expect from 'expect'
+import expectJSX from 'expect-jsx'
+
+import React from 'react'
+import { createRenderer } from 'react-addons-test-utils'
+import tx from 'transform-props-with'
+
+import dumbBem from './index.es5'
+
+expect.extend(expectJSX)
+
+test('should render `header` block', (t) => {
+  const renderer = createRenderer()
+
+  const dumbBemHeader = dumbBem('header')
+  const Header = tx(dumbBemHeader)('header')
+
+  renderer.render(
+    <Header />
+  )
+  expect(
+    renderer.getRenderOutput()
+  )
+  .toEqualJSX(
+    <header className='header' />
+  )
+})
+
+test('should render `header` block with modifier', (t) => {
+  const renderer = createRenderer()
+
+  const dumbBemHeader = dumbBem('header')
+  const Header = tx(dumbBemHeader)('header')
+
+  renderer.render(
+    <Header modifier='landing' />
+  )
+  expect(
+    renderer.getRenderOutput()
+  )
+  .toEqualJSX(
+    <header className='header header--landing' />
+  )
+})
+
+test('should render `header` block with modifier and custom className', (t) => {
+  const renderer = createRenderer()
+
+  const dumbBemHeader = dumbBem('header')
+  const Header = tx(dumbBemHeader)('header')
+
+  renderer.render(
+    <Header modifier='landing' className='js-header' />
+  )
+  expect(
+    renderer.getRenderOutput()
+  )
+  .toEqualJSX(
+    <header className='header header--landing js-header' />
+  )
+})
+
+test('should render `header__title` element', (t) => {
+  const renderer = createRenderer()
+
+  const dumbBemHeader = dumbBem('header')
+  const HeaderTitle = tx([dumbBemHeader, { element: 'title' }])('h1')
+
+  renderer.render(
+    <HeaderTitle>Lorem Ipsum</HeaderTitle>
+  )
+  expect(
+    renderer.getRenderOutput()
+  )
+  .toEqualJSX(
+    <h1 className='header__title'>Lorem Ipsum</h1>
+  )
+})