@variocube/app-ui 1.14.0

package/src/localization.tsx

@@ -0,0 +1,404 @@
+import deepmerge from "deepmerge";
+import Mustache from "mustache";
+import * as React from "react";
+import {createContext, PropsWithChildren, useCallback, useContext, useEffect, useState} from "react";
+import {getNavigatorLanguages} from "./getNavigatorLanguages";
+import {useStorage} from "./storage";
+import {defined} from "./utils";
+
+/**
+ * Type for a message object (content of a translation file).
+ */
+export interface MessageObject {
+	[key: string]: string | MessageObject;
+}
+
+/**
+ * Function that is called when a key is missing.
+ */
+export type MissingFunc = (key: string) => string;
+
+/**
+ * Localization context options
+ */
+export interface LocalizationContextOptions<T extends MessageObject> {
+	/**
+	 * Loads the message object for the given language.
+	 *
+	 * This will typically dynamically import a JSON file containing the messages.
+	 * @param language The language to load
+	 */
+	load: (language: string) => Promise<T>;
+
+	/**
+	 * The fallback language to use, when the user's preferred languages cannot be loaded.
+	 */
+	fallback: string;
+
+	/**
+	 * A function that is called when a key could not be found.
+	 * Default: a function that prints a warning to the console and returns an empty string.
+	 * @param key The key that could not be found.
+	 */
+	missing?: "fallback" | MissingFunc;
+}
+
+/**
+ * Sets the current language.
+ */
+type SetLanguageFunc = (language: string | null) => any;
+
+/**
+ * Returns the message associated with `key` in the current language.
+ * Resolves placeholders with the values specified in `context`.
+ */
+export type TFunc<T> = (key: Leaves<T>, context?: Record<string, any>) => string;
+
+/**
+ * Returns whether the specified key exists in the current language.
+ */
+type THasKeyFunc<T> = (key: string) => key is Leaves<T>;
+
+/**
+ * Returns the value property `name` of the object associated with `key` in the current language.
+ */
+type EFunc<T> = (key: Branches<T>, name: string) => string;
+
+type SFunc<T, P extends Branches<T>> = (prefix: P) => TFunc<TypeOfPath<T, P>>;
+
+/**
+ * Helper type for defining a function that resolves labels of a component.
+ */
+export type Labels<Key extends string> = TFunc<Record<Key, string>>;
+
+/**
+ * The object returned by `useLocalization`.
+ */
+export interface Localization<T extends MessageObject> {
+	/**
+	 * Returns the message associated with `key` in the current language.
+	 * Resolves placeholders with the values specified in `context`.
+	 */
+	t: TFunc<T>;
+
+	/**
+	 * Returns if the current key can be associated with a message.
+	 */
+	hasKey: THasKeyFunc<T>;
+
+	/**
+	 * Returns the value property `name` of the object associated with `key` in the current language.
+	 */
+	e: EFunc<T>;
+
+	/**
+	 * Returns a t-function for the subset of keys under the specified prefix.
+	 */
+	s: SFunc<T, Branches<T>>;
+
+	/**
+	 * Returns the currently used language.
+	 */
+	language: string;
+
+	/**
+	 * Sets the current language.
+	 */
+	setLanguage: SetLanguageFunc;
+}
+
+interface LocalizationContextType<T extends MessageObject> {
+	messages: T | undefined;
+	language: string;
+	setLanguage: SetLanguageFunc;
+	fallbackMessages: T | undefined;
+}
+
+interface LocalizationProviderProps<T extends MessageObject> {
+	language: string | null;
+	onChangeLanguage: SetLanguageFunc;
+	overrides?: Record<string, Partial<T>>;
+}
+
+/**
+ * The key in the browser's storage, where the user-selected language is stored.
+ */
+const LANGUAGE_STORAGE_KEY = "variocube-language-v2";
+
+/**
+ * Creates a typed localization context.
+ *
+ * The language context is created within this function in order to enable correct typings on
+ * the message object and the accessor functions.
+ * @param options The options
+ */
+export function createLocalizationContext<T extends MessageObject>(options: LocalizationContextOptions<T>) {
+	const {load, fallback, missing = defaultMissing} = options;
+
+	/**
+	 * Returns a promise to the messages for the first language of the given list of languages
+	 * that could be successfully loaded.
+	 * @param languages The languages to try loading
+	 */
+	const loadBestMatch = async (languages: (string | null)[]) => {
+		for (const language of processLanguageList(languages)) {
+			try {
+				const messages = await load(language);
+				if (messages) {
+					document.documentElement.setAttribute("lang", language);
+					return {messages, language};
+				}
+			} catch (error) {
+				// try next language
+			}
+		}
+		throw new Error("Could not load any language. This is likely a configuration error.");
+	};
+
+	/**
+	 * The React context.
+	 */
+	const LocalizationContext = createContext<LocalizationContextType<T>>({
+		messages: undefined,
+		language: fallback,
+		setLanguage: () => void 0,
+		fallbackMessages: undefined,
+	});
+
+	/**
+	 * Localization provider component.
+	 */
+	const LocalizationProvider = (props: PropsWithChildren<LocalizationProviderProps<T>>) => {
+		const {children, language, onChangeLanguage, overrides} = props;
+
+		const [loaded, setLoaded] = useState<{ messages: T; language: string }>();
+
+		// The context value
+		const [value, setValue] = useState<LocalizationContextType<T>>({
+			messages: undefined,
+			language: fallback,
+			setLanguage: onChangeLanguage,
+			fallbackMessages: undefined,
+		});
+
+		// Loads the fallback messages if required by the missing option
+		useEffect(() => {
+			if (missing == "fallback") {
+				load(fallback)
+					.then(fallbackMessages => setValue(v => ({...v, fallbackMessages})))
+					.catch(error => console.error(error));
+			}
+		}, []);
+
+		// Loads the best matching language and stores the result in `loaded`.
+		useEffect(() => {
+			loadBestMatch([language, ...getNavigatorLanguages(), fallback])
+				.then(setLoaded)
+				.catch(error => console.error(error));
+		}, [language]);
+
+		// Update context value when `loaded` or `overrides` change.
+		useEffect(() => {
+			if (loaded) {
+				const {language, messages} = loaded;
+
+				setValue(v => ({
+					...v,
+					language,
+					messages: deepmerge(messages, (overrides && overrides[language]) ?? {}),
+				}));
+			}
+		}, [overrides, loaded]);
+
+		return (
+			<LocalizationContext.Provider value={value}>
+				{children}
+			</LocalizationContext.Provider>
+		);
+	};
+
+	/**
+	 * Localization provider that stores the current language in the local storage.
+	 */
+	const StorageLocalizationProvider = (
+		{children, overrides}: PropsWithChildren<Pick<LocalizationProviderProps<T>, "overrides">>,
+	) => {
+		// The user defined language, or null if user did not manually select a language
+		const [userDefinedLanguage, setUserDefinedLanguage] = useStorage<string | null>(LANGUAGE_STORAGE_KEY, null);
+
+		return (
+			<LocalizationProvider
+				language={userDefinedLanguage}
+				onChangeLanguage={setUserDefinedLanguage}
+				overrides={overrides}
+			>
+				{children}
+			</LocalizationProvider>
+		);
+	};
+
+	/**
+	 * Returns accessors to the currently used language.
+	 */
+	const useLocalization = () => {
+		const value = useContext(LocalizationContext);
+		if (!value) {
+			throw new Error(
+				"Cannot find localization context. Are you missing a LocalizationProvider in your component tree?",
+			);
+		}
+		const {messages, language, setLanguage, fallbackMessages} = value;
+
+		const handleMissing = useCallback((key: Leaves<T>) => {
+			if (missing == "fallback") {
+				return fallbackMessages ? getString(fallbackMessages, key) : undefined;
+			}
+			return missing(key);
+		}, [fallbackMessages]);
+
+		const t = useCallback((key: Leaves<T>, context?: Record<string, any>) => {
+			if (messages) {
+				const localized = getString(messages, key) ?? handleMissing(key);
+				if (localized && context) {
+					return Mustache.render(localized, context);
+				}
+				return localized;
+			}
+		}, [messages, handleMissing]);
+
+		function _hasKey(key: string): key is Leaves<T> {
+			return defined(messages) && defined(getString(messages, key));
+		}
+
+		const hasKey = useCallback(_hasKey, [messages]);
+
+		const e = useCallback((key: Branches<T>, name: string) => t(key + "." + name as Leaves<T>), [t]);
+
+		function _s<P extends string & keyof T>(prefix: P) {
+			return (key: string & keyof T[P]) => t(`${prefix}.${key}` as Leaves<T>);
+		}
+
+		const s = useCallback(_s, [t]);
+
+		return {
+			t,
+			hasKey,
+			e,
+			s,
+			language,
+			setLanguage,
+		} as Localization<T>;
+	};
+
+	return {
+		LocalizationProvider,
+		StorageLocalizationProvider,
+		useLocalization,
+	};
+}
+
+/**
+ * Processes a list of languages:
+ *  - Skips null or empty languages
+ *  - Expands a language by adding additional entries for the language component of locale notations.
+ * Example: an entry "en-US" turns into two entries "en-US" and "en".
+ * @param languages
+ */
+function processLanguageList(languages: (string | null)[]) {
+	const expanded = [];
+	for (const language of languages) {
+		if (language) {
+			// push the original language, e.g. "en-US"
+			expanded.push(language);
+			// push the language only, e.g.
+			const languageOnly = language.split("-").shift();
+			if (languageOnly && languageOnly != language) {
+				expanded.push(languageOnly);
+			}
+		}
+	}
+	// avoid duplicates
+	return new Set(expanded);
+}
+
+/**
+ * Default handler for missing keys.
+ * @param key The missing key.
+ */
+function defaultMissing(key: string) {
+	console.warn("Missing translation key", key);
+	return "";
+}
+
+/*
+ * Prepare for some heavy TypeScript shenanigans.
+ * This enables type checking in the `t()` function and friends.
+ *
+ * Inspired by:
+ * https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object/58436959#58436959
+ */
+
+/**
+ * Concatenates two strings with a dot in the middle, unless the last string is empty.
+ * So Join<"a","b.c"> is "a.b.c" while Join<"a",""> is "a".
+ */
+type Join<K, P> = K extends string ? P extends string ? `${K}${"" extends P ? "" : "."}${P}`
+	: never
+	: never;
+
+/**
+ * Helper type for reduction the depth type param.
+ */
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]];
+
+/**
+ * Our max depth.
+ */
+type MaxDepth = 5;
+
+/**
+ * Returns a union of all paths for a given type T
+ */
+type Paths<T, D extends number = MaxDepth> = [D] extends [never] ? never
+	: T extends object ? {
+			[K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K], Prev[D]>>
+				: never;
+		}[keyof T]
+	: "";
+
+/**
+ * Returns a union of all the leaf paths for a given type T
+ */
+type Leaves<T, D extends number = MaxDepth> = [D] extends [never] ? never
+	: T extends object ? { [K in keyof T]-?: Join<K, Leaves<T[K], Prev[D]>> }[keyof T]
+	: "";
+
+/**
+ * Returns a union of all branch paths for a given type T
+ */
+type Branches<T> = Exclude<Paths<T>, Leaves<T>>;
+
+/**
+ * Returns the type of the property at the specified path P for a given Type T
+ */
+type TypeOfPath<T, P extends string> = T extends object ? P extends keyof T ? T[P]
+	: P extends `${infer First}.${infer Rest}` ? First extends keyof T ? TypeOfPath<T[First], Rest>
+		: never
+	: never
+	: never;
+
+function getString<T extends MessageObject>(obj: T, key: string) {
+	return getKey(obj, key)?.toString();
+}
+
+function getKey<T extends MessageObject>(obj: T, key: string) {
+	return key.split(".")
+		.reduce((obj, key) => obj && obj[key] as any, obj) as any as (string | MessageObject | undefined);
+}
+
+/**
+ * Creates a simple TFunc from an object.
+ */
+export function createSimpleTFunc<T extends MessageObject>(obj: T): TFunc<T> {
+	return (key: Leaves<T>) => getString(obj, key) ?? "key not found";
+}

