@inventreedb/ui 0.0.1

package/src/components/items/GettingStartedCarousel.tsx

@@ -0,0 +1,49 @@
+import { Trans } from '@lingui/react/macro';
+import { Carousel } from '@mantine/carousel';
+import { Anchor, Button, Paper, Text } from '@mantine/core';
+
+import * as classes from './GettingStartedCarousel.css';
+import type { MenuLinkItem } from './MenuLinks';
+import { StylishText } from './StylishText';
+
+function StartedCard({ title, description, link }: Readonly<MenuLinkItem>) {
+  return (
+    <Paper shadow='md' p='xl' radius='md' className={classes.card}>
+      <div>
+        <StylishText size='md'>{title}</StylishText>
+        <Text size='sm' className={classes.category} lineClamp={2}>
+          {description}
+        </Text>
+      </div>
+      <Anchor href={link} target='_blank'>
+        <Button>
+          <Trans>Read More</Trans>
+        </Button>
+      </Anchor>
+    </Paper>
+  );
+}
+
+export function GettingStartedCarousel({
+  items
+}: Readonly<{
+  items: MenuLinkItem[];
+}>) {
+  const slides = items.map((item) => (
+    <Carousel.Slide key={item.id}>
+      <StartedCard {...item} />
+    </Carousel.Slide>
+  ));
+
+  return (
+    <Carousel
+      slideSize={{ base: '100%', sm: '50%', md: '33.333333%' }}
+      slideGap={{ base: 0, sm: 'md' }}
+      slidesToScroll={3}
+      align='start'
+      loop
+    >
+      {slides}
+    </Carousel>
+  );
+}

package/src/components/items/InfoItem.tsx

