chore(ui): typing for Theme (#4890)

.changeset/sweet-crabs-deliver.md

@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-components': patch
+---
+
+chore(ui): typing for Theme

packages/ui-components/src/Theme/ResetStyles.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Theme } from './theme';
 
-const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
+const resetStyles = makeStyles((theme: Theme) => ({
   '@global': {
     // eslint-disable-next-line max-len
     'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video':
@@ -11,7 +11,7 @@ const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
         fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
       },
     strong: {
-      fontWeight: theme?.fontWeight.semiBold,
+      fontWeight: theme.fontWeight.semiBold,
     },
     'html, body, #root': {
       height: '100%',
@@ -26,8 +26,8 @@ const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
       flex: 1,
       height: '100%',
 
-      [`@media screen and (min-width: ${theme?.breakPoints.container}px)`]: {
+      [`@media screen and (min-width: ${theme.breakPoints.container}px)`]: {
-        maxWidth: theme?.breakPoints.container,
+        maxWidth: theme.breakPoints.container,
         width: '100%',
         marginLeft: 'auto',
         marginRight: 'auto',

packages/ui-components/src/Theme/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from '@mui/material/styles';
+import { Theme as MuiTheme, createTheme } from '@mui/material/styles';
 
 import { PRIMARY_COLOR } from './colors';
 
@@ -92,7 +92,15 @@ const customizedTheme = {
 
 type CustomizedTheme = typeof customizedTheme;
 
-export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
+export interface CustomTheme {
+  fontSize: typeof fontSize;
+  fontWeight: typeof fontWeight;
+  breakPoints: typeof breakPoints;
+}
+
+export type Theme = MuiTheme & CustomTheme;
+
+export const getTheme = (themeMode: ThemeMode, primaryColor: string): Theme => {
   const palette = applyPrimaryColor(themeMode, primaryColor);
   return createTheme({
     typography: {
@@ -122,10 +130,13 @@ export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
       },
     },
     ...customizedTheme,
-  });
+  }) as Theme;
 };
 
-export type Theme = ReturnType<typeof getTheme>;
+declare module '@mui/material/styles' {
+  interface Theme extends CustomTheme {}
+  interface ThemeOptions extends CustomTheme {}
+}
 
 declare module '@mui/material/styles/createTheme' {
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */

packages/ui-components/src/components/ActionBar/ActionBarAction.tsx

@@ -16,11 +16,11 @@ import LinkExternal from '../LinkExternal';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
-    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
   '&:hover': {
-    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
   },
-  color: theme?.palette.white,
+  color: theme.palette.white,
 }));
 
 type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';

packages/ui-components/src/components/Author/styles.ts

@@ -5,7 +5,7 @@ import ListItem from '@mui/material/ListItem';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
 }));
 
 export const AuthorListItem = styled(ListItem)({

packages/ui-components/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -26,7 +26,7 @@ const Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   textOverflow: 'ellipsis',
   height: 'auto',
   whiteSpace: 'break-spaces',
-  fontSize: theme?.fontSize.sm,
+  fontSize: theme.fontSize.sm,
 }));
 
 function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {

packages/ui-components/src/components/Dependencies/DependencyBlock.tsx

@@ -17,7 +17,7 @@ interface DependencyBlockProps {
 }
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme && props.theme.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
@@ -38,7 +38,7 @@ export const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({
 export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
   const history = useHistory();
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const deps = Object.entries(dependencies);
 
   function handleClick(name: string): void {

packages/ui-components/src/components/Deprecated/Deprecated.tsx

@@ -2,12 +2,14 @@ import Alert from '@mui/material/Alert';
 import { useTheme } from '@mui/styles';
 import React from 'react';
 
+import { Theme } from '../../Theme';
+
 export type Props = {
   message: string;
 };
 
 const Deprecated: React.FC<Props> = ({ message }) => {
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   return (
     <Alert severity="warning" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
       {message}

packages/ui-components/src/components/Developers/Developers.tsx

@@ -11,8 +11,8 @@ import Title from './Title';
 import getUniqueDeveloperValues from './get-unique-developer-values';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>((props) => ({
-  backgroundColor: props.theme?.palette.primary.main,
+  backgroundColor: props.theme.palette.primary.main,
-  color: props.theme?.palette.white,
+  color: props.theme.palette.white,
 }));
 
 interface Props {

packages/ui-components/src/components/Developers/Title.tsx

@@ -23,6 +23,6 @@ const Title: React.FC<Props> = ({ type }) => {
 export default Title;
 
 const StyledText = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: theme?.fontWeight.bold,
+  fontWeight: theme.fontWeight.bold,
   marginBottom: '10px',
 }));

packages/ui-components/src/components/Distribution/styles.ts

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 

packages/ui-components/src/components/Engines/styles.ts

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 

packages/ui-components/src/components/Forbidden/Forbidden.tsx

@@ -51,6 +51,6 @@ const Container = styled('div')({
 });
 
 const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.white,
   marginBottom: 16,
 }));

packages/ui-components/src/components/FundButton/FundButton.tsx

@@ -9,14 +9,14 @@ import { url } from '../../utils';
 import LinkExternal from '../LinkExternal';
 
 const StyledLink = styled(LinkExternal)<{ theme?: Theme }>(({ theme }) => ({
-  marginTop: theme?.spacing(2),
+  marginTop: theme.spacing(2),
-  marginBottom: theme?.spacing(2),
+  marginBottom: theme.spacing(2),
   textDecoration: 'none',
   display: 'block',
 }));
 
 const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.orange,
+  color: theme.palette.orange,
 }));
 
 const StyledFundStrong = styled('strong')({

packages/ui-components/src/components/Install/Install.tsx

@@ -12,7 +12,7 @@ import { SettingsMenu } from '../SettingsMenu';
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 

packages/ui-components/src/components/Install/InstallListItem.tsx

@@ -5,6 +5,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { useTheme } from '@mui/styles';
 import React from 'react';
 
+import { Theme } from '../../Theme';
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 import CopyToClipBoard from '../CopyClipboard';
 import { Npm, Pnpm, Yarn } from '../Icons';
@@ -55,7 +56,7 @@ const InstallListItem: React.FC<Interface> = ({
   packageVersion,
 }) => {
   const { localSettings } = useSettings();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const isLatest = localSettings[packageName]?.latest ?? false;
   const isGlobal = localSettings[packageName]?.global ?? false;
   switch (dependencyManager) {

packages/ui-components/src/components/Keywords/Keywords.tsx

@@ -4,12 +4,13 @@ import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Theme } from '../../Theme';
 import { PackageMetaInterface } from '../../types/packageMeta';
 import KeywordListItems from './KeywordListItems';
 
 const Keywords: React.FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
 
   if (!packageMeta?.latest?.keywords) {
     return null;

packages/ui-components/src/components/Label/Label.tsx

@@ -16,7 +16,7 @@ interface WrapperProps {
 }
 
 const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight[props.weight],
+  fontWeight: props.theme.fontWeight[props.weight],
   textTransform: props.capitalize ? 'capitalize' : 'none',
 }));
 

packages/ui-components/src/components/Loading/Spinner/Spinner.tsx

@@ -30,5 +30,5 @@ const Wrapper = styled('div')<Pick<Props, 'centered'>>(({ centered }) => ({
 }));
 
 const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
+  color: theme.palette.mode === 'dark' ? theme.palette.white : theme.palette.primary.main,
 }));

