Add support for all languages that dayjs supports

This partially fixes issue like #96. It will "only" translate the days
of the week and month names. But with other customizations, you can get
pretty close to a fully translated generated calendar.
The UI for the configuration will be still in English, though.

Still, makes sense to unlock this feature, cause it will allow folks to
generate calendars in any language they want, including ones that are
usually very neglected or marginalized.

Author: klimeryk

src/config/i18n.js

@@ -1,10 +1,14 @@
+import dayjs from 'dayjs';
+import dayjsLocales from 'dayjs/locale.json';
+
 export function i18nConfiguration( namespaces ) {
 	return {
 		debug: process.env.NODE_ENV === 'development',
 		fallbackLng: 'en',
 		load: 'currentOnly',
-		supportedLngs: getSupportedLocales(),
+		supportedLngs: dayjsLocales.map( ( ( { key } ) => key ) ),
 		ns: namespaces,
+		lowerCaseLng: true,
 		interpolation: {
 			escapeValue: false, // not needed for react as it escapes by default
 		},
@@ -14,7 +18,11 @@ export function i18nConfiguration( namespaces ) {
 export const webpackBackend = {
 	type: 'backend',
 	read: ( language, namespace, callback ) => {
-		import( '../locales/' + language + '/' + namespace + '.json' )
+		const languageToLoad =
+			getFullySupportedLocales().includes( language )
+				? language
+				: 'en';
+		import( '../locales/' + languageToLoad + '/' + namespace + '.json' )
 			.then( ( resources ) => {
 				callback( null, resources );
 			} )
@@ -24,7 +32,7 @@ export const webpackBackend = {
 	},
 };
 
-export function getSupportedLocales() {
+export function getFullySupportedLocales() {
 	const locales = require
 		.context( '../locales', true, /app\.json$/ )
 		.keys()
@@ -37,3 +45,18 @@ export function getSupportedLocales() {
 	uniqueLocales.unshift( 'en' );
 	return uniqueLocales;
 }
+
+export function getPartiallySupportedLocales() {
+	const fullySupportedLocales = getFullySupportedLocales();
+	return dayjsLocales
+		.filter( ( { key } ) => ! fullySupportedLocales.includes( key ) )
+		.sort( ( languageA, languageB ) => languageA.name.localeCompare( languageB.name ) );
+}
+
+export function handleLanguageChange( newLanguage, firstDayOfWeek = 1 ) {
+	require( `dayjs/locale/${newLanguage}.js` );
+	dayjs.locale( newLanguage );
+	dayjs.updateLocale( newLanguage, {
+		weekStart: firstDayOfWeek,
+	} );
+}

src/configuration.jsx

@@ -52,6 +52,14 @@ class Configuration extends React.PureComponent {
 		this.pdfWorker.onmessage = this.handlePdfWorkerMessage;
 	}
 
+	componentDidMount() {
+		i18n.on( 'languageChanged', this.handleLanguageChange );
+	}
+
+	componentWillUnmount() {
+		i18n.off( 'languageChanged', this.handleLanguageChange );
+	}
+
 	componentDidUpdate( prevProps, prevState ) {
 		if ( prevState.blobUrl && prevState.blobUrl !== this.state.blobUrl ) {
 			// Each refresh generates a new blob - and it will be kept in the memory
@@ -66,6 +74,12 @@ class Configuration extends React.PureComponent {
 		this.setState( { ...hydrateFromObject( newConfig ) } );
 	};
 
+	handleLanguageChange = () => {
+		dayjs.updateLocale( i18n.language, {
+			weekStart: this.state.firstDayOfWeek,
+		} );
+	};
+
 	handleFieldChange = ( event ) => {
 		const value =
 			event.target.type !== 'checkbox'

src/index.js

@@ -1,4 +1,3 @@
-import dayjs from 'dayjs';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import React, { Suspense } from 'react';
@@ -9,7 +8,7 @@ import { initReactI18next } from 'react-i18next';
 import './index.css';
 
 import 'config/dayjs';
-import { i18nConfiguration, webpackBackend } from 'config/i18n';
+import { handleLanguageChange, i18nConfiguration, webpackBackend } from 'config/i18n';
 import Loader from 'loader';
 
 // eslint-disable-next-line import/no-named-as-default-member
@@ -22,14 +21,7 @@ i18n
 	} );
 
 i18n.on( 'languageChanged', ( newLanguage ) => {
-	// This is needed for locales like pt-BR. i18next expects pt-BR,
-	// while dayjs expects pt-br.
-	const dayjsLanguage = newLanguage.toLowerCase();
-	require( 'dayjs/locale/' + dayjsLanguage + '.js' );
-	dayjs.locale( dayjsLanguage );
-	dayjs.updateLocale( dayjsLanguage, {
-		weekStart: 1, // Week starts on Monday
-	} );
+	handleLanguageChange( newLanguage );
 } );
 
 const loadingComponent = (

src/locales/en/app.json

@@ -9,6 +9,8 @@
 	},
 	"language": {
 		"label": "Language",
+		"full": "Fully translated languages",
+		"partial": "Only days of the week and months",
 		"en": "English",
 		"cs": "Čeština",
 		"da": "Dansk",

src/navigation.jsx

@@ -8,7 +8,7 @@ import Navbar from 'react-bootstrap/Navbar';
 import Stack from 'react-bootstrap/Stack';
 import { withTranslation } from 'react-i18next';
 
-import { getSupportedLocales } from 'config/i18n';
+import { getFullySupportedLocales, getPartiallySupportedLocales } from 'config/i18n';
 import {
 	HOME_PATH,
 	CONFIGURATOR_PATH,
@@ -46,6 +46,14 @@ class Navigation extends React.Component {
 		);
 	};
 
+	renderPartialLanguageOption = ( { key, name } ) => {
+		return (
+			<option key={ key } value={ key }>
+				{name}
+			</option>
+		);
+	};
+
 	render() {
 		const { t } = this.props;
 		return (
@@ -86,7 +94,13 @@ class Navigation extends React.Component {
 								value={ this.state.language }
 								onChange={ this.handleLanguageSelection }
 							>
-								{getSupportedLocales().map( this.renderLanguageOption )}
+								<optgroup label={ t( 'language.full' ) }>
+									{getFullySupportedLocales().map( this.renderLanguageOption )}
+								</optgroup>
+								<optgroup label={ t( 'language.partial' ) }>
+									{getPartiallySupportedLocales().map(
+										this.renderPartialLanguageOption )}
+								</optgroup>
 							</Form.Select>
 						</Stack>
 					</Navbar.Collapse>

src/worker/pdf.worker.js

@@ -1,14 +1,14 @@
 /* eslint-disable no-restricted-globals */
-import dayjs from 'dayjs';
 import i18n, { changeLanguage } from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import React from 'react';
 import { initReactI18next } from 'react-i18next';
 
 import {
+	getFullySupportedLocales,
+	handleLanguageChange,
 	i18nConfiguration,
 	webpackBackend,
-	getSupportedLocales,
 } from 'config/i18n';
 import { utf8ToBase64 } from 'lib/base64';
 import { Font, pdf } from 'lib/pdf';
@@ -28,7 +28,7 @@ i18n
 	.use( initReactI18next )
 	.init( {
 		...i18nConfiguration( [ 'pdf', 'config' ] ),
-		preload: getSupportedLocales(),
+		preload: getFullySupportedLocales(),
 		react: {
 			useSuspense: false,
 		},
@@ -55,15 +55,7 @@ self.onmessage = ( { data } ) => {
 	const { firstDayOfWeek, language, isPreview } = data;
 
 	changeLanguage( language );
-
-	// This is needed for locales like pt-BR. i18next expects pt-BR,
-	// while dayjs expects pt-br.
-	const dayjsLanguage = language.toLowerCase();
-	require( `dayjs/locale/${dayjsLanguage}.js` );
-	dayjs.locale( dayjsLanguage );
-	dayjs.updateLocale( dayjsLanguage, {
-		weekStart: firstDayOfWeek,
-	} );
+	handleLanguageChange( language, firstDayOfWeek );
 
 	Font.registerHyphenationCallback( hyphenationCallback );
 	Font.register( getFontDefinition( config.fontFamily ) );