Components specs

[fox1t]

Here are listed must-have components. The list will be expanded and improved over time. If a component depends on a 3rd party component, it must be wrapped it in a way that it could be replaced with no effort, if we want to change that dependency in the future: we need to expose our public API. Some dependency are still missing because we need to test some libraries before deciding.

Components we need:

• Table based on react-table bundlephobia (Tables #28)
  • (remote) pagination
  • injecatble behaviours
  • fuzzy search
  • (remote) searchable columns
  • (remote) sortable content
  • custom column actions
  • inline row details
  • ...
• Form, based on Formik library bundlephobia, (Forms #32) must have:
  • form builder: outputs a jsonschema, including validation and field types
  • auto building forms from a jsonschema
  • auto validating on predefined input types; function on custom input types
  • Rich text editor: (Rich Text Editor #29)
    • TinyMCE bundlephobia (we need also to add globally tinymce.min.js that is another 452KB, but we can cache it in an aggressive way): we have to check if the license is compatible with a MIT licensed opensource project
• Loader based on react-spinners bundlephobia
• Viewer:
  • dicom based on OHIF
  • 3d files based on three.js bundlephobia
    • OBJ
    • STL
• Alerts and Confirmations based on [missing] (Alert #30)
• Video Player based on [missing] (Video Player #31)
• Toaster based on react-toastify bundlephobia
• Uploader
  • custom upload component
  • opt-in end-to-end encryption
• File manager
  • custom file manager
  • opt-in end-to-end encryption
• Chat
  • web-socket based (I'll really want to exclude socket.io from the equation, if possible)
  • end-to-end encrypted

[jackcmeyer]

HospitalRun/hospitalrun-frontend#387 requested a dashboard like feature which will require the use of some graphs and charts.

Possible React libraries for charts/graphs:

• Nivo built on top of d3 bundlephobia
• ChartJs bundlephobia
• Recharts bundlephobia
• Victory bundlephobia
• react-vis bundlephobia

[lancerutkin]

One note on those libraries is that they're all fairly heavy for low bandwidth internet connections (see bundlephobia.com), which is the same concern raised about socket.io.

I found something called Frappe charts which is lighter and may be worth considering. bundelphobia.

[fox1t]

Ok, I think that the best way is to add always bundlephobia link, when suggesting libs. Can you please modify your comments?

[lancerutkin]

A non-socket.io WebSocket option for the chat is ws.
bundlephobia

[jackcmeyer]

@fox1t I've updated my comments with bundlephobia links.

[fox1t]

@jackcmeyer and @lancerutkin check the repo now. We decided to use tsdx and it is one of the best devexperience I've ever seen!

[jackcmeyer]

@fox1t does it make sense to break out each one of these components into an issue with specific requirements so the community can start tackling them?