packages/ui-components/src/components/Loading/styles.ts

@@ -14,5 +14,5 @@ export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   padding: 5,
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
-  background: theme?.palette.mode === 'dark' ? theme?.palette.black : '#f7f8f6',
+  background: theme.palette.mode === 'dark' ? theme.palette.black : '#f7f8f6',
 }));

packages/ui-components/src/components/LoginDialog/LoginDialogFormError.tsx

@@ -7,14 +7,14 @@ import React, { memo } from 'react';
 import { LoginError, Theme } from '../../';
 
 const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme?.palette.error.dark,
+  backgroundColor: theme.palette.error.dark,
-  color: theme?.palette.white,
+  color: theme.palette.white,
 }));
 
 const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   opacity: 0.9,
-  marginRight: theme?.spacing(1),
+  marginRight: theme.spacing(1),
 }));
 
 export interface FormValues {

packages/ui-components/src/components/LoginDialog/LoginDialogHeader.tsx

@@ -34,15 +34,15 @@ const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
 export default LoginDialogHeader;
 
 const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
-  margin: theme?.spacing(1),
+  margin: theme.spacing(1),
   backgroundColor:
-    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
-  color: theme?.palette.white,
+  color: theme.palette.white,
 }));
 
 const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
   position: 'absolute',
-  right: theme?.spacing() / 2,
+  right: theme.spacing() / 2,
-  top: theme?.spacing() / 2,
+  top: theme.spacing() / 2,
-  color: theme?.palette.grey[500],
+  color: theme.palette.grey[500],
 }));

