@inventreedb/ui 0.0.1

package/lib/types/Forms.tsx

@@ -0,0 +1,185 @@
+import type { DefaultMantineColor, MantineStyleProp } from '@mantine/core';
+import type { UseFormReturnType } from '@mantine/form';
+import type { ReactNode } from 'react';
+import type { FieldValues } from 'react-hook-form';
+import type { ApiEndpoints } from '../enums/ApiEndpoints';
+import type { ModelType } from '../enums/ModelType';
+import type { PathParams, UiSizeType } from './Core';
+import type { TableState } from './Tables';
+
+export interface ApiFormAction {
+  text: string;
+  variant?: 'outline';
+  color?: DefaultMantineColor;
+  onClick: () => void;
+}
+
+export type ApiFormData = UseFormReturnType<Record<string, unknown>>;
+
+export type ApiFormAdjustFilterType = {
+  filters: any;
+  data: FieldValues;
+};
+
+export type ApiFormFieldChoice = {
+  value: any;
+  display_name: string;
+};
+
+// Define individual headers in a table field
+export type ApiFormFieldHeader = {
+  title: string;
+  style?: MantineStyleProp;
+};
+
+/** Definition of the ApiForm field component.
+ * - The 'name' attribute *must* be provided
+ * - All other attributes are optional, and may be provided by the API
+ * - However, they can be overridden by the user
+ *
+ * @param name : The name of the field
+ * @param label : The label to display for the field
+ * @param value : The value of the field
+ * @param default : The default value of the field
+ * @param icon : An icon to display next to the field
+ * @param field_type : The type of field to render
+ * @param api_url : The API endpoint to fetch data from (for related fields)
+ * @param pk_field : The primary key field for the related field (default = "pk")
+ * @param model : The model to use for related fields
+ * @param filters : Optional API filters to apply to related fields
+ * @param required : Whether the field is required
+ * @param hidden : Whether the field is hidden
+ * @param disabled : Whether the field is disabled
+ * @param error : Optional error message to display
+ * @param exclude : Whether to exclude the field from the submitted data
+ * @param placeholder : The placeholder text to display
+ * @param description : The description to display for the field
+ * @param preFieldContent : Content to render before the field
+ * @param postFieldContent : Content to render after the field
+ * @param onValueChange : Callback function to call when the field value changes
+ * @param adjustFilters : Callback function to adjust the filters for a related field before a query is made
+ * @param adjustValue : Callback function to adjust the value of the field before it is sent to the API
+ * @param addRow : Callback function to add a new row to a table field
+ * @param onKeyDown : Callback function to get which key was pressed in the form to handle submission on enter
+ */
+export type ApiFormFieldType = {
+  label?: string;
+  value?: any;
+  default?: any;
+  icon?: ReactNode;
+  field_type?:
+    | 'related field'
+    | 'email'
+    | 'url'
+    | 'string'
+    | 'icon'
+    | 'boolean'
+    | 'date'
+    | 'datetime'
+    | 'integer'
+    | 'decimal'
+    | 'float'
+    | 'number'
+    | 'choice'
+    | 'file upload'
+    | 'nested object'
+    | 'dependent field'
+    | 'table';
+  api_url?: string;
+  pk_field?: string;
+  model?: ModelType;
+  modelRenderer?: (instance: any) => ReactNode;
+  filters?: any;
+  child?: ApiFormFieldType;
+  children?: { [key: string]: ApiFormFieldType };
+  required?: boolean;
+  error?: string;
+  choices?: ApiFormFieldChoice[];
+  hidden?: boolean;
+  disabled?: boolean;
+  exclude?: boolean;
+  read_only?: boolean;
+  placeholder?: string;
+  description?: string;
+  preFieldContent?: JSX.Element;
+  postFieldContent?: JSX.Element;
+  adjustValue?: (value: any) => any;
+  onValueChange?: (value: any, record?: any) => void;
+  adjustFilters?: (value: ApiFormAdjustFilterType) => any;
+  addRow?: () => any;
+  headers?: ApiFormFieldHeader[];
+  depends_on?: string[];
+};
+
+export type ApiFormFieldSet = Record<string, ApiFormFieldType>;
+
+/**
+ * Properties for the ApiForm component
+ * @param url : The API endpoint to fetch the form data from
+ * @param pk : Optional primary-key value when editing an existing object
+ * @param pk_field : Optional primary-key field name (default: pk)
+ * @param pathParams : Optional path params for the url
+ * @param method : Optional HTTP method to use when submitting the form (default: GET)
+ * @param fields : The fields to render in the form
+ * @param submitText : Optional custom text to display on the submit button (default: Submit)4
+ * @param submitColor : Optional custom color for the submit button (default: green)
+ * @param fetchInitialData : Optional flag to fetch initial data from the server (default: true)
+ * @param preFormContent : Optional content to render before the form fields
+ * @param postFormContent : Optional content to render after the form fields
+ * @param successMessage : Optional message to display on successful form submission
+ * @param onFormSuccess : A callback function to call when the form is submitted successfully.
+ * @param onFormError : A callback function to call when the form is submitted with errors.
+ * @param processFormData : A callback function to process the form data before submission
+ * @param modelType : Define a model type for this form
+ * @param follow : Boolean, follow the result of the form (if possible)
+ * @param table : Table to update on success (if provided)
+ */
+export interface ApiFormProps {
+  url: ApiEndpoints | string;
+  pk?: number | string;
+  pk_field?: string;
+  pathParams?: PathParams;
+  queryParams?: URLSearchParams;
+  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+  fields?: ApiFormFieldSet;
+  focus?: string;
+  initialData?: FieldValues;
+  submitText?: string;
+  submitColor?: string;
+  fetchInitialData?: boolean;
+  ignorePermissionCheck?: boolean;
+  preFormContent?: JSX.Element;
+  preFormWarning?: string;
+  preFormSuccess?: string;
+  postFormContent?: JSX.Element;
+  successMessage?: string | null;
+  onFormSuccess?: (data: any) => void;
+  onFormError?: (response: any) => void;
+  processFormData?: (data: any) => any;
+  table?: TableState;
+  modelType?: ModelType;
+  follow?: boolean;
+  actions?: ApiFormAction[];
+  timeout?: number;
+}
+
+/**
+ * @param title : The title to display in the modal header
+ * @param cancelText : Optional custom text to display on the cancel button (default: Cancel)
+ * @param cancelColor : Optional custom color for the cancel button (default: blue)
+ * @param onClose : A callback function to call when the modal is closed.
+ * @param onOpen : A callback function to call when the modal is opened.
+ */
+export interface ApiFormModalProps extends ApiFormProps {
+  title: string;
+  cancelText?: string;
+  cancelColor?: string;
+  onClose?: () => void;
+  onOpen?: () => void;
+  closeOnClickOutside?: boolean;
+  size?: UiSizeType;
+}
+
+export interface BulkEditApiFormModalProps extends ApiFormModalProps {
+  items: number[];
+}

