reactfaber v0.9.0

ReactFaber, Faber like "Architecte"

At this moment this package is in french langage if you want show your interest in this package for your own langage, please feel free to open descussion/issue for supporting other langages.

Precquesite:

You are fan of

• Full TSX
• React (No Preact)
• create react app

build with

validate with mongodb

Values

React Faber sentance: "No more webpack or dependencies issue for my story-book project and no more limitations."

What the framework want to acheive ?

• Industry way to test UI
• Portfolio
• Collaboration
• put all component on one library package wich generate jsx and typings. NO WORK

if you feel curious about discussing/participating, feel free to reach me from "Martin#6587" on Discord or here on github.

More details

Menu of the app WIP

maybe different on the future ...

"Welcome":"is all about ReactFaber"
    I=>"Guide": "SiteMap, Q/A and more ..." ,
    II=> "Training Ui": "learn to use ReactFaber's UI !"
    III=> "ReactFaber Settings": "Custom your ReactFaber's code here !"
    IV=> "Admin database": "Access to multi-databases and all collections of all of them on CRUD"

"Component": "`Production & Visualisation` of components/data-components "
    I=> "Biblio": "Select your component and see all component on categories"
    II=> "Workshop": "Work/Visualize on specific component, you also can attach bug/feature/note to this component"
    III=> "Playground": "Do some code react code on browser !".
    IV=> "Factory" : "Do some stuff for taking code and transform to JSX/Css"
    V=> "Steel internet": "Take huge files to retrieve only the part you are interest in"

"Inspi Support":"Media files help you to build component"
    I=> "Html/Css/Js": "Vids about html behaviour"
    II=> "Pics": "storage component's picture and then use it to make some code !"
    III=>"Graphical chart":"very explicit ..."
    IV=> "Future Assets": "no time to organize or maybe you will see"

"Doc", "All knowledge on the project"
    I=>"Monitor": "see what happen on your projects
    II=>"Team": "all about people participate in your project" 
    III=>"Plans": "Project's History, KanBan and Roadmap.
    IV=> "Composant": "The component you insert in the project will be scan [code, state and props]" 

"Promote" :"make some hype for yout project"
    I=>"Prez": "Make it short about important your project"
    II=>"Social network": "How contact you ?" ,
    III=>"WorkPlace" :"Where you work",

• Industry: Quickly test if Component

    =>  are "containerisable" (is "relative" and can be aside from another component)
  
    =>  have no crash
  
    =>  props are valid
  
    =>  is "Desirable" value (criteria of UX) 
        ex:     - Random picture on specific format)  
                - Insert JSX on props (currently function are'nt support yet)
  
    =>  is readable (color contrast or background color change)

• Portfolio: Quickly search with

    =>  categories making suitable hundreds components
  
    =>  search with component's name
  
    =>  ergonomie toolbar for make quick as possible
  
    =>  filter for better ewperience
  
    =>  save preference of search or anything on localstorage

• Collaboration: work with no computer friendly thanks to

    =>  portfolio
    
    =>  suggestion of props on specific component [database needed]
    
    =>  suggestion of feature attach to specific component
    
    =>  see all issues on specific component or be warn on a dashboard
    
    =>  manage (CRUD) props / download your props on a json file

Get Started

• Have Database
• Have create-react-app in typescript
• Dowload ReactFaber as zip
  • take "Test" Folder and make your own app on this configuration
  • take "Css" Folder and import all css on your app

All Seetings

• Pictures JPG, PNG and SVG (not yet) (~ 400x400, 1080x1920, ~ 400x200)
• Your components
• Your databases (localstorage, dev database or/and prod database ) / yours specific Http Request
• some infos about yours projects

Plan for Future

Focus Now

• All parameters should be used or update.
• Json helper dynamic (keys and value) needed V4 for stable use

Later

Screens

Build all Screens with all features. Done

    all in the main "Welcome" screen without reactFaberSetting.
    Admin is 80% done

WIP ALL_TANSLATE_OBJ : some issue for build on prod

Focus on

    power up DatabaseAdmin, ...
    Make Plan and GraphicalChart (filter by color score)

Experience

• Set Up Monkey testing (the dummy one)
• Bind "Bibliotheque" to Hotjar expe or create Hotjar experience
• Add "Analyse SEO/SonarQube" to "..."

Advice for Deployement

No solution right now you have to build and publish yourself with tdsx

Note for dev ReactFaber

Making in prod

is silly but no "safe" solution right now expect to npx -p typescript tsc ./dist/index.tsx --jsx react-jsx