@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/modals/LicenseModal.tsx

@@ -1,116 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import {
-  Accordion,
-  Alert,
-  Divider,
-  Group,
-  LoadingOverlay,
-  Space,
-  Stack,
-  Tabs,
-  Text
-} from '@mantine/core';
-import { useQuery } from '@tanstack/react-query';
-import { useEffect, useMemo, useState } from 'react';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { apiUrl } from '@lib/functions/Api';
-import { api } from '../../App';
-
-export function LicenceView(entries: Readonly<any[]>) {
-  return (
-    <Stack gap='xs'>
-      <Divider />
-      {entries?.length > 0 ? (
-        <Accordion variant='contained' defaultValue='-'>
-          {entries?.map((entry: any, index: number) => (
-            <Accordion.Item
-              key={entry.name + entry.license + entry.version}
-              value={`entry-${index}`}
-            >
-              <Accordion.Control>
-                <Group justify='space-between' grow>
-                  <Text>{entry.name}</Text>
-                  <Text>{entry.license}</Text>
-                  <Space />
-                  <Text>{entry.version}</Text>
-                </Group>
-              </Accordion.Control>
-              <Accordion.Panel style={{ whiteSpace: 'pre-line' }}>
-                {entry.licensetext || t`No license text available`}
-              </Accordion.Panel>
-            </Accordion.Item>
-          ))}
-        </Accordion>
-      ) : (
-        <Text>
-          <Trans>No Information provided - this is likely a server issue</Trans>
-        </Text>
-      )}
-    </Stack>
-  );
-}
-
-export function LicenseModal() {
-  const { data, isFetching, isError } = useQuery({
-    queryKey: ['license'],
-    refetchOnMount: true,
-    queryFn: () =>
-      api
-        .get(apiUrl(ApiEndpoints.license))
-        .then((res) => res.data ?? {})
-        .catch(() => {})
-  });
-
-  const packageKeys = useMemo(() => {
-    return !!data ? Object.keys(data ?? {}) : [];
-  }, [data]);
-
-  const [selectedKey, setSelectedKey] = useState<string | null>('');
-
-  useEffect(() => {
-    if (packageKeys.length > 0) {
-      setSelectedKey(packageKeys[0]);
-    }
-  }, [packageKeys]);
-
-  return (
-    <Stack gap='xs'>
-      <Divider />
-      <LoadingOverlay visible={isFetching} />
-      {isFetching && (
-        <Text>
-          <Trans>Loading license information</Trans>
-        </Text>
-      )}
-      {isError ? (
-        <Alert color='red' title={t`Error`}>
-          <Text>
-            <Trans>Failed to fetch license information</Trans>
-          </Text>
-        </Alert>
-      ) : (
-        <Tabs
-          defaultValue={packageKeys[0] ?? ''}
-          value={selectedKey}
-          onChange={setSelectedKey}
-        >
-          <Tabs.List>
-            {packageKeys.map((key) => (
-              <Tabs.Tab key={key} value={key}>
-                <Trans>{key} Packages</Trans>
-              </Tabs.Tab>
-            ))}
-          </Tabs.List>
-
-          {packageKeys.map((key) => (
-            <Tabs.Panel key={key} value={key}>
-              {LicenceView(data[key] ?? [])}
-            </Tabs.Panel>
-          ))}
-        </Tabs>
-      )}
-    </Stack>
-  );
-}

package/src/components/modals/QrModal.tsx

@@ -1,21 +0,0 @@
-import {} from '@mantine/core';
-import type { ContextModalProps } from '@mantine/modals';
-import type { NavigateFunction } from 'react-router-dom';
-import { ScanInputHandler } from '../barcodes/BarcodeScanDialog';
-
-export function QrModal({
-  context,
-  id,
-  innerProps
-}: Readonly<
-  ContextModalProps<{ modalBody: string; navigate: NavigateFunction }>
->) {
-  function close() {
-    context.closeModal(id);
-  }
-  function navigate() {
-    context.closeModal(id);
-  }
-
-  return <ScanInputHandler navigate={innerProps.navigate} onClose={close} />;
-}

package/src/components/modals/ServerInfoModal.tsx