packages/ui-components/src/components/Logo/Logo.tsx

@@ -28,10 +28,10 @@ interface Props {
 
 const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false, title = '' }) => {
   const { configOptions } = useConfig();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   if (!isDefault && configOptions?.logo) {
     const logoSrc =
-      theme?.palette.mode === 'dark' && configOptions.logoDark
+      theme.palette.mode === 'dark' && configOptions.logoDark
         ? configOptions.logoDark
         : configOptions.logo;
     return (
@@ -64,7 +64,7 @@ const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size = 'small', t
   boxSizing: 'border-box',
   backgroundPosition: 'center',
   backgroundSize: 'contain',
-  backgroundImage: `url(${logos[theme?.palette.mode]})`,
+  backgroundImage: `url(${logos[theme.palette.mode]})`,
   backgroundRepeat: ' no-repeat',
   width: sizes[size],
   height: sizes[size],

packages/ui-components/src/components/NotFound/NotFound.tsx

@@ -48,6 +48,6 @@ const Container = styled('div')({
 });
 
 const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.white,
   marginBottom: 16,
 }));

packages/ui-components/src/components/Package/Package.tsx

@@ -246,7 +246,7 @@ export default Package;
 
 const iconStyle = ({ theme }: { theme: Theme }) => css`
   margin: 0 10px 0 0;
-  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyDark : theme?.palette.white};
+  fill: ${theme.palette.mode === 'light' ? theme.palette.greyDark : theme.palette.white};
 `;
 
 const StyledVersion = styled(Version)`

packages/ui-components/src/components/Package/styles.ts

@@ -12,14 +12,14 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   margin: '0 20px 0 0',
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.greyDark2 : theme.palette.white,
   fontSize: 12,
-  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+  [`@media (max-width: ${theme.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
       display: 'none',
     },
   },