package/lib/types/Modals.tsx

@@ -0,0 +1,17 @@
+import type { UiSizeType } from './Core';
+
+export interface UseModalProps {
+  title: string;
+  children: React.ReactElement;
+  size?: UiSizeType;
+  onOpen?: () => void;
+  onClose?: () => void;
+  closeOnClickOutside?: boolean;
+}
+
+export interface UseModalReturn {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  modal: React.ReactElement;
+}

package/lib/types/Plugins.tsx

@@ -0,0 +1,68 @@
+import type { MantineColorScheme, MantineTheme } from '@mantine/core';
+import type { QueryClient } from '@tanstack/react-query';
+import type { AxiosInstance } from 'axios';
+import type { NavigateFunction } from 'react-router-dom';
+import type { ModelType } from '../enums/ModelType';
+import type { ApiFormModalProps, BulkEditApiFormModalProps } from './Forms';
+import type { UseModalReturn } from './Modals';
+import type { SettingsStateProps } from './Settings';
+import type { UserStateProps } from './User';
+
+export interface PluginProps {
+  name: string;
+  slug: string;
+  version: null | string;
+}
+
+export type InvenTreeFormsContext = {
+  bulkEdit: (props: BulkEditApiFormModalProps) => UseModalReturn;
+  create: (props: ApiFormModalProps) => UseModalReturn;
+  delete: (props: ApiFormModalProps) => UseModalReturn;
+  edit: (props: ApiFormModalProps) => UseModalReturn;
+};
+
+/**
+ * A set of properties which are passed to a plugin,
+ * for rendering an element in the user interface.
+ *
+ * @param version - The version of the running InvenTree software stack
+ * @param api - The Axios API instance (see ../states/ApiState.tsx)
+ * @param user - The current user instance (see ../states/UserState.tsx)
+ * @param userSettings - The current user settings (see ../states/SettingsState.tsx)
+ * @param globalSettings - The global settings (see ../states/SettingsState.tsx)
+ * @param navigate - The navigation function (see react-router-dom)
+ * @param theme - The current Mantine theme
+ * @param colorScheme - The current Mantine color scheme (e.g. 'light' / 'dark')
+ * @param host - The current host URL
+ * @param locale - The current locale string (e.g. 'en' / 'de')
+ * @param model - The model type associated with the rendered component (if applicable)
+ * @param id - The ID (primary key) of the model instance for the plugin (if applicable)
+ * @param instance - The model instance data (if available)
+ * @param context - Any additional context data which may be passed to the plugin
+ */
+export type InvenTreePluginContext = {
+  version: string;
+  api: AxiosInstance;
+  queryClient: QueryClient;
+  user: UserStateProps;
+  userSettings: SettingsStateProps;
+  globalSettings: SettingsStateProps;
+  host: string;
+  locale: string;
+  navigate: NavigateFunction;
+  theme: MantineTheme;
+  forms: InvenTreeFormsContext;
+  colorScheme: MantineColorScheme;
+  model?: ModelType | string;
+  id?: string | number | null;
+  instance?: any;
+  context?: any;
+};
+
+/*
+ * The version of the InvenTree plugin context interface.
+ * This number should be incremented if the interface changes.
+ */
+
+// @ts-ignore
+export const INVENTREE_PLUGIN_VERSION: string = __INVENTREE_LIB_VERSION__;

