# Installation

## meteor

```
meteor npm install --save elevenyellow-components
```

## node.js (webpack)


```
npm install --save elevenyellow-components
```


# Example

## Functional

```js
import Button from 'elevenyellow-components/lib/button'

export default () => (
  <Button>My cool functional component</Button>
)
```


## Classes

```js
import Button from 'elevenyellow-components/lib/button'

export default class MyButton extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    return <Button>My cool functional component</Button>
  }
}
```





# Theming

### ThemeProvider
```js
import React from 'react'
import { ThemeProvider } from 'styled-components'
import { defaults } from 'elevenyellow-components/lib/theme'
import { Button } from 'elevenyellow-components/lib/button'


export default class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={defaults}>
        <Button>Click me!</Button>
        ...
      </ThemeProvider>
    )
  }
}
```


### Property theme (theme="")
todo

### Property extendTheme (extendTheme="")
todo

### Property className (className="")
todo

### Property style (style="")
```js
<Button className="some-extra-style">Custom button</Button>
```







# Deploy storybook

```
git clone https://github.com/elevenyellow/components
cd components
npm i -g getstorybook
npm install
npm run storybook
```

`open http://localhost:6006/`




# Maintaining the npm package

todo







<!--
## Standalone
You can add components by demand. This way is usefull when you don't want the [default css](https://github.com/elevenyellow/components/blob/master/lib/button/styles.css).

```
meteor npm install --save react react-dom classnames styled-components
```

Donwload and copy [this folder](https://github.com/elevenyellow/components/tree/master/components) into `imports` folder of your meteor project. And import it as relative path.

imports/ui/App.jsx
```js
import Button from '../components/button'

export default () => (
  <Button>My cool standalone component</Button>
)
```
You can just edit styles directly from `imports/components/button/styles.css`-->






<!--
## Standalone

To use it as standalone you will need a webpack configuration that transpile ES6 and React/JSX files.

#### Dependencies (package.json)

```
  "dependencies": {
    "elevenyellow-components": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
```

#### Example of webpack configuration

webpack.config.js
```js
var path = require('path');
var webpack = require('webpack');


// Settings
var basePath = path.join(__dirname, './');
var webpackSettings = {
  target: 'web',
  entry: [
    'webpack-dev-server/client?http://localhost:5000',
    'webpack/hot/dev-server',
    './scripts/index.js'
  ],
  context: path.join(basePath),
  resolve: {
    root: path.join(basePath),
    extensions: ['', '.js', '.jsx'],
  },
  debug: true,
  output: {
    path: __dirname,
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/, exclude: /(node_modules|bower_components)/,
        loaders: ['babel?presets[]=react,presets[]=es2015']
      },
      { test: /\.css$/, loader: 'style!css' }
    ]
  },
  devtool: 'eval-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

module.exports = webpackSettings;
```

#### Example of server that loads the webpack configuration

server.js
```js
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(5000, 'localhost', (err) => {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:5000');
});
```

Now just run `node server.js`


#### webpack example for bundle's  

```
npm install --save-dev cross-env
```


webpack.config.production.js
```js
var webpack = require('webpack');
var path = require('path');
var basePath = path.join(__dirname, './');

module.exports = {
  entry: './scripts/index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  context: path.join(basePath),
  resolve: {
    root: path.join(basePath),
    extensions: ['', '.js', '.jsx'],
  },
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
      {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          query: {
              presets: ['es2015', 'react']
          }
      },
      // { test: /\.css$/, loader: 'style!css' },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  }
};
```
Add this script to your package.json
```
"build": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js",
```
-->