@inventreedb/ui 0.0.1

package/src/contexts/LanguageContext.tsx

@@ -0,0 +1,155 @@
+import { i18n } from '@lingui/core';
+import { t } from '@lingui/core/macro';
+import { I18nProvider } from '@lingui/react';
+import { LoadingOverlay, Text } from '@mantine/core';
+import { useEffect, useRef, useState } from 'react';
+
+import { api } from '../App';
+import { useServerApiState } from '../states/ApiState';
+import { useLocalState } from '../states/LocalState';
+import { fetchGlobalStates } from '../states/states';
+
+export const defaultLocale = 'en';
+
+/*
+ * Function which returns a record of supported languages.
+ * Note that this is not a constant, as it is used in the LanguageSelect component
+ */
+export const getSupportedLanguages = (): Record<string, string> => {
+  return {
+    ar: t`Arabic`,
+    bg: t`Bulgarian`,
+    cs: t`Czech`,
+    da: t`Danish`,
+    de: t`German`,
+    el: t`Greek`,
+    en: t`English`,
+    es: t`Spanish`,
+    es_MX: t`Spanish (Mexican)`,
+    et: t`Estonian`,
+    fa: t`Farsi / Persian`,
+    fi: t`Finnish`,
+    fr: t`French`,
+    he: t`Hebrew`,
+    hi: t`Hindi`,
+    hu: t`Hungarian`,
+    it: t`Italian`,
+    ja: t`Japanese`,
+    ko: t`Korean`,
+    lt: t`Lithuanian`,
+    lv: t`Latvian`,
+    nl: t`Dutch`,
+    no: t`Norwegian`,
+    pl: t`Polish`,
+    pt: t`Portuguese`,
+    pt_BR: t`Portuguese (Brazilian)`,
+    ro: t`Romanian`,
+    ru: t`Russian`,
+    sk: t`Slovak`,
+    sl: t`Slovenian`,
+    sr: t`Serbian`,
+    sv: t`Swedish`,
+    th: t`Thai`,
+    tr: t`Turkish`,
+    uk: t`Ukrainian`,
+    vi: t`Vietnamese`,
+    zh_Hans: t`Chinese (Simplified)`,
+    zh_Hant: t`Chinese (Traditional)`
+  };
+};
+
+export function LanguageContext({
+  children
+}: Readonly<{ children: JSX.Element }>) {
+  const [language] = useLocalState((state) => [state.language]);
+  const [server] = useServerApiState((state) => [state.server]);
+
+  useEffect(() => {
+    activateLocale(defaultLocale);
+  }, []);
+
+  const [loadedState, setLoadedState] = useState<
+    'loading' | 'loaded' | 'error'
+  >('loading');
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    activateLocale(language)
+      .then(() => {
+        if (isMounted.current) setLoadedState('loaded');
+
+        /*
+         * Configure the default Accept-Language header for all requests.
+         * - Locally selected locale
+         * - Server default locale
+         * - en-us (backup)
+         */
+        const locales: (string | undefined)[] = [];
+
+        if (language != 'pseudo-LOCALE') {
+          locales.push(language);
+        }
+
+        if (!!server.default_locale) {
+          locales.push(server.default_locale);
+        }
+
+        if (locales.indexOf('en-us') < 0) {
+          locales.push('en-us');
+        }
+
+        // Ensure that the locales are properly formatted
+        const new_locales = locales
+          .map((locale) => locale?.replaceAll('_', '-').toLowerCase())
+          .join(', ');
+
+        if (new_locales == api.defaults.headers.common['Accept-Language']) {
+          return;
+        }
+
+        // Update default Accept-Language headers
+        api.defaults.headers.common['Accept-Language'] = new_locales;
+
+        // Reload server state (and refresh status codes)
+        fetchGlobalStates();
+
+        // Clear out cached table column names
+        useLocalState.getState().clearTableColumnNames();
+      })
+      /* istanbul ignore next */
+      .catch((err) => {
+        console.error('ERR: Failed loading translations', err);
+        if (isMounted.current) setLoadedState('error');
+      });
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [language]);
+
+  if (loadedState === 'loading') {
+    return <LoadingOverlay visible={true} />;
+  }
+
+  /* istanbul ignore next */
+  if (loadedState === 'error') {
+    return (
+      <Text>
+        An error occurred while loading translations, see browser console for
+        details.
+      </Text>
+    );
+  }
+
+  // only render the i18n Provider if the locales are fully activated, otherwise we end
+  // up with an error in the browser console
+  return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
+}
+
+export async function activateLocale(locale: string) {
+  const { messages } = await import(`../locales/${locale}/messages.ts`);
+  i18n.load(locale, messages);
+  i18n.activate(locale);
+}