package/lib/types/Server.tsx

@@ -0,0 +1,8 @@
+export interface Host {
+  host: string;
+  name: string;
+}
+
+export interface HostList {
+  [key: string]: Host;
+}

package/lib/types/Settings.tsx

@@ -0,0 +1,55 @@
+import type { ApiEndpoints } from '../enums/ApiEndpoints';
+import type { PathParams } from './Core';
+
+export enum SettingTyp {
+  InvenTree = 'inventree',
+  Plugin = 'plugin',
+  User = 'user',
+  Notification = 'notification'
+}
+
+export enum SettingType {
+  Boolean = 'boolean',
+  Integer = 'integer',
+  String = 'string',
+  Choice = 'choice',
+  Model = 'related field'
+}
+
+// Type interface defining a single 'setting' object
+export interface Setting {
+  pk: number;
+  key: string;
+  value: string;
+  name: string;
+  description: string;
+  type: SettingType;
+  units: string;
+  choices: SettingChoice[];
+  model_name: string | null;
+  model_filters: Record<string, any> | null;
+  api_url: string | null;
+  typ: SettingTyp;
+  plugin?: string;
+  method?: string;
+  required?: boolean;
+}
+
+export interface SettingChoice {
+  value: string;
+  display_name: string;
+}
+
+export type SettingsLookup = {
+  [key: string]: string;
+};
+
+export interface SettingsStateProps {
+  settings: Setting[];
+  lookup: SettingsLookup;
+  fetchSettings: () => Promise<boolean>;
+  endpoint: ApiEndpoints;
+  pathParams?: PathParams;
+  getSetting: (key: string, default_value?: string) => string; // Return a raw setting value
+  isSet: (key: string, default_value?: boolean) => boolean; // Check a "boolean" setting
+}

package/lib/types/Tables.tsx