package/src/logo/Logo.tsx

@@ -0,0 +1,35 @@
+import {useCustomLogo} from "../VCThemeProvider";
+import React from "react";
+import {Box, BoxProps} from "@mui/material";
+import {VCLogo} from "./VCLogo";
+
+interface LogoProps extends Omit<BoxProps, "height"> {
+	height?: number | string | undefined;
+}
+
+export function Logo(props: LogoProps) {
+	const {height= 52, ...rest} = props;
+	const customLogo = useCustomLogo();
+	if (customLogo) {
+		const {url, paddingX, paddingY} = customLogo;
+		return (
+			<Box {...rest}>
+				<Box
+					component="img"
+					src={url}
+					px={paddingX ?? 0}
+					py={paddingY ?? 0}
+					height={height}
+					width="auto"
+				/>
+			</Box>
+		)
+	}
+	else {
+		return (
+			<Box {...rest}>
+				<VCLogo height={height} width="auto"/>
+			</Box>
+		);
+	}
+}

package/src/logo/VCAppLogo.tsx

@@ -0,0 +1,28 @@
+import {Box, BoxProps} from "@mui/material";
+import {VCLogoIcon} from "./VCLogoIcon";
+import React from "react";
+
+interface VCAppLogoProps extends BoxProps {
+    appName?: string;
+}
+
+export function VCAppLogo({appName, ...props}: VCAppLogoProps) {
+    return (
+        <Box {...props}>
+            <Box sx={{display: "flex", flexFlow: "row nowrap", alignItems: "center"}}>
+                <VCLogoIcon width="auto" height="32" display="block"/>
+                {appName && (
+                    <Box sx={{
+                        lineHeight: 1,
+                        fontSize: "20px",
+                        fontWeight: 900,
+                        textTransform: "uppercase",
+                        marginLeft: "8px",
+                    }}>
+                        {appName}
+                    </Box>
+                )}
+            </Box>
+        </Box>
+    )
+}