package/src/contexts/ThemeContext.tsx

@@ -0,0 +1,58 @@
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react';
+import { MantineProvider, createTheme } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
+import { Notifications } from '@mantine/notifications';
+import { ContextMenuProvider } from 'mantine-contextmenu';
+import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal';
+import { LicenseModal } from '../components/modals/LicenseModal';
+import { QrModal } from '../components/modals/QrModal';
+import { ServerInfoModal } from '../components/modals/ServerInfoModal';
+import { useLocalState } from '../states/LocalState';
+import { LanguageContext } from './LanguageContext';
+import { colorSchema } from './colorSchema';
+
+export function ThemeContext({
+  children
+}: Readonly<{ children: JSX.Element }>) {
+  const [userTheme] = useLocalState((state) => [state.userTheme]);
+
+  // Theme
+  const myTheme = createTheme({
+    primaryColor: userTheme.primaryColor,
+    white: userTheme.whiteColor,
+    black: userTheme.blackColor,
+    defaultRadius: userTheme.radius,
+    breakpoints: {
+      xs: '30em',
+      sm: '48em',
+      md: '64em',
+      lg: '74em',
+      xl: '90em'
+    }
+  });
+
+  return (
+    <MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
+      <ContextMenuProvider>
+        <LanguageContext>
+          <ModalsProvider
+            labels={{
+              confirm: <Trans id={msg`Submit`.id} />,
+              cancel: <Trans id={msg`Cancel`.id} />
+            }}
+            modals={{
+              info: ServerInfoModal,
+              about: AboutInvenTreeModal,
+              license: LicenseModal,
+              qr: QrModal
+            }}
+          >
+            <Notifications />
+            {children}
+          </ModalsProvider>
+        </LanguageContext>
+      </ContextMenuProvider>
+    </MantineProvider>
+  );
+}

package/src/contexts/colorSchema.tsx

@@ -0,0 +1,67 @@
+import {
+  type MantineColorScheme,
+  type MantineColorSchemeManager,
+  isMantineColorScheme
+} from '@mantine/core';
+
+export interface LocalStorageColorSchemeManagerOptions {
+  /** Local storage key used to retrieve value with `localStorage.getItem(key)`, `mantine-color-scheme` by default */
+  key?: string;
+}
+
+export function localStorageColorSchemeManager({
+  key = 'mantine-color-scheme'
+}: LocalStorageColorSchemeManagerOptions = {}): MantineColorSchemeManager {
+  let handleStorageEvent: (event: StorageEvent) => void;
+
+  return {
+    get: (defaultValue) => {
+      if (typeof window === 'undefined') {
+        return defaultValue;
+      }
+
+      try {
+        return (
+          (window.localStorage.getItem(key) as MantineColorScheme) ||
+          defaultValue
+        );
+      } catch {
+        return defaultValue;
+      }
+    },
+
+    set: (value) => {
+      try {
+        window.localStorage.setItem(key, value);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[@mantine/core] Local storage color scheme manager was unable to save color scheme.',
+          error
+        );
+      }
+    },
+
+    subscribe: (onUpdate) => {
+      handleStorageEvent = (event) => {
+        if (event.storageArea === window.localStorage && event.key === key) {
+          isMantineColorScheme(event.newValue) && onUpdate(event.newValue);
+        }
+      };
+
+      window.addEventListener('storage', handleStorageEvent);
+    },
+
+    unsubscribe: () => {
+      window.removeEventListener('storage', handleStorageEvent);
+    },
+
+    clear: () => {
+      window.localStorage.removeItem(key);
+    }
+  };
+}
+
+export const colorSchema = localStorageColorSchemeManager({
+  key: 'scheme'
+});

package/src/defaults/actions.tsx

