UHF-7791: Add react search and typescript support

[Jussiles]

UHF-7791

• Idea is to have all React searches in HDBT because those are frontend and are using styles from HDBT. By having all React apps in one place it is possible to share common code between apps and use same Eslint and Typescript rules.

What was done

• Add React search support. First search added is Event search.
• Add common folder for React with unified card components.
• Add refine search button at the bottom of the listing
• Add Typescript support. Only used with react at the moment.
• Eslint extend airbnb instead airbnb-base to enable React and typescript linting. Override linting rules for Typescript.
• Stop using Create react app (CRA). Instead use HDBT webpack config.
• Update readme.

How to install

• Make sure your instance is up and running on latest dev branch.
  • git pull origin dev
  • make fresh
• Update the HDBT theme
  • composer require drupal/hdbt:dev-UHF-7791-tsconfig
• Update the Helfi Platform config
  • composer require drupal/helfi_platform_config:dev-UHF-7791-drupal-react-search-module
• Run make shell
• Run drush updb && drush cr && drush locale-check && drush locale-update && drush cr

How to test

• Add events paragraph to a page with all filters.
• Check that event search loads, works and looks as it should.
• Check that unified card style works and looks as it should. See abstract links from ticket: https://helsinkisolutionoffice.atlassian.net/browse/UHF-7791
• Make changes to React files and js files. Check that eslinting and typescript are working. Check that npm run dev and npm run build are working.
• Check that Linting rules are ok.
• Check that README changes are ok.
• Check that code follows our standards.
• Check also Platform config PR that is related to this PR: https://github.com/City-of-Helsinki/drupal-helfi-platform-config/pull/420/files

Test paragraph functionality:

• Location filter works
• Daterange filter works
• Checkbox filters work
• Pagination works

Designers review

• This PR does not need designers review
• This PR has been visually reviewed by a designer (Name of the designer)

Other PRs

• Link to platform config PR

[Arkkimaagi]

Great job, and stuff seems to be working nicely. I did spot some nitpick stuff, but those are minor things..

Problem with the react dropdown icon not having an empty alt-attribute

Problem also with paging

[Arkkimaagi]

I think we should get rid of the min-width from table cells alltogether, I do not quite understand why we have it at all. Maybe add an comment that points to UHF-3044 and reference there to remember to remove this line when it's done.

[Arkkimaagi]

Btw, why is this set twice?

[Jussiles]

Seems it's not needed so I'll remove it. Maybe HDS has made some updates since this was added. It's not my code so I don't know more.

[Arkkimaagi]

Could you please link the ticket here both in ticket and in code so that we remember to fix it?

[Jussiles]

I removed the min-width from here because seems it's not needed but I can add comment about the ticket if you want to check this still when working with the UHF-3044 ticket.

[Jussiles]

seems I forgot to push code yesterday evening but as said min-width is now removed but added also comment about checking it with 3044.

[Arkkimaagi]

One last thing... 😢

[Arkkimaagi]

Good job, huge set of code you've managed to get working! 🚀 Approved!