Master react (ionic-team#18998)

* chore(): bump to beta 8

* fix(): IonFabButton href fix

* fix(react): support components with href attributes

* fix(): Prep work to break router out

* fix(): breaking react-router and react-core into own packages

* chore(): moving view stuff out of react-core

* chore(): dev build 8-1

* chore(): update to react beta 8

* chore(): fixes to deps

* fix(): removing IonAnchor in favor of IonRouterLink

* chore(): beta 9 release

* refactor(react): treeshake, minify, api

* wip

* fix(): react dev builds

* fix(): fixes to get app builds working again

* fix(): removing tgz file

* feat(): adding platform helper methods

* fix(): don't map attributes to props

* chore(): add test app

* feat(): copy css folder from core

* chore(): move rollup node resolve to devDependencies

* fix(): expose setupConfig()

* perf(): improve treeshaking

* fix(): removing crypto from generateUniqueId

* fix(): adding missing rollup dp

* fix(): test cleanup and fixes to make tests pass

* chore(): moving react to packages folder

* fix(): fixing react build due to move to packages

* feat(): adding missing IonInfiniteScrollContent component

* chore(): add automated testing using cypress

* fix(): adding option onDidDismiss to controller components

* 0.0.10 react

* wip

* fix(): removing deprecated React calls

* fix(): exporting setupConfig from core

* chore(): bump to 4.8.0-rc.0

* chore(): updating test-app deps and fixing test

* chore(): updates to react readme

.gitignore

@@ -57,6 +57,7 @@ prerender-static.html
 
 # stencil
 angular/css/
+packages/react/css/
 core/css/
 core/hydrate/
 core/loader/

core/src/components/action-sheet/readme.md

@@ -128,7 +128,7 @@ async function presentActionSheet() {
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 

core/src/components/action-sheet/usage/react.md

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 

core/src/components/alert/readme.md

@@ -526,7 +526,7 @@ async function presentAlertCheckbox() {
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);

core/src/components/alert/usage/react.md

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);

core/src/components/avatar/readme.md

@@ -39,7 +39,7 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 import React from 'react'
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const AvatarExample: React.FunctionComponent = () => (
+export const AvatarExample: React.FC = () => (
   <IonContent>
     <IonAvatar>
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

core/src/components/avatar/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react'
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const AvatarExample: React.FunctionComponent = () => (
+export const AvatarExample: React.FC = () => (
   <IonContent>
     <IonAvatar>
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

core/src/components/back-button/readme.md

@@ -121,7 +121,7 @@ To change what is displayed in the back button, use the `text` and `icon` proper
 import React from 'react';
 import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-export const BackButtonExample: React.FunctionComponent = () => (
+export const BackButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>

core/src/components/back-button/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-export const BackButtonExample: React.FunctionComponent = () => (
+export const BackButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>

core/src/components/backdrop/readme.md

@@ -80,7 +80,7 @@ backdrop.stopPropagation = false;
 import React from 'react';
 import { IonBackdrop, IonContent } from '@ionic/react';
 
-export const BackdropExample: React.FunctionComponent = () => (
+export const BackdropExample: React.FC = () => (
   <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />

core/src/components/backdrop/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBackdrop, IonContent } from '@ionic/react';
 
-export const BackdropExample: React.FunctionComponent = () => (
+export const BackdropExample: React.FC = () => (
   <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />

core/src/components/badge/readme.md

@@ -40,7 +40,7 @@ Badges are inline block elements that usually appear near another element. Typic
 import React from 'react';
 import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const BadgeExample: React.FunctionComponent = () => (
+export const BadgeExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonBadge>99</IonBadge>

core/src/components/badge/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const BadgeExample: React.FunctionComponent = () => (
+export const BadgeExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonBadge>99</IonBadge>

core/src/components/button/readme.md

@@ -98,7 +98,7 @@ import React from 'react';
 
 import { IonButton, IonIcon, IonContent } from '@ionic/react';
 
-export const ButtonExample: React.FunctionComponent = () => (
+export const ButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonButton>Default</IonButton>

core/src/components/button/usage/react.md

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { IonButton, IonIcon, IonContent } from '@ionic/react';
 
-export const ButtonExample: React.FunctionComponent = () => (
+export const ButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonButton>Default</IonButton>

core/src/components/buttons/readme.md

@@ -118,7 +118,7 @@ import {
   IonContent
 } from '@ionic/react';
 
-export const ButtonsExample: React.FunctionComponent = () => (
+export const ButtonsExample: React.FC = () => (
   <IonContent>
     <IonToolbar>
       <IonButtons slot="start">

core/src/components/buttons/usage/react.md

@@ -11,7 +11,7 @@ import {
   IonContent
 } from '@ionic/react';
 
-export const ButtonsExample: React.FunctionComponent = () => (
+export const ButtonsExample: React.FC = () => (
   <IonContent>
     <IonToolbar>
       <IonButtons slot="start">

core/src/components/card/readme.md

@@ -69,7 +69,7 @@ sub-components to reflect this. Please see `ion-card-content`,
 import React from 'react';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
 
-export const CardExample: React.FunctionComponent = () => (
+export const CardExample: React.FC = () => (
   <IonContent>
     <IonCard>
       <IonCardHeader>

core/src/components/card/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
 
-export const CardExample: React.FunctionComponent = () => (
+export const CardExample: React.FC = () => (
   <IonContent>
     <IonCard>
       <IonCardHeader>

core/src/components/checkbox/readme.md

@@ -107,7 +107,7 @@ const form = [
   { val: 'Mushroom', isChecked: false }
 ];
 
-export const CheckboxExample: React.FunctionComponent = () => (
+export const CheckboxExample: React.FC = () => (
   <IonContent>
     {/*-- Default Checkbox --*/}
     <IonCheckbox />

core/src/components/checkbox/usage/react.md

@@ -8,7 +8,7 @@ const form = [
   { val: 'Mushroom', isChecked: false }
 ];
 
-export const CheckboxExample: React.FunctionComponent = () => (
+export const CheckboxExample: React.FC = () => (
   <IonContent>
     {/*-- Default Checkbox --*/}
     <IonCheckbox />

core/src/components/chip/readme.md

@@ -59,7 +59,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 import React from 'react';
 import { IonChip, IonLabel, IonIcon, IonAvatar, IonContent } from '@ionic/react';
 
-export const ChipExample: React.FunctionComponent = () => (
+export const ChipExample: React.FC = () => (
   <IonContent>
     <IonChip>
       <IonLabel>Default</IonLabel>

core/src/components/chip/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonChip, IonLabel, IonIcon, IonAvatar, IonContent } from '@ionic/react';
 
-export const ChipExample: React.FunctionComponent = () => (
+export const ChipExample: React.FC = () => (
   <IonContent>
     <IonChip>
       <IonLabel>Default</IonLabel>

core/src/components/content/readme.md

@@ -44,7 +44,7 @@ content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 import React from 'react';
 import { IonContent } from '@ionic/react';
 
-const ContentExample: React.FunctionComponent = () => (
+const ContentExample: React.FC = () => (
   <IonContent
     scrollEvents={true}
     onIonScrollStart={() => {}}

core/src/components/content/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent } from '@ionic/react';
 
-const ContentExample: React.FunctionComponent = () => (
+const ContentExample: React.FC = () => (
   <IonContent
     scrollEvents={true}
     onIonScrollStart={() => {}}

core/src/components/datetime/readme.md

@@ -416,7 +416,7 @@ const customDayShortNames = [
   'l\u00f8r'
 ];
 
-export const DateTimeExample: React.FunctionComponent = () => (
+export const DateTimeExample: React.FC = () => (
   <IonContent>
     <IonItem>
       <IonLabel>MMMM</IonLabel>

core/src/components/datetime/usage/react.md

@@ -14,7 +14,7 @@ const customDayShortNames = [
   'l\u00f8r'
 ];
 
-export const DateTimeExample: React.FunctionComponent = () => (
+export const DateTimeExample: React.FC = () => (
   <IonContent>
     <IonItem>
       <IonLabel>MMMM</IonLabel>

core/src/components/fab-button/readme.md

@@ -42,7 +42,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 import React from 'react';
 import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 
-export const FabButtonExample: React.FunctionComponent = () => (
+export const FabButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
     <IonFab>

core/src/components/fab-button/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 
-export const FabButtonExample: React.FunctionComponent = () => (
+export const FabButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
     <IonFab>

core/src/components/fab-list/readme.md

@@ -33,7 +33,7 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
 import React from 'react';
 import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
 
-export const FabListExample: React.FunctionComponent = () => (
+export const FabListExample: React.FC = () => (
   <IonContent>
     <IonFab vertical="bottom" horizontal="end">
       <IonFabButton>

core/src/components/fab-list/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
 
-export const FabListExample: React.FunctionComponent = () => (
+export const FabListExample: React.FC = () => (
   <IonContent>
     <IonFab vertical="bottom" horizontal="end">
       <IonFabButton>

core/src/components/fab/readme.md

@@ -98,7 +98,7 @@ Fabs are container elements that contain one or more fab buttons. They should be
 import React from 'react';
 import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
 
-export const FabExample: React.FunctionComponent = () => (
+export const FabExample: React.FC = () => (
   <IonContent>
     {/*-- fab placed to the top end --*/}
     <IonFab vertical="top" horizontal="end" slot="fixed">

core/src/components/fab/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
 
-export const FabExample: React.FunctionComponent = () => (
+export const FabExample: React.FC = () => (
   <IonContent>
     {/*-- fab placed to the top end --*/}
     <IonFab vertical="top" horizontal="end" slot="fixed">

core/src/components/footer/readme.md

@@ -27,7 +27,7 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c
 import React from 'react';
 import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
 
-export const FooterExample: React.FunctionComponent = () => (
+export const FooterExample: React.FC = () => (
   <>
     <IonContent />
 

core/src/components/footer/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
 
-export const FooterExample: React.FunctionComponent = () => (
+export const FooterExample: React.FC = () => (
   <>
     <IonContent />
 

core/src/components/grid/readme.md

@@ -201,7 +201,7 @@ See [Grid Layout](/docs/layout/grid) for more information.
 import React from 'react';
 import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
 
-export const GridExample: React.FunctionComponent = () => (
+export const GridExample: React.FC = () => (
   <IonContent>
     <IonGrid>
       <IonRow>

core/src/components/grid/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
 
-export const GridExample: React.FunctionComponent = () => (
+export const GridExample: React.FC = () => (
   <IonContent>
     <IonGrid>
       <IonRow>

core/src/components/header/readme.md

@@ -36,7 +36,7 @@ It's important to note that ion-header needs to be the one of the three root ele
 import React from 'react';
 import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
 
-export const HeaderExample: React.FunctionComponent = () => (
+export const HeaderExample: React.FC = () => (
   <>
     <IonHeader>
       <IonToolbar>

core/src/components/header/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
 
-export const HeaderExample: React.FunctionComponent = () => (
+export const HeaderExample: React.FC = () => (
   <>
     <IonHeader>
       <IonToolbar>

core/src/components/icon/usage/react.md

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { IonIcon } from '@ionic/react';
 
-const Example: React.FunctionComponent<{}> = () => (
+const Example: React.FC<{}> = () => (
   <>
     {/*-- automatically uses the correct "star" icon depending on the mode --*/}
     <IonIcon name="star" />

core/src/components/img/readme.md

@@ -34,7 +34,7 @@ type Item = {
 };
 const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
 
-export const ImgExample: React.FunctionComponent = () => (
+export const ImgExample: React.FC = () => (
   <IonContent>
     <IonList>
       {items.map((image, i) => (

core/src/components/img/usage/react.md

@@ -8,7 +8,7 @@ type Item = {
 };
 const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
 
-export const ImgExample: React.FunctionComponent = () => (
+export const ImgExample: React.FC = () => (
   <IonContent>
     <IonList>
       {items.map((image, i) => (

core/src/components/input/readme.md

@@ -110,7 +110,7 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 import React from 'react';
 import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const InputExample: React.FunctionComponent = () => (
+export const InputExample: React.FC = () => (
   <IonContent>
     {/*-- Default Input --*/}
     <IonInput></IonInput>

core/src/components/input/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const InputExample: React.FunctionComponent = () => (
+export const InputExample: React.FC = () => (
   <IonContent>
     {/*-- Default Input --*/}
     <IonInput></IonInput>