@@ -0,0 +1,87 @@
+import { t } from '@lingui/core/macro';
+import type { SpotlightActionData } from '@mantine/spotlight';
+import { IconBarcode, IconLink, IconPointer } from '@tabler/icons-react';
+import type { NavigateFunction } from 'react-router-dom';
+
+import { openContextModal } from '@mantine/modals';
+import { useLocalState } from '../states/LocalState';
+import { useUserState } from '../states/UserState';
+import { aboutInvenTree, docLinks, licenseInfo, serverInfo } from './links';
+
+export function openQrModal(navigate: NavigateFunction) {
+  return openContextModal({
+    modal: 'qr',
+    innerProps: { navigate: navigate }
+  });
+}
+
+export function getActions(navigate: NavigateFunction) {
+  const setNavigationOpen = useLocalState((state) => state.setNavigationOpen);
+  const { user } = useUserState();
+
+  const actions: SpotlightActionData[] = [
+    {
+      id: 'dashboard',
+      label: t`Dashboard`,
+      description: t`Go to the InvenTree dashboard`,
+      onClick: () => {}, // navigate(menuItems.dashboard.link),
+      leftSection: <IconLink size='1.2rem' />
+    },
+    {
+      id: 'documentation',
+      label: t`Documentation`,
+      description: t`Visit the documentation to learn more about InvenTree`,
+      onClick: () => {
+        window.location.href = docLinks.faq;
+      },
+      leftSection: <IconLink size='1.2rem' />
+    },
+    {
+      id: 'about',
+      label: t`About InvenTree`,
+      description: t`About the InvenTree org`,
+      onClick: () => aboutInvenTree(),
+      leftSection: <IconLink size='1.2rem' />
+    },
+    {
+      id: 'server-info',
+      label: t`Server Information`,
+      description: t`About this InvenTree instance`,
+      onClick: () => serverInfo(),
+      leftSection: <IconLink size='1.2rem' />
+    },
+    {
+      id: 'license-info',
+      label: t`License Information`,
+      description: t`Licenses for dependencies of the service`,
+      onClick: () => licenseInfo(),
+      leftSection: <IconLink size='1.2rem' />
+    },
+    {
+      id: 'navigation',
+      label: t`Open Navigation`,
+      description: t`Open the main navigation menu`,
+      onClick: () => setNavigationOpen(true),
+      leftSection: <IconPointer size='1.2rem' />
+    },
+    {
+      id: 'scan',
+      label: t`Scan`,
+      description: t`Scan a barcode or QR code`,
+      onClick: () => openQrModal(navigate),
+      leftSection: <IconBarcode size='1.2rem' />
+    }
+  ];
+
+  // Staff actions
+  user?.is_staff &&
+    actions.push({
+      id: 'admin-center',
+      label: t`Admin Center`,
+      description: t`Go to the Admin Center`,
+      onClick: () => {}, /// navigate(menuItems['settings-admin'].link),}
+      leftSection: <IconLink size='1.2rem' />
+    });
+
+  return actions;
+}

package/src/defaults/backendMappings.tsx

@@ -0,0 +1,32 @@
+import { ModelType } from '@lib/enums/ModelType';
+
+/* Lookup tables for mapping backend responses to internal types */
+
+/**
+ * List of status codes which are used in the backend
+ * and the model type they are associated with
+ */
+export const statusCodeList: Record<string, ModelType> = {
+  BuildStatus: ModelType.build,
+  PurchaseOrderStatus: ModelType.purchaseorder,
+  ReturnOrderStatus: ModelType.returnorder,
+  ReturnOrderLineStatus: ModelType.returnorderlineitem,
+  SalesOrderStatus: ModelType.salesorder,
+  StockHistoryCode: ModelType.stockhistory,
+  StockStatus: ModelType.stockitem,
+  DataImportStatusCode: ModelType.importsession
+};
+
+/*
+ * Map the colors used in the backend to the colors used in the frontend
+ */
+export const statusColorMap: { [key: string]: string } = {
+  dark: 'dark',
+  warning: 'yellow',
+  success: 'green',
+  info: 'cyan',
+  danger: 'red',
+  primary: 'blue',
+  secondary: 'gray',
+  default: 'gray'
+};

package/src/defaults/defaultHostList.tsx

@@ -0,0 +1,4 @@
+import type { HostList } from '@lib/types/Server';
+
+export const defaultHostList: HostList = window.INVENTREE_SETTINGS.server_list;
+export const defaultHostKey = window.INVENTREE_SETTINGS.default_server;

package/src/defaults/defaults.tsx

@@ -0,0 +1,38 @@
+import type { MantineSize } from '@mantine/core';
+
+export const emptyServerAPI = {
+  server: null,
+  version: null,
+  instance: null,
+  apiVersion: null,
+  worker_running: null,
+  worker_pending_tasks: null,
+  plugins_enabled: null,
+  plugins_install_disabled: null,
+  active_plugins: [],
+  email_configured: null,
+  debug_mode: null,
+  docker_mode: null,
+  database: null,
+  system_health: null,
+  platform: null,
+  installer: null,
+  target: null,
+  default_locale: null,
+  django_admin: null,
+  settings: null,
+  customize: null
+};
+
+export interface SiteMarkProps {
+  value: number;
+  label: MantineSize;
+}
+
+export const SizeMarks: SiteMarkProps[] = [
+  { value: 0, label: 'xs' },
+  { value: 25, label: 'sm' },
+  { value: 50, label: 'md' },
+  { value: 75, label: 'lg' },
+  { value: 100, label: 'xl' }
+];

package/src/defaults/formatters.tsx

