@verdaccio/ui-theme 6.0.0-6-next.12 → 6.0.0-6-next.13

package/src/components/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUITextField, TextFieldProps } from '@material-ui/core/TextField';
+import { default as MaterialUITextField, TextFieldProps } from '@mui/material/TextField';
 import React, { forwardRef } from 'react';
 
 // The default element type of MUI's TextField is 'div'
@@ -11,7 +11,7 @@ const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField(
   return (
     <MaterialUITextField
       {...props}
-      innerRef={ref}
+      ref={ref}
       InputProps={{
         ...InputProps,
         classes,

package/src/components/TextField/__snapshots__/TextField.test.tsx.snap

@@ -1,19 +1,232 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TextField /> component should load the component in default state 1`] = `
+.emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  vertical-align: top;
+}
+
+.emotion-1 {
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.4375em;
+  color: rgba(0, 0, 0, 0.87);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+}
+
+.emotion-1.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-1:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+
+@media (hover: none) {
+  .emotion-1:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #4b5e40;
+  border-width: 2px;
+}
+
+.emotion-1.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #d32f2f;
+}
+
+.emotion-1.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-2 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+}
+
+.emotion-2::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-2::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-2:-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-2::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-2:focus {
+  outline: 0;
+}
+
+.emotion-2:invalid {
+  box-shadow: none;
+}
+
+.emotion-2::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus:-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-2.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-2:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-2:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-3 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-4 {
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div
-  class="MuiFormControl-root MuiTextField-root"
+  class="MuiFormControl-root MuiTextField-root emotion-0"
 >
   <div
-    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+    class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-1"
   >
     <input
       aria-invalid="false"
-      class="MuiInputBase-input MuiInput-input"
+      class="MuiOutlinedInput-input MuiInputBase-input emotion-2"
       name="test"
       type="text"
       value="test"
     />
+    <fieldset
+      aria-hidden="true"
+      class="MuiOutlinedInput-notchedOutline emotion-3"
+    >
+      <legend
+        class="emotion-4"
+      >
+        <span
+          class="notranslate"
+        >
+          ​
+        </span>
+      </legend>
+    </fieldset>
   </div>
 </div>
 `;

package/src/components/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIToolbar, ToolbarProps } from '@material-ui/core/Toolbar';
+import { default as MaterialUIToolbar, ToolbarProps } from '@mui/material/Toolbar';
 import React, { forwardRef } from 'react';
 
 type ToolbarRef = HTMLDivElement;

package/src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUITooltip, TooltipProps } from '@material-ui/core/Tooltip';
+import { default as MaterialUITooltip, TooltipProps } from '@mui/material/Tooltip';
 import { TFunctionResult } from 'i18next';
 import React, { forwardRef } from 'react';
 

package/src/design-tokens/ResetStyles.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 
 import { Theme } from './theme';

package/src/design-tokens/StyleBaseline.tsx

@@ -1,6 +1,6 @@
-import CssBaseline from '@material-ui/core/CssBaseline';
-import React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
 import 'normalize.css';
+import React from 'react';
 
 import ResetCSS from './ResetStyles';
 

package/src/design-tokens/ThemeProvider.tsx

@@ -1,16 +1,19 @@
-import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
-import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+import { StyledEngineProvider, Theme, ThemeProvider } from '@mui/material/styles';
 import i18next from 'i18next';
-import React, { useEffect, useCallback } from 'react';
-
+import React, { useCallback, useEffect } from 'react';
 import { useConfig } from 'verdaccio-ui/providers/config';
 
-import loadDayJSLocale from './load-dayjs-locale';
-import { getTheme, ThemeMode } from './theme';
+import useLocalStorage from '../hooks/useLocalStorage';
 import ThemeContext from './ThemeContext';
-import useLocalStorage from './useLocalStorage';
+import loadDayJSLocale from './load-dayjs-locale';
+import { ThemeMode, getTheme } from './theme';
+
+declare module '@mui/styles/defaultTheme' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
 
-const ThemeProvider: React.FC = ({ children }) => {
+const ThemeProviderWrapper: React.FC = ({ children }) => {
   const prefersDarkMode = window.matchMedia?.('(prefers-color-scheme:dark)').matches;
   const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode || prefersDarkMode;
   const currentLanguage = i18next.languages?.[0];
@@ -34,11 +37,11 @@ const ThemeProvider: React.FC = ({ children }) => {
 
   return (
     <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode, language, setLanguage }}>
-      <EmotionThemeProvider theme={currentTheme}>
-        <MuiThemeProvider theme={currentTheme}>{children}</MuiThemeProvider>
-      </EmotionThemeProvider>
+      <StyledEngineProvider injectFirst={true}>
+        <ThemeProvider theme={currentTheme}>{children}</ThemeProvider>
+      </StyledEngineProvider>
     </ThemeContext.Provider>
   );
 };
 
-export default ThemeProvider;
+export default ThemeProviderWrapper;

package/src/design-tokens/theme.ts

@@ -1,5 +1,4 @@
-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
-
+import { adaptV4Theme, createTheme } from '@mui/material/styles';
 import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
 
 const colors = {
@@ -59,6 +58,7 @@ const fontSize = {
   md: 18,
   default: 16,
   sm: 14,
+  ssm: 12,
 };
 
 export type FontSize = keyof typeof fontSize;
@@ -92,40 +92,42 @@ type CustomizedTheme = typeof customizedTheme;
 
 export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
   const palette = applyPrimaryColor(themeMode, primaryColor);
-  return createMuiTheme({
-    typography: {
-      fontFamily: [
-        '-apple-system',
-        'BlinkMacSystemFont',
-        '"Helvetica Neue"',
-        'Arial',
-        'sans-serif',
-      ].join(','),
-    },
-    palette: {
-      type: themeMode,
-      ...palette,
-      primary: { main: palette.primary },
-      secondary: { main: palette.secondary },
-      error: { main: palette.red },
-      background: {
-        default: palette.background,
+  return createTheme(
+    adaptV4Theme({
+      typography: {
+        fontFamily: [
+          '-apple-system',
+          'BlinkMacSystemFont',
+          '"Helvetica Neue"',
+          'Arial',
+          'sans-serif',
+        ].join(','),
+      },
+      palette: {
+        mode: themeMode,
+        ...palette,
+        primary: { main: palette.primary },
+        secondary: { main: palette.secondary },
+        error: { main: palette.red },
+        background: {
+          default: palette.background,
+        },
       },
-    },
-    ...customizedTheme,
-  });
+      ...customizedTheme,
+    })
+  );
 };
 
 export type Theme = ReturnType<typeof getTheme>;
 
-declare module '@material-ui/core/styles/createMuiTheme' {
+declare module '@mui/material/styles/createMuiTheme' {
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
   interface Theme extends CustomizedTheme {}
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
-  interface ThemeOptions extends CustomizedTheme {}
+  interface DeprecatedThemeOptions extends CustomizedTheme {}
 }
 
-declare module '@material-ui/core/styles/createPalette' {
+declare module '@mui/material/styles/createPalette' {
   interface CustomPalette {
     black: string;
     white: string;

package/src/design-tokens/useTheme.ts

@@ -1,4 +1,4 @@
-import { useTheme as muiUseTheme } from '@material-ui/styles';
+import { useTheme as muiUseTheme } from '@mui/styles';
 
 import { Theme } from './theme';
 

package/src/i18n/__mocks__/loadTranslationFile.ts

@@ -0,0 +1,5 @@
+// we don't need real translations by running test
+// it always returns english by default
+export function loadTranslationFile() {
+  return require(`../crowdin/ui.json`);
+}

package/src/i18n/config.ts

@@ -7,21 +7,7 @@ import {
   listLanguages,
   listLanguagesAsString,
 } from './enabledLanguages';
-
-/**
- * In development mode translations files might be not available,
- * crowdin translations are only available in CI.
- */
-function loadTranslationFile(lng) {
-  try {
-    return require(`./download_translations/${lng}/ui.json`);
-  } catch {
-    // eslint-disable-next-line no-console
-    console.warn(`language ${lng} file not found, fallback to en-US`);
-    // in case the file is not there, fallback to en-US
-    return require(`./crowdin/ui.json`);
-  }
-}
+import { loadTranslationFile } from './loadTranslationFile';
 
 const languages = listLanguages.reduce((acc, item: LanguageConfiguration) => {
   acc[item.lng] = {

package/src/i18n/download_translations/es-ES/ui.json

@@ -100,11 +100,11 @@
       "title": "Repositorio"
     },
     "author": {
-      "title": "Author"
+      "title": "Autor"
     },
     "distribution": {
       "title": "Latest Distribution",
-      "license": "License",
+      "license": "Licencia",
       "size": "Size",
       "file-count": "file count"
     },
@@ -112,19 +112,19 @@
       "title": "Maintainers"
     },
     "contributors": {
-      "title": "Contributors"
+      "title": "Contribuidores"
     },
     "engines": {
-      "npm-version": "NPM Version",
+      "npm-version": "Versión de NPM",
       "node-js": "NODE JS"
     }
   },
   "footer": {
     "powered-by": "Powered by",
-    "made-with-love-on": "Made with <0>♥</0> on"
+    "made-with-love-on": "Hecho con <0>♥</0>"
   },
   "button": {
-    "close": "Close",
+    "close": "Cerrar",
     "cancel": "Cancel",
     "login": "Login",
     "logout": "Logout",
@@ -135,7 +135,7 @@
   "error": {
     "unspecific": "Something went wrong.",
     "404": {
-      "page-not-found": "404 - Page not found",
+      "page-not-found": "404 - Página no encontrada",
       "sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
     },
     "app-context-not-correct-used": "The app context was not used correctly",
@@ -147,24 +147,24 @@
     "czech": "Czech",
     "japanese": "Japanese",
     "portuguese": "Portuguese",
-    "spanish": "Spanish",
-    "german": "German",
-    "chinese": "Chinese",
-    "chineseTraditional": "Chinese (Traditional)",
-    "french": "French",
-    "russian": "Russian",
+    "spanish": "Español",
+    "german": "Alemán",
+    "chinese": "Chino",
+    "chineseTraditional": "Chino (Tradicional)",
+    "french": "Francés",
+    "russian": "Ruso",
     "turkish": "Turkish",
-    "ukraine": "Ukraine",
+    "ukraine": "Ucrania",
     "khmer": "Khmer"
   },
   "flag": {
     "austria": "Austria",
-    "brazil": "Brazil",
-    "spain": "Spain",
+    "brazil": "Brasil",
+    "spain": "España",
     "nicaragua": "Nicaragua",
     "india": "India",
     "china": "China",
-    "germany": "Germany",
+    "germany": "Alemania",
     "taiwan": "Taiwan"
   }
 }