@inventreedb/ui 0.0.1

package/src/components/panels/Panel.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Type used to specify a single panel in a panel group
+ */
+export type PanelType = {
+  name: string;
+  label: string;
+  controls?: ReactNode;
+  icon?: ReactNode;
+  content: ReactNode;
+  hidden?: boolean;
+  disabled?: boolean;
+  showHeadline?: boolean;
+};

package/src/components/panels/PanelGroup.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../theme';
+
+export const selectedPanelTab = style({
+  selectors: {
+    '&[data-active]': {
+      background: vars.colors.primaryColors.light
+    }
+  }
+});

package/src/components/panels/PanelGroup.tsx

@@ -0,0 +1,292 @@
+import {
+  ActionIcon,
+  Divider,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Tabs,
+  Tooltip
+} from '@mantine/core';
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse
+} from '@tabler/icons-react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import {
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  useParams
+} from 'react-router-dom';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { identifierString } from '../../functions/conversion';
+import { cancelEvent } from '../../functions/events';
+import { navigateToLink } from '../../functions/navigation';
+import { usePluginPanels } from '../../hooks/UsePluginPanels';
+import { useLocalState } from '../../states/LocalState';
+import { Boundary } from '../Boundary';
+import { StylishText } from '../items/StylishText';
+import type { PanelType } from '../panels/Panel';
+import * as classes from './PanelGroup.css';
+
+/**
+ * Set of properties which define a panel group:
+ *
+ * @param pageKey - Unique key for this panel group
+ * @param panels - List of panels to display
+ * @param model - The target model for this panel group (e.g. 'part' / 'salesorder')
+ * @param id - The target ID for this panel group (set to *null* for groups which do not target a specific model instance)
+ * @param instance - The target model instance for this panel group
+ * @param selectedPanel - The currently selected panel
+ * @param onPanelChange - Callback when the active panel changes
+ * @param collapsible - If true, the panel group can be collapsed (defaults to true)
+ */
+export type PanelProps = {
+  pageKey: string;
+  panels: PanelType[];
+  instance?: any;
+  model?: ModelType | string;
+  id?: number | null;
+  selectedPanel?: string;
+  onPanelChange?: (panel: string) => void;
+  collapsible?: boolean;
+};
+
+function BasePanelGroup({
+  pageKey,
+  panels,
+  onPanelChange,
+  selectedPanel,
+  instance,
+  model,
+  id,
+  collapsible = true
+}: Readonly<PanelProps>): ReactNode {
+  const localState = useLocalState();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const { panel } = useParams();
+
+  const [expanded, setExpanded] = useState<boolean>(true);
+
+  // Hook to load plugins for this panel
+  const pluginPanelSet = usePluginPanels({
+    model: model,
+    instance: instance,
+    id: id
+  });
+
+  // Rebuild the list of panels
+  const allPanels = useMemo(() => {
+    const _panels = [...panels];
+
+    // Add plugin panels
+    pluginPanelSet.panels?.forEach((panel) => {
+      let panelKey = panel.name;
+
+      // Check if panel with this name already exists
+      const existingPanel = _panels.find((p) => p.name === panelKey);
+
+      if (existingPanel) {
+        // Create a unique key for the panel which includes the plugin slug
+        panelKey = identifierString(`${panel.pluginName}-${panel.name}`);
+      }
+
+      _panels.push({
+        ...panel,
+        name: panelKey
+      });
+    });
+
+    return _panels;
+  }, [panels, pluginPanelSet]);
+
+  const activePanels = useMemo(
+    () => allPanels.filter((panel) => !panel.hidden && !panel.disabled),
+    [allPanels]
+  );
+
+  // Callback when the active panel changes
+  const handlePanelChange = useCallback(
+    (targetPanel: string, event?: any) => {
+      if (event && (event?.ctrlKey || event?.shiftKey)) {
+        const url = `${location.pathname}/../${targetPanel}`;
+        cancelEvent(event);
+        navigateToLink(url, navigate, event);
+      } else {
+        navigate(`../${targetPanel}`);
+      }
+
+      localState.setLastUsedPanel(pageKey)(targetPanel);
+
+      // Optionally call external callback hook
+      if (targetPanel && onPanelChange) {
+        onPanelChange(targetPanel);
+      }
+    },
+    [activePanels, navigate, location, onPanelChange]
+  );
+
+  // if the selected panel state changes update the current panel
+  useEffect(() => {
+    if (selectedPanel && selectedPanel !== panel) {
+      handlePanelChange(selectedPanel);
+    }
+  }, [selectedPanel, panel]);
+
+  // Determine the current panels selection (must be a valid panel)
+  const currentPanel: string = useMemo(() => {
+    if (activePanels.findIndex((p) => p.name === panel) === -1) {
+      return activePanels[0]?.name ?? '';
+    } else {
+      return panel ?? '';
+    }
+  }, [activePanels, panel]);
+
+  return (
+    <Boundary label={`PanelGroup-${pageKey}`}>
+      <Paper p='sm' radius='xs' shadow='xs' aria-label={`${pageKey}`}>
+        <Tabs
+          value={currentPanel}
+          orientation='vertical'
+          keepMounted={false}
+          aria-label={`panel-group-${pageKey}`}
+          classNames={{ tab: classes.selectedPanelTab }}
+        >
+          <Tabs.List justify='left' aria-label={`panel-tabs-${pageKey}`}>
+            {allPanels.map(
+              (panel) =>
+                !panel.hidden && (
+                  <Tooltip
+                    label={panel.label ?? panel.name}
+                    key={panel.name}
+                    disabled={expanded}
+                    position='right'
+                  >
+                    <Tabs.Tab
+                      p='xs'
+                      key={`panel-label-${panel.name}`}
+                      value={panel.name}
+                      leftSection={panel.icon}
+                      hidden={panel.hidden}
+                      disabled={panel.disabled}
+                      style={{ cursor: panel.disabled ? 'unset' : 'pointer' }}
+                      onClick={(event: any) =>
+                        handlePanelChange(panel.name, event)
+                      }
+                    >
+                      {expanded && panel.label}
+                    </Tabs.Tab>
+                  </Tooltip>
+                )
+            )}
+            {collapsible && (
+              <Group wrap='nowrap' gap='xs'>
+                <ActionIcon
+                  style={{
+                    paddingLeft: '10px'
+                  }}
+                  onClick={() => setExpanded(!expanded)}
+                  variant='transparent'
+                  size='md'
+                >
+                  {expanded ? (
+                    <IconLayoutSidebarLeftCollapse opacity={0.5} />
+                  ) : (
+                    <IconLayoutSidebarRightCollapse opacity={0.5} />
+                  )}
+                </ActionIcon>
+                {pluginPanelSet.isLoading && <Loader size='xs' />}
+              </Group>
+            )}
+          </Tabs.List>
+          {allPanels.map(
+            (panel) =>
+              !panel.hidden && (
+                <Tabs.Panel
+                  key={`panel-${panel.name}`}
+                  value={panel.name}
+                  aria-label={`nav-panel-${identifierString(
+                    `${pageKey}-${panel.name}`
+                  )}`}
+                  p='sm'
+                  style={{
+                    overflowX: 'scroll',
+                    width: '100%'
+                  }}
+                >
+                  <Stack gap='md'>
+                    {panel.showHeadline !== false && (
+                      <>
+                        <Group justify='space-between'>
+                          <StylishText size='xl'>{panel.label}</StylishText>
+                          {panel.controls && (
+                            <Group justify='right' wrap='nowrap'>
+                              {panel.controls}
+                            </Group>
+                          )}
+                        </Group>
+                        <Divider />
+                      </>
+                    )}
+                    <Boundary label={`PanelContent-${panel.name}`}>
+                      {panel.content}
+                    </Boundary>
+                  </Stack>
+                </Tabs.Panel>
+              )
+          )}
+        </Tabs>
+      </Paper>
+    </Boundary>
+  );
+}
+
+function IndexPanelComponent({
+  pageKey,
+  selectedPanel,
+  panels
+}: Readonly<PanelProps>) {
+  const lastUsedPanel = useLocalState((state) => {
+    const panelName =
+      selectedPanel || state.lastUsedPanels[pageKey] || panels[0]?.name;
+
+    const panel = panels.findIndex(
+      (p) => p.name === panelName && !p.disabled && !p.hidden
+    );
+    if (panel === -1) {
+      return panels.find((p) => !p.disabled && !p.hidden)?.name || '';
+    }
+
+    return panelName;
+  });
+
+  return <Navigate to={lastUsedPanel} replace />;
+}
+
+/**
+ * Render a panel group. The current panel will be appended to the current url.
+ * The last opened panel will be stored in local storage and opened if no panel is provided via url param
+ * @param panels - The list of panels to display
+ * @param onPanelChange - Callback when the active panel changes
+ * @param collapsible - If true, the panel group can be collapsed (defaults to true)
+ */
+export function PanelGroup(props: Readonly<PanelProps>) {
+  return (
+    <Routes>
+      <Route index element={<IndexPanelComponent {...props} />} />
+      <Route path='/:panel/*' element={<BasePanelGroup {...props} />} />
+    </Routes>
+  );
+}

