@inventreedb/ui 0.0.1 → 0.0.2

package/src/contexts/LanguageContext.tsx

@@ -1,155 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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;
-  }
-}