package/src/logo/VCLogo.tsx

@@ -0,0 +1,56 @@
+import React, {SVGProps} from "react";
+import {useTheme} from "@mui/material";
+
+export function VCLogo(props: SVGProps<SVGSVGElement>) {
+    const theme = useTheme();
+    if (theme.palette.mode == "light") {
+        return <VCLogoBlueOrange {...props}/>;
+    }
+    else {
+        return <VCLogoWhite {...props}/>;
+    }
+}
+
+export const VCLogoBlueOrange = (props: SVGProps<SVGSVGElement>) => (
+    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 260 52"  xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve"
+        style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            strokeLinejoin: "round",
+            strokeMiterlimit: 2,
+        }}
+        width={260}
+        height={52}
+        {...props}
+    >
+        <path style={{ fill: "#05164d", }} d="M130 12.75h6.71v25.51H130z" />
+        <path d="M95.11 12.75h-8.28l-8.08 25.49h6.66l1.49-5.53h7.61l1.48 5.53h7.14l-8.02-25.49Zm-7 15.18 2.48-9.35h.32l2.45 9.35h-5.25ZM121.8 28.45a7.831 7.831 0 0 0 4.54-7.21c0-5-3.2-8.49-9.63-8.49h-11.08v25.49h6.61v-8.89h3l4.24 8.89h7.38l-5.06-9.79Zm-6.13-3.74h-3.43v-7h3.5a3.447 3.447 0 0 1 3.702 3.419l-.002.111c0 2.33-1.59 3.47-3.77 3.47ZM152.04 12.3c-7.4 0-11.61 4.62-11.61 11.87v2.8c0 7.18 4.19 11.74 11.59 11.74 7.4 0 11.59-4.56 11.59-11.74v-2.8c0-7.21-4.17-11.87-11.57-11.87Zm4.73 14.71c0 4.19-1.89 6.32-4.75 6.32-2.86 0-4.78-2.09-4.78-6.32v-2.93c0-4.19 1.89-6.38 4.75-6.38 2.86 0 4.75 2.19 4.75 6.38l.03 2.93ZM173.14 26.84c0 4.27 1.7 6.38 4.51 6.38 2.81 0 4.15-2 4.15-4.54h6.37v.87c0 5.24-4.17 9.16-10.62 9.16-7.19 0-11.25-4.54-11.25-11.9v-2.57c0-7.39 4.08-11.95 11.25-11.95 6.4 0 10.62 3.91 10.62 9.31v.84h-6.37c0-2.52-1.44-4.65-4.19-4.65-2.75 0-4.47 2.19-4.47 6.45v2.6ZM198.24 28.58c0 3.12 1.72 4.58 4.19 4.58 2.47 0 4.2-1.49 4.2-4.58V12.75h6.61v16.77c0 5.55-4.13 9.19-10.89 9.19-6.76 0-10.88-3.64-10.88-9.19V12.75h6.77v15.83ZM232.71 24.86v-.3a5.372 5.372 0 0 0 4.64-5.55c0-4-3.25-6.26-8-6.26h-11.61v25.49h11.93c4.8 0 8.86-2.54 8.86-7.25.072-3.273-2.547-6.033-5.82-6.13Zm-8.33-7.47h3.23c2 0 3.21 1 3.21 2.78 0 1.78-1.14 2.84-3.64 2.84h-2.8v-5.62Zm3.1 16.24h-3.1v-6.45h3.51c2.5 0 3.83 1.25 3.83 3.23s-1.48 3.22-4.24 3.22ZM259.37 38.26h-17.48V12.75h17.48V18h-10.84v5.05h10.15v4.82h-10.15v5.14h10.84v5.25ZM69.13 25.9l3.38 12.41h-6.86L56.94 12.7h8.59l3.6 13.2ZM75 31.24l6.31-18.54h-8.59l-1.38 5.09L75 31.24ZM14.24 46.48l29.94-17.24v9L22.09 51.02l-7.85-4.54Zm-4.25-2.45 34.19-19.79v-9L2.12 39.49l7.87 4.54Z"
+            style={{ fill: "#05164d", fillRule: "nonzero", }}
+        />
+        <path d="M0 35.81V15.24l17.84 10.27L0 35.81Zm34.24-19.75 7.86-4.53L22.1 0l-7.86 4.53 20 11.53ZM9.98 6.99l-7.86 4.53 20 11.53 7.86-4.53-20-11.53Z"
+            style={{ fill: "#ff6a00", fillRule: "nonzero", }}
+        />
+    </svg>
+)
+export const VCLogoWhite = (props: SVGProps<SVGSVGElement>) => (
+    <svg viewBox="0 0 260 52" xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve"
+        style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            strokeLinejoin: "round",
+            strokeMiterlimit: 2,
+			display: "block"
+        }}
+        width={260}
+        height={52}
+        {...props}
+    >
+        <path style={{ fill: "#fff", }} d="M130 12.75h6.71v25.51H130z" />
+        <path d="M95.11 12.75h-8.28l-8.08 25.49h6.66l1.49-5.53h7.61l1.48 5.53h7.14l-8.02-25.49Zm-7 15.18 2.48-9.35h.32l2.45 9.35h-5.25ZM121.8 28.45a7.831 7.831 0 0 0 4.54-7.21c0-5-3.2-8.49-9.63-8.49h-11.08v25.49h6.61v-8.89h3l4.24 8.89h7.38l-5.06-9.79Zm-6.13-3.74h-3.43v-7h3.5a3.447 3.447 0 0 1 3.702 3.419l-.002.111c0 2.33-1.59 3.47-3.77 3.47ZM152.04 12.3c-7.4 0-11.61 4.62-11.61 11.87v2.8c0 7.18 4.19 11.74 11.59 11.74 7.4 0 11.59-4.56 11.59-11.74v-2.8c0-7.21-4.17-11.87-11.57-11.87Zm4.73 14.71c0 4.19-1.89 6.32-4.75 6.32-2.86 0-4.78-2.09-4.78-6.32v-2.93c0-4.19 1.89-6.38 4.75-6.38 2.86 0 4.75 2.19 4.75 6.38l.03 2.93ZM173.14 26.84c0 4.27 1.7 6.38 4.51 6.38 2.81 0 4.15-2 4.15-4.54h6.37v.87c0 5.24-4.17 9.16-10.62 9.16-7.19 0-11.25-4.54-11.25-11.9v-2.57c0-7.39 4.08-11.95 11.25-11.95 6.4 0 10.62 3.91 10.62 9.31v.84h-6.37c0-2.52-1.44-4.65-4.19-4.65-2.75 0-4.47 2.19-4.47 6.45v2.6ZM198.24 28.58c0 3.12 1.72 4.58 4.19 4.58 2.47 0 4.2-1.49 4.2-4.58V12.75h6.61v16.77c0 5.55-4.13 9.19-10.89 9.19-6.76 0-10.88-3.64-10.88-9.19V12.75h6.77v15.83ZM232.71 24.86v-.3a5.372 5.372 0 0 0 4.64-5.55c0-4-3.25-6.26-8-6.26h-11.61v25.49h11.93c4.8 0 8.86-2.54 8.86-7.25.072-3.273-2.547-6.033-5.82-6.13Zm-8.33-7.47h3.23c2 0 3.21 1 3.21 2.78 0 1.78-1.14 2.84-3.64 2.84h-2.8v-5.62Zm3.1 16.24h-3.1v-6.45h3.51c2.5 0 3.83 1.25 3.83 3.23s-1.48 3.22-4.24 3.22ZM259.37 38.26h-17.48V12.75h17.48V18h-10.84v5.05h10.15v4.82h-10.15v5.14h10.84v5.25ZM69.13 25.9l3.38 12.41h-6.86L56.94 12.7h8.59l3.6 13.2ZM75 31.24l6.31-18.54h-8.59l-1.38 5.09L75 31.24ZM14.24 46.48l29.94-17.24v9L22.09 51.02l-7.85-4.54Zm-4.25-2.45 34.19-19.79v-9L2.12 39.49l7.87 4.54ZM0 35.81V15.24l17.84 10.27L0 35.81Zm34.24-19.75 7.86-4.53L22.1 0l-7.86 4.53 20 11.53ZM9.98 6.99l-7.86 4.53 20 11.53 7.86-4.53-20-11.53Z"
+            style={{
+                fill: "#fff",
+                fillRule: "nonzero",
+            }}
+        />
+    </svg>
+)