@@ -0,0 +1,69 @@
+import type { SetURLSearchParams } from 'react-router-dom';
+import type { FilterSetState } from './Filters';
+
+/*
+ * Type definition for representing the state of a table:
+ *
+ * tableKey: A unique key for the table. When this key changes, the table will be refreshed.
+ * refreshTable: A callback function to externally refresh the table.
+ * isLoading: A boolean flag to indicate if the table is currently loading data
+ * setIsLoading: A function to set the isLoading flag
+ * filterSet: A group of active filters
+ * queryFilters: A map of query filters (e.g. ?active=true&overdue=false) passed in the URL
+ * setQueryFilters: A function to set the query filters
+ * clearQueryFilters: A function to clear all query filters
+ * expandedRecords: An array of expanded records (rows) in the table
+ * setExpandedRecords: A function to set the expanded records
+ * isRowExpanded: A function to determine if a record is expanded
+ * selectedRecords: An array of selected records (rows) in the table
+ * selectedIds: An array of primary key values for selected records
+ * hasSelectedRecords: A boolean flag to indicate if any records are selected
+ * setSelectedRecords: A function to set the selected records
+ * clearSelectedRecords: A function to clear all selected records
+ * hiddenColumns: An array of hidden column names
+ * setHiddenColumns: A function to set the hidden columns
+ * searchTerm: The current search term for the table
+ * setSearchTerm: A function to set the search term
+ * recordCount: The total number of records in the table
+ * setRecordCount: A function to set the record count
+ * page: The current page number
+ * setPage: A function to set the current page number
+ * pageSize: The number of records per page
+ * setPageSize: A function to set the number of records per page
+ * records: An array of records (rows) in the table
+ * setRecords: A function to set the records
+ * updateRecord: A function to update a single record in the table
+ * idAccessor: The name of the primary key field in the records (default = 'pk')
+ */
+export type TableState = {
+  tableKey: string;
+  refreshTable: () => void;
+  isLoading: boolean;
+  setIsLoading: (value: boolean) => void;
+  filterSet: FilterSetState;
+  queryFilters: URLSearchParams;
+  setQueryFilters: SetURLSearchParams;
+  clearQueryFilters: () => void;
+  expandedRecords: any[];
+  setExpandedRecords: (records: any[]) => void;
+  isRowExpanded: (pk: number) => boolean;
+  selectedRecords: any[];
+  selectedIds: any[];
+  hasSelectedRecords: boolean;
+  setSelectedRecords: (records: any[]) => void;
+  clearSelectedRecords: () => void;
+  hiddenColumns: string[];
+  setHiddenColumns: (columns: string[]) => void;
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+  recordCount: number;
+  setRecordCount: (count: number) => void;
+  page: number;
+  setPage: (page: number) => void;
+  pageSize: number;
+  setPageSize: (pageSize: number) => void;
+  records: any[];
+  setRecords: (records: any[]) => void;
+  updateRecord: (record: any) => void;
+  idAccessor?: string;
+};

package/lib/types/User.tsx

@@ -0,0 +1,62 @@
+import type { ModelType } from '../enums/ModelType';
+import type { UserPermissions, UserRoles } from '../enums/Roles';
+
+export interface UserProfile {
+  language: string;
+  theme: any;
+  widgets: any;
+  displayname: string | null;
+  position: string | null;
+  status: string | null;
+  location: string | null;
+  active: boolean;
+  contact: string | null;
+  type: string;
+  organisation: string | null;
+  primary_group: number | null;
+}
+
+// Type interface fully defining the current user
+export interface UserProps {
+  pk: number;
+  username: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  is_staff?: boolean;
+  is_superuser?: boolean;
+  roles?: Record<string, string[]>;
+  permissions?: Record<string, string[]>;
+  groups: any[] | null;
+  profile: UserProfile;
+}
+
+export interface UserStateProps {
+  user: UserProps | undefined;
+  is_authed: boolean;
+  userId: () => number | undefined;
+  username: () => string;
+  setAuthenticated: (authed?: boolean) => void;
+  fetchUserToken: () => Promise<void>;
+  setUser: (newUser: UserProps | undefined) => void;
+  getUser: () => UserProps | undefined;
+  fetchUserState: () => Promise<void>;
+  clearUserState: () => void;
+  checkUserRole: (role: UserRoles, permission: UserPermissions) => boolean;
+  hasDeleteRole: (role: UserRoles) => boolean;
+  hasChangeRole: (role: UserRoles) => boolean;
+  hasAddRole: (role: UserRoles) => boolean;
+  hasViewRole: (role: UserRoles) => boolean;
+  checkUserPermission: (
+    model: ModelType,
+    permission: UserPermissions
+  ) => boolean;
+  hasDeletePermission: (model: ModelType) => boolean;
+  hasChangePermission: (model: ModelType) => boolean;
+  hasAddPermission: (model: ModelType) => boolean;
+  hasViewPermission: (model: ModelType) => boolean;
+  isAuthed: () => boolean;
+  isLoggedIn: () => boolean;
+  isStaff: () => boolean;
+  isSuperuser: () => boolean;
+}

package/netlify.toml

@@ -0,0 +1,22 @@
+# 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/package.json

