@inventreedb/ui 0.2.2 → 0.3.0

package/lib/types/Tables.tsx

@@ -1,5 +1,13 @@
-import type { SetURLSearchParams } from 'react-router-dom';
-import type { FilterSetState } from './Filters';
+import type { MantineStyleProp } from '@mantine/core';
+import type {
+  DataTableCellClickHandler,
+  DataTableRowExpansionProps
+} from 'mantine-datatable';
+import type { ReactNode } from 'react';
+import type { NavigateFunction, SetURLSearchParams } from 'react-router-dom';
+import type { ModelType } from '../enums/ModelType';
+import type { FilterSetState, TableFilter } from './Filters';
+import type { ApiFormFieldType } from './Forms';
 
 /*
  * Type definition for representing the state of a table:
@@ -37,7 +45,7 @@ import type { FilterSetState } from './Filters';
  */
 export type TableState = {
   tableKey: string;
-  refreshTable: () => void;
+  refreshTable: (clearSelected?: boolean) => void;
   isLoading: boolean;
   setIsLoading: (value: boolean) => void;
   filterSet: FilterSetState;
@@ -52,18 +60,153 @@ export type TableState = {
   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;
+  hiddenColumns: string[];
+  setHiddenColumns: (columns: string[]) => void;
   idAccessor?: string;
 };
+
+/**
+ * Table column properties
+ *
+ * @param T - The type of the record
+ * @param accessor - The key in the record to access
+ * @param title - The title of the column - Note: this may be supplied by the API, and is not required, but it can be overridden if required
+ * @param ordering - The key in the record to sort by (defaults to accessor)
+ * @param sortable - Whether the column is sortable
+ * @param switchable - Whether the column is switchable
+ * @param defaultVisible - Whether the column is visible by default (defaults to true)
+ * @param hidden - Whether the column is hidden (forced hidden, cannot be toggled by the user))
+ * @param editable - Whether the value of this column can be edited
+ * @param definition - Optional field definition for the column
+ * @param render - A custom render function
+ * @param filter - A custom filter function
+ * @param filtering - Whether the column is filterable
+ * @param width - The width of the column
+ * @param resizable - Whether the column is resizable (defaults to true)
+ * @param noWrap - Whether the column should wrap
+ * @param ellipsis - Whether the column should be ellipsized
+ * @param textAlign - The text alignment of the column
+ * @param cellsStyle - The style of the cells in the column
+ * @param extra - Extra data to pass to the render function
+ * @param noContext - Disable context menu for this column
+ */
+export type TableColumnProps<T = any> = {
+  accessor?: string;
+  title?: string;
+  ordering?: string;
+  sortable?: boolean;
+  switchable?: boolean;
+  hidden?: boolean;
+  defaultVisible?: boolean;
+  editable?: boolean;
+  definition?: ApiFormFieldType;
+  render?: (record: T, index?: number) => any;
+  filter?: any;
+  filtering?: boolean;
+  width?: number;
+  resizable?: boolean;
+  noWrap?: boolean;
+  ellipsis?: boolean;
+  textAlign?: 'left' | 'center' | 'right';
+  cellsStyle?: any;
+  extra?: any;
+  noContext?: boolean;
+};
+
+/**
+ * Interface for the table column definition
+ */
+export type TableColumn<T = any> = {
+  accessor: string; // The key in the record to access
+} & TableColumnProps<T>;
+
+// Type definition for a table row action
+export type RowAction = {
+  title?: string;
+  tooltip?: string;
+  color?: string;
+  icon?: ReactNode;
+  onClick?: (event: any) => void;
+  hidden?: boolean;
+  disabled?: boolean;
+};
+
+type RowModelProps = {
+  modelType: ModelType;
+  modelId: number;
+  navigate: NavigateFunction;
+};
+
+export type RowViewProps = RowAction & RowModelProps;
+
+/**
+ * Set of optional properties which can be passed to an InvenTreeTable component
+ *
+ * @param params : any - Base query parameters
+ * @param tableState : TableState - State manager for the table
+ * @param defaultSortColumn : string - Default column to sort by
+ * @param noRecordsText : string - Text to display when no records are found
+ * @param enableBulkDelete : boolean - Enable bulk deletion of records
+ * @param enableDownload : boolean - Enable download actions
+ * @param enableFilters : boolean - Enable filter actions
+ * @param enableSelection : boolean - Enable row selection
+ * @param enableSearch : boolean - Enable search actions
+ * @param enableLabels : boolean - Enable printing of labels against selected items
+ * @param enableReports : boolean - Enable printing of reports against selected items
+ * @param printingAccessor : string - Accessor for label and report printing (default = 'pk')
+ * @param enablePagination : boolean - Enable pagination
+ * @param enableRefresh : boolean - Enable refresh actions
+ * @param enableColumnSwitching : boolean - Enable column switching
+ * @param enableColumnCaching : boolean - Enable caching of column names via API
+ * @param barcodeActions : any[] - List of barcode actions
+ * @param tableFilters : TableFilter[] - List of custom filters
+ * @param tableActions : any[] - List of custom action groups
+ * @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 minHeight: number - Minimum height of the table (default 300px)
+ * @param noHeader: boolean - Hide the table header
+ */
+export type InvenTreeTableProps<T = any> = {
+  params?: any;
+  defaultSortColumn?: string;
+  noRecordsText?: string;
+  enableBulkDelete?: boolean;
+  enableDownload?: boolean;
+  enableFilters?: boolean;
+  enableSelection?: boolean;
+  enableSearch?: boolean;
+  enablePagination?: boolean;
+  enableRefresh?: boolean;
+  enableColumnSwitching?: boolean;
+  enableColumnCaching?: boolean;
+  enableLabels?: boolean;
+  enableReports?: boolean;
+  printingAccessor?: string;
+  afterBulkDelete?: () => void;
+  barcodeActions?: React.ReactNode[];
+  tableFilters?: TableFilter[];
+  tableActions?: React.ReactNode[];
+  rowExpansion?: DataTableRowExpansionProps<T>;
+  dataFormatter?: (data: any) => any;
+  rowActions?: (record: T) => RowAction[];
+  onRowClick?: (record: T, index: number, event: any) => void;
+  onCellClick?: DataTableCellClickHandler<T>;
+  modelType?: ModelType;
+  rowStyle?: (record: T, index: number) => MantineStyleProp | undefined;
+  modelField?: string;
+  onCellContextMenu?: (record: T, event: any) => void;
+  minHeight?: number;
+  noHeader?: boolean;
+};

package/lib/types/User.tsx

@@ -59,4 +59,7 @@ export interface UserStateProps {
   isLoggedIn: () => boolean;
   isStaff: () => boolean;
   isSuperuser: () => boolean;
+  // login state
+  login_checked: boolean;
+  setLoginChecked: (value: boolean) => void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.2.2",
+    "version": "0.3.0",
     "private": false,
     "type": "module",
     "license": "MIT",
@@ -112,7 +112,7 @@
         "@lingui/babel-plugin-lingui-macro": "^5.3.0",
         "@lingui/cli": "^5.3.1",
         "@lingui/macro": "^5.3.0",
-        "@playwright/test": "^1.49.1",
+        "@playwright/test": "^1.52.0",
         "@types/node": "^22.13.14",
         "@types/qrcode": "^1.5.5",
         "@types/react": "^18.3.8",

package/dist/components/InvenTreeStylishText.d.ts

@@ -1,13 +0,0 @@
-import { MantineSize, MantineTheme } from '@mantine/core';
-import { JSX } from 'react';
-/**
- * A stylish text component that uses the primary color of the theme
- * Note that the "theme" object must be provided by the parent component.
- * - For plugins this theme object is provided.
- * - For the main UI, we have a separate <StylishText> component
- */
-export declare function InvenTreeStylishText({ children, theme, size }: Readonly<{
-    children: JSX.Element | string;
-    theme: MantineTheme;
-    size?: MantineSize;
-}>): import("react/jsx-runtime").JSX.Element;

package/dist/components/InvenTreeStylishText.js

@@ -1,39 +0,0 @@
-import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
-import { useMemo } from "react";
-import { Text } from "../node_modules/@mantine/core/esm/components/Text/Text.js";
-import { getThemeColor } from "../node_modules/@mantine/core/esm/core/MantineProvider/color-functions/get-theme-color/get-theme-color.js";
-import { darken } from "../node_modules/@mantine/core/esm/core/MantineProvider/color-functions/darken/darken.js";
-const useThematicGradient = ({
-  suppliedTheme
-}) => {
-  const primary = useMemo(() => {
-    return getThemeColor(suppliedTheme.primaryColor, suppliedTheme);
-  }, [suppliedTheme]);
-  const secondary = useMemo(() => darken(primary, 0.25), [primary]);
-  return useMemo(() => {
-    return {
-      primary,
-      secondary
-    };
-  }, [primary, secondary]);
-};
-function InvenTreeStylishText({
-  children,
-  theme,
-  size
-}) {
-  const {
-    primary,
-    secondary
-  } = useThematicGradient({
-    suppliedTheme: theme
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fw: 700, size: size ?? "xl", variant: "gradient", gradient: {
-    from: primary.toString(),
-    to: secondary.toString()
-  }, children });
-}
-export {
-  InvenTreeStylishText
-};
-//# sourceMappingURL=InvenTreeStylishText.js.map

package/dist/components/InvenTreeStylishText.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InvenTreeStylishText.js","sources":["../../lib/components/InvenTreeStylishText.tsx"],"sourcesContent":["import {\n  type MantineSize,\n  type MantineTheme,\n  Text,\n  darken,\n  getThemeColor\n} from '@mantine/core';\nimport { useMemo } from 'react';\nimport type { JSX } from 'react';\n\n// Hook that memoizes the gradient color based on the primary color of the theme\nconst useThematicGradient = ({\n  suppliedTheme\n}: {\n  suppliedTheme: MantineTheme;\n}) => {\n  const primary = useMemo(() => {\n    return getThemeColor(suppliedTheme.primaryColor, suppliedTheme);\n  }, [suppliedTheme]);\n\n  const secondary = useMemo(() => darken(primary, 0.25), [primary]);\n\n  return useMemo(() => {\n    return { primary, secondary };\n  }, [primary, secondary]);\n};\n\n/**\n * A stylish text component that uses the primary color of the theme\n * Note that the \"theme\" object must be provided by the parent component.\n * - For plugins this theme object is provided.\n * - For the main UI, we have a separate <StylishText> component\n */\nexport function InvenTreeStylishText({\n  children,\n  theme,\n  size\n}: Readonly<{\n  children: JSX.Element | string;\n  theme: MantineTheme;\n  size?: MantineSize;\n}>) {\n  const { primary, secondary } = useThematicGradient({ suppliedTheme: theme });\n\n  return (\n    <Text\n      fw={700}\n      size={size ?? 'xl'}\n      variant='gradient'\n      gradient={{ from: primary.toString(), to: secondary.toString() }}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["useThematicGradient","suppliedTheme","primary","useMemo","getThemeColor","primaryColor","secondary","darken","InvenTreeStylishText","children","theme","size","jsx","from","toString","to"],"mappings":";;;;;AAWA,MAAMA,sBAAsBA,CAAC;AAAA,EAC3BC;AAGF,MAAM;AACEC,QAAAA,UAAUC,QAAQ,MAAM;AACrBC,WAAAA,cAAcH,cAAcI,cAAcJ,aAAa;AAAA,EAAA,GAC7D,CAACA,aAAa,CAAC;AAEZK,QAAAA,YAAYH,QAAQ,MAAMI,OAAOL,SAAS,IAAI,GAAG,CAACA,OAAO,CAAC;AAEhE,SAAOC,QAAQ,MAAM;AACZ,WAAA;AAAA,MAAED;AAAAA,MAASI;AAAAA,IAAU;AAAA,EAAA,GAC3B,CAACJ,SAASI,SAAS,CAAC;AACzB;AAQO,SAASE,qBAAqB;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAKD,GAAG;AACI,QAAA;AAAA,IAAET;AAAAA,IAASI;AAAAA,MAAcN,oBAAoB;AAAA,IAAEC,eAAeS;AAAAA,EAAAA,CAAO;AAGzE,SAAAE,sCAAC,QACC,IAAI,KACJ,MAAMD,QAAQ,MACd,SAAQ,YACR,UAAU;AAAA,IAAEE,MAAMX,QAAQY,SAAS;AAAA,IAAGC,IAAIT,UAAUQ,SAAS;AAAA,KAE5DL,SACH,CAAA;AAEJ;"}

package/dist/node_modules/@mantine/core/esm/core/MantineProvider/color-functions/darken/darken.js

@@ -1,14 +0,0 @@
-import { toRgba } from "../to-rgba/to-rgba.js";
-function darken(color, alpha) {
-  if (color.startsWith("var(")) {
-    return `color-mix(in srgb, ${color}, black ${alpha * 100}%)`;
-  }
-  const { r, g, b, a } = toRgba(color);
-  const f = 1 - alpha;
-  const dark = (input) => Math.round(input * f);
-  return `rgba(${dark(r)}, ${dark(g)}, ${dark(b)}, ${a})`;
-}
-export {
-  darken
-};
-//# sourceMappingURL=darken.js.map

package/dist/node_modules/@mantine/core/esm/core/MantineProvider/color-functions/darken/darken.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"darken.js","sources":["../../../../../../../../../node_modules/@mantine/core/esm/core/MantineProvider/color-functions/darken/darken.mjs"],"sourcesContent":["import { toRgba } from '../to-rgba/to-rgba.mjs';\n\nfunction darken(color, alpha) {\n  if (color.startsWith(\"var(\")) {\n    return `color-mix(in srgb, ${color}, black ${alpha * 100}%)`;\n  }\n  const { r, g, b, a } = toRgba(color);\n  const f = 1 - alpha;\n  const dark = (input) => Math.round(input * f);\n  return `rgba(${dark(r)}, ${dark(g)}, ${dark(b)}, ${a})`;\n}\n\nexport { darken };\n//# sourceMappingURL=darken.mjs.map\n"],"names":[],"mappings":";AAEA,SAAS,OAAO,OAAO,OAAO;AAC5B,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,sBAAsB,KAAK,WAAW,QAAQ,GAAG;AAAA,EAC5D;AACE,QAAM,EAAE,GAAG,GAAG,GAAG,EAAG,IAAG,OAAO,KAAK;AACnC,QAAM,IAAI,IAAI;AACd,QAAM,OAAO,CAAC,UAAU,KAAK,MAAM,QAAQ,CAAC;AAC5C,SAAO,QAAQ,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC;AACtD;","x_google_ignoreList":[0]}

package/lib/components/InvenTreeStylishText.tsx

@@ -1,55 +0,0 @@
-import {
-  type MantineSize,
-  type MantineTheme,
-  Text,
-  darken,
-  getThemeColor
-} 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 = ({
-  suppliedTheme
-}: {
-  suppliedTheme: MantineTheme;
-}) => {
-  const primary = useMemo(() => {
-    return getThemeColor(suppliedTheme.primaryColor, suppliedTheme);
-  }, [suppliedTheme]);
-
-  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
- * Note that the "theme" object must be provided by the parent component.
- * - For plugins this theme object is provided.
- * - For the main UI, we have a separate <StylishText> component
- */
-export function InvenTreeStylishText({
-  children,
-  theme,
-  size
-}: Readonly<{
-  children: JSX.Element | string;
-  theme: MantineTheme;
-  size?: MantineSize;
-}>) {
-  const { primary, secondary } = useThematicGradient({ suppliedTheme: theme });
-
-  return (
-    <Text
-      fw={700}
-      size={size ?? 'xl'}
-      variant='gradient'
-      gradient={{ from: primary.toString(), to: secondary.toString() }}
-    >
-      {children}
-    </Text>
-  );
-}