SPIKE: Research Alpaca and React compatibility

[alishaevn]

initial ticket: https://gitlab.com/notch8/webstore/-/issues/5

Summary

Alpaca is currently used on the dynamic forms. React and Alpaca did not work well together. Steven wrote a translation library that translate alpaca to a React-usable schema, but we probably do not want to continue with the translation layer.

• [ ] Has alpaca been updated to work with react now?
• [ ] Is there another react solution we should consider to replace alpaca on dynamic forms.

[alishaevn]

potential solutions

• https://stackoverflow.com/questions/64511730/importing-alpaca-into-react-js
• https://stackoverflow.com/questions/46987608/can-alpaca-js-be-used-in-reactjs

[alishaevn]

• alpaca repo: https://github.com/gitana/alpaca
• alpaca documentation: http://www.alpacajs.org/documentation.html

[alishaevn]

"Latest version: 1.5.27 released on 5/14/2019"

it still doesn't look like alpaca is going to work with react. I created a sandbox and trying to import the alpaca package throws an error asking for jquery.

https://codesandbox.io/s/stoic-sun-3fw4l7?file=/src/App.js

[alishaevn]

alternate option:

• https://github.com/react-hook-form/react-hook-form
  • 30K+ stars
  • latest release was 5 days ago
  • great documentation and contributor support
  • nearly 2 million [weekly downloads](https://www.npmjs.com/package/react-hook-form

[alishaevn]

created another sandbox to test this in. seems pretty straightforward, with lots of options.

https://codesandbox.io/s/fervent-kirch-0r0wq5?file=/src/App.js

[alishaevn]

don't want to have to rewrite the translation layer.

instead use: https://github.com/rjsf-team/react-jsonschema-form

this was done in the rx app years ago, but it's since been ripped out. the code can be found here though.

[alishaevn]

discussion

chris isn't sure if there's a 1:1 path between alpaca and json schema form (jsf)

• this may introduce debugging challenges as sherman makes some changes

• will we only be able to use the pieces that are common between alpaca and jsf?

• couldn't edit things created with a react schema form on the marketplace

• the only form used on the webstore is the request intake form; built custom for each supplier

  • may have to rebuild some of what's in the base form, but not everything
  • how will this work when we bring in the compliance forms?

• react schema form is a superset of alpaca

  • there are things you can describe in rsf that you can't in alpaca though

result

• long term: sti dynamic form
• use the rsf repo for this work along with the dynamic form serializer in the v2 api

resources

• https://github.com/networknt/react-schema-form#readme
• https://github.com/assaydepot/scientist_api_v2/blob/main/lib/scientist_api_v2/app/serializers/scientist_api_v2/dynamic_form_serializer.rb

[alishaevn]

• https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-widgets-fields/
• https://rjsf-team.github.io/react-jsonschema-form/