@verdaccio/ui-components 4.0.0-next-8.0 → 4.0.0-next-8.2

package/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,
-  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+  fontSize: theme.fontSize.ssm,
+  [`@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> = ({

package/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)`]: {
-      color: props.theme?.palette.white,
+    [`@media screen and (min-width: ${props.theme.breakPoints.medium}px)`]: {
+      color: props.theme.palette.white,
     },
   },
 }));
 
 export const StyledInputAdornment = styled(InputAdornment)<{ theme?: Theme }>((props) => ({
-  color: props.theme?.palette.white,
+  color: props.theme.palette.white,
 }));

package/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,
-  fontSize: theme?.fontSize.sm,
+  color: theme.palette.text.secondary,
+  fontSize: theme.fontSize.sm,
 }));

package/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,
 }));

package/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;
 

package/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);

package/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,
 }));

package/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)',
   },
 }));

package/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,
-  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
-  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
+  background: theme.palette.mode === 'light' ? theme.palette.snow : theme.palette.cyanBlue,
+  borderTop: `1px solid ${theme.palette.greyGainsboro}`,
+  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',
 }));

package/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 }) => {

package/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,
     },
   };
 });

package/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 }>(() => ({

package/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,
-  color: props.theme?.palette.white,
+  backgroundColor: props.theme.palette.greyLight,
+  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,
-  color: theme?.palette.white,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
+  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%;