A CLI to bootstrap app that showcase UI components and have your own UI set of components.
It generates a complete project structure builded with:
- webpack
- react
- material-ui
- flexboxgrid
With ronodoc-cli, you could have an app that showcase not only UI components but also the ability to expose each components API, a preview of the code and how it looks like.
Plus, if you use the build command from the generated project, you will have a lib of all your UI components and of course the showcase app for production.
Basically, you could see this project like the beginning to achieve something like:
Below is the generated code after running ronodoc-cli
|project/
|__tests__/
|demo/
|src/
|components/
|_layout/
|app/
|hodor/
|markdownothor/
|proptypes-descripthor/
|pages/
|index.html
|main.js
|webpack.config.dev.js
|webpack.config.prod.js
|webpack.server.js
|src/
|LICENCE.md
|package.json
There is also a command to generate next UI component ronodoc-cli -c component_name create
which will automatically create and insert the new component structure into this app.
You only need to work on your component as you which, no more copy/paste everywhere to setup the component (add it into the router, create it in src/ etc..).
The recommand way is to install it globally.
npm install -g git+ssh://git@github.com/bagoftrycks/ronodoc-cli.git
To create new project:
ronodoc-cli -a "myUIComponents" create
cd myUIComponents/
To start with a new basic component
// make sure to be into your project folder
cd myUIComponents/
ronodoc-cli -c "componentName" create
You can start editing your component in myUIComponents/src/componentName
We use SemVer for versioning. For the versions available, see the tags on this repository.
- Sovanna Hing - Initial work
This project is licensed under the MIT License - see the LICENSE.md file for details
How to create a CLI comes from:
- http://blog.npmjs.org/post/118810260230/building-a-simple-command-line-tool-with-npm
- https://developer.atlassian.com/blog/2015/11/scripting-with-node/
The flow on how to do things is inspired from:
The UI idea, design etc come form of course material-ui
: