Skip to content
Build elements, components from a UI
Branch: master
Clone or download
Latest commit e74cc90 May 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
cypress
docs Set theme jekyll-theme-cayman May 17, 2019
gifs
mock
src
tests Adds setup for testing using cypress. May 2, 2019
visual_history Existing events, new events - visual different by adding header and p… May 20, 2019
.babelrc Feature/mvp concept (#1) Dec 23, 2018
.gitignore Merge branch 'master' into feature/mvp_concept Dec 30, 2018
LICENSE Create LICENSE Apr 23, 2019
README.md
Viewer.png Adds state-reducer-viewer. Next make the visual same as the mock Jan 27, 2019
cypress.json Adds setup for testing using cypress. May 2, 2019
package-lock.json
package.json Adds setup for testing using cypress. May 2, 2019
webpack.config.js Moved all components into their folder Jan 31, 2019

README.md

What is ui-editor?

ui-editor is user interfaces builder for web. It is actively being maintained. Live demo, look into tutorials section for step by step instructions.

Building component with events

Applications

  • Cross framework component code generation.
  • GUI.
  • Concept can be applied to any framework of your team's choice.
  • Hides the framework APIs.
  • Component testability for different states.
  • More refining will allow us to cleanup front end development.

Getting Started

git clone https://github.com/imvetri/ui-editor.git
cd ui-editor
npm i
npm start

Running the tests

npm start
npx cypress open

Demos

To see it in action, do below

npx cypress open

run the first test

Tutorials

How to create a component with markup.

![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_with_static_content.gif)

How to pass a state.

![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_receiving_data_from_state.gif)

How to bind events and modify state.

![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_responding_to_events.gif)

How to read data from an event.

![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_accessing_event_object.gif)

How to export the component and use it in your react projects.

How it works

Contributing

Contributions like feature requests, feeback for improvements, ideas are welcome! Feel free to open an issue.

  • Feedback for improvement, Feature requests, Styling. Any ideas you have, share your expectations as a mock via screenshot.

List of files to touch for events

  • src/utilities/codeGenerator/prepareMarkup.js
  • src/utilities/jsxTranspiler/store-events-global/index.js
  • src/Nodes/Index.js
  • src/Events/Index.js

Planned

  • Nested component building.

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE.md file for details

Acknowledgments

  • Open source community members, for making things easier, their efforts made sure that knowledge/information shouldn't be held as property of a company and should be free for access.

Purpose of this project

If you are working as an employee, its important that we stay chill minded. Solve important problems that saves time of developer not just the busines.

  • Make time for yourself at work, if any of your solution saves time for business, that is something you have earned for yourself.

Releases

Project will maintain monthly release after some feedback. This is my first time maintaining an open source project, it would be of great help if you could drop some tips.!

You can’t perform that action at this time.