@inventreedb/ui 0.0.1 → 0.0.3

package/{src/components/render/ModelType.tsx → lib/enums/ModelInformation.tsx}

@@ -1,8 +1,7 @@
 import { t } from '@lingui/core/macro';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import type { ModelType } from '@lib/enums/ModelType';
-import type { InvenTreeIconType } from '../../functions/icons';
+import type { InvenTreeIconType } from '../types/Icons';
+import { ApiEndpoints } from './ApiEndpoints';
+import type { ModelType } from './ModelType';
 
 export interface ModelInformationInterface {
   label: string;
@@ -11,7 +10,7 @@ export interface ModelInformationInterface {
   url_detail?: string;
   api_endpoint: ApiEndpoints;
   admin_url?: string;
-  icon: InvenTreeIconType;
+  icon: keyof InvenTreeIconType;
 }
 
 export interface TranslatableModelInformationInterface
@@ -278,16 +277,3 @@ export const ModelInformationDict: ModelDict = {
     icon: 'exclamation'
   }
 };
-
-/*
- * Extract model definition given the provided type - returns translatable strings for labels as string, not functions
- * @param type - ModelType to extract information from
- * @returns ModelInformationInterface
- */
-export function getModelInfo(type: ModelType): ModelInformationInterface {
-  return {
-    ...ModelInformationDict[type],
-    label: ModelInformationDict[type].label(),
-    label_multiple: ModelInformationDict[type].label_multiple()
-  };
-}

package/lib/functions/Navigation.tsx

@@ -0,0 +1,58 @@
+import type { NavigateFunction } from 'react-router-dom';
+import { ModelInformationDict } from '../enums/ModelInformation';
+import type { ModelType } from '../enums/ModelType';
+import { cancelEvent } from './Events';
+
+export const getBaseUrl = (): string =>
+  (window as any).INVENTREE_SETTINGS?.base_url || 'web';
+
+/**
+ * Returns the detail view URL for a given model type
+ */
+export function getDetailUrl(
+  model: ModelType,
+  pk: number | string,
+  absolute?: boolean
+): string {
+  const modelInfo = ModelInformationDict[model];
+
+  if (pk === undefined || pk === null) {
+    return '';
+  }
+
+  if (!!pk && modelInfo && modelInfo.url_detail) {
+    const url = modelInfo.url_detail.replace(':pk', pk.toString());
+    const base = getBaseUrl();
+
+    if (absolute && base) {
+      return `/${base}${url}`;
+    } else {
+      return url;
+    }
+  }
+
+  console.error(`No detail URL found for model ${model} <${pk}>`);
+  return '';
+}
+
+/*
+ * Navigate to a provided link.
+ * - If the link is to be opened externally, open it in a new tab.
+ * - Otherwise, navigate using the provided navigate function.
+ */
+export const navigateToLink = (
+  link: string,
+  navigate: NavigateFunction,
+  event: any
+) => {
+  cancelEvent(event);
+
+  if (event?.ctrlKey || event?.shiftKey) {
+    // Open the link in a new tab
+    const url = `/${getBaseUrl()}${link}`;
+    window.open(url, '_blank');
+  } else {
+    // Navigate internally
+    navigate(link);
+  }
+};

package/lib/index.ts

@@ -4,8 +4,14 @@ export { INVENTREE_PLUGIN_VERSION } from './types/Plugins';
 // Common type definitions
 export { ApiEndpoints } from './enums/ApiEndpoints';
 export { ModelType } from './enums/ModelType';
+
 export type { InvenTreePluginContext } from './types/Plugins';
 
 // Common utility functions
 export { apiUrl } from './functions/Api';
+export {
+  getBaseUrl,
+  getDetailUrl,
+  navigateToLink
+} from './functions/Navigation';
 export { checkPluginVersion } from './functions/Plugins';

package/lib/types/Icons.tsx

@@ -0,0 +1,9 @@
+import type { Icon, IconProps } from '@tabler/icons-react';
+
+export type TablerIconType = React.ForwardRefExoticComponent<
+  Omit<IconProps, 'ref'> & React.RefAttributes<Icon>
+>;
+
+export type InvenTreeIconType = {
+  [key: string]: TablerIconType;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "private": false,
     "type": "module",
     "license": "MIT",
@@ -10,6 +10,14 @@
     "exports": {
         ".": "./dist/index.js"
     },
+    "files": [
+        "dist",
+        "lib",
+        "LICENSE",
+        "README.md",
+        "CHANGELOG.md"
+    ],
+    "homepage": "https://inventree.org",
     "repository": {
         "type": "git",
         "url": "https://github.com/inventree/inventree"

package/.babelrc

@@ -1,8 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-react"
-    ],
-    "plugins": [
-        "@lingui/babel-plugin-lingui-macro"
-    ]
-}

