feat: upgrade conference app to Ionic 7

[sean-perkins]

This PR updates the React Conference app to the "latest", including Ionic Framework v7, React v18, Vite, Swiper 9 (using Swiper Element) and fixes bugs related to the app.

All changes:

• Added prettier to format the codebase
• Migrated from react-scripts@3 to vite
  • Mapped npm run start to npm run dev to reduce churn
• Migrated from react@17 and react-dom@17 to react@18 and react-dom@18
  • Updated type usage to use PropsWithChildren where appropriate
• Migrated from swiper@7 to using CSS scroll snapping
• Updated outdated links to Github repository
• Updated outdated links to the getting started docs
• Fixed a bug where checkbox inside of filter would not toggle correctly
• Migrated form controls to simplified syntax with label and label-placement
• Migrated "error" slot content into actual error slot of form control
• Removed "dead code" (commented out code, unused imports, etc.)
• Updated to Capacitor v4

Resolves: #72, #95, #50

How did I test this

• Schedule tab loads with a list of events
  • Both "All" and "Favorites" works (if you favorite an event it shows up in the segment)
• Speakers tab loads with a list of speakers
  • Images of speaker's avatar loads correctly
  • Tapping a speaker card opens the detail view for the speaker
    • Social links open to correct location
  • Map tab loads (in browser requires an API key)
  • About tab loads
    • Location image renders correctly in the header
    • Form controls do not produce warnings
  • Login page loads without warnings
  • Signup page loads without warnings
  • Dark mode (in the menu) updates the appearance of the application
  • Tutorial renders correctly
    • User can swipe to the different slides
    • User can click "skip" to navigate to the main tabs view
    • User can click "continue" on the last slide to navigate to the main tabs view
• Tested on iPhone 14 Simulator (with Capacitor)
• Tested on Pixel 5 (API 32) Simulator (with Capacitor)

Other information

This PR includes the work done in #104.

[liamdebeasi]

Migrated from swiper@7 to swiper@9, includes moving to the Swiper Element web component

The Slides migration guide (https://ionicframework.com/docs/react/slides) recommends sticking with the Swiper React component for now. We might want to hold off on Swiper Element in React until nolimits4web/swiper#6466 is merged.

[sean-perkins]

Updated to use CSS scrolling snapping. Following the style/implementation that is being implemented for the Angular conference app: ionic-team/ionic-conference-app#1790

[brandyscarney]

Differences from Angular

I noticed that the react conference app behaves differently than the angular version in certain cases. Maybe we can make a tech debt ticket for these if we don't want to update them now?

ionic-conference-app -> shows toast when favoriting
ionic-react-conference-app -> shows alert when favoriting

The alert text when you attempt to remove a favorite or add a favorite that already exists is also different:

It also does not close the open sliding item when switching between all & favorites.

Login Bugs

When logging in (Login page) after I enter name & password and click "Login" it tells me "Password is required" until I press login again. I think this is related to the ionChange Liam mentioned. Support & Signup do the same thing.

The app is continuously freezing when I click on Logout:

I have to kill the tab and open a new one, refresh doesn't work.

[sean-perkins]

Ok - I addressed all of the requested changes and differences in behavior we've acknowledge so far with the React and Angular conference apps (there is likely more).

[brandyscarney]

All the fixes look good! Just found two missed ionChange events on the signup page.

[sean-perkins]

Thank you for catching that!