Implement widgets in React Renderer

[jivanova]

Overview

• Business Case & Stages

DevTools team will contribute to the React Renderer as domain experts in front-end development and setting the basis on a cross-team collaboration with Sitefinity. The initiative is a great opportunity to exchange knowledge between DevTools and Sitefinity, and as a next step we will evaluate KendoReact integration within PageBuilders.

Organization

• Define timeline of the business delivery
  • Start Date - 2nd October by Plamen Zdravkov
  • End Date (hard stop) - end October
• Define source control location
  • GitHub for react renderer
  • GIthub Repo to be consumed by Sitefinity Azure DevOps to validate successful integration
• Define health metrics (minimum to assure release)
  • Use Github Actions for CI to run unit tests for the widgets and to assure compilation
• [Zdravkov & Gebov] Walkthrough and understanding of the components scope
• [Zdravkov] Implement widgets and testing from Technical Scope below related to relase
• [Gebov] Setup CodeSandbox for testing purposes of both units
• [Gebov] Validate React Renderer withing the Sitefinity Renderers and consult with Zdravkov
• [Zdravkov, Gebov, Topuzov, Dimitrov] Verify unit test coverage
  • unit testing of the components
  • unit testing with sitefinity services https://github.com/Sitefinity/nextjs-renderer/tree/main/src/framework/sdk

Next steps

• [Dimitar Topuzov & Nikolay Dimitrov] Define advance health metrics
  • Usage of cypress for e2e
  • Location and e2e test coverage of React Renderer
• Define contribution guide for Support Engineers
  • Back-end issues and testing flows within Sitefinity. Onboard TSEs with how to isolate an issue within the front-end.
  • Any front-end issues to be logged in this repository and will be prioritized by DevTools.

Technical Scope

Widgets

P1 Widgets

• Classification widget
• Image widget
• Navigation widget
• Breadcrumb widget
• Search box widget
• Search results widget
• Search facets widget
• Language Selector
• DocumentsList
• Login form widget
• Change password widget
• Reset password widget
• Registration widget
• Call to action widget
• Form widget
  • Textbox
  • Paragraph
  • Submit button
  • Multiple choice
  • Checkboxes
  • File upload
  • Content block
  • CAPTCHA – third party (Google Captcha)
  • Dropdown
  • Dynamic list

P2

• NativeChat widget

P3

• Content recommendation widget

Testing

• Testing-library infrastrucure
• Unit tests