@inventreedb/ui 0.11.2 → 1.4.0

package/dist/types/Tables.d.ts

@@ -64,7 +64,7 @@ export type TableState = {
  */
 export type TableColumnProps<T = any> = {
     accessor?: string;
-    title?: string;
+    title?: string | ReactNode;
     ordering?: string;
     sortable?: boolean;
     switchable?: boolean;
@@ -131,12 +131,14 @@ export type RowViewProps = RowAction & RowModelProps;
  * @param barcodeActions : any[] - List of barcode actions
  * @param tableFilters : TableFilter[] - List of custom filters
  * @param tableActions : any[] - List of custom action groups
+ * @param isRecordSelectable : (record: any, index: number) => boolean - Callback function to determine if a row is selectable
  * @param detailAction: boolean - Enable detail action for each row (default = true)
  * @param dataFormatter : (data: any) => any - Callback function to reformat data returned by server (if not in default format)
  * @param rowActions : (record: any) => RowAction[] - Callback function to generate row actions
  * @param onRowClick : (record: any, index: number, event: any) => void - Callback function when a row is clicked
  * @param onCellClick : (event: any, record: any, index: number, column: any, columnIndex: number) => void - Callback function when a cell is clicked
  * @param modelType: ModelType - The model type for the table
+ * @param height: string | number - Height of the table (default = 'auto')
  * @param minHeight: number - Minimum height of the table (default 300px)
  * @param noHeader: boolean - Hide the table header
  */
@@ -160,6 +162,7 @@ export type InvenTreeTableProps<T = any> = {
     barcodeActions?: React.ReactNode[];
     tableFilters?: TableFilter[];
     tableActions?: React.ReactNode[];
+    isRecordSelectable?: (record: T, index: number) => boolean;
     rowExpansion?: DataTableRowExpansionProps<T>;
     dataFormatter?: (data: any) => any;
     rowActions?: (record: T) => RowAction[];
@@ -170,6 +173,7 @@ export type InvenTreeTableProps<T = any> = {
     rowStyle?: (record: T, index: number) => MantineStyleProp | undefined;
     modelField?: string;
     onCellContextMenu?: (record: T, event: any) => void;
+    height?: string | number;
     minHeight?: number;
     noHeader?: boolean;
 };

package/dist/ui.css

@@ -0,0 +1,4 @@
+._1ucptpx0 {
+  display: flex;
+  flex: 1;
+}

package/lib/components/Boundary.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Alert } from '@mantine/core';
+import { Alert, Stack } from '@mantine/core';
 import { ErrorBoundary, type FallbackRender } from '@sentry/react';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { type ReactNode, useCallback } from 'react';
@@ -11,9 +11,12 @@ export function DefaultFallback({
     <Alert
       color='red'
       icon={<IconExclamationCircle />}
-      title={`${t`Error rendering component`}: ${title}`}
+      title={`INVE-E17: ${t`Error rendering component`}: ${title}`}
     >
-      {t`An error occurred while rendering this component. Refer to the console for more information.`}
+      <Stack gap='xs'>
+        {t`An error occurred while rendering this component. Refer to the console for more information.`}
+        {t`Try reloading the page, or contact your administrator if the problem persists.`}
+      </Stack>
     </Alert>
   );
 }

package/lib/components/RowActions.tsx

@@ -139,8 +139,8 @@ export function RowActions({
               aria-label={`row-action-menu-${index ?? ''}`}
               onClick={openMenu}
               disabled={disabled}
-              variant='subtle'
-              color='gray'
+              variant='transparent'
+              size='sm'
             >
               <IconDots />
             </ActionIcon>

package/lib/components/StylishText.tsx

@@ -0,0 +1,46 @@
+import {
+  type MantineSize,
+  Text,
+  darken,
+  getThemeColor,
+  useMantineTheme
+} from '@mantine/core';
+import { useMemo } from 'react';
+import type { JSX } from 'react';
+
+// Hook that memoizes the gradient color based on the primary color of the theme
+const useThematicGradient = () => {
+  const theme = useMantineTheme();
+
+  const primary = useMemo(() => {
+    return getThemeColor(theme.primaryColor, theme);
+  }, [theme]);
+
+  const secondary = useMemo(() => darken(primary, 0.25), [primary]);
+
+  return useMemo(() => {
+    return { primary, secondary };
+  }, [primary, secondary]);
+};
+
+// A stylish text component that uses the primary color of the theme
+export function StylishText({
+  children,
+  size
+}: Readonly<{
+  children: JSX.Element | string;
+  size?: MantineSize;
+}>) {
+  const { primary, secondary } = useThematicGradient();
+
+  return (
+    <Text
+      fw={700}
+      size={size ?? 'xl'}
+      variant='gradient'
+      gradient={{ from: primary.toString(), to: secondary.toString() }}
+    >
+      {children}
+    </Text>
+  );
+}

package/lib/components/nav/DetailDrawer.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const flex = style({
+  display: 'flex',
+  flex: 1
+});

package/lib/components/nav/DetailDrawer.tsx

@@ -0,0 +1,108 @@
+import { ActionIcon, Divider, Drawer, Group, Stack, Text } from '@mantine/core';
+import { IconChevronLeft } from '@tabler/icons-react';
+import { useCallback, useMemo } from 'react';
+import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
+import type { To } from 'react-router-dom';
+
+import type { UiSizeType } from '../../types/Core';
+
+import { useShallow } from 'zustand/react/shallow';
+import { useLocalLibState } from '../../states/LocalLibState';
+import { StylishText } from '../StylishText';
+import * as classes from './DetailDrawer.css';
+
+/**
+ * @param title - drawer title
+ * @param position - drawer position
+ * @param renderContent - function used to render the drawer content
+ * @param urlPrefix - set an additional url segment, useful when multiple drawers are rendered on one page (e.g. "user/")
+ */
+export interface DrawerProps {
+  title: string;
+  position?: 'right' | 'left';
+  renderContent: (id?: string) => React.ReactNode;
+  urlPrefix?: string;
+  size?: UiSizeType;
+  closeOnEscape?: boolean;
+}
+
+export function DetailDrawerComponent({
+  title,
+  position = 'right',
+  size,
+  closeOnEscape = true,
+  renderContent
+}: Readonly<DrawerProps>) {
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  const content = renderContent(id);
+  const opened = useMemo(() => !!id && !!content, [id, content]);
+
+  const [detailDrawerStack, addDetailDrawer] = useLocalLibState(
+    useShallow((state) => [state.detailDrawerStack, state.addDetailDrawer])
+  );
+
+  return (
+    <Drawer
+      opened={opened}
+      onClose={() => {
+        navigate('../');
+        addDetailDrawer(false);
+      }}
+      position={position}
+      closeOnEscape={closeOnEscape}
+      size={size}
+      classNames={{ root: classes.flex, body: classes.flex }}
+      scrollAreaComponent={Stack}
+      title={
+        <Group>
+          {detailDrawerStack > 0 && (
+            <ActionIcon
+              variant='outline'
+              onClick={() => {
+                navigate(-1);
+                addDetailDrawer(-1);
+              }}
+            >
+              <IconChevronLeft />
+            </ActionIcon>
+          )}
+          <StylishText size='xl'>{title}</StylishText>
+        </Group>
+      }
+    >
+      <Stack gap={'xs'} className={classes.flex}>
+        <Divider />
+        {content}
+      </Stack>
+    </Drawer>
+  );
+}
+
+export function DetailDrawer(props: Readonly<DrawerProps>) {
+  return (
+    <Routes>
+      <Route path=':id?/' element={<DetailDrawerComponent {...props} />} />
+    </Routes>
+  );
+}
+
+export function DetailDrawerLink({
+  to,
+  text
+}: Readonly<{ to: To; text: string }>) {
+  const addDetailDrawer = useLocalLibState(
+    useShallow((state) => state.addDetailDrawer)
+  );
+
+  const onNavigate = useCallback(() => {
+    addDetailDrawer(1);
+  }, [addDetailDrawer]);
+
+  return (
+    <Link to={to} onClick={onNavigate}>
+      <Text>{text}</Text>
+    </Link>
+  );
+}

package/lib/enums/ApiEndpoints.tsx

@@ -153,6 +153,7 @@ export enum ApiEndpoints {
   stock_merge = 'stock/merge/',
   stock_assign = 'stock/assign/',
   stock_status = 'stock/status/',
+  stock_convert = 'stock/:id/convert/',
   stock_install = 'stock/:id/install/',
   stock_uninstall = 'stock/:id/uninstall/',
   stock_serialize = 'stock/:id/serialize/',

package/lib/enums/ModelInformation.tsx

@@ -186,6 +186,7 @@ export const ModelInformationDict: ModelDict = {
     label_multiple: () => t`Sales Order Shipments`,
     url_overview: '/sales/index/shipments',
     url_detail: '/sales/shipment/:pk/',
+    admin_url: '/order/salesordershipment/',
     api_endpoint: ApiEndpoints.sales_order_shipment_list,
     supports_barcode: true,
     icon: 'shipment'

package/lib/enums/ModelType.tsx

@@ -38,3 +38,16 @@ export enum ModelType {
   selectionentry = 'selectionentry',
   error = 'error'
 }
+
+export enum PluginPanelKey {
+  // settings / admin
+  admincenter = 'admincenter',
+  systemsettings = 'systemsettings',
+  usersettings = 'usersettings',
+  // generic
+  core = 'core',
+  // landing pages
+  purchasing = 'purchasing',
+  sales = 'sales',
+  manufacturing = 'manufacturing'
+}

package/lib/enums/Roles.tsx

@@ -5,6 +5,7 @@ import { t } from '@lingui/core/macro';
  */
 export enum UserRoles {
   admin = 'admin',
+  bom = 'bom',
   build = 'build',
   part = 'part',
   part_category = 'part_category',

package/lib/hooks/UseFilterSet.tsx

@@ -1,5 +1,5 @@
 import { useLocalStorage } from '@mantine/hooks';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import type { FilterSetState, TableFilter } from '../types/Filters';
 
 export default function useFilterSet(
@@ -16,15 +16,15 @@ export default function useFilterSet(
     getInitialValueInEffect: false
   });
 
-  const activeFilters: TableFilter[] = useMemo(() => {
+  useEffect(() => {
     if (storedFilters == null) {
-      // If there are no stored filters, set initial values
-      const filters = initialFilters || [];
-      setStoredFilters(filters);
-      return filters;
+      setStoredFilters(initialFilters || []);
     }
-    return storedFilters || [];
-  }, [storedFilters]);
+  }, [storedFilters, initialFilters, setStoredFilters]);
+
+  const activeFilters: TableFilter[] = useMemo(() => {
+    return storedFilters ?? initialFilters ?? [];
+  }, [storedFilters, initialFilters]);
 
   // Callback to clear all active filters from the table
   const clearActiveFilters = useCallback(() => {

package/lib/index.ts

@@ -21,11 +21,18 @@ export type {
   StockAdjustmentFormsContext
 } from './types/Plugins';
 
+export type {
+  PanelIndicatorType,
+  PanelType,
+  PanelGroupType
+} from './types/Panel';
+
 export type {
   RowAction,
   RowViewProps,
   TableColumn,
   TableColumnProps,
+  TableState,
   InvenTreeTableProps,
   InvenTreeTableRenderProps
 } from './types/Tables';
@@ -131,8 +138,17 @@ export {
   type TableStateExtraProps
 } from './hooks/UseTable';
 
+export {
+  type DrawerProps,
+  DetailDrawer,
+  DetailDrawerLink,
+  DetailDrawerComponent
+} from './components/nav/DetailDrawer';
+export { StylishText } from './components/StylishText';
+
 // State management
 export {
   type StoredTableStateProps,
   useStoredTableState
 } from './states/StoredTableState';
+export { useLocalLibState } from './states/LocalLibState';

package/lib/states/LocalLibState.tsx

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const useLocalLibState = create<LocalLibStateProps>()(
+  persist(
+    (set, get) => ({
+      detailDrawerStack: 0,
+      addDetailDrawer: (value) => {
+        set({
+          detailDrawerStack:
+            value === false ? 0 : get().detailDrawerStack + value
+        });
+      }
+    }),
+    {
+      name: 'session-settings-inventreedb_lib'
+    }
+  )
+);
+export interface LocalLibStateProps {
+  detailDrawerStack: number;
+  addDetailDrawer: (value: number | false) => void;
+}

package/lib/states/types.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { InstanceRenderInterface } from '../types/Rendering';
+
+export type setRenderProps = (
+  model: string,
+  renderer: (props: Readonly<InstanceRenderInterface>) => ReactNode
+) => void;

package/lib/types/Forms.tsx

@@ -37,7 +37,6 @@ export type ApiFormFieldHeader = {
  * - 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
@@ -46,16 +45,22 @@ export type ApiFormFieldHeader = {
  * @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 custom_model : Optional custom model name (plugins may register renderers for custom models)
+ * @param modelRenderer : Optional function to render the related model instance (for related fields)
  * @param filters : Optional API filters to apply to related fields
+ * @param child: Optional definition of a child field (for nested objects)
+ * @param children: Optional definitions of child fields (for nested objects with multiple fields)
  * @param required : Whether the field is required
- * @param allow_null: Whether the field allows null values
- * @param allow_blank: Whether the field allows blank values
+ * @param error : Optional error message to display
  * @param hidden : Whether the field is hidden
  * @param disabled : Whether the field is disabled
- * @param error : Optional error message to display
+ * @param allow_null: Whether the field allows null values
+ * @param allow_blank: Whether the field allows blank values
  * @param exclude : Whether to exclude the field from the submitted data
+ * @param read_only : Whether the field is read-only
  * @param placeholder : The placeholder text to display
  * @param placeholderAutofill: Whether to allow auto-filling of the placeholder value
+ * @param addCreateFields : Fields to display when creating a new related object (for related fields)
  * @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
@@ -63,11 +68,11 @@ export type ApiFormFieldHeader = {
  * @param rightSection : Content to render in the right section of the field
  * @param autoFill: Whether to automatically fill the field with data from the API
  * @param autoFillFilters: Optional filters to apply when auto-filling the field
+ * @param adjustValue : Callback function to adjust the value of the field before it is sent to the API
  * @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
+ * @param headers : Optional definitions of table headers (for table fields)
  * @param singleFetchFunction : Optional function to fetch a single value for this field (used for fetching the initial value when editing an existing object)
  */
 export type ApiFormFieldType = {
@@ -97,6 +102,7 @@ export type ApiFormFieldType = {
   api_url?: string;
   pk_field?: string;
   model?: ModelType;
+  custom_model?: string;
   modelRenderer?: (instance: any) => ReactNode;
   filters?: any;
   child?: ApiFormFieldType;
@@ -114,6 +120,7 @@ export type ApiFormFieldType = {
   placeholderAutofill?: boolean;
   placeholderWarningCompare?: string | number;
   placeholderWarning?: string;
+  addCreateFields?: ApiFormFieldSet;
   description?: string;
   preFieldContent?: JSX.Element;
   postFieldContent?: JSX.Element;

package/lib/types/Panel.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+// The type of indicator dot to be shown against a panel
+export type PanelIndicatorType = 'info' | 'warning' | 'danger' | null;
+
+/**
+ * Type used to specify a single panel in a panel group
+ */
+export type PanelType = {
+  name: string;
+  label: string;
+  controls?: ReactNode;
+  icon?: ReactNode;
+  notification_dot?: PanelIndicatorType | (() => Promise<PanelIndicatorType>);
+  content?: ReactNode;
+  hidden?: boolean;
+  disabled?: boolean;
+  showHeadline?: boolean;
+  supportsDirty?: boolean;
+};
+
+/**
+ * Type used to specify a group of panels
+ */
+export type PanelGroupType = {
+  id: string;
+  label: string;
+  panelIDs?: string[];
+  panels?: PanelType[];
+};

package/lib/types/Plugins.tsx

@@ -2,16 +2,24 @@ import type { I18n } from '@lingui/core';
 import type { MantineColorScheme, MantineTheme } from '@mantine/core';
 import type { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
+import type { JSX } from 'react';
 import type { NavigateFunction } from 'react-router-dom';
 import type { ModelDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
+import type { setRenderProps } from '../states/types';
 import type {
   ApiFormModalProps,
+  ApiFormProps,
   BulkEditApiFormModalProps,
   StockOperationProps
 } from './Forms';
 import type { UseModalReturn } from './Modals';
-import type { RenderInstanceProps } from './Rendering';
+import type {
+  RemoteInstanceProps,
+  RenderInlineModelProps,
+  RenderInstanceProps,
+  ThumbnailProps
+} from './Rendering';
 import type { SettingsStateProps } from './Settings';
 import type { InvenTreeTableRenderProps } from './Tables';
 import type { UserStateProps } from './User';
@@ -46,6 +54,7 @@ export type InvenTreeFormsContext = {
   create: (props: ApiFormModalProps) => UseModalReturn;
   delete: (props: ApiFormModalProps) => UseModalReturn;
   edit: (props: ApiFormModalProps) => UseModalReturn;
+  editApiForm: (props: { id?: string; props: ApiFormProps }) => React.ReactNode;
   stockActions: StockAdjustmentFormsContext;
 };
 
@@ -97,6 +106,13 @@ export type InvenTreePluginContext = {
   globalSettings: SettingsStateProps;
   modelInformation: ModelDict;
   renderInstance: (props: Readonly<RenderInstanceProps>) => React.ReactNode;
+  renderRemoteInstance: (
+    props: Readonly<RemoteInstanceProps>
+  ) => React.ReactNode;
+  renderInlineModel: (
+    props: Readonly<RenderInlineModelProps>
+  ) => React.ReactNode;
+  thumbnail: (props: Readonly<ThumbnailProps>) => JSX.Element;
   host: string;
   i18n: I18n;
   locale: string;
@@ -104,6 +120,9 @@ export type InvenTreePluginContext = {
   theme: MantineTheme;
   colorScheme: MantineColorScheme;
   forms: InvenTreeFormsContext;
+  stateFnc: {
+    setRenderer: setRenderProps;
+  };
   tables: InvenTreeTablesContext<any>;
   importer: ImporterDrawerContext;
   model?: ModelType | string;

package/lib/types/Rendering.tsx

@@ -1,4 +1,11 @@
+import type {
+  QueryObserverResult,
+  UseQueryResult
+} from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import type { ApiEndpoints } from '..';
 import type { ModelType } from '../enums/ModelType';
+import type { PathParams } from './Core';
 
 /**
  * Interface for rendering a model instance.
@@ -22,4 +29,57 @@ export type ModelRendererDict = EnumDictionary<
 
 export type RenderInstanceProps = {
   model: ModelType | undefined;
+  custom_model?: string;
 } & InstanceRenderInterface;
+
+export interface UseInstanceResult {
+  instance: any;
+  setInstance: (instance: any) => void;
+  refreshInstance: () => void;
+  refreshInstancePromise: () => Promise<QueryObserverResult<any, any>>;
+  instanceQuery: UseQueryResult;
+  isLoaded: boolean;
+}
+
+export interface useInstanceProps {
+  endpoint: ApiEndpoints;
+  pk?: string | number | undefined;
+  hasPrimaryKey?: boolean;
+  params?: any;
+  pathParams?: PathParams;
+  disabled?: boolean;
+  defaultValue?: any;
+  refetchOnMount?: boolean;
+  refetchOnWindowFocus?: boolean;
+  updateInterval?: number;
+}
+
+export interface RemoteInstanceProps {
+  model: ModelType;
+  modelUrl?: string;
+  modelRenderer?: (instance: any) => ReactNode;
+  pk: number;
+}
+export interface ThumbnailProps {
+  src?: string;
+  alt?: string;
+  size?: number;
+  text?: ReactNode;
+  align?: string;
+  link?: string;
+  hover?: boolean;
+  hoverSize?: number;
+}
+
+export interface RenderInlineModelProps {
+  primary: ReactNode;
+  secondary?: ReactNode;
+  showSecondary?: boolean;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  image?: string;
+  labels?: string[];
+  url?: string;
+  navigate?: any;
+  tooltip?: string;
+}

package/lib/types/Tables.tsx

@@ -100,7 +100,7 @@ export type TableState = {
  */
 export type TableColumnProps<T = any> = {
   accessor?: string;
-  title?: string;
+  title?: string | ReactNode;
   ordering?: string;
   sortable?: boolean;
   switchable?: boolean;
@@ -173,12 +173,14 @@ export type RowViewProps = RowAction & RowModelProps;
  * @param barcodeActions : any[] - List of barcode actions
  * @param tableFilters : TableFilter[] - List of custom filters
  * @param tableActions : any[] - List of custom action groups
+ * @param isRecordSelectable : (record: any, index: number) => boolean - Callback function to determine if a row is selectable
  * @param detailAction: boolean - Enable detail action for each row (default = true)
  * @param dataFormatter : (data: any) => any - Callback function to reformat data returned by server (if not in default format)
  * @param rowActions : (record: any) => RowAction[] - Callback function to generate row actions
  * @param onRowClick : (record: any, index: number, event: any) => void - Callback function when a row is clicked
  * @param onCellClick : (event: any, record: any, index: number, column: any, columnIndex: number) => void - Callback function when a cell is clicked
  * @param modelType: ModelType - The model type for the table
+ * @param height: string | number - Height of the table (default = 'auto')
  * @param minHeight: number - Minimum height of the table (default 300px)
  * @param noHeader: boolean - Hide the table header
  */
@@ -202,6 +204,7 @@ export type InvenTreeTableProps<T = any> = {
   barcodeActions?: React.ReactNode[];
   tableFilters?: TableFilter[];
   tableActions?: React.ReactNode[];
+  isRecordSelectable?: (record: T, index: number) => boolean;
   rowExpansion?: DataTableRowExpansionProps<T>;
   dataFormatter?: (data: any) => any;
   rowActions?: (record: T) => RowAction[];
@@ -212,6 +215,7 @@ export type InvenTreeTableProps<T = any> = {
   rowStyle?: (record: T, index: number) => MantineStyleProp | undefined;
   modelField?: string;
   onCellContextMenu?: (record: T, event: any) => void;
+  height?: string | number;
   minHeight?: number;
   noHeader?: boolean;
 };