package/src/logo/VCLogoIcon.tsx

@@ -0,0 +1,55 @@
+import React, {SVGProps} from "react";
+import {useTheme} from "@mui/material";
+
+export function VCLogoIcon(props: SVGProps<SVGSVGElement>) {
+    const theme = useTheme();
+    if (theme.palette.mode == "light") {
+        return <VCLogoIconOrangeBlue {...props}/>;
+    }
+    else {
+        return <VCLogoIconWhite {...props}/>;
+    }
+}
+
+export const VCLogoIconOrangeBlue = (props: SVGProps<SVGSVGElement>) => (
+    <svg viewBox="0 0 74 86" xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve"
+        style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            strokeLinejoin: "round",
+            strokeMiterlimit: 2,
+        }}
+        {...props}
+    >
+        <path d="M23.68 77.48 73.6 48.66v15.08l-36.82 21.3-13.1-7.56Zm-7.08-4.09 57-32.92V25.35L3.5 65.83l13.1 7.56Z"
+            style={{
+                fill: "#05164d",
+                fillRule: "nonzero",
+            }}
+        />
+        <path d="M0 59.74V25.35l29.69 17.17L0 59.74Zm57-33 13.1-7.56L36.78 0l-13.1 7.56L57 26.74ZM16.6 11.65 3.5 19.21l33.28 19.22 13.1-7.56L16.6 11.65Z"
+            style={{
+                fill: "#ff6a00",
+                fillRule: "nonzero",
+            }}
+        />
+    </svg>
+)
+export const VCLogoIconWhite = (props: SVGProps<SVGSVGElement>) => (
+    <svg viewBox="0 0 74 86" xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve"
+        style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            strokeLinejoin: "round",
+            strokeMiterlimit: 2,
+        }}
+        {...props}
+    >
+        <path d="M23.68 77.48 73.6 48.66v15.08l-36.82 21.3-13.1-7.56Zm-7.08-4.09 57-32.92V25.35L3.5 65.83l13.1 7.56ZM0 59.74V25.35l29.69 17.17L0 59.74Zm57-33 13.1-7.56L36.78 0l-13.1 7.56L57 26.74ZM16.6 11.65 3.5 19.21l33.28 19.22 13.1-7.56L16.6 11.65Z"
+            style={{
+                fill: "#fff",
+                fillRule: "nonzero",
+            }}
+        />
+    </svg>
+)

