Expand UI & Modules is a collection of React components, tools and guidelines for creating expand products.
- Modules npm version: Dynamic extensible JSON powered form library for React.
- UI Components npm version: set of components such as Buttons, Panels, Menus, HOC's. General purpose components used to build expand.org web applications.
- UI Kit npm version: Colors, and Typography used across expand.org apps
Detailed documentation and forms playground is available in docz
https://expandorg.github.io/expand-components/
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
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)\/).*/, } ], }, }; };
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> ); } }
This project is licensed under the terms of Mozilla Public License 2.0.