package/.linguirc

@@ -1,55 +0,0 @@
-{
-    "locales": [
-        "ar",
-        "bg",
-        "cs",
-        "da",
-        "de",
-        "el",
-        "en",
-        "es",
-        "es_MX",
-        "et",
-        "fa",
-        "fi",
-        "fr",
-        "he",
-        "hi",
-        "hu",
-        "it",
-        "ja",
-        "ko",
-        "lt",
-        "lv",
-        "nl",
-        "no",
-        "pl",
-        "pt",
-        "pt_BR",
-        "ro",
-        "ru",
-        "sk",
-        "sl",
-        "sr",
-        "sv",
-        "th",
-        "tr",
-        "uk",
-        "vi",
-        "zh_Hans",
-        "zh_Hant",
-        "pseudo-LOCALE"],
-    "catalogs": [{
-        "path": "src/locales/{locale}/messages",
-        "include": ["src", "lib"],
-        "exclude": ["**/node_modules/**", "./dist/**"]
-    }],
-    "format": "po",
-    "orderBy": "origin",
-    "sourceLocale": "en",
-    "pseudoLocale": "pseudo-LOCALE",
-    "fallbackLocales": {
-        "default": "en",
-        "pseudo-LOCALE": "en"
-    }
-}

package/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>InvenTree</title>
-</head>
-
-<body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>

package/netlify.toml

@@ -1,22 +0,0 @@
-# Netlify configuration file
-# https://www.netlify.com/docs/netlify-toml-reference/
-
-[build]
-  command = "yarn run extract && yarn run compile && yarn run build --outDir dist"
-  publish = "dist"
-
-[build.environment]
-  VITE_DEMO = "true"
-
-# Send requests to subpath
-
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-
-[[plugins]]
-  package = "@netlify/plugin-lighthouse"
-
-  [plugins.inputs.settings]
-    preset = "desktop" # Optionally run Lighthouse using a desktop configuration

package/playwright/global-setup.ts

@@ -1,45 +0,0 @@
-import { type FullConfig, chromium } from '@playwright/test';
-
-import fs from 'node:fs';
-import path from 'node:path';
-import { doCachedLogin } from '../tests/login';
-
-async function globalSetup(config: FullConfig) {
-  const authDir = path.resolve('./playwright/auth');
-
-  if (fs.existsSync(authDir)) {
-    // Clear out the cached authentication states
-    fs.rm(path.resolve('./playwright/auth'), { recursive: true }, (err) => {
-      if (err) {
-        console.error('Failed to clear out cached authentication states:', err);
-      } else {
-        console.log('Removed cached authentication states');
-      }
-    });
-  }
-
-  // Perform login for each user
-  const browser = await chromium.launch();
-
-  await doCachedLogin(browser, {
-    username: 'admin',
-    password: 'inventree'
-  });
-
-  await doCachedLogin(browser, {
-    username: 'allaccess',
-    password: 'nolimits'
-  });
-
-  await doCachedLogin(browser, {
-    username: 'reader',
-    password: 'readonly'
-  });
-
-  await doCachedLogin(browser, {
-    username: 'steven',
-    password: 'wizardstaff'
-  });
-}
-
-export default globalSetup;

package/playwright.config.ts