package/src/logo/V_C_LOGO.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 260 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect x="130" y="12.75" width="6.71" height="25.51" style="fill:#05164d;"/><path d="M95.11,12.75l-8.28,0l-8.08,25.49l6.66,0l1.49,-5.53l7.61,0l1.48,5.53l7.14,0l-8.02,-25.49Zm-7,15.18l2.48,-9.35l0.32,0l2.45,9.35l-5.25,0Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M121.8,28.45c2.8,-1.293 4.584,-4.127 4.54,-7.21c-0,-5 -3.2,-8.49 -9.63,-8.49l-11.08,0l-0,25.49l6.61,0l-0,-8.89l3,0l4.24,8.89l7.38,0l-5.06,-9.79Zm-6.13,-3.74l-3.43,0l0,-7l3.5,0c0.09,-0.007 0.181,-0.011 0.272,-0.011c1.881,-0 3.43,1.549 3.43,3.43c-0,0.037 -0.001,0.074 -0.002,0.111c-0,2.33 -1.59,3.47 -3.77,3.47Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M152.04,12.3c-7.4,-0 -11.61,4.62 -11.61,11.87l0,2.8c0,7.18 4.19,11.74 11.59,11.74c7.4,0 11.59,-4.56 11.59,-11.74l0,-2.8c0,-7.21 -4.17,-11.87 -11.57,-11.87Zm4.73,14.71c0,4.19 -1.89,6.32 -4.75,6.32c-2.86,0 -4.78,-2.09 -4.78,-6.32l0,-2.93c0,-4.19 1.89,-6.38 4.75,-6.38c2.86,-0 4.75,2.19 4.75,6.38l0.03,2.93Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M173.14,26.84c0,4.27 1.7,6.38 4.51,6.38c2.81,0 4.15,-2 4.15,-4.54l6.37,0l0,0.87c0,5.24 -4.17,9.16 -10.62,9.16c-7.19,0 -11.25,-4.54 -11.25,-11.9l0,-2.57c0,-7.39 4.08,-11.95 11.25,-11.95c6.4,0 10.62,3.91 10.62,9.31l0,0.84l-6.37,0c0,-2.52 -1.44,-4.65 -4.19,-4.65c-2.75,0 -4.47,2.19 -4.47,6.45l0,2.6Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M198.24,28.58c0,3.12 1.72,4.58 4.19,4.58c2.47,0 4.2,-1.49 4.2,-4.58l0,-15.83l6.61,0l0,16.77c0,5.55 -4.13,9.19 -10.89,9.19c-6.76,0 -10.88,-3.64 -10.88,-9.19l0,-16.77l6.77,-0l0,15.83Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M232.71,24.86l0,-0.3c2.738,-0.364 4.767,-2.791 4.64,-5.55c0,-4 -3.25,-6.26 -8,-6.26l-11.61,0l0,25.49l11.93,0c4.8,0 8.86,-2.54 8.86,-7.25c0.072,-3.273 -2.547,-6.033 -5.82,-6.13Zm-8.33,-7.47l3.23,-0c2,-0 3.21,1 3.21,2.78c-0,1.78 -1.14,2.84 -3.64,2.84l-2.8,-0l-0,-5.62Zm3.1,16.24l-3.1,-0l-0,-6.45l3.51,-0c2.5,-0 3.83,1.25 3.83,3.23c-0,1.98 -1.48,3.22 -4.24,3.22Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M259.37,38.26l-17.48,0l0,-25.51l17.48,0l0,5.25l-10.84,0l0,5.05l10.15,0l0,4.82l-10.15,0l0,5.14l10.84,0l0,5.25Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M69.13,25.9l3.38,12.41l-6.86,-0l-8.71,-25.61l8.59,-0l3.6,13.2Zm5.87,5.34l6.31,-18.54l-8.59,-0l-1.38,5.09l3.66,13.45Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M14.24,46.48l29.94,-17.24l0,9l-22.09,12.78l-7.85,-4.54Zm-4.25,-2.45l34.19,-19.79l0,-9l-42.06,24.25l7.87,4.54Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M0,35.81l0,-20.57l17.84,10.27l-17.84,10.3Zm34.24,-19.75l7.86,-4.53l-20,-11.53l-7.86,4.53l20,11.53Zm-24.26,-9.07l-7.86,4.53l20,11.53l7.86,-4.53l-20,-11.53Z" style="fill:#ff6a00;fill-rule:nonzero;"/></svg>

