https://github.com/expandorg/expand-components
Expand component library, modules & ui components
https://github.com/expandorg/expand-components
docz form-builder-api javascript react ui-kit
Last synced: 4 days ago
JSON representation
Expand component library, modules & ui components
- Host: GitHub
- URL: https://github.com/expandorg/expand-components
- Owner: expandorg
- License: mpl-2.0
- Created: 2018-07-17T02:50:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T09:35:00.000Z (about 3 years ago)
- Last Synced: 2025-12-25T22:32:35.927Z (3 months ago)
- Topics: docz, form-builder-api, javascript, react, ui-kit
- Language: JavaScript
- Homepage: https://expandorg.github.io/expand-components/
- Size: 27.5 MB
- Stars: 13
- Watchers: 4
- Forks: 2
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Expand UI
[](https://www.npmjs.com/package/@expandorg/components)
Expand UI & Modules is a collection of React components, tools and guidelines for creating expand products.
* **Modules** [](https://www.npmjs.com/package/@expandorg/modules): Dynamic extensible JSON powered form library for React.
* **UI Components** [](https://www.npmjs.com/package/@expandorg/components): set of components such as Buttons, Panels, Menus, HOC's. General purpose components used to build expand.org web applications.
* **UI Kit** [](https://www.npmjs.com/package/@expandorg/uikit): [Colors](https://expandorg.github.io/expand-components/#/uikit-colors), and [Typography](https://expandorg.github.io/expand-components/#/uikit-typography) used across [expand.org](https://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](https://www.npmjs.com/package/@expandorg/components), [@expandorg/modules](https://www.npmjs.com/package/@expandorg/modules), [@expandorg/uikit](https://www.npmjs.com/package/@expandorg/uikit):
```bash
npm install @expandorg/modules @expandorg/components @expandorg/uikit --save
```
## Prerequisites
expand UI & Modules use [stylus](http://stylus-lang.com/) and [css-modules](https://github.com/css-modules/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
```jsx
// 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
```jsx
import React from 'react'
import { Button } from '@expandorg/components';
const MyComponent = () => (
console.log('click!')}>
Hello World
);
```
## Modules Form Usage
```jsx
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 (
{moduleProps => }
);
}
}
```
## License
This project is licensed under the terms of [Mozilla Public License 2.0](./LICENSE).