Expand UI

Expand UI & Modules is a collection of React components, tools and guidelines for creating expand products.

• Modules : Dynamic extensible JSON powered form library for React.
• UI Components : set of components such as Buttons, Panels, Menus, HOC's. General purpose components used to build expand.org web applications.
• UI Kit : Colors, and Typography used across expand.org apps

Documentation and live playground

Detailed documentation and forms playground is available in docz

https://expandorg.github.io/expand-components/

installation

Expand components library is a set of public npm packages: @expandorg/components, @expandorg/modules, @expandorg/uikit:

npm install  @expandorg/modules @expandorg/components @expandorg/uikit --save

Prerequisites

expand UI & Modules use stylus and css-modules by default to import stylesheets. It is necessary to import .styl files located in node_modules. We recommend using webpack, but other bundlers can be configured.

Here is webpack config example

// 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)\/).*/,
        }
      ],
    },
  };
};

Basic Usage

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

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

Modules Form Usage

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>
    );
  }
}

License

This project is licensed under the terms of Mozilla Public License 2.0.