@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/design-tokens/ResetStyles.tsx

@@ -0,0 +1,44 @@
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
+
+import { Theme } from './theme';
+
+const resetStyles = makeStyles(({ theme }: { 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':
+      {
+        fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
+      },
+    strong: {
+      fontWeight: theme?.fontWeight.semiBold,
+    },
+    'html, body, #root': {
+      height: '100%',
+    },
+    ul: {
+      margin: 0,
+      padding: 0,
+      listStyle: 'none',
+    },
+    '.container': {
+      padding: 15,
+      flex: 1,
+      height: '100%',
+
+      [`@media screen and (min-width: ${theme?.breakPoints.container}px)`]: {
+        maxWidth: theme?.breakPoints.container,
+        width: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      },
+    },
+  },
+}));
+
+const ResetStyles: React.FC = ({ children }) => {
+  resetStyles();
+  return <>{children}</>;
+};
+
+export default ResetStyles;

package/src/design-tokens/StyleBaseline.tsx

@@ -0,0 +1,14 @@
+import CssBaseline from '@material-ui/core/CssBaseline';
+import React from 'react';
+import 'normalize.css';
+
+import ResetCSS from './ResetStyles';
+
+const StyleBaseline: React.FC = () => (
+  <>
+    <CssBaseline />
+    <ResetCSS />
+  </>
+);
+
+export default StyleBaseline;

package/src/design-tokens/ThemeContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import { Language } from 'src/i18n/enabledLanguages';
+
+interface Props {
+  isDarkMode: boolean;
+  setIsDarkMode: (isDarkMode: boolean) => void;
+  language: Language;
+  setLanguage: (language: Language) => void;
+}
+
+const ThemeContext = createContext<undefined | Props>(undefined);
+
+export default ThemeContext;

package/src/design-tokens/ThemeProvider.tsx

@@ -0,0 +1,44 @@
+import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+import i18next from 'i18next';
+import React, { useEffect, useCallback } from 'react';
+
+import { useConfig } from 'verdaccio-ui/providers/config';
+
+import loadDayJSLocale from './load-dayjs-locale';
+import { getTheme, ThemeMode } from './theme';
+import ThemeContext from './ThemeContext';
+import useLocalStorage from './useLocalStorage';
+
+const ThemeProvider: 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];
+  const { configOptions } = useConfig();
+
+  const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault);
+  const [language, setLanguage] = useLocalStorage('language', currentLanguage);
+
+  const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
+
+  const changeLanguage = useCallback(async () => {
+    await i18next.changeLanguage(language);
+  }, [language]);
+
+  const currentTheme = getTheme(themeMode, configOptions?.primaryColor);
+
+  useEffect(() => {
+    changeLanguage();
+    loadDayJSLocale();
+  }, [language, changeLanguage]);
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode, language, setLanguage }}>
+      <EmotionThemeProvider theme={currentTheme}>
+        <MuiThemeProvider theme={currentTheme}>{children}</MuiThemeProvider>
+      </EmotionThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

package/src/design-tokens/emotion.ts

@@ -0,0 +1,5 @@
+import styled, { CreateStyled } from '@emotion/styled';
+
+import { Theme } from './theme';
+
+export default styled as CreateStyled<Theme>;

package/src/design-tokens/load-dayjs-locale.ts

@@ -0,0 +1,98 @@
+import dayjs from 'dayjs';
+import i18n from 'i18next';
+
+function getFallFackLanguage(): string | undefined {
+  const fallbackLanguage = i18n.options.fallbackLng;
+
+  if (Array.isArray(fallbackLanguage)) {
+    return fallbackLanguage[0];
+  }
+
+  if (typeof fallbackLanguage === 'string') {
+    return fallbackLanguage;
+  }
+
+  return undefined;
+}
+
+function loadDayJSLocale() {
+  const fallbackLanguage = getFallFackLanguage();
+  const locale = i18n.language || fallbackLanguage;
+
+  switch (locale?.toLowerCase()) {
+    case 'pt-br':
+      {
+        require('dayjs/locale/pt-br');
+        dayjs.locale('pt-br');
+      }
+      break;
+    case 'de-de':
+      {
+        require('dayjs/locale/de');
+        dayjs.locale('de');
+      }
+      break;
+    case 'es-es':
+      {
+        require('dayjs/locale/es');
+        dayjs.locale('es');
+      }
+      break;
+    case 'fr-fr':
+      {
+        require('dayjs/locale/fr');
+        dayjs.locale('fr');
+      }
+      break;
+    case 'zh-cn':
+      {
+        require('dayjs/locale/zh-cn');
+        dayjs.locale('zh-cn');
+      }
+      break;
+    case 'ja-jp':
+      {
+        require('dayjs/locale/ja');
+        dayjs.locale('ja');
+      }
+      break;
+    case 'ru-ru':
+      {
+        require('dayjs/locale/ru');
+        dayjs.locale('ru');
+      }
+      break;
+    case 'tr-tr':
+      {
+        require('dayjs/locale/tr');
+        dayjs.locale('tr');
+      }
+      break;
+    case 'uk-ua':
+      {
+        require('dayjs/locale/uk');
+        dayjs.locale('uk');
+      }
+      break;
+    case 'zh-tw':
+      {
+        require('dayjs/locale/zh-tw');
+        dayjs.locale('zh-tw');
+      }
+      break;
+    case 'cs-cz':
+      {
+        require('dayjs/locale/cs');
+        dayjs.locale('cs');
+      }
+      break;
+    default:
+      {
+        require('dayjs/locale/en');
+        dayjs.locale('en');
+      }
+      break;
+  }
+}
+
+export default loadDayJSLocale;

