Remove some unused exports from ol-components

frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from "react"
 import {
   styled,
   Container,
-  Box,
   Breadcrumbs,
   Stack,
   BannerBackground,
@@ -147,8 +146,7 @@ const UnitChannelTemplate: React.FC<UnitChannelTemplateProps> = ({
                   {displayConfiguration?.sub_heading}
                 </Typography>
               </Stack>
-              <Box
-                display="flex"
+              <Stack
                 flexDirection="row"
                 alignItems="end"
                 sx={{
@@ -172,7 +170,7 @@ const UnitChannelTemplate: React.FC<UnitChannelTemplateProps> = ({
                     />
                   ) : null}
                 </ChannelControls>
-              </Box>
+              </Stack>
             </Stack>
             {channel.data ? <ChannelDetails channel={channel.data} /> : null}
           </BannerContent>

frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx

@@ -1,30 +1,40 @@
 import React from "react"
-import {
-  Container,
-  MuiCard,
-  CardContent,
-  CardActions,
-  ButtonLink,
-} from "ol-components"
+import { Container, ButtonLink, Typography, styled } from "ol-components"
 import { HOME } from "@/common/urls"
 
 type ErrorPageTemplateProps = {
   title: string
   children: React.ReactNode
 }
 
-const ErrorPageTemplate: React.FC<ErrorPageTemplateProps> = ({ children }) => {
+const ErrorContainer = styled(Container)(({ theme }) => ({
+  backgroundColor: theme.custom.colors.white,
+  borderRadius: "8px",
+  marginTop: "4rem",
+  padding: "16px",
+  boxShadow:
+    "1px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+}))
+const Footer = styled.div({
+  marginTop: "16px",
+})
+
+const ErrorPageTemplate: React.FC<ErrorPageTemplateProps> = ({
+  children,
+  title,
+}) => {
   return (
-    <Container maxWidth="sm">
-      <MuiCard sx={{ marginTop: "4rem" }}>
-        <CardContent>{children}</CardContent>
-        <CardActions>
-          <ButtonLink variant="secondary" href={HOME}>
-            Home
-          </ButtonLink>
-        </CardActions>
-      </MuiCard>
-    </Container>
+    <ErrorContainer maxWidth="sm">
+      <Typography variant="h3" component="h1">
+        {title}
+      </Typography>
+      {children}
+      <Footer>
+        <ButtonLink variant="secondary" href={HOME}>
+          Home
+        </ButtonLink>
+      </Footer>
+    </ErrorContainer>
   )
 }
 

frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx

@@ -2,14 +2,10 @@
 
 import React from "react"
 import ErrorPageTemplate from "./ErrorPageTemplate"
-import { Typography } from "ol-components"
 
 const FallbackErrorPage = ({ error }: { error: Pick<Error, "message"> }) => {
   return (
-    <ErrorPageTemplate title="Unexpected Error">
-      <Typography variant="h3" component="h1">
-        Something went wrong.
-      </Typography>
+    <ErrorPageTemplate title="Something went wrong.">
       {error.message}
     </ErrorPageTemplate>
   )

frontends/main/src/app-pages/ErrorPage/ForbiddenPage.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react"
 import ErrorPageTemplate from "./ErrorPageTemplate"
 import { useUserMe } from "api/hooks/user"
-import { Typography } from "ol-components"
 import { redirect } from "next/navigation"
 import * as urls from "@/common/urls"
 
@@ -16,9 +15,6 @@ const ForbiddenPage: React.FC = () => {
   }, [user])
   return (
     <ErrorPageTemplate title="Not Allowed">
-      <Typography variant="h3" component="h1">
-        Not Allowed
-      </Typography>
       You do not have permission to access this resource.
     </ErrorPageTemplate>
   )

frontends/main/src/app-pages/ErrorPage/NotFoundPage.tsx

@@ -2,14 +2,10 @@
 
 import React from "react"
 import ErrorPageTemplate from "./ErrorPageTemplate"
-import { Typography } from "ol-components"
 
 const NotFoundPage: React.FC = () => {
   return (
-    <ErrorPageTemplate title="Not Found">
-      <Typography variant="h3" component="h1">
-        404 Not Found Error
-      </Typography>
+    <ErrorPageTemplate title="404 Not Found Error">
       Resource Not Found
     </ErrorPageTemplate>
   )

frontends/main/src/app/error.tsx

@@ -14,6 +14,11 @@ import * as Sentry from "@sentry/nextjs"
 import FallbackErrorPage from "@/app-pages/ErrorPage/FallbackErrorPage"
 import { ForbiddenError } from "@/common/permissions"
 import ForbiddenPage from "@/app-pages/ErrorPage/ForbiddenPage"
+
+export const metadata = {
+  title: "Error",
+}
+
 const Error = ({ error }: { error: Error }) => {
   useEffect(() => {
     Sentry.captureException(error)

frontends/main/src/app/not-found.tsx

@@ -1,6 +1,10 @@
 import React from "react"
 import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
 
+export const metadata = {
+  title: "Not Found",
+}
+
 const Page: React.FC = () => {
   return <NotFoundPage />
 }

frontends/main/src/page-components/ChannelDetails/ChannelDetails.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react"
-import { styled, Typography, Box } from "ol-components"
+import { styled, Typography } from "ol-components"
 import { capitalize } from "ol-utilities"
 import { ChannelTypeEnum, Channel } from "api/v0"
 import { RiExternalLinkLine } from "@remixicon/react"
@@ -142,7 +142,7 @@ const getChannelDetails = (channel: Channel) => {
 const InfoLabel = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.mitRed,
 }))
-const ChannelDetailsCard = styled(Box)(({ theme }) => ({
+const ChannelDetailsCard = styled.div(({ theme }) => ({
   borderRadius: "12px",
   backgroundColor: "white",
   padding: "36px",
@@ -186,7 +186,7 @@ const ChannelDetails: React.FC<ChannelDetailsProps> = (props) => {
           : detailValue
 
         return (
-          <Box key={value.title}>
+          <div key={value.title}>
             <InfoLabel
               variant="subtitle2"
               sx={{ marginBottom: (theme) => theme.typography.pxToRem(4) }}
@@ -196,7 +196,7 @@ const ChannelDetails: React.FC<ChannelDetailsProps> = (props) => {
             <Typography variant="body3" color="text.secondary">
               {Array.isArray(label) ? label.join(" | ") : label}
             </Typography>
-          </Box>
+          </div>
         )
       }
       return null

frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -3,8 +3,6 @@ import {
   styled,
   Pagination,
   PaginationItem,
-  MuiCard,
-  CardContent,
   PlainList,
   Container,
   Typography,
@@ -459,6 +457,14 @@ const AdminTitleContainer = styled.div`
   ${({ theme }) => css({ ...theme.typography.subtitle3 })}
   margin-top: 20px;
 `
+const NoneFound = styled.div(({ theme }) => ({
+  backgroundColor: theme.custom.colors.white,
+  borderRadius: "8px",
+  padding: "16px",
+  paddingBottom: "24px",
+  boxShadow:
+    "1px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+}))
 
 const PAGE_SIZE = 20
 const MAX_PAGE = 50
@@ -963,9 +969,7 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                     ))}
                   </PlainList>
                 ) : (
-                  <MuiCard>
-                    <CardContent>No results found for your query.</CardContent>
-                  </MuiCard>
+                  <NoneFound>No results found for your query.</NoneFound>
                 )}
               </StyledResultsContainer>
               <PaginationContainer>

frontends/ol-components/package.json

@@ -18,7 +18,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/base": "5.0.0-beta.61",
     "@mui/lab": "6.0.0-beta.15",
-    "@mui/material": "^6.1.6",
+    "@mui/material": "^6.1.8",
     "@mui/material-nextjs": "^6.1.6",
     "@mui/system": "^6.1.6",
     "@remixicon/react": "^4.2.0",

frontends/ol-components/src/index.ts

@@ -12,12 +12,6 @@
  *    functionality.
  */
 
-export { default as Avatar } from "@mui/material/Avatar"
-export type { AvatarProps } from "@mui/material/Avatar"
-
-export { default as Badge } from "@mui/material/Badge"
-export type { BadgeProps } from "@mui/material/Badge"
-
 export { default as AppBar } from "@mui/material/AppBar"
 export type { AppBarProps } from "@mui/material/AppBar"
 
@@ -37,20 +31,6 @@ export { ListCard, ListCardActionButton } from "./components/Card/ListCard"
 
 export type { ButtonProps, ButtonLinkProps } from "./components/Button/Button"
 
-export { default as MuiCard } from "@mui/material/Card"
-export type { CardProps as MuiCardProps } from "@mui/material/Card"
-export { default as Box } from "@mui/material/Box"
-export type { BoxProps } from "@mui/material/Box"
-export { default as CardActions } from "@mui/material/CardActions"
-export type { CardActionsProps } from "@mui/material/CardActions"
-export { default as CardContent } from "@mui/material/CardContent"
-export type { CardContentProps } from "@mui/material/CardContent"
-export { default as CardMedia } from "@mui/material/CardMedia"
-export type { CardMediaProps } from "@mui/material/CardMedia"
-
-export { default as MuiCheckbox } from "@mui/material/Checkbox"
-export type { CheckboxProps as MuiCheckboxProps } from "@mui/material/Checkbox"
-
 export { default as Chip } from "@mui/material/Chip"
 export type { ChipProps } from "@mui/material/Chip"
 
@@ -60,15 +40,6 @@ export type { ClickAwayListenerProps } from "@mui/material/ClickAwayListener"
 export { default as Container } from "@mui/material/Container"
 export type { ContainerProps } from "@mui/material/Container"
 
-export { default as MuiDialog } from "@mui/material/Dialog"
-export type { DialogProps as MuiDialogProps } from "@mui/material/Dialog"
-export { default as MuiDialogActions } from "@mui/material/DialogActions"
-export type { DialogActionsProps } from "@mui/material/DialogActions"
-export { default as MuiDialogContent } from "@mui/material/DialogContent"
-export type { DialogContentProps } from "@mui/material/DialogContent"
-export { default as MuiDialogTitle } from "@mui/material/DialogTitle"
-export type { DialogTitleProps } from "@mui/material/DialogTitle"
-
 export { default as Divider } from "@mui/material/Divider"
 export type { DividerProps } from "@mui/material/Divider"
 
@@ -79,16 +50,13 @@ export { default as Grid } from "@mui/material/Grid"
 export type { GridProps } from "@mui/material/Grid"
 export { default as Grid2 } from "@mui/material/Grid2"
 export type { Grid2Props } from "@mui/material/Grid2"
-export { default as InputLabel } from "@mui/material/InputLabel"
 
 export { default as List } from "@mui/material/List"
 export type { ListProps } from "@mui/material/List"
 export { default as ListItem } from "@mui/material/ListItem"
 export type { ListItemProps } from "@mui/material/ListItem"
 export { ListItemLink } from "./components/Lists/ListItemLink"
 export type { ListItemLinkProps } from "./components/Lists/ListItemLink"
-export { default as ListItemButton } from "@mui/material/ListItemButton"
-export type { ListItemButtonProps } from "@mui/material/ListItemButton"
 export { default as ListItemText } from "@mui/material/ListItemText"
 export type { ListItemTextProps } from "@mui/material/ListItemText"
 
@@ -123,22 +91,9 @@ export type { ToolbarProps } from "@mui/material/Toolbar"
 // Mui Form Inputs
 export { default as Autocomplete } from "@mui/material/Autocomplete"
 export type { AutocompleteProps } from "@mui/material/Autocomplete"
-export { default as MuiRadio } from "@mui/material/Radio"
-export type { RadioProps as MuiRadioProps } from "@mui/material/Radio"
-export { default as RadioGroup } from "@mui/material/RadioGroup"
-export type { RadioGroupProps } from "@mui/material/RadioGroup"
 export { default as ToggleButton } from "@mui/material/ToggleButton"
 export { default as ToggleButtonGroup } from "@mui/material/ToggleButtonGroup"
 
-// Mui Custom Form Inputs
-export { default as FormControl } from "@mui/material/FormControl"
-export type { FormControlProps } from "@mui/material/FormControl"
-export { default as FormControlLabel } from "@mui/material/FormControlLabel"
-export type { FormControlLabelProps } from "@mui/material/FormControlLabel"
-export { default as FormHelperText } from "@mui/material/FormHelperText"
-export type { FormHelperTextProps } from "@mui/material/FormHelperText"
-export { default as FormLabel } from "@mui/material/FormLabel"
-export type { FormLabelProps } from "@mui/material/FormLabel"
 export { default as Pagination } from "@mui/material/Pagination"
 export type { PaginationProps } from "@mui/material/Pagination"
 export { default as Typography } from "@mui/material/Typography"
@@ -147,8 +102,6 @@ export { default as PaginationItem } from "@mui/material/PaginationItem"
 
 export { default as Collapse } from "@mui/material/Collapse"
 
-export { default as Menu } from "@mui/material/Menu"
-export type { MenuProps } from "@mui/material/Menu"
 export * from "./components/MenuItem/MenuItem"
 
 export { default as Stepper } from "@mui/material/Stepper"

frontends/ol-widgets/package.json

@@ -5,6 +5,7 @@
   "main": "./src/index.ts",
   "dependencies": {
     "@faker-js/faker": "^9.0.0",
+    "@mui/material": "^6.1.8",
     "@remixicon/react": "^4.2.0",
     "classnames": "^2.3.2",
     "formik": "^2.4.5",

frontends/ol-widgets/src/components/Widget.tsx

@@ -1,6 +1,12 @@
 import React, { useCallback } from "react"
 import classNames from "classnames"
-import { Divider, MuiCard, CardContent, CardActions } from "ol-components"
+import { Divider } from "ol-components"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import MuiCard from "@mui/material/Card"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import CardContent from "@mui/material/CardContent"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import CardActions from "@mui/material/CardActions"
 import {
   RiPencilFill,
   RiDeleteBin7Fill,

frontends/ol-widgets/src/components/editing/ManageWidgetDialog.tsx

@@ -1,12 +1,13 @@
 import React, { useId, useCallback, useEffect, useMemo, useState } from "react"
-import {
-  MuiDialog,
-  MuiDialogActions,
-  MuiDialogContent,
-  MuiDialogTitle,
-  Button,
-  RadioChoiceField,
-} from "ol-components"
+import { Button, RadioChoiceField } from "ol-components"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import MuiDialog from "@mui/material/Dialog"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import MuiDialogActions from "@mui/material/DialogActions"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import MuiDialogContent from "@mui/material/DialogContent"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import MuiDialogTitle from "@mui/material/DialogTitle"
 import { Formik, Form, Field, ErrorMessage, FieldProps } from "formik"
 import { isNil } from "lodash"
 import { AnonymousWidget, WidgetSpec, WidgetTypes } from "../../interfaces"