@@ -0,0 +1,176 @@
+import dayjs from 'dayjs';
+
+import {
+  useGlobalSettingsState,
+  useUserSettingsState
+} from '../states/SettingsState';
+
+interface FormatDecmimalOptionsInterface {
+  digits?: number;
+  minDigits?: number;
+  locale?: string;
+}
+
+interface FormatCurrencyOptionsInterface {
+  digits?: number;
+  minDigits?: number;
+  currency?: string;
+  locale?: string;
+  multiplier?: number;
+}
+
+export function formatDecimal(
+  value: number | null | undefined,
+  options: FormatDecmimalOptionsInterface = {}
+) {
+  const locale = options.locale || navigator.language || 'en-US';
+
+  if (value === null || value === undefined) {
+    return value;
+  }
+
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'decimal',
+    maximumFractionDigits: options.digits ?? 6,
+    minimumFractionDigits: options.minDigits ?? 0
+  });
+
+  return formatter.format(value);
+}
+
+/*
+ * format currency (money) value based on current settings
+ *
+ * Options:
+ * - currency: Currency code (uses default value if none provided)
+ * - locale: Locale specified (uses default value if none provided)
+ * - digits: Maximum number of significant digits (default = 10)
+ */
+export function formatCurrency(
+  value: number | string | null | undefined,
+  options: FormatCurrencyOptionsInterface = {}
+) {
+  if (value == null || value == undefined) {
+    return null;
+  }
+
+  value = Number.parseFloat(value.toString());
+
+  if (Number.isNaN(value) || !Number.isFinite(value)) {
+    return null;
+  }
+
+  value *= options.multiplier ?? 1;
+
+  const global_settings = useGlobalSettingsState.getState().lookup;
+
+  let maxDigits = options.digits || global_settings.PRICING_DECIMAL_PLACES || 6;
+  maxDigits = Number(maxDigits);
+  let minDigits =
+    options.minDigits || global_settings.PRICING_DECIMAL_PLACES_MIN || 0;
+  minDigits = Number(minDigits);
+
+  // Extract default currency information
+  const currency =
+    options.currency || global_settings.INVENTREE_DEFAULT_CURRENCY || 'USD';
+
+  // Extract locale information
+  const locale = options.locale || navigator.language || 'en-US';
+
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currency,
+    maximumFractionDigits: Math.max(minDigits, maxDigits),
+    minimumFractionDigits: Math.min(minDigits, maxDigits)
+  });
+
+  return formatter.format(value);
+}
+
+/*
+ * Render the price range for the provided values
+ */
+export function formatPriceRange(
+  minValue: number | null,
+  maxValue: number | null,
+  options: FormatCurrencyOptionsInterface = {}
+) {
+  // If neither values are provided, return a dash
+  if (minValue == null && maxValue == null) {
+    return '-';
+  }
+
+  if (minValue == null) {
+    return formatCurrency(maxValue!, options);
+  }
+
+  if (maxValue == null) {
+    return formatCurrency(minValue!, options);
+  }
+
+  // If both values are the same, return a single value
+  if (minValue == maxValue) {
+    return formatCurrency(minValue, options);
+  }
+
+  // Otherwise, return a range
+  return `${formatCurrency(minValue, options)} - ${formatCurrency(
+    maxValue,
+    options
+  )}`;
+}
+
+/*
+ * Format a file size (in bytes) into a human-readable format
+ */
+export function formatFileSize(size: number) {
+  const suffixes: string[] = ['B', 'KB', 'MB', 'GB'];
+
+  let idx = 0;
+
+  while (size > 1024 && idx < suffixes.length) {
+    size /= 1024;
+    idx++;
+  }
+
+  return `${size.toFixed(2)} ${suffixes[idx]}`;
+}
+
+interface FormatDateOptionsInterface {
+  showTime?: boolean;
+  showSeconds?: boolean;
+}
+
+/*
+ * Render the provided date in the user-specified format.
+ *
+ * The provided "date" variable is a string, nominally ISO format e.g. 2022-02-22
+ * The user-configured setting DATE_DISPLAY_FORMAT determines how the date should be displayed.
+ */
+export function formatDate(
+  date: string,
+  options: FormatDateOptionsInterface = {}
+) {
+  if (!date) {
+    return '-';
+  }
+
+  const user_settings = useUserSettingsState.getState().lookup;
+  let fmt = user_settings.DATE_DISPLAY_FORMAT || 'YYYY-MM-DD';
+
+  if (options.showTime) {
+    fmt += ' HH:mm';
+    if (options.showSeconds) {
+      fmt += ':ss';
+    }
+  }
+
+  const m = dayjs(date);
+
+  if (m.isValid()) {
+    return m.format(fmt);
+  } else {
+    // Invalid input string, simply return provided value
+    return date;
+  }
+}