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 --savePrerequisites
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.