@@ -1,136 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { Badge, Button, Divider, Group, Stack, Table } from '@mantine/core';
-import type { ContextModalProps } from '@mantine/modals';
-
-import { useServerApiState } from '../../states/ApiState';
-import { OnlyStaff } from '../items/OnlyStaff';
-import { StylishText } from '../items/StylishText';
-
-export function ServerInfoModal({
-  context,
-  id
-}: ContextModalProps<{ modalBody: string }>) {
-  const [server] = useServerApiState((state) => [state.server]);
-
-  return (
-    <Stack>
-      <Divider />
-      <StylishText size='lg'>
-        <Trans>Server</Trans>
-      </StylishText>
-      <Table striped>
-        <Table.Tbody>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Instance Name</Trans>
-            </Table.Td>
-            <Table.Td>{server.instance}</Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Server Version</Trans>
-            </Table.Td>
-            <Table.Td>{server.version}</Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>API Version</Trans>
-            </Table.Td>
-            <Table.Td>{server.apiVersion}</Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Database</Trans>
-            </Table.Td>
-            <Table.Td>
-              <OnlyStaff>{server.database}</OnlyStaff>
-            </Table.Td>
-          </Table.Tr>
-          {server.debug_mode && (
-            <Table.Tr>
-              <Table.Td>
-                <Trans>Debug Mode</Trans>
-              </Table.Td>
-              <Table.Td>
-                <Badge color='red'>INVE-W4</Badge>
-                <Trans>Server is running in debug mode</Trans>
-              </Table.Td>
-            </Table.Tr>
-          )}
-          {server.docker_mode && (
-            <Table.Tr>
-              <Table.Td>
-                <Trans>Docker Mode</Trans>
-              </Table.Td>
-              <Table.Td>
-                <Trans>Server is deployed using docker</Trans>
-              </Table.Td>
-            </Table.Tr>
-          )}
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Plugin Support</Trans>
-            </Table.Td>
-            <Table.Td>
-              <Badge color={server.plugins_enabled ? 'green' : 'red'}>
-                {server.plugins_enabled ? (
-                  <Trans>Plugin support enabled</Trans>
-                ) : (
-                  <Trans>Plugin support disabled</Trans>
-                )}
-              </Badge>
-            </Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Server status</Trans>
-            </Table.Td>
-            <Table.Td>
-              <OnlyStaff>
-                <Badge color={server.system_health ? 'green' : 'yellow'}>
-                  {server.system_health ? (
-                    <Trans>Healthy</Trans>
-                  ) : (
-                    <Trans>Issues detected</Trans>
-                  )}
-                </Badge>
-              </OnlyStaff>
-            </Table.Td>
-          </Table.Tr>
-          {server?.worker_running == false && (
-            <Table.Tr>
-              <Table.Td>
-                <Trans>Background Worker</Trans>
-              </Table.Td>
-              <Table.Td>
-                <Badge color='red'>INVE-W5</Badge>
-                <Trans>The Background worker process is not running.</Trans>
-              </Table.Td>
-            </Table.Tr>
-          )}
-          {!server?.email_configured && (
-            <Table.Tr>
-              <Table.Td>
-                <Trans>Email Settings</Trans>
-              </Table.Td>
-              <Table.Td>
-                <Badge color='red'>INVE-W7</Badge>
-                <Trans>Email settings not configured.</Trans>
-              </Table.Td>
-            </Table.Tr>
-          )}
-        </Table.Tbody>
-      </Table>
-      <Divider />
-      <Group justify='right'>
-        <Button
-          onClick={() => {
-            context.closeModal(id);
-          }}
-        >
-          <Trans>Close</Trans>
-        </Button>
-      </Group>
-    </Stack>
-  );
-}

package/src/components/nav/Alerts.tsx