package/src/design-tokens/theme.ts

@@ -0,0 +1,159 @@
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+
+import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
+
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  orange: '#CD4000',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#586069',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#3c3c3c',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: PRIMARY_COLOR,
+  secondary: '#20232a',
+  background: '#fff',
+  dodgerBlue: '#1ba1f2',
+  cyanBlue: '#253341',
+};
+
+const themeModes = {
+  light: {
+    ...colors,
+  },
+  dark: {
+    ...colors,
+    primary: '#24394e',
+    secondary: '#424242',
+    background: '#1A202C',
+  },
+};
+
+function applyPrimaryColor(mode: ThemeMode, primaryColor: string): any {
+  if (mode === 'light') {
+    themeModes['light'].primary = primaryColor;
+  }
+
+  return themeModes[mode];
+}
+
+export type ThemeMode = keyof typeof themeModes;
+
+const fontSize = {
+  xxl: 26,
+  xl: 24,
+  lg: 21,
+  md: 18,
+  default: 16,
+  sm: 14,
+};
+
+export type FontSize = keyof typeof fontSize;
+
+const fontWeight = {
+  light: 300,
+  regular: 400,
+  semiBold: 500,
+  bold: 700,
+};
+
+export type FontWeight = keyof typeof fontWeight;
+
+export const breakPoints = {
+  small: 576,
+  medium: 768,
+  large: 1024,
+  container: 1240,
+  xlarge: 1275,
+};
+
+export type BreakPoints = typeof breakPoints;
+
+const customizedTheme = {
+  fontSize,
+  fontWeight,
+  breakPoints,
+};
+
+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,
+      },
+    },
+    ...customizedTheme,
+  });
+};
+
+export type Theme = ReturnType<typeof getTheme>;
+
+declare module '@material-ui/core/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 {}
+}
+
+declare module '@material-ui/core/styles/createPalette' {
+  interface CustomPalette {
+    black: string;
+    white: string;
+    red: string;
+    orange: string;
+    greySuperLight: string;
+    greyLight: string;
+    greyLight2: string;
+    greyLight3: string;
+    greyDark: string;
+    greyDark2: string;
+    greyChateau: string;
+    greyGainsboro: string;
+    greyAthens: string;
+    eclipse: string;
+    paleNavy: string;
+    saltpan: string;
+    snow: string;
+    love: string;
+    nobel01: string;
+    nobel02: string;
+    background: string;
+    dodgerBlue: string;
+    cyanBlue: string;
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface Palette extends CustomPalette {}
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface PaletteOptions extends Partial<CustomPalette> {}
+}

package/src/design-tokens/useLocalStorage.ts

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+// based on https://usehooks.com/useLocalStorage/
+const useLocalStorage = <V>(key: string, initialValue: V) => {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error: any) {
+      // If error also return initialValue
+      // eslint-disable-next-line no-console
+      console.error('An error occurred getting a sessionStorage key', error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: V) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error: any) {
+      // eslint-disable-next-line no-console
+      console.error('An error occurred writing to sessionStorage', error);
+    }
+  };
+
+  return [storedValue, setValue];
+};
+
+export default useLocalStorage;

package/src/design-tokens/useOnClickOutside.ts

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+
+// based on https://usehooks.com/useOnClickOutside/
+function useOnClickOutside<R extends HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>(
+  ref: React.RefObject<R>,
+  handler: (event: MouseEvent | TouchEvent) => void
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}
+
+export { useOnClickOutside };

package/src/design-tokens/useTheme.ts

@@ -0,0 +1,7 @@
+import { useTheme as muiUseTheme } from '@material-ui/styles';
+
+import { Theme } from './theme';
+
+const useTheme = () => muiUseTheme<Theme>();
+
+export default useTheme;

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

@@ -0,0 +1,52 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import {
+  DEFAULT_LANGUAGE,
+  LanguageConfiguration,
+  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`);
+  }
+}
+
+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;