@@ -1,99 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-// Detect if running in CI
-const IS_CI = !!process.env.CI;
-
-console.log('Running Playwright tests:');
-console.log(`  - CI Mode: ${IS_CI}`);
-
-const MAX_WORKERS: number = 3;
-const MAX_RETRIES: number = 3;
-
-/* We optionally spin-up services based on the testing mode:
- *
- * Local Development:
- * - If running locally (developer mode), we run "vite dev" with HMR enabled
- * - This allows playwright to monitor the code for changes
- * - WORKERS = 1 (to avoid conflicts with HMR)
- *
- * CI Mode (Production):
- * - In CI (GitHub actions), we run "vite build" to generate a production build
- * - This build is then served by a local server for testing
- * - This allows the tests to run much faster and with parallel workers
- * - Run a Gunicorn multi-threaded web server to handle multiple requests
- * - WORKERS = MAX_WORKERS (to speed up the tests)
- *
- * CI Mode (Coverage):
- * - In coverage mode (GitHub actions), we cannot compile the code first
- * - This is because we need to compile coverage report against ./src directory
- * - So, we run "vite dev" with coverage enabled (similar to the local dev mode)
- * - WORKERS = 1 (to avoid conflicts with HMR)
- */
-
-// Command to spin-up the backend server
-// In production mode, we want a stronger webserver to handle multiple requests
-const WEB_SERVER_CMD: string = IS_CI
-  ? 'gunicorn --chdir ../backend/InvenTree --workers 8 --thread 8 --bind 127.0.0.1:8000 InvenTree.wsgi'
-  : 'invoke dev.server -a 127.0.0.1:8000';
-
-export default defineConfig({
-  testDir: './tests',
-  fullyParallel: false,
-  timeout: 90000,
-  forbidOnly: !!IS_CI,
-  retries: IS_CI ? MAX_RETRIES : 0,
-  workers: IS_CI ? MAX_WORKERS : 1,
-  reporter: IS_CI ? [['html', { open: 'never' }], ['github']] : 'list',
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome']
-      }
-    },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox']
-      }
-    }
-  ],
-
-  /* Run your local dev server before starting the tests */
-  webServer: [
-    {
-      command: 'yarn run dev --host --port 5173',
-      url: 'http://localhost:5173',
-      reuseExistingServer: IS_CI,
-      stdout: 'pipe',
-      stderr: 'pipe',
-      timeout: 120 * 1000
-    },
-    {
-      command: WEB_SERVER_CMD,
-      env: {
-        INVENTREE_DEBUG: 'True',
-        INVENTREE_PLUGINS_ENABLED: 'True',
-        INVENTREE_ADMIN_URL: 'test-admin',
-        INVENTREE_SITE_URL: 'http://localhost:8000',
-        INVENTREE_FRONTEND_API_HOST: 'http://localhost:8000',
-        INVENTREE_CORS_ORIGIN_ALLOW_ALL: 'True',
-        INVENTREE_COOKIE_SAMESITE: 'Lax',
-        INVENTREE_LOGIN_ATTEMPTS: '100'
-      },
-      url: 'http://localhost:8000/api/',
-      reuseExistingServer: IS_CI,
-      stdout: 'pipe',
-      stderr: 'pipe',
-      timeout: 120 * 1000
-    }
-  ],
-  globalSetup: './playwright/global-setup.ts',
-  use: {
-    baseURL: 'http://localhost:5173',
-    headless: IS_CI ? true : undefined,
-    trace: 'on-first-retry'
-  }
-});

package/src/App.tsx

@@ -1,35 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-import axios from 'axios';
-
-import { useLocalState } from './states/LocalState';
-
-// Global API instance
-export const api = axios.create({});
-
-/*
- * Setup default settings for the Axios API instance.
- */
-export function setApiDefaults() {
-  const { getHost } = useLocalState.getState();
-
-  api.defaults.baseURL = getHost();
-  api.defaults.timeout = 5000;
-
-  api.defaults.withCredentials = true;
-  api.defaults.withXSRFToken = true;
-  api.defaults.xsrfCookieName = 'csrftoken';
-  api.defaults.xsrfHeaderName = 'X-CSRFToken';
-
-  axios.defaults.withCredentials = true;
-  axios.defaults.withXSRFToken = true;
-  axios.defaults.xsrfHeaderName = 'X-CSRFToken';
-  axios.defaults.xsrfCookieName = 'csrftoken';
-}
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});

