update react hook form example,

03_source/mobile/src/pages/DemoPullstateTutorial/components/Person.tsx

@@ -0,0 +1,24 @@
+import { IonAvatar, IonButton, IonItem, IonLabel } from '@ionic/react';
+import { toggleFollowing } from '../store/PeopleStore';
+
+export const Person = ({ person }): React.JSX.Element => {
+  return (
+    <IonItem lines="full">
+      <IonAvatar>
+        <img src={person.avatar} alt="avatar" />
+      </IonAvatar>
+      <IonLabel className="ion-padding-start">
+        <h1>{person.name}</h1>
+        <p>{person.title}</p>
+      </IonLabel>
+
+      <IonButton
+        color="primary"
+        fill={person.following ? 'solid' : 'outline'}
+        onClick={() => toggleFollowing(person.id)}
+      >
+        {person.following ? 'Following' : 'Follow'}
+      </IonButton>
+    </IonItem>
+  );
+};

03_source/mobile/src/pages/DemoPullstateTutorial/data/index.js

@@ -0,0 +1,45 @@
+export const people = [
+
+	{
+		id: 1,
+		name: "Alan Montgomery",
+		title: "Mobile Team Lead",
+		avatar: "https://pbs.twimg.com/profile_images/1420489989163524096/GwHdYSky_400x400.jpg",
+		following: false
+	},
+	{
+		id: 2,
+		name: "Max Lynch",
+		title: "CEO | Co Founder",
+		avatar: "https://pbs.twimg.com/profile_images/1318970727173885953/bln98FNj_400x400.jpg",
+		following: false
+	},
+	{
+		id: 3,
+		name: "Mike Hartington",
+		title: "Senior Dev Rel",
+		avatar: "https://pbs.twimg.com/profile_images/1084993841898446849/DJ8XtR6L_400x400.jpg",
+		following: false
+	},
+	{
+		id: 4,
+		name: "Matt Netkow",
+		title: "Head of Product Marketing",
+		avatar: "https://pbs.twimg.com/profile_images/1323383930150621187/GKc0nVzi_400x400.jpg",
+		following: false
+	},
+	{
+		id: 5,
+		name: "Ben Sperry",
+		title: "CDO | Co Founder",
+		avatar: "https://pbs.twimg.com/profile_images/1407747959345795072/McJb-RvC_400x400.jpg",
+		following: false
+	},
+	{
+		id: 6,
+		name: "Liam DeBeasi",
+		title: "Software Engineer",
+		avatar: "https://pbs.twimg.com/profile_images/1105953692669366273/ZNK4lRAJ_400x400.jpg",
+		following: false
+	}
+];

03_source/mobile/src/pages/DemoPullstateTutorial/index.tsx

@@ -1,16 +1,18 @@
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { list, people } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
 import './style.scss';
+import Tab1 from './pages/Tab1';
+import Tab2 from './pages/Tab2';
 
 function DemoPullstateTutorial() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-pullstate-tutorial">
       <IonRouterOutlet>
         <Route exact path="/demo-pullstate-tutorial/tab1">
           <Tab1 />
@@ -25,12 +27,12 @@ function DemoPullstateTutorial() {
       {/*  */}
       <IonTabBar slot="bottom">
         <IonTabButton tab="tab1" href="/demo-pullstate-tutorial/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
+          <IonIcon icon={list} />
+          <IonLabel>List</IonLabel>
         </IonTabButton>
         <IonTabButton tab="tab2" href="/demo-pullstate-tutorial/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
+          <IonIcon icon={people} />
+          <IonLabel>Following</IonLabel>
         </IonTabButton>
       </IonTabBar>
     </IonTabs>

03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab1.tsx

@@ -0,0 +1,63 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { PeopleStore } from '../store';
+import { Person } from '../components/Person';
+import './Tab1.css';
+import { useStoreState } from 'pullstate';
+import { getPeople } from '../store/Selectors';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Tab1 = (): React.JSX.Element => {
+  const people = useStoreState(PeopleStore, getPeople);
+
+  console.log(people);
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>List of People</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">List of People</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        {people.map((person, index) => {
+          return <Person person={person} key={index} />;
+        })}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;

03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab2.tsx