package/src/components/plugins/LocateItemButton.tsx

@@ -0,0 +1,94 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { t } from '@lingui/core/macro';
+import { IconRadar } from '@tabler/icons-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import { usePluginsWithMixin } from '../../hooks/UsePlugins';
+import { ActionButton } from '../buttons/ActionButton';
+import type { PluginInterface } from './PluginInterface';
+
+export default function LocateItemButton({
+  stockId,
+  locationId
+}: Readonly<{
+  stockId?: number;
+  locationId?: number;
+}>) {
+  const locatePlugins = usePluginsWithMixin('locate');
+
+  const [selectedPlugin, setSelectedPlugin] = useState<string | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    // Ensure that the selected plugin is in the list of available plugins
+    if (selectedPlugin && locatePlugins) {
+      const plugin = locatePlugins.find(
+        (plugin: PluginInterface) => plugin.key === selectedPlugin
+      );
+      if (!plugin) {
+        setSelectedPlugin(undefined);
+      }
+    } else {
+      setSelectedPlugin(locatePlugins[0]?.key ?? undefined);
+    }
+  }, [selectedPlugin, locatePlugins]);
+
+  const locateFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      plugin: {
+        field_type: 'choice',
+        value: selectedPlugin,
+        onValueChange: (value: string) => {
+          setSelectedPlugin(value);
+        },
+        choices: locatePlugins.map((plugin: PluginInterface) => {
+          return {
+            value: plugin.key,
+            display_name: plugin.meta?.human_name ?? plugin.name
+          };
+        })
+      },
+      item: {
+        hidden: true,
+        value: stockId
+      },
+      location: {
+        hidden: true,
+        value: locationId
+      }
+    };
+  }, [stockId, locationId, locatePlugins]);
+
+  const locateForm = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.plugin_locate_item),
+    method: 'POST',
+    title: t`Locate Item`,
+    fields: locateFields,
+    successMessage: t`Item location requested`
+  });
+
+  if (!locatePlugins || locatePlugins.length === 0) {
+    return null;
+  }
+
+  if (!stockId && !locationId) {
+    return null;
+  }
+
+  return (
+    <>
+      {locateForm.modal}
+      <ActionButton
+        icon={<IconRadar />}
+        variant='outline'
+        size='lg'
+        tooltip={t`Locate Item`}
+        onClick={locateForm.open}
+        tooltipAlignment='bottom'
+      />
+    </>
+  );
+}