package/src/assets/inventree.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.676"><path fill="#ddbc91" d="M200 199.906v193.196l166.305-96.016V103.139Z"/><path fill="#d9b383" d="M200 199.906v193.196L33.695 297.086V103.139Z"/><path fill="#ddbc91" d="M366.305 103.139 200 199.906 33.695 103.14 200 6.899z"/><g fill="#f3f4e4"><path d="M75.27 127.109v145.46L200 344.583l124.73-72.012V127.109L200 199.684Z"/><path d="M324.73 127.11 200 199.684 75.27 127.109 200 54.93Z"/></g><path fill="#d9dbbc" d="M200 54.929v144.756L75.27 272.569V127.11z"/><path fill="#eaeccf" d="M200 54.929v144.756l124.73 72.884V127.11z"/><path fill="#90a8d8" d="M200 199.901V296.5l83.153-48.008v-96.973zm0 0V296.5l-83.153-48.008v-96.973zm83.153-48.383L200 199.9l-83.153-48.383L200 103.398Z"/></g><g fill="#90a8d8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M-546.667 443.959v216.54l186.4-107.618V335.499Zm0 0v216.54l-186.4-107.618V335.499Z"/><path d="m-360.266 335.499-186.4 108.46-186.401-108.46 186.4-107.87z"/></g><g fill="#90a8d8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M-546.667 227.419v216.54l186.4-107.619V118.96Zm0 0v216.54l-186.4-107.619V118.96Z"/><path d="m-360.266 118.959-186.4 108.46-186.401-108.46 186.4-107.87z"/></g><path fill="#ddbc91" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M-546.667 10.879v216.54l186.4-107.619V-97.58Z"/><path fill="#d9b383" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.676" d="M-546.667 10.879v216.54l-186.4-107.619V-97.58Z"/><path fill="#ddbc91" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m-360.266-97.581-186.4 108.46-186.401-108.46 186.4-107.87z"/><g fill="#f3f4e4" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.058"><path stroke-width="3" d="M-686.466-70.715V92.321l139.798 80.714 139.801-80.714V-70.715l-139.8 81.346z"/><path stroke-width="2.999" d="m-406.866-70.715-139.8 81.345-139.801-81.345 139.8-80.902Z"/></g><path fill="#d9dbbc" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M-546.667-151.617V10.63l-139.8 81.692V-70.715z"/><path fill="#eaeccf" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M-546.667-151.617V10.63l139.8 81.692V-70.715z"/><g fill="#90a8d8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.999"><path d="M-546.667 10.873v108.27l93.2-53.81v-108.69zm0 0v108.27l-93.2-53.81v-108.69z"/><path d="m-453.466-43.357-93.2 54.23-93.201-54.23 93.2-53.935Z"/></g><path fill="none" d="M-787.948-253.366h482.56v946.733h-482.56z"/></svg>

package/src/components/Boundary.tsx

@@ -1,43 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Alert } from '@mantine/core';
-import { ErrorBoundary, type FallbackRender } from '@sentry/react';
-import { IconExclamationCircle } from '@tabler/icons-react';
-import { type ReactNode, useCallback } from 'react';
-
-function DefaultFallback({ title }: Readonly<{ title: string }>): ReactNode {
-  return (
-    <Alert
-      color='red'
-      icon={<IconExclamationCircle />}
-      title={`${t`Error rendering component`}: ${title}`}
-    >
-      {t`An error occurred while rendering this component. Refer to the console for more information.`}
-    </Alert>
-  );
-}
-
-export function Boundary({
-  children,
-  label,
-  fallback
-}: Readonly<{
-  children: ReactNode;
-  label: string;
-  fallback?: React.ReactElement | FallbackRender;
-}>): ReactNode {
-  const onError = useCallback(
-    (error: unknown, componentStack: string | undefined, eventId: string) => {
-      console.error(`ERR: Error rendering component: ${label}`);
-    },
-    []
-  );
-
-  return (
-    <ErrorBoundary
-      fallback={fallback ?? <DefaultFallback title={label} />}
-      onError={onError}
-    >
-      {children}
-    </ErrorBoundary>
-  );
-}

package/src/components/SplashScreen.tsx

@@ -1,35 +0,0 @@
-import { BackgroundImage } from '@mantine/core';
-import { useEffect } from 'react';
-import { generateUrl } from '../functions/urls';
-import { useServerApiState } from '../states/ApiState';
-
-/**
- * Render content within a "splash screen" container.
- */
-export default function SplashScreen({
-  children
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [server, fetchServerApiState] = useServerApiState((state) => [
-    state.server,
-    state.fetchServerApiState
-  ]);
-
-  // Fetch server data on mount if no server data is present
-  useEffect(() => {
-    if (server.server === null) {
-      fetchServerApiState();
-    }
-  }, [server]);
-
-  if (server.customize?.splash) {
-    return (
-      <BackgroundImage src={generateUrl(server.customize.splash)}>
-        {children}
-      </BackgroundImage>
-    );
-  } else {
-    return <>{children}</>;
-  }
-}