// webpack.config.babel.js
export default (env = {}) => {
  const dev = !!env.dev;
  return {
    ...
    module: {
      rules: [
        {
          test: /^((?!\.module).)*\.styl$/,
          use: [
            'style-loader',
            'css-loader?sourceMap&importLoaders=2',
            'postcss-loader?sourceMap',
            'stylus-loader?paths[]=src',
          ],
          exclude: /node_modules\/(?!(@expandorg)\/).*/,
        },
        {
          test: /\.module\.styl$/,
          use: [
            'style-loader',
            `css-loader?sourceMap&importLoaders=2&modules&localIdentName=${dev ? '[local]__[path][name]__' : ''}[hash:base64:5]`,
            'postcss-loader?sourceMap',
            'stylus-loader?paths[]=src',
          ],
          exclude: /node_modules\/(?!(@expandorg)\/).*/,
        }
      ],
    },
  };
};

import React from 'react'
import { Button } from '@expandorg/components';

const MyComponent = () => (
  <Button theme="secondary" onClick={() => console.log('click!')}>
    Hello World
  </Button>
);

import React from 'react'
import { Form, formProps, FormDataProvider } from '@expandorg/modules';


const form = {   // define form modules
  modules: [{
    name: "input-1",
    type: "input",
    placeholder: "Input value"
  }]
}


class CustomForm extends Component {    // your form component

  handleSubmit = values => {
    console.log(values);
  };

  render() {
    return (
      <FormDataProvider formData={null}>
        <Form
          form={form}
          onSubmit={this.handleSubmit}
        >
          {moduleProps => <Module {...moduleProps} />}
        </Form>
      </FormDataProvider>
    );
  }
}