@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/panels/Panel.tsx

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

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

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

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

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

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

@@ -1,34 +0,0 @@
-/**
- * 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;
-    }
-  >;
-}