@@ -1,130 +0,0 @@
-import { ActionIcon, Alert, Menu, Tooltip } from '@mantine/core';
-import { IconExclamationCircle } from '@tabler/icons-react';
-import { useMemo, useState } from 'react';
-
-import { t } from '@lingui/core/macro';
-import { docLinks } from '../../defaults/links';
-import { useServerApiState } from '../../states/ApiState';
-import { useGlobalSettingsState } from '../../states/SettingsState';
-import { useUserState } from '../../states/UserState';
-
-interface AlertInfo {
-  key: string;
-  title: string;
-  code?: string;
-  message: string;
-}
-
-/**
- * The `Alerts` component displays a menu of alerts for staff users based on the server state
- * and global settings. Alerts are shown as a dropdown menu with actionable items that can be dismissed.
- *
- * Dismissed alerts are filtered out and will not reappear in the current session.
- *
- * @returns A dropdown menu of alerts for staff users or `null` if there are no alerts or the user is not a staff member.
- */
-export function Alerts() {
-  const user = useUserState();
-  const [server] = useServerApiState((state) => [state.server]);
-  const globalSettings = useGlobalSettingsState();
-
-  const [dismissed, setDismissed] = useState<string[]>([]);
-
-  const alerts: AlertInfo[] = useMemo(() => {
-    const _alerts: AlertInfo[] = [];
-
-    if (server?.debug_mode) {
-      _alerts.push({
-        key: 'debug',
-        title: t`Debug Mode`,
-        code: 'INVE-W4',
-        message: t`The server is running in debug mode.`
-      });
-    }
-
-    if (!server?.worker_running) {
-      _alerts.push({
-        key: 'worker',
-        title: t`Background Worker`,
-        code: 'INVE-W5',
-        message: t`The background worker process is not running.`
-      });
-    }
-
-    if (!server?.email_configured) {
-      _alerts.push({
-        key: 'email',
-        title: t`Email settings`,
-        code: 'INVE-W7',
-        message: t`Email settings not configured.`
-      });
-    }
-
-    if (globalSettings.isSet('SERVER_RESTART_REQUIRED')) {
-      _alerts.push({
-        key: 'restart',
-        title: t`Server Restart`,
-        code: 'INVE-W6',
-        message: t`The server requires a restart to apply changes.`
-      });
-    }
-
-    const n_migrations =
-      Number.parseInt(globalSettings.getSetting('_PENDING_MIGRATIONS')) ?? 0;
-
-    if (n_migrations > 0) {
-      _alerts.push({
-        key: 'migrations',
-        title: t`Database Migrations`,
-        code: 'INVE-W8',
-        message: t`There are pending database migrations.`
-      });
-    }
-
-    return _alerts.filter((alert) => !dismissed.includes(alert.key));
-  }, [server, dismissed, globalSettings]);
-
-  if (user.isStaff() && alerts.length > 0)
-    return (
-      <Menu withinPortal={true} position='bottom-end'>
-        <Menu.Target>
-          <Tooltip position='bottom-end' label={t`Alerts`}>
-            <ActionIcon
-              variant='transparent'
-              aria-label='open-alerts'
-              color='red'
-            >
-              <IconExclamationCircle />
-            </ActionIcon>
-          </Tooltip>
-        </Menu.Target>
-        <Menu.Dropdown>
-          {alerts.map((alert) => (
-            <Menu.Item key={`alert-item-${alert.key}`}>
-              <Alert
-                withCloseButton
-                color='red'
-                title={alert.title}
-                onClose={() => setDismissed([...dismissed, alert.key])}
-              >
-                {alert.message}
-                {alert.code && errorCodeLink(alert.code)}
-              </Alert>
-            </Menu.Item>
-          ))}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  return null;
-}
-export function errorCodeLink(code: string) {
-  return (
-    <a
-      href={`${docLinks.errorcodes}#${code.toLowerCase()}`}
-      target='_blank'
-      rel='noreferrer'
-    >
-      {t`Learn more about ${code}`}
-    </a>
-  );
-}

package/src/components/nav/BreadcrumbList.tsx

@@ -1,84 +0,0 @@
-import {
-  ActionIcon,
-  Anchor,
-  Breadcrumbs,
-  Group,
-  Paper,
-  Text
-} from '@mantine/core';
-import { IconMenu2 } from '@tabler/icons-react';
-import { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { identifierString } from '../../functions/conversion';
-import { navigateToLink } from '../../functions/navigation';
-
-export type Breadcrumb = {
-  icon?: React.ReactNode;
-  name: string;
-  url: string;
-};
-
-/**
- * Construct a breadcrumb list, with integrated navigation.
- */
-export function BreadcrumbList({
-  breadcrumbs,
-  navCallback
-}: Readonly<{
-  breadcrumbs: Breadcrumb[];
-  navCallback?: () => void;
-}>) {
-  const navigate = useNavigate();
-
-  const elements = useMemo(() => {
-    // Limit to 7 active elements
-    if (breadcrumbs.length > 7) {
-      return [
-        ...breadcrumbs.slice(0, 3),
-        { name: '...', url: '#' },
-        ...breadcrumbs.slice(-3)
-      ];
-    } else {
-      return breadcrumbs;
-    }
-  }, [breadcrumbs]);
-
-  return (
-    <Paper p='7' radius='xs' shadow='xs'>
-      <Group gap='xs'>
-        {navCallback && (
-          <ActionIcon
-            key='nav-breadcrumb-action'
-            aria-label='nav-breadcrumb-action'
-            onClick={navCallback}
-            variant='transparent'
-          >
-            <IconMenu2 />
-          </ActionIcon>
-        )}
-        <Breadcrumbs key='breadcrumbs' separator='>'>
-          {elements.map((breadcrumb, index) => {
-            return (
-              <Anchor
-                key={`${index}-${breadcrumb.name}`}
-                aria-label={`breadcrumb-${index}-${identifierString(
-                  breadcrumb.name
-                )}`}
-                onClick={(event: any) =>
-                  breadcrumb.url &&
-                  navigateToLink(breadcrumb.url, navigate, event)
-                }
-              >
-                <Group gap={4}>
-                  {breadcrumb.icon}
-                  <Text size='sm'>{breadcrumb.name}</Text>
-                </Group>
-              </Anchor>
-            );
-          })}
-        </Breadcrumbs>
-      </Group>
-    </Paper>
-  );
-}

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

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

package/src/components/nav/DetailDrawer.tsx

@@ -1,105 +0,0 @@
-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 '@lib/types/Core';
-import { useLocalState } from '../../states/LocalState';
-import { StylishText } from '../items/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;
-}
-
-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] = useLocalState((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 = useLocalState((state) => state.addDetailDrawer);
-
-  const onNavigate = useCallback(() => {
-    addDetailDrawer(1);
-  }, [addDetailDrawer]);
-
-  return (
-    <Link to={to} onClick={onNavigate}>
-      <Text>{text}</Text>
-    </Link>
-  );
-}

package/src/components/nav/Footer.tsx

@@ -1,11 +0,0 @@
-import * as classes from '../../main.css';
-
-export function Footer() {
-  return (
-    <div className={classes.layoutFooter}>
-      {
-        // Placeholder for footer links
-      }
-    </div>
-  );
-}