v9.0.0 (#509)

* feat(app): remove questions for firebase config (it is loaded through bin script on first app start)
* feat(app): update to firebase v9 (modules)
* feat(app): update to reactfire v4 (support for firebase v9)
* feat(app): update functions to firebase-admin v10 (modules)
* feat(app): material-ui v5 (styling move to emotion)
* feat(app): notistack v2
* feat(app): switch to `ProjectCard` (uses material-ui Card) with created at timestamp in place of `ProjectTile`
* feat(app): switch `firebase-messaging-sw.js` to use newest firebase SDK and built in Firebase Hosting Init (meaning configs no longer need to be changed in SW file)
* feat(app): add clear messaging to CI for case of missing secrets/variables
* fix(app): correctly point to emulators within UI job in CI workflow

Author: prescottprue

.github/workflows/publish.yml

@@ -3,35 +3,28 @@ name: NPM Package Publish
 on:
   push:
     branches:
-      - master
+      - main
       - next
 
+concurrency:
+  group: publish-${{ github.ref }}
+
+env:
+  NODE_VERSION: 14.x
+
 jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
-        with:
-          access_token: ${{ github.token }}
-
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
 
-      - name: Use Node 14
-        uses: actions/setup-node@v2.4.1
+      - name: Use Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2.5.0
         with:
-          node-version: 14
+          node-version: ${{ env.NODE_VERSION }}
           registry-url: https://registry.npmjs.org/
-
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2.1.6
-        with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          cache: 'yarn'
 
       - name: Install Dependencies
         env:
@@ -91,4 +84,4 @@ jobs:
           tag_name: v${{ steps.publish.outputs.version }}
           release_name: v${{ steps.publish.outputs.version }}
           draft: false
-          prerelease: false
+          prerelease: false

.github/workflows/verify.yml

@@ -2,6 +2,10 @@ name: Verify
 
 on: [pull_request]
 
+concurrency:
+  group: verify-${{ github.head_ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     name: Build
@@ -10,28 +14,14 @@ jobs:
       matrix:
         node-version: [12.x, 14.x]
     steps:
-      - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
-        with:
-          access_token: ${{ github.token }}
-
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2.4.1
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v2.5.0
         with:
           node-version: ${{ matrix.node-version }}
-
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      # Setup dependency caching
-      - uses: actions/cache@v2.1.6
-        with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          cache: 'yarn'
 
       - name: Install Dependencies
         env:

examples/react-firebase-redux/src/routes/Account/components/AccountEditor/AccountEditor.js

@@ -1,18 +1,20 @@
 import React from 'react'
 import Grid from '@material-ui/core/Grid'
-import { makeStyles } from '@material-ui/core/styles'
+import { styled } from '@mui/material/styles';
 import { useSelector } from 'react-redux'
 import { isLoaded, useFirebase } from 'react-redux-firebase'
 import LoadingSpinner from 'components/LoadingSpinner'
 import { useNotifications } from 'modules/notification'
 import defaultUserImageUrl from 'static/User.png'
 import AccountForm from '../AccountForm'
-import styles from './AccountEditor.styles'
 
-const useStyles = makeStyles(styles)
+export const TileContent = styled(Paper)(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%'
+}));
 
 function AccountEditor() {
-  const classes = useStyles()
   const { showSuccess, showError } = useNotifications()
   const firebase = useFirebase()
 

examples/react-firebase-redux/src/routes/Account/components/AccountEditor/AccountEditor.jsx

@@ -1,18 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useForm } from 'react-hook-form'
+import { styled } from '@mui/material/styles'
 import TextField from '@material-ui/core/TextField'
 import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
 import { validateEmail } from 'utils/form'
 import ProviderDataForm from '../ProviderDataForm'
-import styles from './AccountForm.styles'
 
-const useStyles = makeStyles(styles)
+export const Root = styled('form')(({ theme }) => ({
+  ...theme.flexColumnCenter,
+  justifyContent: 'flex-start',
+  width: '100%',
+  height: '100%'
+}));
+
+export const Content = styled('form')(() => ({
+  width: '100%',
+  marginBottom: '2rem'
+}));
 
 function AccountForm({ account, onSubmit }) {
-  const classes = useStyles()
   const {
     register,
     handleSubmit,
@@ -25,8 +33,8 @@ function AccountForm({ account, onSubmit }) {
   })
 
   return (
-    <form className={classes.root} onSubmit={handleSubmit(onSubmit)}>
-      <div className={classes.fields}>
+    <Root onSubmit={handleSubmit(onSubmit)}>
+      <Content>
         <TextField
           name="displayName"
           label="Display Name"
@@ -54,7 +62,7 @@ function AccountForm({ account, onSubmit }) {
           inputRef={register}
           fullWidth
         />
-      </div>
+      </Content>
       {!!account && !!account.providerData && (
         <div>
           <Typography variant="h6">Linked Accounts</Typography>
@@ -68,7 +76,7 @@ function AccountForm({ account, onSubmit }) {
         disabled={isSubmitting || !isValid}>
         {isSubmitting ? 'Saving' : 'Save'}
       </Button>
-    </form>
+    </Root>
   )
 }
 

examples/react-firebase-redux/src/routes/Account/components/AccountForm/AccountForm.js

@@ -2,24 +2,38 @@ import React from 'react'
 import Paper from '@material-ui/core/Paper'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
 import AccountEditor from '../AccountEditor'
-import styles from './AccountPage.styles'
+import { styled } from '@mui/material/styles';
 
-const useStyles = makeStyles(styles)
+export const Root = styled(Grid)(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  paddingBottom: theme.spacing(3),
+  overflowY: 'scroll'
+}));
+
+export const Item = styled(Grid)(({ theme }) => ({
+  textAlign: 'center',
+  marginTop: theme.spacing(5)
+}));
+
+export const Pane = styled(Paper)(({ theme }) => ({
+  ...theme.flexColumnCenter,
+  justifyContent: 'space-around',
+  padding: theme.spacing(6)
+}));
 
 function AccountPage() {
   const classes = useStyles()
 
   return (
-    <Grid container className={classes.root} justifyContent="center">
-      <Grid item xs={10} md={8} lg={6} className={classes.gridItem}>
-        <Paper className={classes.pane}>
+    <Root container justifyContent="center">
+      <Item item xs={10} md={8} lg={6}>
+        <Pane>
           <Typography variant="h4">Account</Typography>
           <AccountEditor />
-        </Paper>
-      </Grid>
-    </Grid>
+        </Pane>
+      </Item>
+    </Root>
   )
 }
 

examples/react-firebase-redux/src/routes/Account/components/AccountForm/AccountForm.styles.js

@@ -30,7 +30,6 @@ module.exports = {
         trailingComma: 'none',
         semi: false,
         bracketSpacing: true,
-        jsxBracketSameLine: true,
         printWidth: 80,
         tabWidth: 2,
         useTabs: false

examples/react-firebase-redux/src/routes/Account/components/AccountPage/AccountPage.js

@@ -11,7 +11,7 @@ if (missingEnvVars.length) {
 }
 
 const gcloudProject = process.env.GCLOUD_PROJECT
-const firestoreHost = `localhost:${emulators.firestore.port}`
+const authHost = `localhost:${emulators.auth.port}`
 const databaseHost = `localhost:${emulators.database.port}`
 
 // Set emulator env vars so Firebase internals know that we're using the emulators
@@ -20,6 +20,7 @@ process.env.FIREBASE_DATABASE_EMULATOR_HOST = databaseHost
 const config = {
   cloudFunctionsUrl: `http://localhost:${emulators.functions.port}/${gcloudProject}/us-central1`,
   emulators: {
+    authHost,
     databaseHost,
     functionsHost: `http://localhost:${emulators.functions.port}`
   },

examples/react-firebase/.eslintrc.js

@@ -30,21 +30,25 @@
   "author": "prescottprue (https://github.com/prescottprue)",
   "license": "MIT",
   "dependencies": {
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.11.2",
-    "firebase": "^8.10.0",
-    "notistack": "^1.0.10",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@fontsource/roboto": "^4.5.1",
+    "@mui/icons-material": "^5.0.3",
+    "@mui/material": "^5.0.3",
+    "@mui/styles": "^5.0.1",
+    "firebase": "^9.1.2",
+    "notistack": "^2.0.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-google-button": "^0.7.2",
-    "react-hook-form": "^7.15.2",
+    "react-hook-form": "^7.17.2",
     "react-router-dom": "^5.3.0",
-    "reactfire": "^3.0.0-rc.0"
+    "reactfire": "^4.2.0"
   },
   "devDependencies": {
-    "@craco/craco": "6.2.0",
-    "@sentry/cli": "^1.68.0",
+    "@craco/craco": "6.3.0",
+    "@sentry/cli": "^1.69.1",
     "babel-eslint": "^10.1.0",
     "config": "^3.3.6",
     "cross-env": "^7.0.3",
@@ -63,11 +67,11 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-standard": "^5.0.0",
     "firebase-ci": "^0.15.0",
-    "firebase-tools": "^9.16.0",
+    "firebase-tools": "^9.20.0",
     "husky": "^7.0.1",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^11.2.3",
     "minimist": "1.2.5",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "react-scripts": "^4.0.3",
     "react-test-renderer": "^17.0.2"
   },