@@ -0,0 +1,125 @@
+{
+    "name": "@inventreedb/ui",
+    "description": "UI components for the InvenTree project",
+    "version": "0.0.1",
+    "private": false,
+    "type": "module",
+    "license": "MIT",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": "./dist/index.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/inventree/inventree"
+    },
+    "author": {
+        "name": "InvenTree Developers",
+        "email": "support@inventree.org",
+        "url": "https://inventree.org",
+        "org": "InvenTree"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build --emptyOutDir",
+        "lib": "tsc --p ./tsconfig.lib.json && vite --config vite.lib.config.ts build",
+        "preview": "vite preview",
+        "extract": "lingui extract",
+        "compile": "lingui compile --typescript"
+    },
+    "dependencies": {
+        "@codemirror/autocomplete": "6.18.4",
+        "@codemirror/lang-liquid": "6.2.2",
+        "@codemirror/language": "6.10.8",
+        "@codemirror/lint": "6.8.4",
+        "@codemirror/search": "6.5.8",
+        "@codemirror/state": "6.5.1",
+        "@codemirror/theme-one-dark": "6.1.2",
+        "@codemirror/view": "6.36.2",
+        "@emotion/react": "^11.13.3",
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
+        "@fullcalendar/core": "^6.1.15",
+        "@fullcalendar/daygrid": "^6.1.15",
+        "@fullcalendar/interaction": "^6.1.15",
+        "@fullcalendar/react": "^6.1.15",
+        "@lingui/core": "^5.3.0",
+        "@lingui/react": "^5.3.0",
+        "@mantine/carousel": "^7.16.0",
+        "@mantine/charts": "^7.16.0",
+        "@mantine/core": "^7.16.0",
+        "@mantine/dates": "^7.16.0",
+        "@mantine/dropzone": "^7.16.0",
+        "@mantine/form": "^7.16.0",
+        "@mantine/hooks": "^7.16.0",
+        "@mantine/modals": "^7.16.0",
+        "@mantine/notifications": "^7.16.0",
+        "@mantine/spotlight": "^7.16.0",
+        "@mantine/vanilla-extract": "^7.16.0",
+        "@messageformat/date-skeleton": "^1.1.0",
+        "@sentry/react": "^8.43.0",
+        "@tabler/icons-react": "^3.17.0",
+        "@tanstack/react-query": "^5.56.2",
+        "@uiw/codemirror-theme-vscode": "4.23.7",
+        "@uiw/react-codemirror": "4.23.7",
+        "@uiw/react-split": "^5.9.3",
+        "@vanilla-extract/css": "^1.17.1",
+        "axios": "^1.8.4",
+        "clsx": "^2.1.1",
+        "codemirror": "6.0.1",
+        "dayjs": "^1.11.13",
+        "dompurify": "^3.2.4",
+        "easymde": "^2.18.0",
+        "embla-carousel-react": "^8.5.2",
+        "fuse.js": "^7.0.0",
+        "html5-qrcode": "^2.3.8",
+        "mantine-contextmenu": "^7.15.3",
+        "mantine-datatable": "^7.15.1",
+        "qrcode": "^1.5.4",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-grid-layout": "1.4.4",
+        "react-hook-form": "^7.54.2",
+        "react-is": "^18.3.1",
+        "react-router-dom": "^6.26.2",
+        "react-select": "^5.9.0",
+        "react-simplemde-editor": "^5.2.0",
+        "react-window": "1.8.10",
+        "recharts": "^2.15.0",
+        "styled-components": "^6.1.14",
+        "zustand": "^4.5.5"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.26.10",
+        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-typescript": "^7.27.0",
+        "@babel/runtime": "^7.27.0",
+        "@codecov/vite-plugin": "^1.9.0",
+        "@lingui/babel-plugin-lingui-macro": "^5.3.0",
+        "@lingui/cli": "^5.3.0",
+        "@lingui/macro": "^5.3.0",
+        "@playwright/test": "^1.49.1",
+        "@types/node": "^22.13.14",
+        "@types/qrcode": "^1.5.5",
+        "@types/react": "^18.3.8",
+        "@types/react-dom": "^18.3.0",
+        "@types/react-grid-layout": "^1.3.5",
+        "@types/react-router-dom": "^5.3.3",
+        "@types/react-window": "^1.8.8",
+        "@vanilla-extract/vite-plugin": "^5.0.1",
+        "@vitejs/plugin-react": "^4.3.4",
+        "babel-plugin-macros": "^3.1.0",
+        "nyc": "^17.1.0",
+        "path": "^0.12.7",
+        "rollup": "^4.0.0",
+        "rollup-plugin-license": "^3.5.3",
+        "typescript": "^5.8.2",
+        "vite": "^6.2.4",
+        "vite-plugin-babel-macros": "^1.0.6",
+        "vite-plugin-dts": "^4.5.3",
+        "vite-plugin-istanbul": "^6.0.2"
+    }
+}

package/playwright/global-setup.ts

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