Dashboard maintenance refactor

src/features/common/CustomSnackbar/index.tsx

@@ -4,8 +4,9 @@ import { ReactElement } from 'react';
 import { styled } from '@mui/material/styles';
 
 interface SnackbarProps {
-  snackbarText: String;
+  snackbarText: string;
   isVisible: boolean;
+  /** Include operations that need to take place when the snackbar is closed */
   handleClose: () => void;
 }
 
@@ -15,6 +16,9 @@ const Alert = styled(MuiAlert)(({ theme }) => {
   };
 });
 
+/**
+ * Component that renders a temporary snackbar to indicate a success message
+ */
 export default function CustomSnackbar({
   snackbarText,
   isVisible,

src/features/common/Layout/BulkCodeContext.tsx

@@ -9,21 +9,6 @@ import {
 } from 'react';
 import { BulkCodeMethods } from '../../../utils/constants/bulkCodeConstants';
 
-export interface APISingleProject {
-  type: string;
-  geometry: unknown;
-  properties: {
-    [index: string]: unknown;
-    id: string;
-    name: string;
-    slug: string;
-    allowDonations: boolean;
-    purpose: string;
-    currency: string;
-    unitCost: number;
-  };
-}
-
 export interface PlanetCashAccount {
   guid: string;
   currency: string;

src/features/common/Layout/CenteredContainer/index.tsx

@@ -1,5 +1,8 @@
 import { styled } from '@mui/material';
 
+/**
+ * Returns a container with background and boxShadow, with centered content. Content is vertically arranged
+ */
 const CenteredContainer = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   padding: 24,
@@ -10,9 +13,15 @@ const CenteredContainer = styled('div')(({ theme }) => ({
   width: '100%',
   alignItems: 'center',
   justifyContent: 'center',
+  gap: 24,
+  // To create a small fixed height container
   '&.CenteredContainer--small': {
     height: 160,
   },
+  // To center text within a child element of the CenteredContainer
+  '& .centered-text': {
+    textAlign: 'center',
+  },
 }));
 
 export default CenteredContainer;

src/features/common/Layout/DashboardView/index.tsx

@@ -39,6 +39,9 @@ const DashboardGridContainer = styled(Box)(({ theme }) => ({
   },
 }));
 
+/**
+ * Returns a template layout for a Dashboard view with a `<header>` section and a `<main>` section
+ */
 export default function DashboardView({
   title,
   subtitle,

src/features/common/Layout/Forms/FormHeader.tsx

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material';
+
+/**
+ * Header container to be placed above a html `<form>` element.
+ */
+const FormHeader = styled('header')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 16,
+  width: '100%',
+  '& .formTitle': {
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.h2.fontSize,
+  },
+}));
+
+export default FormHeader;

src/features/common/Layout/Forms/InlineFormDisplayGroup.tsx

@@ -1,15 +1,45 @@
 import { styled } from '@mui/material';
+import { ReactElement, ReactNode } from 'react';
 
-const InlineFormDisplayGroup = styled('div')({
+const InlineFormGroup = styled('div')({
   display: 'flex',
   justifyContent: 'space-between',
-  gap: '16px',
-  alignItems: 'center',
+  columnGap: 16,
+  rowGap: 24,
+  alignItems: 'flex-start',
   flexWrap: 'wrap',
-
-  '@media(max-width: 481px)': {
-    flexDirection: 'column',
+  '&.InlineFormGroup--other': {
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+  },
+  '& .MuiTextField-root': {
+    flex: 1,
+    minWidth: 180,
   },
 });
 
+interface Props {
+  /** Use type='other' to specify inline groups that do not contain only text field elements */
+  type?: 'field' | 'other';
+  children: ReactNode;
+}
+
+/**
+ * Responsive element that groups fields/other form elements that need to be arranged in one line
+ */
+const InlineFormDisplayGroup = ({
+  type = 'field',
+  children,
+}: Props): ReactElement => {
+  return (
+    <InlineFormGroup
+      className={
+        type === 'field' ? 'InlineFormGroup--fields' : 'InlineFormGroup--other'
+      }
+    >
+      {children}
+    </InlineFormGroup>
+  );
+};
+
 export default InlineFormDisplayGroup;

src/features/common/Layout/DashboardView/SingleColumnView.tsx → src/features/common/Layout/SingleColumnView/index.tsx

@@ -1,23 +1,20 @@
 import { ReactElement } from 'react';
-import { Grid, styled } from '@mui/material';
-
-const FormContainer = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  padding: 24,
-  borderRadius: 9,
-  boxShadow: theme.shadows[1],
-}));
-
+import { Grid } from '@mui/material';
+import CenteredContainer from '../CenteredContainer';
 interface SingleColumnViewProps {
   children: React.ReactNode;
 }
 
+/**
+ * Renders a single column MUI grid container.
+ * Usually used within a `DashboardView` container
+ */
 export default function SingleColumnView({
   children,
 }: SingleColumnViewProps): ReactElement {
   return (
     <Grid container className="SingleColumnView">
-      <Grid item xs={12} md={9} component={FormContainer}>
+      <Grid item xs={12} md={9} component={CenteredContainer}>
         {children}
       </Grid>
     </Grid>

src/features/common/Layout/StyledForm/index.tsx

@@ -2,9 +2,10 @@ import { styled } from '@mui/material';
 
 /**
  * Returns an empty flex column display `<form>` with
- * styles defined for formButton and inputContainer
+ * styles defined for formButton, formTitle and inputContainer
  */
-const StyledForm = styled('form')(({ theme }) => ({
+const StyledForm = styled('form')(() => ({
+  width: '100%',
   display: 'flex',
   flexDirection: 'column',
   gap: 24,
@@ -19,10 +20,6 @@ const StyledForm = styled('form')(({ theme }) => ({
     gap: 24,
     width: '100%',
   },
-  '& .formTitle': {
-    color: theme.palette.text.secondary,
-    fontSize: theme.typography.h2.fontSize,
-  },
 }));
 
 export default StyledForm;

src/features/common/Layout/TabbedView/index.tsx

@@ -24,6 +24,11 @@ interface TabbedViewProps {
   tabItems: TabItem[];
 }
 
+/**
+ * Renders a two column MUI grid container.
+ * Column 1 = Tabs. Column 2 = Content
+ * Usually used within a `<DashboardView>` container
+ */
 export default function TabbedView({
   children,
   step,

src/features/common/types/project.d.ts

@@ -9,12 +9,17 @@ export interface Project {
   allowDonations: boolean;
 }
 
-export interface SingleProject {
-  id: string;
-  name: string;
-  slug: string;
-  allowDonations: boolean;
-  purpose: string;
-  currency: string;
-  unitCost: number;
+export interface MapSingleProject {
+  type: string;
+  geometry: unknown;
+  properties: {
+    [index: string]: unknown;
+    id: string;
+    name: string;
+    slug: string;
+    allowDonations: boolean;
+    purpose: string;
+    currency: string;
+    unitCost: number;
+  };
 }

src/features/user/BulkCodes/components/GenericCodesPartial.tsx

@@ -1,16 +1,11 @@
-import { TextField, styled } from '@mui/material';
+import { TextField } from '@mui/material';
 import { ReactElement, useState, FocusEvent } from 'react';
 import i18next from '../../../../../i18n';
 import { SetState } from '../../../common/Layout/BulkCodeContext';
 import { BulkCodeLimits } from '../../../../utils/constants/bulkCodeConstants';
+import InlineFormDisplayGroup from '../../../common/Layout/Forms/InlineFormDisplayGroup';
 
 const { useTranslation } = i18next;
-
-const InlineFormGroup = styled('div')({
-  display: 'flex',
-  gap: 16,
-});
-
 interface GenericCodesProps {
   codeQuantity: string;
   unitsPerCode: string;
@@ -60,7 +55,7 @@ const GenericCodesPartial = ({
 
   if (ready) {
     return (
-      <InlineFormGroup>
+      <InlineFormDisplayGroup>
         <TextField
           value={unitsPerCode}
           onChange={(e) => handleChange(e.target.value, setUnitsPerCode)}
@@ -91,7 +86,7 @@ const GenericCodesPartial = ({
               : ''
           }
         ></TextField>
-      </InlineFormGroup>
+      </InlineFormDisplayGroup>
     );
   }
   return null;