-  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+  [`@media (max-width: ${theme.breakPoints.small}px)`]: {
     ':nth-of-type(4)': {
       display: 'none',
     },
@@ -52,14 +52,14 @@ export const WrapperLink = styled(Link)({
 });
 
 export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: theme?.fontWeight.bold,
+  fontWeight: theme.fontWeight.bold,
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: theme?.palette.mode == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
+  color: theme.palette.mode == 'dark' ? theme.palette.dodgerBlue : theme.palette.eclipse,
   cursor: 'pointer',
   textDecoration: 'none',
-  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+  [`@media (max-width: ${theme.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
   },
@@ -72,7 +72,7 @@ export const GridRightAligned = styled(Grid)({
 export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
   '&:hover': {
     backgroundColor:
-      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight2,
+      theme.palette.mode == 'dark' ? theme.palette.secondary.main : theme.palette.greyLight2,
   },
 }));
 
@@ -88,7 +88,7 @@ export const PackageListItemText = styled(ListItemText)({
 });
 
 export const Description = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.greyDark2 : theme.palette.white,
   fontSize: '14px',
   paddingRight: 0,
 }));

packages/ui-components/src/components/RawViewer/RawViewer.tsx

@@ -8,6 +8,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactJson from 'react-json-view';
 
+import { Theme } from '../../Theme';
+
 export interface ViewerTitleProps {
   id: string;
   children?: React.ReactNode;
@@ -48,7 +50,7 @@ type Props = {
 /* eslint-disable verdaccio/jsx-spread */
 const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   return (
     <Dialog data-testid={'rawViewer--dialog'} fullScreen={true} open={isOpen}>
       <ViewerTitle id="viewer-title" onClose={onClose}>
@@ -61,7 +63,7 @@ const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) =>
           enableClipboard={true}
           groupArraysAfterLength={10}
           src={packageMeta as any}
-          theme={theme?.palette.mode == 'light' ? 'bright:inverted' : 'bright'}
+          theme={theme.palette.mode == 'light' ? 'bright:inverted' : 'bright'}
         />
       </DialogContent>
     </Dialog>

packages/ui-components/src/components/RegistryInfoDialog/styles.ts

@@ -6,17 +6,17 @@ import { Theme } from '../../';
 
 export const Title = styled(DialogTitle)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
-    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
-  color: theme?.palette.white,
+  color: theme.palette.white,
-  fontSize: theme?.fontSize.lg,
+  fontSize: theme.fontSize.lg,
 }));
 
 export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
   padding: '0 24px',
-  backgroundColor: theme?.palette.background.default,
+  backgroundColor: theme.palette.background.default,
 }));
 
 export const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   padding: '10px 24px',
-  backgroundColor: theme?.palette.background.default,
+  backgroundColor: theme.palette.background.default,
 }));

packages/ui-components/src/components/Repository/Repository.tsx

@@ -15,7 +15,7 @@ import { Git } from '../Icons';
 import LinkExternal from '../LinkExternal';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
@@ -39,7 +39,7 @@ const RepositoryAvatar = styled(Avatar)({
 
 const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const url = packageMeta?.latest?.repository?.url;
   if (!url || !urlUtils.isURL(url)) {
     return null;

packages/ui-components/src/components/Search/SearchItem.tsx

@@ -28,19 +28,19 @@ const Wrapper = styled.div({
 
 export const Description = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   display: 'none',
-  color: theme?.palette?.greyLight2,
+  color: theme.palette.greyLight2,
   lineHeight: '1.5rem',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   alignItems: 'center',
   overflow: 'hidden',
   paddingLeft: theme.spacing(),
-  fontSize: theme?.fontSize.ssm,
+  fontSize: theme.fontSize.ssm,
-  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {
     display: 'block',
     width: '300px',
   },
-  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
+  [`@media (min-width: ${theme.breakPoints.large}px)`]: {
     display: 'block',
     width: '500px',
   },
@@ -57,11 +57,11 @@ const NameGroup = styled.span({
 
 const Name = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   fontWeight: '700',
-  fontSize: theme?.fontSize.sm,
+  fontSize: theme.fontSize.sm,
 }));
 
 const Version = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  fontSize: theme?.fontSize.ssm,
+  fontSize: theme.fontSize.ssm,
 }));
 
 const SearchItem: React.FC<SearchItemProps> = ({

packages/ui-components/src/components/Search/styles.ts

@@ -14,7 +14,7 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => (
       border: 'none',
     },
     ':after': {
-      borderColor: props.theme?.palette.white,
+      borderColor: props.theme.palette.white,
     },
     ':hover:before': {
       content: 'none',
@@ -23,19 +23,19 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => (
       content: 'none',
       transform: 'scaleX(1)',
     },
-    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
+    [`@media screen and (min-width: ${props.theme.breakPoints.medium}px)`]: {
       ':hover:after': {
         content: "''",
       },
     },
   },
   '& .MuiInputBase-input': {
-    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
+    [`@media screen and (min-width: ${props.theme.breakPoints.medium}px)`]: {
-      color: props.theme?.palette.white,
+      color: props.theme.palette.white,
     },
   },
 }));
 
 export const StyledInputAdornment = styled(InputAdornment)<{ theme?: Theme }>((props) => ({
-  color: props.theme?.palette.white,
+  color: props.theme.palette.white,
 }));

packages/ui-components/src/components/SideBarTitle/SideBarTitle.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 
 const Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({
-  marginLeft: theme?.spacing(1),
+  marginLeft: theme.spacing(1),
 }));
 
 const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
@@ -93,6 +93,6 @@ const StyledHeading = styled(Heading)({
 });
 
 const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.text.secondary,
+  color: theme.palette.text.secondary,
-  fontSize: theme?.fontSize.sm,
+  fontSize: theme.fontSize.sm,
 }));

packages/ui-components/src/components/UpLinks/styles.ts

@@ -5,13 +5,13 @@ import Typography from '@mui/material/Typography';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
 }));
 
 export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
   borderBottom: `1px dotted ${
-    theme?.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+    theme.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
   } `,
   whiteSpace: 'nowrap',
   height: '0.5em',
@@ -20,6 +20,6 @@ export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
 
 export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
-  color: theme?.palette.mode == 'light' ? theme?.palette.black : theme?.palette.white,
+  color: theme.palette.mode == 'light' ? theme.palette.black : theme.palette.white,
   opacity: 0.6,
 }));

packages/ui-components/src/components/Versions/HistoryList.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Theme } from '../../Theme';
 import { useConfig } from '../../providers';
 import { Time, Versions } from '../../types/packageMeta';
 import { Route, utils } from '../../utils';
@@ -31,7 +32,7 @@ export function filterDeprecated(versions: Versions) {
 const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
   const { t } = useTranslation();
   const { configOptions } = useConfig();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
   const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;
 

packages/ui-components/src/components/Versions/Versions.tsx

@@ -26,7 +26,7 @@ export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
 const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
   const { t } = useTranslation();
   const { configOptions } = useConfig();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;
 
   const [packageVersions, setPackageVersions] = useState(versions);

packages/ui-components/src/components/Versions/styles.ts

@@ -6,7 +6,7 @@ import { Theme } from '../../Theme';
 export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
   borderBottom: `1px dotted ${
-    theme?.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+    theme.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
   } `,
   whiteSpace: 'nowrap',
   height: '0.5em',
@@ -16,5 +16,5 @@ export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
 export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
   opacity: 0.6,
-  color: theme?.palette.mode == 'light' ? theme?.palette.black : theme?.palette.white,
+  color: theme.palette.mode == 'light' ? theme.palette.black : theme.palette.white,
 }));

packages/ui-components/src/sections/Footer/Footer.tsx

@@ -92,7 +92,7 @@ const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   gridTemplateColumns: 'repeat(10, max-content)',
   gridGap: theme.spacing(0, 1),
   position: 'absolute',
-  background: theme?.palette.greyAthens,
+  background: theme.palette.greyAthens,
   padding: '1px 4px',
   borderRadius: 3,
   height: 20,
@@ -106,7 +106,7 @@ const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
     left: -4,
     marginLeft: -5,
     border: '5px solid',
-    borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`,
+    borderColor: `${theme.palette.greyAthens} transparent transparent transparent`,
     transform: 'rotate(90deg)',
   },
 }));