@@ -0,0 +1,64 @@
+import { Trans } from '@lingui/react/macro';
+import { Code, Flex, Group, Text } from '@mantine/core';
+import { Link, type To } from 'react-router-dom';
+
+import { YesNoButton } from '../buttons/YesNoButton';
+import { DetailDrawerLink } from '../nav/DetailDrawer';
+
+export function InfoItem({
+  name,
+  children,
+  type,
+  value,
+  link,
+  detailDrawerLink
+}: Readonly<{
+  name: string;
+  children?: React.ReactNode;
+  type?: 'text' | 'boolean' | 'code';
+  value?: any;
+  link?: To;
+  detailDrawerLink?: boolean;
+}>) {
+  function renderComponent() {
+    if (value === undefined) return null;
+
+    if (type === 'text') {
+      return <Text>{value || <Trans>None</Trans>}</Text>;
+    }
+
+    if (type === 'boolean') {
+      return <YesNoButton value={value || false} />;
+    }
+
+    if (type === 'code') {
+      return (
+        <Code style={{ wordWrap: 'break-word', maxWidth: '400px' }}>
+          {value}
+        </Code>
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <Group justify='space-between'>
+      <Text fz='sm' fw={700}>
+        {name}:
+      </Text>
+      <Flex>
+        {children}
+        {link ? (
+          detailDrawerLink ? (
+            <DetailDrawerLink to={link} text={value} />
+          ) : (
+            <Link to={link}>{renderComponent()}</Link>
+          )
+        ) : (
+          renderComponent()
+        )}
+      </Flex>
+    </Group>
+  );
+}

package/src/components/items/InvenTreeLogo.tsx

@@ -0,0 +1,24 @@
+import { t } from '@lingui/core/macro';
+import { ActionIcon } from '@mantine/core';
+import { forwardRef } from 'react';
+import { NavLink } from 'react-router-dom';
+
+import InvenTreeIcon from './inventree.svg';
+
+export const InvenTreeLogoHomeButton = forwardRef<HTMLDivElement>(
+  (props, ref) => {
+    return (
+      <div ref={ref} {...props}>
+        <NavLink to={'/'}>
+          <ActionIcon size={28} variant='transparent'>
+            <InvenTreeLogo />
+          </ActionIcon>
+        </NavLink>
+      </div>
+    );
+  }
+);
+
+export const InvenTreeLogo = () => {
+  return <img src={InvenTreeIcon} alt={t`InvenTree Logo`} height={28} />;
+};

package/src/components/items/LanguageSelect.tsx

@@ -0,0 +1,43 @@
+import { Select } from '@mantine/core';
+import { useEffect, useState } from 'react';
+
+import { getSupportedLanguages } from '../../contexts/LanguageContext';
+import { useLocalState } from '../../states/LocalState';
+
+export function LanguageSelect({ width = 80 }: Readonly<{ width?: number }>) {
+  const [value, setValue] = useState<string | null>(null);
+  const [locale, setLanguage] = useLocalState((state) => [
+    state.language,
+    state.setLanguage
+  ]);
+  const [langOptions, setLangOptions] = useState<any[]>([]);
+
+  // change global language on change
+  useEffect(() => {
+    if (value === null) return;
+    setLanguage(value as string);
+  }, [value]);
+
+  // set language on component load
+  useEffect(() => {
+    const languages = getSupportedLanguages();
+
+    const newLangOptions = Object.keys(languages).map((key) => ({
+      value: key,
+      label: languages[key as string]
+    }));
+    setLangOptions(newLangOptions);
+    setValue(locale);
+  }, [locale]);
+
+  return (
+    <Select
+      w={width}
+      data={langOptions}
+      value={value}
+      onChange={setValue}
+      searchable
+      aria-label='Select language'
+    />
+  );
+}

package/src/components/items/LanguageToggle.tsx

@@ -0,0 +1,37 @@
+import { ActionIcon, Group, Tooltip } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconLanguage } from '@tabler/icons-react';
+
+import { t } from '@lingui/core/macro';
+import { LanguageSelect } from './LanguageSelect';
+
+export function LanguageToggle() {
+  const [open, toggle] = useDisclosure();
+
+  return (
+    <Group
+      justify='center'
+      style={{
+        border: open === true ? '1px dashed' : '',
+        margin: open === true ? 2 : 12,
+        padding: open === true ? 8 : 0
+      }}
+    >
+      <Tooltip label={t`Select language`}>
+        <ActionIcon
+          onClick={() => toggle.toggle()}
+          size='lg'
+          variant='transparent'
+          aria-label='Language toggle'
+        >
+          <IconLanguage />
+        </ActionIcon>
+      </Tooltip>
+      {open && (
+        <Group>
+          <LanguageSelect />
+        </Group>
+      )}
+    </Group>
+  );
+}

package/src/components/items/MenuLinks.tsx

@@ -0,0 +1,113 @@
+import {
+  Anchor,
+  Divider,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+  UnstyledButton
+} from '@mantine/core';
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { InvenTreeIcon, type InvenTreeIconType } from '../../functions/icons';
+import { navigateToLink } from '../../functions/navigation';
+import { StylishText } from './StylishText';
+
+export interface MenuLinkItem {
+  id: string;
+  title: string | JSX.Element;
+  description?: string;
+  icon?: InvenTreeIconType;
+  action?: () => void;
+  link?: string;
+  external?: boolean;
+  hidden?: boolean;
+}
+
+export function MenuLinks({
+  title,
+  links,
+  beforeClick
+}: Readonly<{
+  title: string;
+  links: MenuLinkItem[];
+  beforeClick?: () => void;
+}>) {
+  const navigate = useNavigate();
+
+  // Filter out any hidden links
+  const visibleLinks = useMemo(
+    () => links.filter((item) => !item.hidden),
+    [links]
+  );
+
+  if (visibleLinks.length == 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Stack gap='xs'>
+        <Divider />
+        <StylishText size='md'>{title}</StylishText>
+        <Divider />
+        <SimpleGrid
+          cols={{ base: 1, '400px': 2 }}
+          type='container'
+          spacing={0}
+          p={3}
+        >
+          {visibleLinks.map((item) => (
+            <Tooltip
+              key={`menu-link-tooltip-${item.id}`}
+              label={item.description}
+              hidden={!item.description}
+            >
+              {item.link && item.external ? (
+                <Anchor href={item.link}>
+                  <Group wrap='nowrap'>
+                    {item.external && (
+                      <InvenTreeIcon
+                        icon={item.icon ?? 'link'}
+                        iconProps={{ size: '14' }}
+                      />
+                    )}
+                    <Text fw={500} p={5}>
+                      {item.title}
+                    </Text>
+                  </Group>
+                </Anchor>
+              ) : (
+                <UnstyledButton
+                  onClick={(event) => {
+                    if (item.link) {
+                      beforeClick?.();
+                      navigateToLink(item.link, navigate, event);
+                    } else if (item.action) {
+                      beforeClick?.();
+                      item.action();
+                    }
+                  }}
+                >
+                  <Group wrap='nowrap'>
+                    {item.icon && (
+                      <InvenTreeIcon
+                        icon={item.icon}
+                        iconProps={{ size: '14' }}
+                      />
+                    )}
+                    <Text fw={500} p={5}>
+                      {item.title}
+                    </Text>
+                  </Group>
+                </UnstyledButton>
+              )}
+            </Tooltip>
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}

package/src/components/items/OnlyStaff.tsx

@@ -0,0 +1,10 @@
+import { Trans } from '@lingui/react/macro';
+
+import { useUserState } from '../../states/UserState';
+
+export const OnlyStaff = ({ children }: { children: any }) => {
+  const [user] = useUserState((state) => [state.user]);
+
+  if (user?.is_staff) return children;
+  return <Trans>This information is only available for staff users</Trans>;
+};

package/src/components/items/ProgressBar.tsx

@@ -0,0 +1,45 @@
+import { Progress, Stack, Text } from '@mantine/core';
+import { useMemo } from 'react';
+
+export type ProgressBarProps = {
+  value: number;
+  maximum?: number;
+  label?: string;
+  progressLabel?: boolean;
+  animated?: boolean;
+  size?: string;
+};
+
+/**
+ * A progress bar element, built on mantine.Progress
+ * The color of the bar is determined based on the value
+ */
+export function ProgressBar(props: Readonly<ProgressBarProps>) {
+  const progress = useMemo(() => {
+    const maximum = props.maximum ?? 100;
+    const value = Math.max(props.value, 0);
+
+    if (maximum == 0) {
+      return 0;
+    }
+
+    return (value / maximum) * 100;
+  }, [props]);
+
+  return (
+    <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
+      {props.progressLabel && (
+        <Text ta='center' size='xs'>
+          {props.value} / {props.maximum}
+        </Text>
+      )}
+      <Progress
+        value={progress}
+        color={progress < 100 ? 'orange' : progress > 100 ? 'blue' : 'green'}
+        size={props.size ?? 'md'}
+        radius='sm'
+        animated={props.animated}
+      />
+    </Stack>
+  );
+}

package/src/components/items/StylishText.tsx

@@ -0,0 +1,59 @@
+import {
+  type MantineSize,
+  Text,
+  darken,
+  getThemeColor,
+  lighten,
+  useMantineColorScheme,
+  useMantineTheme
+} from '@mantine/core';
+import { useMemo } from 'react';
+import { useLocalState } from '../../states/LocalState';
+
+// Hook that memoizes the gradient color based on the primary color of the theme
+const useThematicGradient = () => {
+  const { userTheme } = useLocalState();
+  const theme = useMantineTheme();
+  const colorScheme = useMantineColorScheme();
+
+  const primary = useMemo(() => {
+    return getThemeColor(userTheme.primaryColor, theme);
+  }, [userTheme.primaryColor, theme]);
+
+  const secondary = useMemo(() => {
+    let secondary = primary;
+    if (colorScheme.colorScheme == 'dark') {
+      secondary = lighten(primary, 0.25);
+    } else {
+      secondary = darken(primary, 0.25);
+    }
+
+    return secondary;
+  }, [userTheme, colorScheme, 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/src/components/items/TitleWithDoc.tsx

@@ -0,0 +1,26 @@
+import { Group, Title, type TitleProps } from '@mantine/core';
+
+import { DocInfo } from './DocInfo';
+
+interface DocTitleProps extends TitleProps {
+  text?: string;
+  detail?: string;
+}
+
+export function TitleWithDoc({
+  children,
+  variant,
+  order,
+  size,
+  text,
+  detail
+}: Readonly<DocTitleProps>) {
+  return (
+    <Group>
+      <Title variant={variant} order={order} size={size}>
+        {children}
+      </Title>
+      {text && <DocInfo text={text} detail={detail} />}
+    </Group>
+  );
+}

package/src/components/items/UnavailableIndicator.tsx

@@ -0,0 +1,5 @@
+import { IconAlertCircle } from '@tabler/icons-react';
+
+export function UnavailableIndicator() {
+  return <IconAlertCircle size={18} color='red' />;
+}

package/src/components/items/inventree.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.676"><path fill="#ddbc91" d="M200 199.906v193.196l166.305-96.016V103.139Z"/><path fill="#d9b383" d="M200 199.906v193.196L33.695 297.086V103.139Z"/><path fill="#ddbc91" d="M366.305 103.139 200 199.906 33.695 103.14 200 6.899z"/><g fill="#f3f4e4"><path d="M75.27 127.109v145.46L200 344.583l124.73-72.012V127.109L200 199.684Z"/><path d="M324.73 127.11 200 199.684 75.27 127.109 200 54.93Z"/></g><path fill="#d9dbbc" d="M200 54.929v144.756L75.27 272.569V127.11z"/><path fill="#eaeccf" d="M200 54.929v144.756l124.73 72.884V127.11z"/><path fill="#90a8d8" d="M200 199.901V296.5l83.153-48.008v-96.973zm0 0V296.5l-83.153-48.008v-96.973zm83.153-48.383L200 199.9l-83.153-48.383L200 103.398Z"/></g><g fill="#90a8d8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M-546.667 443.959v216.54l186.4-107.618V335.499Zm0 0v216.54l-186.4-107.618V335.499Z"/><path d="m-360.266 335.499-186.4 108.46-186.401-108.46 186.4-107.87z"/></g><g fill="#90a8d8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M-546.667 227.419v216.54l186.4-107.619V118.96Zm0 0v216.54l-186.4-107.619V118.96Z"/><path d="m-360.266 118.959-186.4 108.46-186.401-108.46 186.4-107.87z"/></g><path fill="#ddbc91" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M-546.667 10.879v216.54l186.4-107.619V-97.58Z"/><path fill="#d9b383" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.676" d="M-546.667 10.879v216.54l-186.4-107.619V-97.58Z"/><path fill="#ddbc91" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m-360.266-97.581-186.4 108.46-186.401-108.46 186.4-107.87z"/><g fill="#f3f4e4" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.058"><path stroke-width="3" d="M-686.466-70.715V92.321l139.798 80.714 139.801-80.714V-70.715l-139.8 81.346z"/><path stroke-width="2.999" d="m-406.866-70.715-139.8 81.345-139.801-81.345 139.8-80.902Z"/></g><path fill="#d9dbbc" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M-546.667-151.617V10.63l-139.8 81.692V-70.715z"/><path fill="#eaeccf" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M-546.667-151.617V10.63l139.8 81.692V-70.715z"/><g fill="#90a8d8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.999"><path d="M-546.667 10.873v108.27l93.2-53.81v-108.69zm0 0v108.27l-93.2-53.81v-108.69z"/><path d="m-453.466-43.357-93.2 54.23-93.201-54.23 93.2-53.935Z"/></g><path fill="none" d="M-787.948-253.366h482.56v946.733h-482.56z"/></svg>

package/src/components/modals/AboutInvenTreeModal.tsx

@@ -0,0 +1,203 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  Anchor,
+  Badge,
+  Button,
+  Divider,
+  Group,
+  Space,
+  Stack,
+  Table,
+  Text
+} from '@mantine/core';
+import type { ContextModalProps } from '@mantine/modals';
+import { useQuery } from '@tanstack/react-query';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { api } from '../../App';
+import { generateUrl } from '../../functions/urls';
+import { useServerApiState } from '../../states/ApiState';
+import { useUserState } from '../../states/UserState';
+import { CopyButton } from '../buttons/CopyButton';
+import { StylishText } from '../items/StylishText';
+
+type AboutLookupRef = {
+  ref: string;
+  title: JSX.Element;
+  link?: string;
+  copy?: boolean;
+};
+
+export function AboutInvenTreeModal({
+  context,
+  id
+}: Readonly<
+  ContextModalProps<{
+    modalBody: string;
+  }>
+>) {
+  const [user] = useUserState((state) => [state.user]);
+  const [server] = useServerApiState((state) => [state.server]);
+
+  if (!user?.is_staff)
+    return (
+      <Text>
+        <Trans>This information is only available for staff users</Trans>
+      </Text>
+    );
+
+  const { isLoading, data } = useQuery({
+    queryKey: ['version'],
+    queryFn: () => api.get(apiUrl(ApiEndpoints.version)).then((res) => res.data)
+  });
+
+  function fillTable(lookup: AboutLookupRef[], data: any, alwaysLink = false) {
+    return lookup.map((map: AboutLookupRef, idx) => (
+      <Table.Tr key={idx}>
+        <Table.Td>{map.title}</Table.Td>
+        <Table.Td>
+          <Group justify='space-between' gap='xs'>
+            {alwaysLink ? (
+              <Anchor href={data[map.ref]} target='_blank'>
+                {data[map.ref]}
+              </Anchor>
+            ) : map.link ? (
+              <Anchor href={map.link} target='_blank'>
+                {data[map.ref]}
+              </Anchor>
+            ) : (
+              data[map.ref]
+            )}
+            {map.copy && <CopyButton value={data[map.ref]} />}
+          </Group>
+        </Table.Td>
+      </Table.Tr>
+    ));
+  }
+  /* renderer */
+  if (isLoading) return <Trans>Loading</Trans>;
+
+  const commit_set: boolean =
+    data.version.commit_hash && data.version.commit_date;
+
+  const copyval = `InvenTree-Version: ${data.version.server}\nDjango Version: ${
+    data.version.django
+  }\n${
+    commit_set
+      ? `Commit Hash: ${data.version.commit_hash}\nCommit Date: ${data.version.commit_date}\nCommit Branch: ${data.version.commit_branch}\n`
+      : ''
+  }Database: ${server.database}\nDebug-Mode: ${
+    server.debug_mode ? 'True' : 'False'
+  }\nDeployed using Docker: ${
+    server.docker_mode ? 'True' : 'False'
+  }\nPlatform: ${server.platform}\nInstaller: ${server.installer ? server.installer : ''}\n${
+    server.target ? `Target: ${server.target}\n` : ''
+  }Active plugins: ${JSON.stringify(server.active_plugins)}`;
+
+  const tableData = [
+    {
+      ref: 'server',
+      title: <Trans>InvenTree Version</Trans>,
+      link: 'https://github.com/inventree/InvenTree/releases',
+      copy: true
+    },
+    {
+      ref: 'api',
+      title: <Trans>API Version</Trans>,
+      link: generateUrl('/api-doc/'),
+      copy: true
+    },
+    {
+      ref: 'python',
+      title: <Trans>Python Version</Trans>,
+      copy: true
+    },
+    {
+      ref: 'django',
+      title: <Trans>Django Version</Trans>,
+      link: 'https://www.djangoproject.com/',
+      copy: true
+    }
+  ];
+  if (commit_set) {
+    tableData.push(
+      {
+        ref: 'commit_hash',
+        title: <Trans>Commit Hash</Trans>,
+        copy: true
+      },
+      {
+        ref: 'commit_date',
+        title: <Trans>Commit Date</Trans>,
+        copy: true
+      },
+      {
+        ref: 'commit_branch',
+        title: <Trans>Commit Branch</Trans>,
+        copy: true
+      }
+    );
+  }
+
+  return (
+    <Stack>
+      <Divider />
+      <Group justify='space-between' wrap='nowrap'>
+        <StylishText size='lg'>
+          <Trans>Version Information</Trans>
+        </StylishText>
+        {renderVersionBadge(data)}
+      </Group>
+      <Table striped>
+        <Table.Tbody>{fillTable(tableData, data.version)}</Table.Tbody>
+      </Table>
+      <Divider />
+      <StylishText size='lg'>
+        <Trans>Links</Trans>
+      </StylishText>
+      <Table striped>
+        <Table.Tbody>
+          {fillTable(
+            [
+              { ref: 'doc', title: <Trans>Documentation</Trans> },
+              { ref: 'code', title: <Trans>Source Code</Trans> },
+              { ref: 'credit', title: <Trans>Credits</Trans> },
+              { ref: 'app', title: <Trans>Mobile App</Trans> },
+              { ref: 'bug', title: <Trans>Submit Bug Report</Trans> }
+            ],
+            data.links,
+            true
+          )}
+        </Table.Tbody>
+      </Table>
+      <Divider />
+      <Group justify='space-between'>
+        <CopyButton value={copyval} label={t`Copy version information`} />
+        <Space />
+        <Button
+          onClick={() => {
+            context.closeModal(id);
+          }}
+        >
+          <Trans>Close</Trans>
+        </Button>
+      </Group>
+    </Stack>
+  );
+}
+
+function renderVersionBadge(data: any) {
+  const badgeType = () => {
+    if (data.dev) {
+      return { color: 'blue', label: <Trans>Development Version</Trans> };
+    } else if (data.up_to_date) {
+      return { color: 'green', label: <Trans>Up to Date</Trans> };
+    } else {
+      return { color: 'teal', label: <Trans>Update Available</Trans> };
+    }
+  };
+  const { color, label } = badgeType();
+  return <Badge color={color}>{label}</Badge>;
+}