package/src/logo/V_C_LOGO_ICON.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 74 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M23.68,77.48l49.92,-28.82l0,15.08l-36.82,21.3l-13.1,-7.56Zm-7.08,-4.09l57,-32.92l0,-15.12l-70.1,40.48l13.1,7.56Z" style="fill:#05164d;fill-rule:nonzero;"/><path d="M0,59.74l0,-34.39l29.69,17.17l-29.69,17.22Zm57,-33l13.1,-7.56l-33.32,-19.18l-13.1,7.56l33.32,19.18Zm-40.4,-15.09l-13.1,7.56l33.28,19.22l13.1,-7.56l-33.28,-19.22Z" style="fill:#ff6a00;fill-rule:nonzero;"/></svg>

package/src/logo/V_C_LOGO_ICON_WHITE.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 74 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M23.68,77.48l49.92,-28.82l0,15.08l-36.82,21.3l-13.1,-7.56Zm-7.08,-4.09l57,-32.92l0,-15.12l-70.1,40.48l13.1,7.56Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M0,59.74l0,-34.39l29.69,17.17l-29.69,17.22Zm57,-33l13.1,-7.56l-33.32,-19.18l-13.1,7.56l33.32,19.18Zm-40.4,-15.09l-13.1,7.56l33.28,19.22l13.1,-7.56l-33.28,-19.22Z" style="fill:#fff;fill-rule:nonzero;"/></svg>

