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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import TextField from './TextField';

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/ThemeContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
+import { Language } from 'src/i18n/enabledLanguages';
 
-import { Language } from '../../i18n/config';
 interface Props {
   isDarkMode: boolean;
   setIsDarkMode: (isDarkMode: boolean) => void;

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/ABOUT_TRANSLATIONS.md

@@ -0,0 +1,13 @@
+## Translate UI Strings
+
+If you are willing to translate User Interfances strings, are located in the `crowdin` project which is available [here](https://crowdin.com/project/verdaccio) at `packages/plugins/src/i18n/crowdin/ui.json`.
+
+### Requirements
+
+- Need a crowdin account, use your GitHub account for fast access as an option.
+
+### Adding a new language to the UI
+
+- If the language is not available, ask in the Discord channel to enable it, that will be pretty fast.
+- After you have translated the strings, add to `packages/plugins/ui-theme/src/i18n/enabledLanguages.ts` the configuration for the new language.
+- In development mode the file must not be available since you need admin credentials to download translations, as a work around, create a folder withing the `crowdin` folder eg: `/packages/plugins/ui-theme/src/i18n/download_translations/fr-FR/ui.json` and then will be available for testing. If the language is not found, will fallback to `en-US`.

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

@@ -0,0 +1,38 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import {
+  DEFAULT_LANGUAGE,
+  LanguageConfiguration,
+  listLanguages,
+  listLanguagesAsString,
+} from './enabledLanguages';
+import { loadTranslationFile } from './loadTranslationFile';
+
+const languages = listLanguages.reduce((acc, item: LanguageConfiguration) => {
+  acc[item.lng] = {
+    translation:
+      item.lng === DEFAULT_LANGUAGE ? require(`./crowdin/ui.json`) : loadTranslationFile(item.lng),
+  };
+  return acc;
+}, {});
+
+i18n
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    // in case window.VEDACCIO_LANGUAGE is undefined,it will fall back to 'en-US'
+    lng: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.language || DEFAULT_LANGUAGE,
+    fallbackLng: DEFAULT_LANGUAGE,
+    whitelist: [...listLanguagesAsString],
+    load: 'currentOnly',
+    resources: languages,
+    debug: false,
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

package/src/i18n/crowdin/ui.json

@@ -0,0 +1,170 @@
+{
+  "copy-to-clipboard": "Copy to clipboard",
+  "author-anonymous": "Anonymous",
+  "author-unknown": "Unknown",
+  "action-bar-action": {
+    "visit-home-page": "Visit homepage",
+    "open-an-issue": "Open an issue",
+    "download-tarball": "Download tarball"
+  },
+  "dialog": {
+    "registry-info": {
+      "title": "Registry Info"
+    }
+  },
+  "header": {
+    "documentation": "Documentation",
+    "registry-info": "Registry Information",
+    "registry-info-link": "Learn more",
+    "registry-no-conf": "No configurations available",
+    "greetings": "Hi "
+  },
+  "search": {
+    "packages": "Search Packages"
+  },
+  "autoComplete": {
+    "loading": "Loading...",
+    "no-results-found": "No results found",
+    "clear": "Clear",
+    "expand": "Expand",
+    "collapse": "Collapse"
+  },
+  "tab": {
+    "uplinks": "Uplinks",
+    "versions": "Versions",
+    "dependencies": "Dependencies",
+    "readme": "Readme"
+  },
+  "uplinks": {
+    "title": "Uplinks",
+    "no-items": "{{name}} has no uplinks."
+  },
+  "versions": {
+    "current-tags": "Current Tags",
+    "version-history": "Version history",
+    "not-available": "Not available"
+  },
+  "package": {
+    "published-on": "Published on {{time}} •",
+    "version": "v{{version}}",
+    "visit-home-page": "Visit homepage",
+    "homepage": "Homepage",
+    "open-an-issue": "Open an issue",
+    "bugs": "Bugs",
+    "download": "Download {{what}}",
+    "the-tar-file": "the tar file",
+    "tarball": "Tarball"
+  },
+  "dependencies": {
+    "has-no-dependencies": "{{package}} has no dependencies.",
+    "dependency-block": "{{package}}@{{version}}"
+  },
+  "form": {
+    "username": "Username",
+    "password": "Password"
+  },
+  "form-placeholder": {
+    "username": "Your username",
+    "password": "Your strong password"
+  },
+  "form-validation": {
+    "required-field": "This field is required",
+    "required-min-length": "This field required the min length of {{length}}",
+    "unable-to-sign-in": "Unable to sign in",
+    "username-or-password-cant-be-empty": "Username or password can't be empty!"
+  },
+  "help": {
+    "title": "No Package Published Yet.",
+    "sub-title": "To publish your first package just:",
+    "first-step": "1. Login",
+    "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+    "second-step": "2. Publish",
+    "second-step-command-line": "npm publish --registry {{registryUrl}}",
+    "third-step": "3. Refresh this page"
+  },
+  "sidebar": {
+    "detail": {
+      "latest-version": "Latest v{{version}}",
+      "version": "v{{version}}"
+    },
+    "installation": {
+      "title": "Installation",
+      "install-using-yarn": "Install using yarn",
+      "install-using-yarn-command": "yarn add {{packageName}}",
+      "install-using-npm": "Install using npm",
+      "install-using-npm-command": "npm install {{packageName}}",
+      "install-using-pnpm": "Install using pnpm",
+      "install-using-pnpm-command": "pnpm install {{packageName}}"
+    },
+    "repository": {
+      "title": "Repository"
+    },
+    "author": {
+      "title": "Author"
+    },
+    "distribution": {
+      "title": "Latest Distribution",
+      "license": "License",
+      "size": "Size",
+      "file-count": "file count"
+    },
+    "maintainers": {
+      "title": "Maintainers"
+    },
+    "contributors": {
+      "title": "Contributors"
+    },
+    "engines": {
+      "npm-version": "NPM Version",
+      "node-js": "NODE JS"
+    }
+  },
+  "footer": {
+    "powered-by": "Powered by",
+    "made-with-love-on": "Made with <0>♥</0> on"
+  },
+  "button": {
+    "close": "Close",
+    "cancel": "Cancel",
+    "login": "Login",
+    "logout": "Logout",
+    "go-to-the-home-page": "Go to the home page",
+    "learn-more": "Learn More",
+    "fund-this-package": "<0>Fund</0> this package"
+  },
+  "error": {
+    "unspecific": "Something went wrong.",
+    "404": {
+      "page-not-found": "404 - Page not found",
+      "sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
+    },
+    "app-context-not-correct-used": "The app context was not used correctly",
+    "theme-context-not-correct-used": "The theme context was not used correctly",
+    "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
+  },
+  "lng": {
+    "english": "English",
+    "czech": "Czech",
+    "japanese": "Japanese",
+    "portuguese": "Portuguese",
+    "spanish": "Spanish",
+    "german": "German",
+    "chinese": "Chinese",
+    "chineseTraditional": "Chinese (Traditional)",
+    "french": "French",
+    "russian": "Russian",
+    "turkish": "Turkish",
+    "ukraine": "Ukraine",
+    "khmer": "Khmer"
+  },
+  "flag": {
+    "austria": "Austria",
+    "brazil": "Brazil",
+    "spain": "Spain",
+    "nicaragua": "Nicaragua",
+    "india": "India",
+    "china": "China",
+    "germany": "Germany",
+    "taiwan": "Taiwan"
+  }
+}