@alcumus/react-ioc-widgets
v2.0.3
Published
Widget React Component
Downloads
41
Keywords
Readme
React Inversion Of Control Widgets
The widgets library is a series of components that provide a canvas for designing and then editing or viewing documents. The documents are expressed as Javascript objects, serializable to JSON.
The principle is to have a WYSIWYG editor for your own documents, to enable highly customised systems. You might use it to create a dynamic form filling interface where you can allow your users to design a series of forms or perhaps a dashboard designer and catalogue.
The library contains the bare minimum of components and uses a loosely coupled approach to editors, meaning that you can write code to use the canvas the way you see fit, and you can augment the experience later without changing any base code, plus you can reuse useful editors across many types of document.
In the example you see above, most of the look and functionality has been developed in the examples, it's all very simple. The Widgets component is just providing some places to put content and triggering events so you can loosely accrete functionality as you go along.
Resources
You can read the {@tutorial Getting Started} guide, or dive into the {@tutorial Core Concepts} to get a feeling for how Inversion of Control works. {@tutorial Hooks and Events} looks into how Inversion of Control is implemented in this library.
Project Structure of source project
The project examples are all in the src/
folder. The index.js
and App.js
files make an example React app that shows off all of the features and the code for the editors etc can be found in the src/examples/
folder.
src/component
contains the code for the actual component, but it is exposed through the index.js
in the project root.
You can find some example JSON that you could write to localStorage to get the examples bootstrapped in the src/examples/example
folder.
Examples in the source project
npm start
to start the example app on localhost:3009
Running the Integration tests in Cypress
Before running the tests, ensure the app is running by running
npm start
If the server isn't running at localhost:3000 then please adjust the port cypress should run against by updating config.json in the cypress/config.json file.
To run the Cypress tests in interactive mode
npm run cypress
To run the Cypress tests in CI mode
npm run cypressci