package/src/logo/V_C_LOGO_WHITE.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 260 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect x="130" y="12.75" width="6.71" height="25.51" style="fill:#fff;"/><path d="M95.11,12.75l-8.28,0l-8.08,25.49l6.66,0l1.49,-5.53l7.61,0l1.48,5.53l7.14,0l-8.02,-25.49Zm-7,15.18l2.48,-9.35l0.32,0l2.45,9.35l-5.25,0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M121.8,28.45c2.8,-1.293 4.584,-4.127 4.54,-7.21c-0,-5 -3.2,-8.49 -9.63,-8.49l-11.08,0l-0,25.49l6.61,0l-0,-8.89l3,0l4.24,8.89l7.38,0l-5.06,-9.79Zm-6.13,-3.74l-3.43,0l0,-7l3.5,0c0.09,-0.007 0.181,-0.011 0.272,-0.011c1.881,0 3.43,1.549 3.43,3.43c-0,0.037 -0.001,0.074 -0.002,0.111c-0,2.33 -1.59,3.47 -3.77,3.47Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M152.04,12.3c-7.4,-0 -11.61,4.62 -11.61,11.87l0,2.8c0,7.18 4.19,11.74 11.59,11.74c7.4,0 11.59,-4.56 11.59,-11.74l0,-2.8c0,-7.21 -4.17,-11.87 -11.57,-11.87Zm4.73,14.71c0,4.19 -1.89,6.32 -4.75,6.32c-2.86,0 -4.78,-2.09 -4.78,-6.32l0,-2.93c0,-4.19 1.89,-6.38 4.75,-6.38c2.86,0 4.75,2.19 4.75,6.38l0.03,2.93Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M173.14,26.84c0,4.27 1.7,6.38 4.51,6.38c2.81,0 4.15,-2 4.15,-4.54l6.37,0l0,0.87c0,5.24 -4.17,9.16 -10.62,9.16c-7.19,0 -11.25,-4.54 -11.25,-11.9l0,-2.57c0,-7.39 4.08,-11.95 11.25,-11.95c6.4,0 10.62,3.91 10.62,9.31l0,0.84l-6.37,0c0,-2.52 -1.44,-4.65 -4.19,-4.65c-2.75,0 -4.47,2.19 -4.47,6.45l0,2.6Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M198.24,28.58c0,3.12 1.72,4.58 4.19,4.58c2.47,0 4.2,-1.49 4.2,-4.58l0,-15.83l6.61,-0l0,16.77c0,5.55 -4.13,9.19 -10.89,9.19c-6.76,0 -10.88,-3.64 -10.88,-9.19l0,-16.77l6.77,-0l-0,15.83Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M232.71,24.86l0,-0.3c2.738,-0.364 4.767,-2.791 4.64,-5.55c0,-4 -3.25,-6.26 -8,-6.26l-11.61,0l0,25.49l11.93,0c4.8,0 8.86,-2.54 8.86,-7.25c0.072,-3.273 -2.547,-6.033 -5.82,-6.13Zm-8.33,-7.47l3.23,-0c2,-0 3.21,1 3.21,2.78c-0,1.78 -1.14,2.84 -3.64,2.84l-2.8,-0l-0,-5.62Zm3.1,16.24l-3.1,-0l-0,-6.45l3.51,-0c2.5,-0 3.83,1.25 3.83,3.23c-0,1.98 -1.48,3.22 -4.24,3.22Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M259.37,38.26l-17.48,0l0,-25.51l17.48,0l0,5.25l-10.84,0l0,5.05l10.15,0l0,4.82l-10.15,0l0,5.14l10.84,0l0,5.25Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M69.13,25.9l3.38,12.41l-6.86,-0l-8.71,-25.61l8.59,-0l3.6,13.2Zm5.87,5.34l6.31,-18.54l-8.59,-0l-1.38,5.09l3.66,13.45Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M14.24,46.48l29.94,-17.24l0,9l-22.09,12.78l-7.85,-4.54Zm-4.25,-2.45l34.19,-19.79l0,-9l-42.06,24.25l7.87,4.54Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M0,35.81l0,-20.57l17.84,10.27l-17.84,10.3Zm34.24,-19.75l7.86,-4.53l-20,-11.53l-7.86,4.53l20,11.53Zm-24.26,-9.07l-7.86,4.53l20,11.53l7.86,-4.53l-20,-11.53Z" style="fill:#fff;fill-rule:nonzero;"/></svg>