packages/ui-components/src/sections/Footer/styles.ts

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 import { Theme } from '../../';
 
 export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.mode === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
+  background: theme.palette.mode === 'light' ? theme.palette.snow : theme.palette.cyanBlue,
-  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
+  borderTop: `1px solid ${theme.palette.greyGainsboro}`,
-  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
+  color: theme.palette.mode === 'dark' ? theme.palette.white : theme.palette.nobel01,
   fontSize: '14px',
   padding: '20px',
 }));
@@ -17,13 +17,13 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   paddingLeft: 16,
   paddingRight: 16,
   width: '100%',
-  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {
     minWidth: 400,
     maxWidth: 800,
     margin: 'auto',
     justifyContent: 'space-between',
   },
-  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
+  [`@media (min-width: ${theme.breakPoints.large}px)`]: {
     maxWidth: 1240,
   },
 }));
@@ -31,7 +31,7 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
 export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   alignItems: 'center',
   display: 'none',
-  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {
     display: 'flex',
   },
   marginLeft: 1,
@@ -43,6 +43,6 @@ export const Right = styled(Left)({
 });
 
 export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.love,
+  color: theme.palette.love,
   padding: '0 5px',
 }));

packages/ui-components/src/sections/Header/HeaderSettingsDialog.tsx

