Add Chakra UI component library to frontend (#65)

* Install Chakra UI packages * Define custom theme with colours and typography * Integrate Chakra into frontend * Set default textStyle and minor refactoring
uwblueprint · Dec 9, 2021 · 58e6b01 · 58e6b01
1 parent 47347ca
commit 58e6b01
Show file tree

Hide file tree

Showing 19 changed files with 1,279 additions and 82 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,6 +4,12 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "@chakra-ui/react": "^1.7.2",
+    "@chakra-ui/utils": "^1.9.1",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@fontsource/inter": "^4.5.1",
+    "@fontsource/raleway": "^4.5.0",
     "@rjsf/bootstrap-4": "^2.5.1",
     "@rjsf/core": "^2.5.1",
     "@testing-library/jest-dom": "^5.11.4",
@@ -20,6 +26,7 @@
     "apollo-upload-client": "^16.0.0",
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
+    "framer-motion": "^4",
     "graphql": "^15.5.0",
     "humps": "^2.0.1",
     "json-schema": "^0.3.0",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,6 +1,12 @@
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/raleway/400.css";
+import "@fontsource/raleway/600.css";
 import "bootstrap/dist/css/bootstrap.min.css";
+
 import React, { useState, useReducer } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { ChakraProvider } from "@chakra-ui/react";
 
 import Login from "./components/auth/Login";
 import Signup from "./components/auth/Signup";
@@ -24,6 +30,7 @@ import SampleContextDispatcherContext from "./contexts/SampleContextDispatcherCo
 import EditTeamInfoPage from "./components/pages/EditTeamPage";
 import HooksDemo from "./components/pages/HooksDemo";
 
+import customTheme from "./theme";
 import { AuthenticatedUser } from "./types/AuthTypes";
 
 const App = (): React.ReactElement => {
@@ -44,59 +51,65 @@ const App = (): React.ReactElement => {
   );
 
   return (
-    <SampleContext.Provider value={sampleContext}>
-      <SampleContextDispatcherContext.Provider
-        value={dispatchSampleContextUpdate}
-      >
-        <AuthContext.Provider
-          value={{ authenticatedUser, setAuthenticatedUser }}
+    <ChakraProvider theme={customTheme}>
+      <SampleContext.Provider value={sampleContext}>
+        <SampleContextDispatcherContext.Provider
+          value={dispatchSampleContextUpdate}
         >
-          <Router>
-            <Switch>
-              <Route exact path={Routes.LOGIN_PAGE} component={Login} />
-              <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
-              <Route
-                exact
-                path={Routes.RESET_PASSWORD_PAGE}
-                component={ResetPassword}
-              />
-              <Route
-                exact
-                path={Routes.DONE_RESET_PASSWORD_PAGE}
-                component={DoneResetPassword}
-              />
-              <PrivateRoute exact path={Routes.HOME_PAGE} component={Default} />
-              <PrivateRoute
-                exact
-                path={Routes.CREATE_ENTITY_PAGE}
-                component={CreatePage}
-              />
-              <PrivateRoute
-                exact
-                path={Routes.UPDATE_ENTITY_PAGE}
-                component={UpdatePage}
-              />
-              <PrivateRoute
-                exact
-                path={Routes.DISPLAY_ENTITY_PAGE}
-                component={DisplayPage}
-              />
-              <PrivateRoute
-                exact
-                path={Routes.EDIT_TEAM_PAGE}
-                component={EditTeamInfoPage}
-              />
-              <PrivateRoute
-                exact
-                path={Routes.HOOKS_PAGE}
-                component={HooksDemo}
-              />
-              <Route exact path="*" component={NotFound} />
-            </Switch>
-          </Router>
-        </AuthContext.Provider>
-      </SampleContextDispatcherContext.Provider>
-    </SampleContext.Provider>
+          <AuthContext.Provider
+            value={{ authenticatedUser, setAuthenticatedUser }}
+          >
+            <Router>
+              <Switch>
+                <Route exact path={Routes.LOGIN_PAGE} component={Login} />
+                <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
+                <Route
+                  exact
+                  path={Routes.RESET_PASSWORD_PAGE}
+                  component={ResetPassword}
+                />
+                <Route
+                  exact
+                  path={Routes.DONE_RESET_PASSWORD_PAGE}
+                  component={DoneResetPassword}
+                />
+                <PrivateRoute
+                  exact
+                  path={Routes.HOME_PAGE}
+                  component={Default}
+                />
+                <PrivateRoute
+                  exact
+                  path={Routes.CREATE_ENTITY_PAGE}
+                  component={CreatePage}
+                />
+                <PrivateRoute
+                  exact
+                  path={Routes.UPDATE_ENTITY_PAGE}
+                  component={UpdatePage}
+                />
+                <PrivateRoute
+                  exact
+                  path={Routes.DISPLAY_ENTITY_PAGE}
+                  component={DisplayPage}
+                />
+                <PrivateRoute
+                  exact
+                  path={Routes.EDIT_TEAM_PAGE}
+                  component={EditTeamInfoPage}
+                />
+                <PrivateRoute
+                  exact
+                  path={Routes.HOOKS_PAGE}
+                  component={HooksDemo}
+                />
+                <Route exact path="*" component={NotFound} />
+              </Switch>
+            </Router>
+          </AuthContext.Provider>
+        </SampleContextDispatcherContext.Provider>
+      </SampleContext.Provider>
+    </ChakraProvider>
   );
 };
 

diff --git a/frontend/src/components/auth/DoneResetPassword.tsx b/frontend/src/components/auth/DoneResetPassword.tsx
@@ -1,8 +1,9 @@
 import React from "react";
+import { Text } from "@chakra-ui/react";
 
 const DoneResetPassword = (): React.ReactElement => (
   <div style={{ textAlign: "center" }}>
-    <h1>Reset Password</h1>
+    <Text textStyle="display-large">Reset Password</Text>
     <p>
       We have sent you an e-mail. Please contact us if you do not receive it
       within a few minutes.

diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx
@@ -6,6 +6,7 @@ import {
   GoogleLoginResponseOffline,
 } from "react-google-login";
 import { gql, useMutation } from "@apollo/client";
+import { Text } from "@chakra-ui/react";
 
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import {
@@ -86,14 +87,15 @@ const Login = (): React.ReactElement => {
 
   return (
     <div style={{ textAlign: "center" }}>
-      <h1>Login</h1>
+      <Text textStyle="display-large">Login</Text>
       <form>
         <div>
           <input
             type="email"
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             placeholder="username@domain.com"
+            style={{ border: "1px solid" }}
           />
         </div>
         <div>
@@ -102,6 +104,7 @@ const Login = (): React.ReactElement => {
             value={password}
             onChange={(event) => setPassword(event.target.value)}
             placeholder="password"
+            style={{ border: "1px solid" }}
           />
         </div>
         <div>

diff --git a/frontend/src/components/auth/ResetPassword.tsx b/frontend/src/components/auth/ResetPassword.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { gql, useMutation } from "@apollo/client";
 import { useHistory } from "react-router-dom";
+import { gql, useMutation } from "@apollo/client";
+import { Text } from "@chakra-ui/react";
 
 import { DONE_RESET_PASSWORD_PAGE } from "../../constants/Routes";
 
@@ -23,19 +24,21 @@ const ResetPassword = (): React.ReactElement => {
       await resetPassword({ variables: { email } });
       history.push(DONE_RESET_PASSWORD_PAGE);
     } catch (e) {
+      /* eslint-disable-next-line no-alert */
       alert("invalid email");
     }
   };
 
   return (
     <div style={{ textAlign: "center" }}>
-      <h1>Reset Password</h1>
+      <Text textStyle="display-large">Reset Password</Text>
       <div>
         <input
           type="email"
           value={email}
           onChange={(event) => setEmail(event.target.value)}
           placeholder="username@domain.com"
+          style={{ border: "1px solid" }}
         />
       </div>
       <div>

diff --git a/frontend/src/components/auth/Signup.tsx b/frontend/src/components/auth/Signup.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useState } from "react";
 import { Redirect } from "react-router-dom";
 import { gql, useMutation } from "@apollo/client";
+import { Text } from "@chakra-ui/react";
 
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import { HOME_PAGE } from "../../constants/Routes";
@@ -58,14 +59,15 @@ const Signup = (): React.ReactElement => {
 
   return (
     <div style={{ textAlign: "center" }}>
-      <h1>Signup</h1>
+      <Text textStyle="display-large">Signup</Text>
       <form>
         <div>
           <input
             type="text"
             value={firstName}
             onChange={(event) => setFirstName(event.target.value)}
             placeholder="first name"
+            style={{ border: "1px solid" }}
           />
         </div>
         <div>
@@ -74,6 +76,7 @@ const Signup = (): React.ReactElement => {
             value={lastName}
             onChange={(event) => setLastName(event.target.value)}
             placeholder="last name"
+            style={{ border: "1px solid" }}
           />
         </div>
         <div>
@@ -82,6 +85,7 @@ const Signup = (): React.ReactElement => {
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             placeholder="username@domain.com"
+            style={{ border: "1px solid" }}
           />
         </div>
         <div>
@@ -90,6 +94,7 @@ const Signup = (): React.ReactElement => {
             value={password}
             onChange={(event) => setPassword(event.target.value)}
             placeholder="password"
+            style={{ border: "1px solid" }}
           />
         </div>
         <div>

diff --git a/frontend/src/components/crud/DisplayTableContainer.tsx b/frontend/src/components/crud/DisplayTableContainer.tsx
@@ -194,7 +194,11 @@ const DisplayTableContainer: React.FC = (): React.ReactElement | null => {
 
   return (
     <>
-      <button type="button" onClick={downloadEntitiesCSV}>
+      <button
+        type="button"
+        className="btn btn-link"
+        onClick={downloadEntitiesCSV}
+      >
         Download CSV
       </button>
       {entities && (

diff --git a/frontend/src/components/pages/CreatePage.tsx b/frontend/src/components/pages/CreatePage.tsx
@@ -1,11 +1,13 @@
 import React from "react";
+import { Text } from "@chakra-ui/react";
+
 import CreateForm from "../crud/CreateForm";
 import MainPageButton from "../common/MainPageButton";
 
 const CreatePage = (): React.ReactElement => {
   return (
     <div style={{ textAlign: "center", width: "25%", margin: "0px auto" }}>
-      <h1>Default Page</h1>
+      <Text textStyle="display-large">Default Page</Text>
       <MainPageButton />
       <CreateForm />
     </div>