From 409494aeb652c30c899f539681c096d545e26db7 Mon Sep 17 00:00:00 2001 From: Marc Bernard <59966492+mbtools@users.noreply.github.com> Date: Tue, 8 Oct 2024 01:51:02 -0400 Subject: [PATCH] chore(ui): typing for Theme (#4890) --- .changeset/sweet-crabs-deliver.md | 5 +++++ .../ui-components/src/Theme/ResetStyles.tsx | 8 ++++---- packages/ui-components/src/Theme/theme.ts | 19 +++++++++++++++---- .../components/ActionBar/ActionBarAction.tsx | 6 +++--- .../src/components/Author/styles.ts | 2 +- .../CopyClipboard/CopyToClipBoard.tsx | 2 +- .../Dependencies/DependencyBlock.tsx | 4 ++-- .../src/components/Deprecated/Deprecated.tsx | 4 +++- .../src/components/Developers/Developers.tsx | 4 ++-- .../src/components/Developers/Title.tsx | 2 +- .../src/components/Distribution/styles.ts | 2 +- .../src/components/Engines/styles.ts | 2 +- .../src/components/Forbidden/Forbidden.tsx | 2 +- .../src/components/FundButton/FundButton.tsx | 6 +++--- .../src/components/Install/Install.tsx | 2 +- .../components/Install/InstallListItem.tsx | 3 ++- .../src/components/Keywords/Keywords.tsx | 3 ++- .../src/components/Label/Label.tsx | 2 +- .../components/Loading/Spinner/Spinner.tsx | 2 +- .../src/components/Loading/styles.ts | 2 +- .../LoginDialog/LoginDialogFormError.tsx | 6 +++--- .../LoginDialog/LoginDialogHeader.tsx | 12 ++++++------ .../src/components/Logo/Logo.tsx | 6 +++--- .../src/components/NotFound/NotFound.tsx | 2 +- .../src/components/Package/Package.tsx | 2 +- .../src/components/Package/styles.ts | 16 ++++++++-------- .../src/components/RawViewer/RawViewer.tsx | 6 ++++-- .../components/RegistryInfoDialog/styles.ts | 10 +++++----- .../src/components/Repository/Repository.tsx | 4 ++-- .../src/components/Search/SearchItem.tsx | 12 ++++++------ .../src/components/Search/styles.ts | 10 +++++----- .../components/SideBarTitle/SideBarTitle.tsx | 6 +++--- .../src/components/UpLinks/styles.ts | 6 +++--- .../src/components/Versions/HistoryList.tsx | 3 ++- .../src/components/Versions/Versions.tsx | 2 +- .../src/components/Versions/styles.ts | 4 ++-- .../src/sections/Footer/Footer.tsx | 4 ++-- .../src/sections/Footer/styles.ts | 14 +++++++------- .../sections/Header/HeaderSettingsDialog.tsx | 2 +- .../src/sections/Header/LanguageSwitch.tsx | 6 +++--- .../Header/RegistryInfoContent/styles.ts | 2 +- .../src/sections/Header/styles.ts | 18 +++++++++--------- 42 files changed, 129 insertions(+), 106 deletions(-) create mode 100644 .changeset/sweet-crabs-deliver.md diff --git a/.changeset/sweet-crabs-deliver.md b/.changeset/sweet-crabs-deliver.md new file mode 100644 index 000000000..a8a9d7d47 --- /dev/null +++ b/.changeset/sweet-crabs-deliver.md @@ -0,0 +1,5 @@ +--- +'@verdaccio/ui-components': patch +--- + +chore(ui): typing for Theme diff --git a/packages/ui-components/src/Theme/ResetStyles.tsx b/packages/ui-components/src/Theme/ResetStyles.tsx index b34fb11d2..de3cb30a2 100644 --- a/packages/ui-components/src/Theme/ResetStyles.tsx +++ b/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)`]: { - maxWidth: theme?.breakPoints.container, + [`@media screen and (min-width: ${theme.breakPoints.container}px)`]: { + maxWidth: theme.breakPoints.container, width: '100%', marginLeft: 'auto', marginRight: 'auto', diff --git a/packages/ui-components/src/Theme/theme.ts b/packages/ui-components/src/Theme/theme.ts index 9153fc3dd..0d94f191a 100644 --- a/packages/ui-components/src/Theme/theme.ts +++ b/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; +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 */ diff --git a/packages/ui-components/src/components/ActionBar/ActionBarAction.tsx b/packages/ui-components/src/components/ActionBar/ActionBarAction.tsx index 4ff7fdbd3..98c6ca200 100644 --- a/packages/ui-components/src/components/ActionBar/ActionBarAction.tsx +++ b/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'; diff --git a/packages/ui-components/src/components/Author/styles.ts b/packages/ui-components/src/components/Author/styles.ts index e43e0e57e..478065ab6 100644 --- a/packages/ui-components/src/components/Author/styles.ts +++ b/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)({ diff --git a/packages/ui-components/src/components/CopyClipboard/CopyToClipBoard.tsx b/packages/ui-components/src/components/CopyClipboard/CopyToClipBoard.tsx index b4e7fe3e4..d88922b18 100644 --- a/packages/ui-components/src/components/CopyClipboard/CopyToClipBoard.tsx +++ b/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) { diff --git a/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx b/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx index ebe2c9071..157f5127a 100644 --- a/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx +++ b/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 = ({ 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 { diff --git a/packages/ui-components/src/components/Deprecated/Deprecated.tsx b/packages/ui-components/src/components/Deprecated/Deprecated.tsx index 31943ea9d..ef7ea3583 100644 --- a/packages/ui-components/src/components/Deprecated/Deprecated.tsx +++ b/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 = ({ message }) => { - const theme = useTheme(); + const theme: Theme = useTheme(); return ( {message} diff --git a/packages/ui-components/src/components/Developers/Developers.tsx b/packages/ui-components/src/components/Developers/Developers.tsx index c0f027854..a2772934c 100644 --- a/packages/ui-components/src/components/Developers/Developers.tsx +++ b/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, - color: props.theme?.palette.white, + backgroundColor: props.theme.palette.primary.main, + color: props.theme.palette.white, })); interface Props { diff --git a/packages/ui-components/src/components/Developers/Title.tsx b/packages/ui-components/src/components/Developers/Title.tsx index f4579457c..83059f4c1 100644 --- a/packages/ui-components/src/components/Developers/Title.tsx +++ b/packages/ui-components/src/components/Developers/Title.tsx @@ -23,6 +23,6 @@ const Title: React.FC = ({ type }) => { export default Title; const StyledText = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({ - fontWeight: theme?.fontWeight.bold, + fontWeight: theme.fontWeight.bold, marginBottom: '10px', })); diff --git a/packages/ui-components/src/components/Distribution/styles.ts b/packages/ui-components/src/components/Distribution/styles.ts index 55f8526a8..5f9daf34e 100644 --- a/packages/ui-components/src/components/Distribution/styles.ts +++ b/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', })); diff --git a/packages/ui-components/src/components/Engines/styles.ts b/packages/ui-components/src/components/Engines/styles.ts index 390edbfcb..5ec34b1ae 100644 --- a/packages/ui-components/src/components/Engines/styles.ts +++ b/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', })); diff --git a/packages/ui-components/src/components/Forbidden/Forbidden.tsx b/packages/ui-components/src/components/Forbidden/Forbidden.tsx index 54a9d5455..2d8473a38 100644 --- a/packages/ui-components/src/components/Forbidden/Forbidden.tsx +++ b/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, })); diff --git a/packages/ui-components/src/components/FundButton/FundButton.tsx b/packages/ui-components/src/components/FundButton/FundButton.tsx index 0c4323d5d..0cd588dca 100644 --- a/packages/ui-components/src/components/FundButton/FundButton.tsx +++ b/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), - marginBottom: theme?.spacing(2), + marginTop: 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')({ diff --git a/packages/ui-components/src/components/Install/Install.tsx b/packages/ui-components/src/components/Install/Install.tsx index 30f67cf9d..0856b8295 100644 --- a/packages/ui-components/src/components/Install/Install.tsx +++ b/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', })); diff --git a/packages/ui-components/src/components/Install/InstallListItem.tsx b/packages/ui-components/src/components/Install/InstallListItem.tsx index fe374a710..2bbf190d5 100644 --- a/packages/ui-components/src/components/Install/InstallListItem.tsx +++ b/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 = ({ 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) { diff --git a/packages/ui-components/src/components/Keywords/Keywords.tsx b/packages/ui-components/src/components/Keywords/Keywords.tsx index 86f8ed5f0..6ee59e4f7 100644 --- a/packages/ui-components/src/components/Keywords/Keywords.tsx +++ b/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; diff --git a/packages/ui-components/src/components/Label/Label.tsx b/packages/ui-components/src/components/Label/Label.tsx index 010012fd7..b97b42854 100644 --- a/packages/ui-components/src/components/Label/Label.tsx +++ b/packages/ui-components/src/components/Label/Label.tsx @@ -16,7 +16,7 @@ interface WrapperProps { } const Wrapper = styled('div')((props) => ({ - fontWeight: props.theme?.fontWeight[props.weight], + fontWeight: props.theme.fontWeight[props.weight], textTransform: props.capitalize ? 'capitalize' : 'none', })); diff --git a/packages/ui-components/src/components/Loading/Spinner/Spinner.tsx b/packages/ui-components/src/components/Loading/Spinner/Spinner.tsx index 7a02c34a2..5649ab671 100644 --- a/packages/ui-components/src/components/Loading/Spinner/Spinner.tsx +++ b/packages/ui-components/src/components/Loading/Spinner/Spinner.tsx @@ -30,5 +30,5 @@ const Wrapper = styled('div')>(({ 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, })); diff --git a/packages/ui-components/src/components/Loading/styles.ts b/packages/ui-components/src/components/Loading/styles.ts index 5701982f7..c24a91d88 100644 --- a/packages/ui-components/src/components/Loading/styles.ts +++ b/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', })); diff --git a/packages/ui-components/src/components/LoginDialog/LoginDialogFormError.tsx b/packages/ui-components/src/components/LoginDialog/LoginDialogFormError.tsx index fc63595b1..00cb2a6dc 100644 --- a/packages/ui-components/src/components/LoginDialog/LoginDialogFormError.tsx +++ b/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, - color: theme?.palette.white, + backgroundColor: theme.palette.error.dark, + 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 { diff --git a/packages/ui-components/src/components/LoginDialog/LoginDialogHeader.tsx b/packages/ui-components/src/components/LoginDialog/LoginDialogHeader.tsx index 081a9d25f..1d672829d 100644 --- a/packages/ui-components/src/components/LoginDialog/LoginDialogHeader.tsx +++ b/packages/ui-components/src/components/LoginDialog/LoginDialogHeader.tsx @@ -34,15 +34,15 @@ const LoginDialogHeader: React.FC = ({ 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, - color: theme?.palette.white, + theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue, + color: theme.palette.white, })); const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({ position: 'absolute', - right: theme?.spacing() / 2, - top: theme?.spacing() / 2, - color: theme?.palette.grey[500], + right: theme.spacing() / 2, + top: theme.spacing() / 2, + color: theme.palette.grey[500], })); diff --git a/packages/ui-components/src/components/Logo/Logo.tsx b/packages/ui-components/src/components/Logo/Logo.tsx index b664d2ee1..b172afff3 100644 --- a/packages/ui-components/src/components/Logo/Logo.tsx +++ b/packages/ui-components/src/components/Logo/Logo.tsx @@ -28,10 +28,10 @@ interface Props { const Logo: React.FC = ({ 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')(({ 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], diff --git a/packages/ui-components/src/components/NotFound/NotFound.tsx b/packages/ui-components/src/components/NotFound/NotFound.tsx index 6a1f898b6..1b9c90b94 100644 --- a/packages/ui-components/src/components/NotFound/NotFound.tsx +++ b/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, })); diff --git a/packages/ui-components/src/components/Package/Package.tsx b/packages/ui-components/src/components/Package/Package.tsx index 34d6df314..b87f0f9eb 100644 --- a/packages/ui-components/src/components/Package/Package.tsx +++ b/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)` diff --git a/packages/ui-components/src/components/Package/styles.ts b/packages/ui-components/src/components/Package/styles.ts index 5191d9c64..3f85075c7 100644 --- a/packages/ui-components/src/components/Package/styles.ts +++ b/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, })); diff --git a/packages/ui-components/src/components/RawViewer/RawViewer.tsx b/packages/ui-components/src/components/RawViewer/RawViewer.tsx index 9a7888711..7606815b5 100644 --- a/packages/ui-components/src/components/RawViewer/RawViewer.tsx +++ b/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 = ({ isOpen = false, onClose, packageMeta }) => { const { t } = useTranslation(); - const theme = useTheme(); + const theme: Theme = useTheme(); return ( @@ -61,7 +63,7 @@ const RawViewer: React.FC = ({ 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'} /> diff --git a/packages/ui-components/src/components/RegistryInfoDialog/styles.ts b/packages/ui-components/src/components/RegistryInfoDialog/styles.ts index 439da06e4..65316cdfa 100644 --- a/packages/ui-components/src/components/RegistryInfoDialog/styles.ts +++ b/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, - color: theme?.palette.white, - fontSize: theme?.fontSize.lg, + theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue, + color: theme.palette.white, + 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, })); diff --git a/packages/ui-components/src/components/Repository/Repository.tsx b/packages/ui-components/src/components/Repository/Repository.tsx index 9aa9dc56a..db97acd77 100644 --- a/packages/ui-components/src/components/Repository/Repository.tsx +++ b/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; diff --git a/packages/ui-components/src/components/Search/SearchItem.tsx b/packages/ui-components/src/components/Search/SearchItem.tsx index 5606122c2..c820f3a98 100644 --- a/packages/ui-components/src/components/Search/SearchItem.tsx +++ b/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, - [`@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 = ({ diff --git a/packages/ui-components/src/components/Search/styles.ts b/packages/ui-components/src/components/Search/styles.ts index f5efd35bb..7007572f7 100644 --- a/packages/ui-components/src/components/Search/styles.ts +++ b/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)`]: { - 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, })); diff --git a/packages/ui-components/src/components/SideBarTitle/SideBarTitle.tsx b/packages/ui-components/src/components/SideBarTitle/SideBarTitle.tsx index d587faf3c..6b60b157d 100644 --- a/packages/ui-components/src/components/SideBarTitle/SideBarTitle.tsx +++ b/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, - fontSize: theme?.fontSize.sm, + color: theme.palette.text.secondary, + fontSize: theme.fontSize.sm, })); diff --git a/packages/ui-components/src/components/UpLinks/styles.ts b/packages/ui-components/src/components/UpLinks/styles.ts index 96f03b3f8..1970f3e8f 100644 --- a/packages/ui-components/src/components/UpLinks/styles.ts +++ b/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, })); diff --git a/packages/ui-components/src/components/Versions/HistoryList.tsx b/packages/ui-components/src/components/Versions/HistoryList.tsx index 5cbcf9fe8..83b06c3f0 100644 --- a/packages/ui-components/src/components/Versions/HistoryList.tsx +++ b/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 = ({ 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; diff --git a/packages/ui-components/src/components/Versions/Versions.tsx b/packages/ui-components/src/components/Versions/Versions.tsx index fcca52471..dd388b5c1 100644 --- a/packages/ui-components/src/components/Versions/Versions.tsx +++ b/packages/ui-components/src/components/Versions/Versions.tsx @@ -26,7 +26,7 @@ export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({ const Versions: React.FC = ({ 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); diff --git a/packages/ui-components/src/components/Versions/styles.ts b/packages/ui-components/src/components/Versions/styles.ts index 091629054..55775059d 100644 --- a/packages/ui-components/src/components/Versions/styles.ts +++ b/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, })); diff --git a/packages/ui-components/src/sections/Footer/Footer.tsx b/packages/ui-components/src/sections/Footer/Footer.tsx index 18d1b123b..62c36bfed 100644 --- a/packages/ui-components/src/sections/Footer/Footer.tsx +++ b/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)', }, })); diff --git a/packages/ui-components/src/sections/Footer/styles.ts b/packages/ui-components/src/sections/Footer/styles.ts index cb4b27059..0d9ef2763 100644 --- a/packages/ui-components/src/sections/Footer/styles.ts +++ b/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, - 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', })); diff --git a/packages/ui-components/src/sections/Header/HeaderSettingsDialog.tsx b/packages/ui-components/src/sections/Header/HeaderSettingsDialog.tsx index 34d842263..75cb9c24e 100644 --- a/packages/ui-components/src/sections/Header/HeaderSettingsDialog.tsx +++ b/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 = ({ onCloseDialog, isOpen }) => { diff --git a/packages/ui-components/src/sections/Header/LanguageSwitch.tsx b/packages/ui-components/src/sections/Header/LanguageSwitch.tsx index 277d97e2c..a1b0a49b5 100644 --- a/packages/ui-components/src/sections/Header/LanguageSwitch.tsx +++ b/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, }, }; }); diff --git a/packages/ui-components/src/sections/Header/RegistryInfoContent/styles.ts b/packages/ui-components/src/sections/Header/RegistryInfoContent/styles.ts index 5e209458a..2d5d82bd2 100644 --- a/packages/ui-components/src/sections/Header/RegistryInfoContent/styles.ts +++ b/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 }>(() => ({ diff --git a/packages/ui-components/src/sections/Header/styles.ts b/packages/ui-components/src/sections/Header/styles.ts index 1fca2c8e4..4764a18b9 100644 --- a/packages/ui-components/src/sections/Header/styles.ts +++ b/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, - 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%;