@@ -43,7 +43,7 @@ function TabPanel(props) {
 
 const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   padding: '10px 0',
-  backgroundColor: theme?.palette.background.default,
+  backgroundColor: theme.palette.background.default,
 }));
 
 const HeaderSettingsDialog: React.FC<Props> = ({ onCloseDialog, isOpen }) => {

packages/ui-components/src/sections/Header/LanguageSwitch.tsx

@@ -12,9 +12,9 @@ import { Theme, useLanguage } from '../../';
 
 export const CardSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {
   return {
-    backgroundColor: theme?.palette?.grey['600'],
+    backgroundColor: theme.palette.grey['600'],
     opacity: '0.9',
-    color: theme?.palette?.error.contrastText,
+    color: theme.palette.error.contrastText,
     fontWeight: 'bold',
   };
 });
@@ -23,7 +23,7 @@ export const CardUnSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {
   return {
     cursor: 'pointer',
     ':hover': {
-      backgroundColor: theme?.palette.greyGainsboro,
+      backgroundColor: theme.palette.greyGainsboro,
     },
   };
 });

packages/ui-components/src/sections/Header/RegistryInfoContent/styles.ts

@@ -4,7 +4,7 @@ import { Theme } from '../../../';
 
 export const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   paddingBottom: '10px',
-  backgroundColor: theme?.palette.background.default,
+  backgroundColor: theme.palette.background.default,
 }));
 
 export const Description = styled('div')<{ theme?: Theme }>(() => ({

packages/ui-components/src/sections/Header/styles.ts

@@ -19,15 +19,15 @@ export const Greetings = styled('span')({
 export const MobileNavBar = styled('div')<{ theme?: Theme }>((props) => ({
   alignItems: 'center',
   display: 'flex',
-  borderBottom: `1px solid ${props.theme?.palette.greyLight}`,
+  borderBottom: `1px solid ${props.theme.palette.greyLight}`,
   padding: '8px',
   position: 'relative',
 }));
 
 export const InnerMobileNavBar = styled('div')<{ theme?: Theme }>((props) => ({
   borderRadius: '4px',
-  backgroundColor: props.theme?.palette.greyLight,
+  backgroundColor: props.theme.palette.greyLight,
-  color: props.theme?.palette.white,
+  color: props.theme.palette.white,
   width: '100%',
   padding: '0 5px',
   margin: '0 10px 0 0',
@@ -46,12 +46,12 @@ export const SearchWrapper = styled('div')({
 
 export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
-    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
-  color: theme?.palette.white,
+  color: theme.palette.white,
   minHeight: 60,
   display: 'flex',
   justifyContent: 'center',
-  [`@media (max-width: ${theme?.breakPoints.xsmall}px)`]: css`
+  [`@media (max-width: ${theme.breakPoints.xsmall}px)`]: css`
     ${InfoButton} {
       display: none;
     }
@@ -62,7 +62,7 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
       display: none;
     }
   `,
-  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: css`
+  [`@media (min-width: ${theme.breakPoints.medium}px)`]: css`
     ${SearchWrapper} {
       display: flex;
     }
@@ -73,12 +73,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
       display: none;
     }
   `,
-  [`@media (min-width: ${theme?.breakPoints.large}px)`]: css`
+  [`@media (min-width: ${theme.breakPoints.large}px)`]: css`
     ${InnerNavBar} {
       padding: 0 16px;
     }
   `,
-  [`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css`
+  [`@media (min-width: ${theme.breakPoints.xlarge}px)`]: css`
     ${InnerNavBar} {
       max-width: 1240px;
       width: 100%;