package/src/components/plugins/PluginContext.tsx

@@ -0,0 +1,67 @@
+import { useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { api, queryClient } from '../../App';
+import { useLocalState } from '../../states/LocalState';
+import {
+  useGlobalSettingsState,
+  useUserSettingsState
+} from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+
+import {
+  INVENTREE_PLUGIN_VERSION,
+  type InvenTreePluginContext
+} from '@lib/types/Plugins';
+import {
+  useBulkEditApiFormModal,
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+
+export const useInvenTreeContext = () => {
+  const [locale, host] = useLocalState((s) => [s.language, s.host]);
+  const navigate = useNavigate();
+  const user = useUserState();
+  const { colorScheme } = useMantineColorScheme();
+  const theme = useMantineTheme();
+  const globalSettings = useGlobalSettingsState();
+  const userSettings = useUserSettingsState();
+
+  const contextData = useMemo<InvenTreePluginContext>(() => {
+    return {
+      version: INVENTREE_PLUGIN_VERSION,
+      user: user,
+      host: host,
+      locale: locale,
+      api: api,
+      queryClient: queryClient,
+      navigate: navigate,
+      globalSettings: globalSettings,
+      userSettings: userSettings,
+      theme: theme,
+      colorScheme: colorScheme,
+      forms: {
+        bulkEdit: useBulkEditApiFormModal,
+        create: useCreateApiFormModal,
+        delete: useDeleteApiFormModal,
+        edit: useEditApiFormModal
+      }
+    };
+  }, [
+    user,
+    host,
+    api,
+    locale,
+    queryClient,
+    navigate,
+    globalSettings,
+    userSettings,
+    theme,
+    colorScheme
+  ]);
+
+  return contextData;
+};

package/src/components/plugins/PluginDrawer.tsx

@@ -0,0 +1,156 @@
+import { t } from '@lingui/core/macro';
+import { Accordion, Alert, Card, Stack, Text } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { useInstance } from '../../hooks/UseInstance';
+import { InfoItem } from '../items/InfoItem';
+import { StylishText } from '../items/StylishText';
+import { PluginSettingList } from '../settings/SettingList';
+import type { PluginInterface } from './PluginInterface';
+import PluginSettingsPanel from './PluginSettingsPanel';
+
+/**
+ * Displays a drawer with detailed information on a specific plugin
+ */
+export default function PluginDrawer({
+  pluginKey,
+  pluginInstance
+}: Readonly<{
+  pluginKey?: string;
+  pluginInstance: PluginInterface;
+}>) {
+  const { id } = useParams();
+
+  const pluginPrimaryKey: string = useMemo(() => {
+    return pluginKey || id || '';
+  }, [pluginKey, id]);
+
+  const { instance: pluginAdmin } = useInstance({
+    endpoint: ApiEndpoints.plugin_admin,
+    pathParams: { key: pluginPrimaryKey },
+    defaultValue: {},
+    hasPrimaryKey: false,
+    refetchOnMount: true
+  });
+
+  const hasSettings: boolean = useMemo(() => {
+    return !!pluginInstance?.mixins?.settings;
+  }, [pluginInstance]);
+
+  if (!pluginInstance.active) {
+    return (
+      <Alert
+        color='red'
+        title={t`Plugin Inactive`}
+        icon={<IconExclamationCircle />}
+      >
+        <Text>{t`Plugin is not active`}</Text>
+      </Alert>
+    );
+  }
+
+  return (
+    <Accordion defaultValue={['plugin-details', 'plugin-settings']} multiple>
+      <Accordion.Item value='plugin-details'>
+        <Accordion.Control>
+          <StylishText size='lg'>{t`Plugin Information`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <Stack gap='xs'>
+            <Card withBorder>
+              <Stack gap='md'>
+                <Stack pos='relative' gap='xs'>
+                  <InfoItem
+                    type='text'
+                    name={t`Name`}
+                    value={pluginInstance?.name}
+                  />
+                  <InfoItem
+                    type='text'
+                    name={t`Description`}
+                    value={pluginInstance?.meta.description}
+                  />
+                  <InfoItem
+                    type='text'
+                    name={t`Author`}
+                    value={pluginInstance?.meta.author}
+                  />
+                  <InfoItem
+                    type='text'
+                    name={t`Date`}
+                    value={pluginInstance?.meta.pub_date}
+                  />
+                  <InfoItem
+                    type='text'
+                    name={t`Version`}
+                    value={pluginInstance?.meta.version}
+                  />
+                  <InfoItem
+                    type='boolean'
+                    name={t`Active`}
+                    value={pluginInstance?.active}
+                  />
+                </Stack>
+              </Stack>
+            </Card>
+            <Card withBorder>
+              <Stack gap='md'>
+                <Stack pos='relative' gap='xs'>
+                  {pluginInstance?.is_package && (
+                    <InfoItem
+                      type='text'
+                      name={t`Package Name`}
+                      value={pluginInstance?.package_name}
+                    />
+                  )}
+                  <InfoItem
+                    type='text'
+                    name={t`Installation Path`}
+                    value={pluginInstance?.meta.package_path}
+                  />
+                  <InfoItem
+                    type='boolean'
+                    name={t`Builtin`}
+                    value={pluginInstance?.is_builtin}
+                  />
+                  <InfoItem
+                    type='boolean'
+                    name={t`Package`}
+                    value={pluginInstance?.is_package}
+                  />
+                </Stack>
+              </Stack>
+            </Card>
+          </Stack>
+        </Accordion.Panel>
+      </Accordion.Item>
+      {hasSettings && (
+        <Accordion.Item value='plugin-settings'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Plugin Settings`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <Card withBorder>
+              <PluginSettingList pluginKey={pluginPrimaryKey} />
+            </Card>
+          </Accordion.Panel>
+        </Accordion.Item>
+      )}
+      {pluginAdmin?.source && (
+        <Accordion.Item value='plugin-custom'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Plugin Configuration`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <Card withBorder>
+              <PluginSettingsPanel pluginAdmin={pluginAdmin} />
+            </Card>
+          </Accordion.Panel>
+        </Accordion.Item>
+      )}
+    </Accordion>
+  );
+}

package/src/components/plugins/PluginInterface.tsx

@@ -0,0 +1,34 @@
+/**
+ * Interface which defines a single plugin object
+ */
+export interface PluginInterface {
+  pk: number;
+  key: string;
+  name: string;
+  active: boolean;
+  is_builtin: boolean;
+  is_sample: boolean;
+  is_installed: boolean;
+  is_package: boolean;
+  package_name: string | null;
+  admin_js_file: string | null;
+  meta: {
+    author: string | null;
+    description: string | null;
+    human_name: string | null;
+    license: string | null;
+    package_path: string | null;
+    pub_date: string | null;
+    settings_url: string | null;
+    slug: string | null;
+    version: string | null;
+    website: string | null;
+  };
+  mixins: Record<
+    string,
+    {
+      key: string;
+      human_name: string;
+    }
+  >;
+}