welcome to rnbw!
to learn rnbw, go to https://rnbw.design/guide.
- npm install
- npm start
- visit
http://localhost:8080/
rainbow has three core parts:
- action panel (left panel - react-complex-tree)
- files tree view
- nodes tree view
- settings panel
- stage (live preview and design editor)
- code (code editor - monaco-editor)
each time you change any part, the other parts change as well. this means there’s a unique id for each node so that we can detect which node has been changed and update its states globally.
each object with events is called a “node” - so when the nodes change, the global state also changes.
/config - we will use it for some project config settings. such as “toast-duration”.
/_node - all of the node apis including parse,serialize file would be there.
/_redux - redux code goes into this folder. each reducer has its sub-folder.
/app - the code related to the root app component goes here.
/components - all of the react fc goes here.
/pages - the in-project pages we are gonna build. they will work inside the browser- router
/services - functions or constants useful for coding.
/types - the global interfaces or types we use in the app.
for each react-redux-reducer, we must keep the following structure.
/template
index.ts - import/export everything in index.ts. use path alias to import.
selectors.ts
slice.ts
types.ts - an interface or type for each code part or fc.
rainbow is heavily dependent on incredible technologies. if you’re considering contributing code, study the below packages and libraries and get ready to fully customize them .
- react - 💁♂️
- @monaco-editor/react - the code editor.
- react-complex-tree - an non-opinionated accessible tree component.
- ⌘k is a command menu react component.
- redux - @reduxjs/toolkit - redux-injectors - redux-undo
- parse5
- file-system-access - file system apis
- react-resizable-panels - for creating resizable panels
- react-top-loading-bar - for showing a loading bar at the top
- workbox-window - service worker library for giving pwa features
- react-toastify - for showing toast style notifications
- idb-keyval - promise-based keyval store implemented with indexeddb
- js-beautify - for prettifying the code
- jszip - for zipping the project files before downloading
- morphdom - dom-diffing lib to update stage without reloading
- buffer - it’s a polyfill. the buffer module from node.js, for the browser.
- references - an open collection of web references.
- inventory - rainbow is using it as the source of information for rainbow node types.
- validation - the validation mechanism is heavily based on the segmentation of nodes.
- rene.css a utility-first css framework for styling clean, simple, and lightweight interfaces, fully customizable with variables, themes, and icons. easy syntax to quickly “get it” and create any design in any framework.
- svg-icon.js - an svg icon component for the web. optimized for smooth design and development experience. it fits into any web framework and can be used anyhow.
- raincons - 12x12 icon set.
join the community to chat with other community members, ask questions ideas, and share your work.