@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/items/GettingStartedCarousel.tsx

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

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

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

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

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

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

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

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

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

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

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

package/src/components/items/inventree.svg

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

@@ -1,203 +0,0 @@
-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>;
-}