package/src/logo/index.tsx

@@ -0,0 +1,4 @@
+export * from "./VCLogoIcon";
+export * from "./VCLogo";
+export * from "./VCAppLogo";
+export * from "./Logo";

package/src/splash/index.tsx

@@ -0,0 +1,34 @@
+import React, {FunctionComponentElement} from "react";
+import ReactDOM from "react-dom";
+
+export function render(element: FunctionComponentElement<any> | Array<FunctionComponentElement<any>>) {
+    try {
+        ReactDOM.render(element, document.querySelector("#react-root"), removeSplash);
+    }
+    catch (error) {
+        // show the error using the class defined in the template
+        // this can obviously be improved
+        ReactDOM.render((
+            <div className="splash-error">
+                <h1>Failed to load application</h1>
+                <p>
+                    An error occurred while loading the application.
+                    Please make sure you are using a current browser version.
+                </p>
+            </div>
+        ), document.body);
+    }
+}
+
+export async function removeSplash() {
+    // wait for fonts to become ready
+    if (document.fonts) {
+        await document.fonts.ready;
+    }
+
+    const preloader = document.querySelector("#splash");
+    if (preloader) {
+        preloader.classList.add("fadeout");
+        setTimeout(() => preloader.parentNode?.removeChild(preloader), 500);
+    }
+}