@@ -0,0 +1,34 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { useStoreState } from 'pullstate';
+import { Person } from '../components/Person';
+import { PeopleStore } from '../store';
+import { getFollowing } from '../store/Selectors';
+import './Tab2.css';
+import React from 'react';
+
+const Tab2 = (): React.JSX.Element => {
+  const people = useStoreState(PeopleStore, getFollowing);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Following</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Following</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        {people.map((person, index) => {
+          return <Person person={person} key={index} />;
+        })}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;

03_source/mobile/src/pages/DemoPullstateTutorial/store/PeopleStore.js

@@ -0,0 +1,19 @@
+import { Store } from "pullstate";
+
+import { people } from "../data";
+
+const PeopleStore = new Store({
+
+	people: people
+});
+
+export const toggleFollowing = personId => {
+
+	PeopleStore.update(s => {
+
+		const personIndex = s.people.findIndex(person => person.id === personId);
+		s.people[personIndex].following = !s.people[personIndex].following;
+	});
+}
+
+export default PeopleStore;

03_source/mobile/src/pages/DemoPullstateTutorial/store/Selectors.js

@@ -0,0 +1,7 @@
+import { createSelector } from "reselect";
+
+const getState = state => state;
+
+//	Gets
+export const getPeople = createSelector(getState, state => state.people);
+export const getFollowing = createSelector(getState, state => state.people.filter(person => person.following));

03_source/mobile/src/pages/DemoPullstateTutorial/store/index.js

@@ -0,0 +1 @@
+export { default as PeopleStore } from "./PeopleStore";

03_source/mobile/src/pages/DemoPullstateTutorial/theme/variables.scss

@@ -0,0 +1,79 @@
+.demo-pullstate-tutorial {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+}

03_source/mobile/src/pages/DemoReactAddToCart/TestComponents/CurrentWeather/WeatherProperty.tsx

@@ -8,7 +8,7 @@ export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWe
   const properties = {
     wind: {
       isIcon: false,
-      icon: '/assets/WeatherDemo/wind.png',
+      icon: '/assets/DemoReactAddToCart/WeatherDemo/wind.png',
       alt: 'wind',
       label: 'Wind',
       value: `${currentWeather.current.wind_mph}mph`,

03_source/mobile/src/pages/DemoReactAddToCart/TestComponents/SkeletonDashboard/index.tsx

@@ -51,7 +51,12 @@ export const SkeletonDashboard = () => (
             <IonCol size="6">
               <IonRow className="ion-justify-content-center ion-align-items-center">
                 <IonCol size="3">
-                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
+                  <img
+                    alt="wind"
+                    src="/assets/DemoReactAddToCart/WeatherDemo/wind.png"
+                    height="32"
+                    width="32"
+                  />
                 </IonCol>
 
                 <IonCol size="9">

03_source/mobile/src/pages/DemoReactAddToCart/components/AddToCartButton.module.css

@@ -0,0 +1,14 @@
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.button {
+  --padding-top: 1.75rem;
+  --padding-bottom: 1.75rem;
+  --padding-start: 1.75rem;
+  --padding-end: 1.75rem;
+}

03_source/mobile/src/pages/DemoReactAddToCart/components/AddToCartButton.tsx

@@ -0,0 +1,60 @@
+import { CreateAnimation, IonButton, IonIcon } from '@ionic/react';
+import React, { useRef, useState } from 'react';
+
+import styles from './AddToCartButton.module.css';
+import { cartOutline } from 'ionicons/icons';
+
+const AddToCartButton = ({
+  icon = true,
+  color = 'primary',
+  customOnClick = null,
+}): React.JSX.Element => {
+  const iconRef = useRef(null);
+  const [hidden, setHidden] = useState(true);
+
+  const floatStyle = {
+    display: hidden ? 'none' : '',
+    position: 'absolute',
+  };
+
+  const floatGrowAnimation = {
+    property: 'transform',
+    fromValue: 'translateY(0) scale(1)',
+    toValue: 'translateY(-55px) scale(1.2)',
+  };
+
+  const colorAnimation = {
+    property: 'color',
+    fromValue: 'white',
+    toValue: `var(--ion-color-${color}`,
+  };
+
+  const mainAnimation = {
+    duration: 700,
+    iterations: '1',
+    fromTo: [floatGrowAnimation, colorAnimation],
+    easing: 'cubic-bezier(0.25, 0.7, 0.25, 0.7)',
+  };
+
+  const handleClick = async () => {
+    setHidden(false);
+    await iconRef.current.animation.play();
+    setHidden(true);
+    customOnClick && customOnClick();
+  };
+
+  return (
+    <div className={styles.buttonContainer}>
+      <IonButton color={color} className={styles.button} onClick={handleClick}>
+        {!icon && 'Add to cart'}
+        {icon && <IonIcon icon={cartOutline} />}
+      </IonButton>
+
+      <CreateAnimation ref={iconRef} {...mainAnimation}>
+        <IonIcon icon={cartOutline} size="large" style={floatStyle} />
+      </CreateAnimation>
+    </div>
+  );
+};
+
+export default AddToCartButton;

03_source/mobile/src/pages/DemoReactAddToCart/components/Product.module.css

@@ -0,0 +1,19 @@
+.priceContainer {
+
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.price {
+
+    margin-top: 0.7rem;
+    border: 1px solid var(--ion-color-primary);
+    color: var(--ion-color-primary);
+    width: fit-content;
+    padding: 1rem;
+    border-radius: 10px;
+    font-weight: 600;
+}

03_source/mobile/src/pages/DemoReactAddToCart/components/Product.tsx

@@ -0,0 +1,61 @@
+import {
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonGrid,
+  IonRow,
+  IonText,
+} from '@ionic/react';
+import AddToCartButton from './AddToCartButton';
+
+import styles from './Product.module.css';
+
+const Product = ({ product }): React.JSX.Element => {
+  const handleAdd = (product) => {
+    console.log(`Product added: ${product.name}`);
+    console.log({ product });
+
+    //	Do something
+    //	Update Main Cart
+    //	Global State Stuff
+    //	API Call
+    //	etc etc
+  };
+
+  return (
+    <IonCard>
+      <IonCardHeader>
+        <IonCardTitle>{product.name}</IonCardTitle>
+        <IonCardSubtitle>{product.description}</IonCardSubtitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <IonGrid>
+          <IonRow className="ion-margin-bottom">
+            <IonCol size="5">
+              <img src={product.image} alt="product" />
+            </IonCol>
+
+            <IonCol size="7">
+              <IonText>
+                <IonCardSubtitle>Product Features</IonCardSubtitle>
+                {product.features.map((feature, index) => {
+                  return <p key={index}>{feature}</p>;
+                })}
+              </IonText>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className={styles.priceContainer}>
+            <div className={styles.price}>{product.price}</div>
+            <AddToCartButton icon={true} customOnClick={() => handleAdd(product)} />
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  );
+};
+
+export default Product;

03_source/mobile/src/pages/DemoReactAddToCart/index.tsx

@@ -1,38 +1,29 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
+import './theme/variables.scss';
+import Home from './pages/Home';
 
 function DemoReactAddToCart() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-react-add-to-cart">
       <IonRouterOutlet>
+        {/*
         <Route exact path="/demo-react-add-to-cart/tab1">
           <Tab1 />
         </Route>
         <Route exact path="/demo-react-add-to-cart/tab2">
           <Tab2 />
         </Route>
+        */}
 
-        <Redirect exact path="/demo-react-add-to-cart" to="/demo-react-add-to-cart/tab1" />
+        <Route exact path="/demo-react-add-to-cart/home">
+          <Home />
+        </Route>
+
+        <Redirect exact path="/demo-react-add-to-cart" to="/demo-react-add-to-cart/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-add-to-cart/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-react-add-to-cart/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoReactAddToCart/module.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

03_source/mobile/src/pages/DemoReactAddToCart/pages/Home.css

@@ -0,0 +1,19 @@
+.price-container {
+
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.price {
+
+    margin-top: 0.7rem;
+    border: 1px solid var(--ion-color-primary);
+    color: var(--ion-color-primary);
+    width: fit-content;
+    padding: 1rem;
+    border-radius: 10px;
+    font-weight: 600;
+}

03_source/mobile/src/pages/DemoReactAddToCart/pages/Home.tsx

@@ -0,0 +1,45 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import './Home.css';
+import Product from '../components/Product';
+import { products } from './products';
+import React from 'react';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home = (): React.JSX.Element => {
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Add To Cart Animation</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        {products.map((product) => {
+          return <Product key={product.id} product={product} />;
+        })}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoReactAddToCart/pages/products.ts

@@ -0,0 +1,44 @@
+export const products = [
+  {
+    id: 1,
+    name: 'Macbook Pro',
+    description: "13.3' (2020) - M1, 256 GB SSD, Space Grey",
+    price: '£1,199',
+    image: '/assets/DemoReactAddToCart/macbook.jpeg',
+    features: [
+      'macOS 11.0 Big Sur',
+      'Apple M1 chip',
+      'RAM: 8 GB / Storage: 256 GB SSD',
+      'Retina display',
+      'Battery life: Up to 20 hours',
+    ],
+  },
+  {
+    id: 2,
+    name: 'SONY A7',
+    description: 'SONY a7 III Mirrorless Camera - Black',
+    price: '£1,699',
+    image: '/assets/DemoReactAddToCart/camera.jpeg',
+    features: [
+      '24.2 megapixels',
+      'Full-frame 35 mm / 35.6 x 23.8 mm CMOS sensor',
+      'Built-in WiFi / Bluetooth / NFC',
+      "3' tiltable LCD touchscreen",
+      '10 fps in continuous shooting mode',
+    ],
+  },
+  {
+    id: 3,
+    name: 'HISENSE 55',
+    description: "55' Smart 4K Ultra HD HDR LED TV",
+    price: '£429',
+    image: '/assets/DemoReactAddToCart/tv.jpeg',
+    features: [
+      'Picture quality: 1600 PCI',
+      'HDR: HDR10 / Hybrid Log-Gamma (HLG)',
+      'Catch-up TV & 4K streaming',
+      'Freeview HD with Freeview Play',
+      'HDMI 2.0 x 3',
+    ],
+  },
+];

03_source/mobile/src/pages/DemoReactAddToCart/style.scss

@@ -41,19 +41,19 @@
   }
 
   .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
+    background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/madison.jpg');
   }
 
   .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
+    background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/austin.jpg');
   }
 
   .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
+    background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/chicago.jpg');
   }
 
   .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
+    background-image: url('/assets/DemoReactAddToCart/WeatherDemo/img/about/seattle.jpg');
   }
 
   .about-info {

03_source/mobile/src/pages/DemoReactAddToCart/theme/variables.scss

@@ -0,0 +1,79 @@
+.demo-react-add-to-cart {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+}

03_source/mobile/src/pages/DemoReactCalculator/components/Button.module.scss

@@ -0,0 +1,20 @@
+.demo-react-calculator {
+  .button,
+  .specialButton {
+    margin: 0.2rem;
+    padding: 1.5rem;
+    margin: 0.2rem;
+    border-radius: 15px;
+    font-size: 1.5rem;
+  }
+
+  .button {
+    color: rgb(255, 255, 255);
+    background-color: rgb(58, 58, 58);
+  }
+
+  .specialButton {
+    color: rgb(255, 255, 255);
+    background-color: var(--blue-color);
+  }
+}

03_source/mobile/src/pages/DemoReactCalculator/components/Button.tsx

@@ -0,0 +1,17 @@
+import { IonCol } from '@ionic/react';
+import styles from './Button.module.scss';
+
+const Button = (props): React.JSX.Element => {
+  const { value, special, clickEvent } = props;
+
+  return (
+    <IonCol
+      className={`${special ? styles.specialButton : styles.button} animate__animated animate__faster`}
+      onClick={(e) => clickEvent(e, value)}
+    >
+      {value === '/' ? <>&divide;</> : value === '*' ? <>&times;</> : value}
+    </IonCol>
+  );
+};
+
+export default Button;

03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.module.scss

@@ -0,0 +1,4 @@
+.demo-react-calculator {
+  .buttonRow {
+  }
+}

03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.tsx

@@ -0,0 +1,9 @@
+import { IonRow } from '@ionic/react';
+import styles from './ButtonRow.module.scss';
+import React from 'react';
+
+const ButtonRow = (props): React.JSX.Element => {
+  return <IonRow className={styles.buttonRow}>{props.children}</IonRow>;
+};
+
+export default ButtonRow;

03_source/mobile/src/pages/DemoReactCalculator/index.tsx

@@ -1,38 +1,21 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+import './theme/variables.scss';
+import React from 'react';
+import Home from './pages/Home';
 
-import './style.scss';
-
-function DemoReactCalculator() {
+function DemoReactCalculator(): React.JSX.Element {
   return (
-    <IonTabs>
+    <IonTabs className="demo-react-calculator">
       <IonRouterOutlet>
-        <Route exact path="/demo-react-calculator/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-react-calculator/tab2">
-          <Tab2 />
+        <Route exact path="/demo-react-calculator/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-react-calculator" to="/demo-react-calculator/tab1" />
+        <Redirect exact path="/demo-react-calculator" to="/demo-react-calculator/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-calculator/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-react-calculator/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoReactCalculator/module.d.ts

@@ -0,0 +1,8 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

03_source/mobile/src/pages/DemoReactCalculator/pages/Home.module.scss

@@ -0,0 +1,40 @@
+.calculatorContainer {
+  padding-bottom: 2.5rem;
+  background-color: white;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.sumContainer {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: flex-end;
+  padding-right: 2rem;
+  margin-top: 2rem;
+
+  background-color: rgba(99, 158, 226, 0.1);
+  padding: 2rem;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.sumContainer h1,
+.sumContainer h4,
+.sumContainer p {
+  margin: 0;
+  padding: 0;
+}
+
+.sumContainer h1 {
+  font-size: 4rem;
+}
+
+.sumContainer p {
+  font-size: 2rem;
+  color: rgb(163, 163, 163);
+}
+
+.sumContainer h4 {
+  color: rgb(197, 197, 197);
+}

03_source/mobile/src/pages/DemoReactCalculator/pages/Home.tsx

@@ -0,0 +1,127 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFooter,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import React, { useEffect, useState } from 'react';
+import Button from '../components/Button';
+import ButtonRow from '../components/ButtonRow';
+import styles from './Home.module.scss';
+
+import {
+  checkmarkOutline,
+  chevronBackOutline,
+  chevronDownCircleOutline,
+  closeOutline,
+  heart,
+  languageOutline,
+  menuOutline,
+} from 'ionicons/icons';
+
+import { buttons } from '../utils/Buttons';
+
+const Home = (): React.JSX.Element => {
+  const [showTitle, setShowTitle] = useState('_______');
+  const [sum, setSum] = useState('0');
+  const [sumHistory, setSumHistory] = useState('Ionic Calculator');
+
+  const handleClick = (e, operator) => {
+    const tempSumHistory = sumHistory.replace('Ionic Calculator', '');
+
+    if (operator === '=') {
+      calculate();
+    } else if (operator === 'C') {
+      reset();
+    } else if (operator === 'Del') {
+      backspace();
+    } else {
+      setSumHistory(tempSumHistory + operator);
+
+      e.target.classList.add('animate__headShake');
+
+      setTimeout(() => {
+        e.target.classList.remove('animate__headShake');
+      }, 500);
+    }
+  };
+
+  useEffect(() => {
+    calculate();
+  }, [sumHistory]);
+
+  const calculate = () => {
+    try {
+      // eslint-disable-next-line no-eval
+      setSum(eval(sumHistory).length > 5 ? eval(sumHistory).toFixed(4) : eval(sumHistory));
+      setShowTitle('Ionic Calculator');
+    } catch (e) {}
+  };
+
+  const reset = () => {
+    setSumHistory('Ionic Calculator');
+    setSum('0');
+    setShowTitle('_______');
+  };
+
+  const backspace = () => {
+    const tempSum = sumHistory.substr(0, sumHistory.length - 1);
+    setSumHistory(tempSum);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className={styles.sumContainer}>
+          {showTitle && <h4>{showTitle}</h4>}
+          <p>{sumHistory}</p>
+          <h1 className="animate__animated animate__headShake">
+            {sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+          </h1>
+        </div>
+      </IonContent>
+
+      <IonFooter className={styles.calculatorContainer}>
+        <IonGrid className="ion-text-center ion-justify-content-center">
+          {buttons.map((buttonRow, index) => {
+            return (
+              <ButtonRow key={index}>
+                {buttonRow.map((button) => {
+                  return (
+                    <Button
+                      key={button.value}
+                      value={button.value}
+                      special={button.special}
+                      clickEvent={handleClick}
+                    />
+                  );
+                })}
+              </ButtonRow>
+            );
+          })}
+        </IonGrid>
+      </IonFooter>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoReactCalculator/style.scss

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

03_source/mobile/src/pages/DemoReactCalculator/theme/variables.scss

@@ -0,0 +1,83 @@
+.demo-react-calculator {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+
+  :root {
+    --blue-color: rgb(99, 158, 226);
+  }
+}

03_source/mobile/src/pages/DemoReactCalculator/utils/Buttons.ts

@@ -0,0 +1,32 @@
+export const buttons = [
+  [
+    { value: 'C', special: true },
+    { value: '(', special: true },
+    { value: ')', special: true },
+    { value: '+', special: true },
+  ],
+  [
+    { value: '7', special: false },
+    { value: '8', special: false },
+    { value: '9', special: false },
+    { value: '-', special: true },
+  ],
+  [
+    { value: '4', special: false },
+    { value: '5', special: false },
+    { value: '6', special: false },
+    { value: '*', special: true },
+  ],
+  [
+    { value: '1', special: false },
+    { value: '2', special: false },
+    { value: '3', special: false },
+    { value: '/', special: true },
+  ],
+  [
+    { value: 'Del', special: true },
+    { value: '0', special: false },
+    { value: '.', special: false },
+    { value: '=', special: true },
+  ],
+];

03_source/mobile/src/pages/DemoReactDrawingCanvas/components/ExploreContainer.scss

@@ -0,0 +1,24 @@
+.container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.container a {
+  text-decoration: none;
+}

03_source/mobile/src/pages/DemoReactDrawingCanvas/components/ExploreContainer.tsx

@@ -0,0 +1,23 @@
+import './ExploreContainer.scss';
+
+interface ContainerProps {}
+
+const ExploreContainer: React.FC<ContainerProps> = () => {
+  return (
+    <div className="container">
+      <strong>Ready to create an app?</strong>
+      <p>
+        Start with Ionic{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://ionicframework.com/docs/components"
+        >
+          UI Components
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ExploreContainer;

03_source/mobile/src/pages/DemoReactDrawingCanvas/index.tsx

@@ -1,38 +1,19 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
+import Home from './pages/Home';
 
 function DemoReactDrawingCanvas() {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/demo-react-drawing-canvas/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-react-drawing-canvas/tab2">
-          <Tab2 />
+        <Route exact path="/demo-react-drawing-canvas/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-react-drawing-canvas" to="/demo-react-drawing-canvas/tab1" />
+        <Redirect exact path="/demo-react-drawing-canvas" to="/demo-react-drawing-canvas/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-drawing-canvas/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-react-drawing-canvas/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoReactDrawingCanvas/module.d.ts

@@ -0,0 +1,9 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

03_source/mobile/src/pages/DemoReactDrawingCanvas/pages/Home.module.scss

@@ -0,0 +1,17 @@
+.canvasOptions {
+  position: absolute;
+  z-index: 99999;
+  width: 100%;
+  background-color: white !important;
+  border-bottom: 1px solid rgb(230, 230, 230);
+}
+
+.fixed {
+  position: fixed;
+  background-color: white;
+  border-bottom: 1px solid rgb(204, 204, 204);
+}
+
+.picker {
+  width: 100% !important;
+}

03_source/mobile/src/pages/DemoReactDrawingCanvas/pages/Home.tsx

@@ -0,0 +1,114 @@
+import {
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  Platform,
+  IonButtons,
+  useIonRouter,
+} from '@ionic/react';
+import { arrowUndoOutline, brushOutline, chevronBackOutline, closeOutline } from 'ionicons/icons';
+import React, { useState } from 'react';
+import styles from './Home.module.scss';
+
+import CanvasDraw from 'react-canvas-draw';
+import { SwatchesPicker } from 'react-color';
+
+const Home = (): React.JSX.Element => {
+  var canvasRef = '';
+  const [brushColor, setBrushColor] = useState('#000000');
+  const [brushSize, setBrushSize] = useState(5);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
+  const handleColorChange = (colorValue) => {
+    setBrushColor(colorValue.hex);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Ionic Drawing Canvas</IonTitle>
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className={styles.canvasOptions}>
+          <IonGrid className={styles.fixed}>
+            <IonRow>
+              <IonCol size={showColorPicker ? '12' : '2'}>
+                <IonButton
+                  style={{ backgroundColor: brushColor }}
+                  color={brushColor}
+                  expand="block"
+                  onClick={() => setShowColorPicker(!showColorPicker)}
+                >
+                  <IonIcon icon={brushOutline} />
+                </IonButton>
+
+                {showColorPicker && (
+                  <SwatchesPicker onChange={handleColorChange} className={styles.picker} />
+                )}
+              </IonCol>
+
+              {!showColorPicker && (
+                <>
+                  <IonCol size="4">
+                    <IonItem lines="none">
+                      <IonLabel position="inset">Size</IonLabel>
+                      <IonInput
+                        type="number"
+                        value={brushSize}
+                        onIonChange={(e) => setBrushSize(parseInt(e.target.value))}
+                      />
+                    </IonItem>
+                  </IonCol>
+
+                  <IonCol size="3">
+                    <IonButton expand="full" color="primary" onClick={() => canvasRef.undo()}>
+                      <IonIcon icon={arrowUndoOutline} />
+                    </IonButton>
+                  </IonCol>
+
+                  <IonCol size="3">
+                    <IonButton expand="full" color="primary" onClick={() => canvasRef.clear()}>
+                      <IonIcon icon={closeOutline} />
+                    </IonButton>
+                  </IonCol>
+                </>
+              )}
+            </IonRow>
+          </IonGrid>
+        </div>
+        <CanvasDraw
+          brushRadius={brushSize}
+          lazyRadius={0}
+          canvasHeight={window.innerHeight}
+          canvasWidth={window.innerWidth}
+          brushColor={brushColor}
+          ref={(canvasDraw) => (canvasRef = canvasDraw)}
+        />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoReactDrawingCanvas/style.scss

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

03_source/mobile/src/pages/DemoReactDrawingCanvas/theme/variables.scss

@@ -0,0 +1,79 @@
+.demo-react-drawing-canvas {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+}

03_source/mobile/src/pages/DemoReactHookFormExample/index.tsx

@@ -1,30 +1,31 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
 import './style.scss';
+import Home from './pages/Home';
 
 function DemoReactHookFormExample() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-react-hook-form-example">
       <IonRouterOutlet>
-        <Route exact path="/demo-react-hook-form-example/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-react-hook-form-example/tab2">
-          <Tab2 />
+        <Route exact path="/demo-react-hook-form-example/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-react-hook-form-example" to="/demo-react-hook-form-example/tab1" />
+        <Redirect
+          exact
+          path="/demo-react-hook-form-example"
+          to="/demo-react-hook-form-example/home"
+        />
       </IonRouterOutlet>
 
-      {/*  */}
+      {/*
       <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-hook-form-example/tab1">
+        <IonTabButton tab="tab1" href="/demo-react-hook-form-example/home">
           <IonIcon icon={cloudOutline} />
           <IonLabel>Dashboard</IonLabel>
         </IonTabButton>
@@ -33,6 +34,7 @@ function DemoReactHookFormExample() {
           <IonLabel>Search</IonLabel>
         </IonTabButton>
       </IonTabBar>
+      */}
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoReactHookFormExample/module.d.ts

@@ -0,0 +1,9 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

03_source/mobile/src/pages/DemoReactHookFormExample/pages/Home.tsx

@@ -0,0 +1,126 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCardSubtitle,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import './Home.scss';
+import { useForm } from 'react-hook-form';
+
+import { alertCircleOutline, chevronBackOutline } from 'ionicons/icons';
+import React from 'react';
+
+const Home = (): React.JSX.Element => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+  });
+
+  const fields = [
+    {
+      label: 'Firstname',
+      required: true,
+      requiredOptions: {
+        maxLength: 10,
+      },
+      props: {
+        name: 'firstname',
+        type: 'text',
+        placeholder: 'Enter a username',
+      },
+    },
+
+    {
+      label: 'Age',
+      required: true,
+      requiredOptions: {
+        min: 18,
+        max: 99,
+      },
+      props: {
+        name: 'age',
+        type: 'number',
+        inputmode: 'numeric',
+        placeholder: 'Enter your age',
+      },
+    },
+  ];
+
+  console.log(errors);
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>React Hook Form</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">React Hook Form</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonCardSubtitle className="ion-text-center ion-margin">
+          An example using React Hook Form
+        </IonCardSubtitle>
+
+        <form onSubmit={handleSubmit(onSubmit)}>
+          {fields.map((field, index) => {
+            const { label, required, requiredOptions, props } = field;
+
+            return (
+              <IonItem key={`form_field_${index}`} lines="full">
+                <>
+                  <IonLabel position="fixed">{label}</IonLabel>
+                  <IonInput
+                    {...props}
+                    {...register(props.name, { required, ...requiredOptions })}
+                  />
+                </>
+                {required && errors[props.name] && (
+                  <IonIcon icon={alertCircleOutline} color="danger" />
+                )}
+              </IonItem>
+            );
+          })}
+
+          <IonButton type="submit" className="ion-margin-top" expand="full">
+            Submit
+          </IonButton>
+        </form>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoReactHookFormExample/theme/variables.scss

@@ -0,0 +1,79 @@
+.demo-react-hook-form-example {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+}