@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/wizards/WizardDrawer.tsx

@@ -1,188 +0,0 @@
-import { t } from '@lingui/core/macro';
-import {
-  ActionIcon,
-  Card,
-  Divider,
-  Drawer,
-  Group,
-  Paper,
-  Space,
-  Stack,
-  Stepper,
-  Tooltip
-} from '@mantine/core';
-import {
-  IconArrowLeft,
-  IconArrowRight,
-  IconCircleCheck
-} from '@tabler/icons-react';
-import { type ReactNode, useCallback, useMemo } from 'react';
-import { Boundary } from '../Boundary';
-import { StylishText } from '../items/StylishText';
-
-/**
- * Progress stepper displayed at the top of the wizard drawer.
- */
-function WizardProgressStepper({
-  currentStep,
-  steps,
-  onSelectStep
-}: {
-  currentStep: number;
-  steps: string[];
-  onSelectStep: (step: number) => void;
-}) {
-  if (!steps || steps.length == 0) {
-    return null;
-  }
-
-  // Determine if the user can select a particular step
-  const canSelectStep = useCallback(
-    (step: number) => {
-      if (!steps || steps.length <= 1) {
-        return false;
-      }
-
-      // Only allow single-step progression
-      return Math.abs(step - currentStep) == 1;
-    },
-    [currentStep, steps]
-  );
-
-  const canStepBackward = currentStep > 0;
-  const canStepForward = currentStep < steps.length - 1;
-
-  return (
-    <Card p='xs' withBorder>
-      <Group justify='space-between' gap='xs' wrap='nowrap'>
-        <Tooltip
-          label={steps[currentStep - 1]}
-          position='top'
-          disabled={!canStepBackward}
-        >
-          <ActionIcon
-            variant='transparent'
-            onClick={() => onSelectStep(currentStep - 1)}
-            disabled={!canStepBackward}
-          >
-            <IconArrowLeft />
-          </ActionIcon>
-        </Tooltip>
-        <Stepper
-          active={currentStep}
-          onStepClick={(stepIndex: number) => onSelectStep(stepIndex)}
-          iconSize={20}
-          size='xs'
-        >
-          {steps.map((step: string, idx: number) => (
-            <Stepper.Step
-              label={step}
-              key={step}
-              aria-label={`wizard-step-${idx}`}
-              allowStepSelect={canSelectStep(idx)}
-            />
-          ))}
-        </Stepper>
-        {canStepForward ? (
-          <Tooltip
-            label={steps[currentStep + 1]}
-            position='top'
-            disabled={!canStepForward}
-          >
-            <ActionIcon
-              variant='transparent'
-              onClick={() => onSelectStep(currentStep + 1)}
-              disabled={!canStepForward}
-            >
-              <IconArrowRight />
-            </ActionIcon>
-          </Tooltip>
-        ) : (
-          <Tooltip label={t`Complete`} position='top'>
-            <ActionIcon color='green' variant='transparent'>
-              <IconCircleCheck />
-            </ActionIcon>
-          </Tooltip>
-        )}
-      </Group>
-    </Card>
-  );
-}
-
-/**
- * A generic "wizard" drawer, for handling multi-step processes.
- */
-export default function WizardDrawer({
-  title,
-  currentStep,
-  steps,
-  children,
-  opened,
-  onClose,
-  onNextStep,
-  onPreviousStep
-}: {
-  title: string;
-  currentStep: number;
-  steps: string[];
-  children: ReactNode;
-  opened: boolean;
-  onClose: () => void;
-  onNextStep?: () => void;
-  onPreviousStep?: () => void;
-}) {
-  const titleBlock: ReactNode = useMemo(() => {
-    return (
-      <Stack gap='xs' style={{ width: '100%' }}>
-        <Group
-          gap='xs'
-          wrap='nowrap'
-          justify='space-between'
-          grow
-          preventGrowOverflow={false}
-        >
-          <StylishText size='xl'>{title}</StylishText>
-          <WizardProgressStepper
-            currentStep={currentStep}
-            steps={steps}
-            onSelectStep={(step: number) => {
-              if (step < currentStep) {
-                onPreviousStep?.();
-              } else {
-                onNextStep?.();
-              }
-            }}
-          />
-          <Space />
-        </Group>
-        <Divider />
-      </Stack>
-    );
-  }, [title, currentStep, steps]);
-
-  return (
-    <Drawer
-      position='bottom'
-      size={'75%'}
-      title={titleBlock}
-      withCloseButton={true}
-      closeOnEscape={false}
-      closeOnClickOutside={false}
-      styles={{
-        header: {
-          width: '100%'
-        },
-        title: {
-          width: '100%'
-        }
-      }}
-      opened={opened}
-      onClose={onClose}
-    >
-      <Boundary label='wizard-drawer'>
-        <Paper p='md'>{}</Paper>
-        {children}
-      </Boundary>
-    </Drawer>
-  );
-}

package/src/contexts/ApiContext.tsx

@@ -1,31 +0,0 @@
-import { type QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { AxiosInstance } from 'axios';
-import { createContext, useContext } from 'react';
-
-const ApiContext = createContext<AxiosInstance | null>(null);
-
-export const ApiProvider = ({
-  api,
-  client,
-  children
-}: {
-  api: AxiosInstance;
-  client: QueryClient;
-  children: React.ReactNode;
-}) => {
-  return (
-    <QueryClientProvider client={client}>
-      <ApiContext.Provider value={api}>{children}</ApiContext.Provider>
-    </QueryClientProvider>
-  );
-};
-
-export const useApi = () => {
-  const context = useContext(ApiContext);
-
-  if (!context) {
-    throw new Error('useApi must be used within an ApiProvider');
-  }
-
-  return context;
-};

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' }
-];