Skip to content

Latest commit

 

History

History
93 lines (67 loc) · 4.37 KB

README.md

File metadata and controls

93 lines (67 loc) · 4.37 KB

rnbw 0.1

welcome to rnbw!

get started

to learn rnbw, go to https://rnbw.design/guide.

run it locally:

  1. npm install
  2. npm start
  3. visit http://localhost:8080/

architecture

rainbow has three core parts:

  1. action panel (left panel - react-complex-tree)
    1. files tree view
    2. nodes tree view
      1. settings panel
  2. stage (live preview and design editor)
  3. 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.

codebase

/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.

dependencies

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 .

dependencies by rainbow

  • 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.

community

join the community to chat with other community members, ask questions ideas, and share your work.

license

GNU General Public License, version 3