@inventreedb/ui 0.0.1

package/src/components/items/ActionDropdown.tsx

@@ -0,0 +1,290 @@
+import { t } from '@lingui/core/macro';
+import {
+  Button,
+  type FloatingPosition,
+  Indicator,
+  type IndicatorProps,
+  Menu,
+  Tooltip
+} from '@mantine/core';
+import { modals } from '@mantine/modals';
+import {
+  IconChevronDown,
+  IconCopy,
+  IconDotsVertical,
+  IconEdit,
+  IconLink,
+  IconQrcode,
+  IconTrash,
+  IconUnlink
+} from '@tabler/icons-react';
+import { type ReactNode, useMemo } from 'react';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { identifierString } from '../../functions/conversion';
+import { InvenTreeIcon } from '../../functions/icons';
+import { InvenTreeQRCode, QRCodeLink, QRCodeUnlink } from '../barcodes/QRCode';
+import { StylishText } from './StylishText';
+
+export type ActionDropdownItem = {
+  icon?: ReactNode;
+  name?: string;
+  tooltip?: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  onClick: (event?: any) => void;
+  indicator?: Omit<IndicatorProps, 'children'>;
+};
+
+/**
+ * A simple Menu component which renders a set of actions.
+ *
+ * If no "active" actions are provided, the menu will not be rendered
+ */
+export function ActionDropdown({
+  icon,
+  tooltip,
+  tooltipPosition,
+  actions,
+  disabled = false,
+  hidden = false,
+  noindicator = false
+}: {
+  icon: ReactNode;
+  tooltip: string;
+  tooltipPosition?: FloatingPosition;
+  actions: ActionDropdownItem[];
+  disabled?: boolean;
+  hidden?: boolean;
+  noindicator?: boolean;
+}) {
+  const hasActions = useMemo(() => {
+    return actions.some((action) => !action.hidden);
+  }, [actions]);
+
+  const indicatorProps = useMemo(() => {
+    return actions.find((action) => action.indicator);
+  }, [actions]);
+
+  const menuName: string = useMemo(() => {
+    return identifierString(`action-menu-${tooltip}`);
+  }, [tooltip]);
+
+  return !hidden && hasActions ? (
+    <Menu position='bottom-end' key={menuName}>
+      <Indicator disabled={!indicatorProps} {...indicatorProps?.indicator}>
+        <Menu.Target>
+          <Tooltip
+            label={tooltip}
+            hidden={!tooltip}
+            position={tooltipPosition ?? 'bottom'}
+          >
+            <Button
+              variant={noindicator ? 'transparent' : 'light'}
+              disabled={disabled}
+              aria-label={menuName}
+              p='0'
+              size='sm'
+              rightSection={
+                noindicator ? null : <IconChevronDown stroke={1.5} />
+              }
+              styles={{
+                section: { margin: 0 }
+              }}
+            >
+              {icon}
+            </Button>
+          </Tooltip>
+        </Menu.Target>
+      </Indicator>
+      <Menu.Dropdown>
+        {actions.map((action) => {
+          const id: string = identifierString(`${menuName}-${action.name}`);
+          return action.hidden ? null : (
+            <Indicator
+              disabled={!action.indicator}
+              {...action.indicator}
+              key={action.name}
+            >
+              <Tooltip
+                label={action.tooltip}
+                hidden={!action.tooltip}
+                position='left'
+              >
+                <Menu.Item
+                  aria-label={id}
+                  leftSection={action.icon}
+                  onClick={action.onClick}
+                  disabled={action.disabled}
+                >
+                  {action.name}
+                </Menu.Item>
+              </Tooltip>
+            </Indicator>
+          );
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  ) : null;
+}
+
+export function OptionsActionDropdown({
+  actions = [],
+  tooltip = t`Options`,
+  hidden = false
+}: Readonly<{
+  actions: ActionDropdownItem[];
+  tooltip?: string;
+  hidden?: boolean;
+}>) {
+  return (
+    <ActionDropdown
+      icon={<IconDotsVertical />}
+      tooltip={tooltip}
+      actions={actions}
+      hidden={hidden}
+      noindicator
+    />
+  );
+}
+
+// Dropdown menu for barcode actions
+export function BarcodeActionDropdown({
+  model,
+  pk,
+  hash = null,
+  actions = [],
+  perm: permission = true
+}: Readonly<{
+  model: ModelType;
+  pk: number;
+  hash?: boolean | null;
+  actions?: ActionDropdownItem[];
+  perm?: boolean;
+}>) {
+  const hidden = hash === null;
+  const prop = { model, pk, hash };
+  return (
+    <ActionDropdown
+      tooltip={t`Barcode Actions`}
+      icon={<IconQrcode />}
+      actions={[
+        GeneralBarcodeAction({
+          mdl_prop: prop,
+          title: t`View Barcode`,
+          icon: <IconQrcode />,
+          tooltip: t`View barcode`,
+          ChildItem: InvenTreeQRCode
+        }),
+        GeneralBarcodeAction({
+          hidden: hidden || hash || !permission,
+          mdl_prop: prop,
+          title: t`Link Barcode`,
+          icon: <IconLink />,
+          tooltip: t`Link a custom barcode to this item`,
+          ChildItem: QRCodeLink
+        }),
+        GeneralBarcodeAction({
+          hidden: hidden || !hash || !permission,
+          mdl_prop: prop,
+          title: t`Unlink Barcode`,
+          icon: <IconUnlink />,
+          tooltip: t`Unlink custom barcode`,
+          ChildItem: QRCodeUnlink
+        }),
+        ...actions
+      ]}
+    />
+  );
+}
+
+export type QrCodeType = {
+  model: ModelType;
+  pk: number;
+  hash?: boolean | null;
+};
+
+function GeneralBarcodeAction({
+  hidden = false,
+  mdl_prop,
+  title,
+  icon,
+  tooltip,
+  ChildItem
+}: {
+  hidden?: boolean;
+  mdl_prop: QrCodeType;
+  title: string;
+  icon: ReactNode;
+  tooltip: string;
+  ChildItem: any;
+}): ActionDropdownItem {
+  const onClick = () => {
+    modals.open({
+      title: <StylishText size='xl'>{title}</StylishText>,
+      children: <ChildItem mdl_prop={mdl_prop} />
+    });
+  };
+
+  return {
+    icon: icon,
+    name: title,
+    tooltip: tooltip,
+    onClick: onClick,
+    hidden: hidden
+  };
+}
+
+// Common action button for editing an item
+export function EditItemAction(props: ActionDropdownItem): ActionDropdownItem {
+  return {
+    ...props,
+    icon: <IconEdit color='blue' />,
+    name: t`Edit`,
+    tooltip: props.tooltip ?? t`Edit item`
+  };
+}
+
+// Common action button for deleting an item
+export function DeleteItemAction(
+  props: ActionDropdownItem
+): ActionDropdownItem {
+  return {
+    ...props,
+    icon: <IconTrash color='red' />,
+    name: t`Delete`,
+    tooltip: props.tooltip ?? t`Delete item`
+  };
+}
+
+export function HoldItemAction(props: ActionDropdownItem): ActionDropdownItem {
+  return {
+    ...props,
+    icon: <InvenTreeIcon icon='hold' iconProps={{ color: 'orange' }} />,
+    name: t`Hold`,
+    tooltip: props.tooltip ?? t`Hold`
+  };
+}
+
+export function CancelItemAction(
+  props: ActionDropdownItem
+): ActionDropdownItem {
+  return {
+    ...props,
+    icon: <InvenTreeIcon icon='cancel' iconProps={{ color: 'red' }} />,
+    name: t`Cancel`,
+    tooltip: props.tooltip ?? t`Cancel`
+  };
+}
+
+// Common action button for duplicating an item
+export function DuplicateItemAction(
+  props: ActionDropdownItem
+): ActionDropdownItem {
+  return {
+    ...props,
+    icon: <IconCopy color='green' />,
+    name: t`Duplicate`,
+    tooltip: props.tooltip ?? t`Duplicate item`
+  };
+}

package/src/components/items/ApiIcon.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+
+export const icon = style({
+  fontStyle: 'normal',
+  fontWeight: 'normal',
+  fontVariant: 'normal',
+  textTransform: 'none',
+  lineHeight: 1,
+  width: 'fit-content',
+  // Better font rendering
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale'
+});

package/src/components/items/ApiIcon.tsx

@@ -0,0 +1,32 @@
+import { useIconState } from '../../states/IconState';
+import * as classes from './ApiIcon.css';
+
+type ApiIconProps = {
+  name: string;
+  size?: number;
+};
+
+export const ApiIcon = ({ name: _name, size = 22 }: ApiIconProps) => {
+  const [iconPackage, name, variant] = _name.split(':');
+  const icon = useIconState(
+    (s) => s.packagesMap[iconPackage]?.icons[name]?.variants[variant]
+  );
+
+  const unicode = icon ? String.fromCodePoint(Number.parseInt(icon, 16)) : '';
+
+  if (!unicode && _name !== '') {
+    console.warn(`ApiIcon not found: '${_name}'`);
+  }
+
+  return (
+    <i
+      className={classes.icon}
+      style={{
+        fontFamily: `inventree-icon-font-${iconPackage}`,
+        fontSize: size
+      }}
+    >
+      {unicode}
+    </i>
+  );
+};

package/src/components/items/AttachmentLink.tsx

@@ -0,0 +1,79 @@
+import { Anchor, Group } from '@mantine/core';
+import {
+  IconFile,
+  IconFileTypeCsv,
+  IconFileTypeDoc,
+  IconFileTypePdf,
+  IconFileTypeXls,
+  IconFileTypeZip,
+  IconLink,
+  IconPhoto
+} from '@tabler/icons-react';
+import { type ReactNode, useMemo } from 'react';
+import { generateUrl } from '../../functions/urls';
+
+/**
+ * Return an icon based on the provided filename
+ */
+export function attachmentIcon(attachment: string): ReactNode {
+  const sz = 18;
+  const suffix = attachment.split('.').pop()?.toLowerCase() ?? '';
+  switch (suffix) {
+    case 'pdf':
+      return <IconFileTypePdf size={sz} />;
+    case 'csv':
+      return <IconFileTypeCsv size={sz} />;
+    case 'xls':
+    case 'xlsx':
+      return <IconFileTypeXls size={sz} />;
+    case 'doc':
+    case 'docx':
+      return <IconFileTypeDoc size={sz} />;
+    case 'zip':
+    case 'tar':
+    case 'gz':
+    case '7z':
+      return <IconFileTypeZip size={sz} />;
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'gif':
+    case 'bmp':
+    case 'tif':
+    case 'webp':
+      return <IconPhoto size={sz} />;
+    default:
+      return <IconFile size={sz} />;
+  }
+}
+
+/**
+ * Render a link to a file attachment, with icon and text
+ * @param attachment : string - The attachment filename
+ */
+export function AttachmentLink({
+  attachment,
+  external
+}: Readonly<{
+  attachment: string;
+  external?: boolean;
+}>): ReactNode {
+  const text = external ? attachment : attachment.split('/').pop();
+
+  const url = useMemo(() => {
+    if (external) {
+      return attachment;
+    }
+
+    return generateUrl(attachment);
+  }, [attachment, external]);
+
+  return (
+    <Group justify='left' gap='sm' wrap='nowrap'>
+      {external ? <IconLink /> : attachmentIcon(attachment)}
+      <Anchor href={url} target='_blank' rel='noopener noreferrer'>
+        {text}
+      </Anchor>
+    </Group>
+  );
+}

package/src/components/items/ColorToggle.tsx

@@ -0,0 +1,34 @@
+import {
+  ActionIcon,
+  Group,
+  Tooltip,
+  useMantineColorScheme
+} from '@mantine/core';
+import { IconMoonStars, IconSun } from '@tabler/icons-react';
+
+import { t } from '@lingui/core/macro';
+import { vars } from '../../theme';
+
+export function ColorToggle() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group justify='center'>
+      <Tooltip label={t`Toggle color scheme`}>
+        <ActionIcon
+          onClick={toggleColorScheme}
+          size='lg'
+          style={{
+            color:
+              colorScheme === 'dark'
+                ? vars.colors.yellow[4]
+                : vars.colors.blue[6]
+          }}
+          variant='transparent'
+        >
+          {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
+        </ActionIcon>
+      </Tooltip>
+    </Group>
+  );
+}

package/src/components/items/DashboardItem.tsx

@@ -0,0 +1,33 @@
+import { Group, LoadingOverlay, Paper, Text } from '@mantine/core';
+
+import * as classes from '../../main.css';
+
+export interface StatisticItemProps {
+  title: string;
+  value: string;
+}
+
+export function StatisticItem({
+  id,
+  data,
+  isLoading
+}: Readonly<{
+  id: string;
+  data: StatisticItemProps;
+  isLoading: boolean;
+}>) {
+  return (
+    <Paper withBorder p='xs' key={id} pos='relative'>
+      <LoadingOverlay visible={isLoading} overlayProps={{ blur: 2 }} />
+      <Group justify='space-between'>
+        <Text size='xs' c='dimmed' className={classes.dashboardItemTitle}>
+          {data.title}
+        </Text>
+      </Group>
+
+      <Group align='flex-end' gap='xs' mt={25}>
+        <Text className={classes.dashboardItemValue}>{data.value}</Text>
+      </Group>
+    </Paper>
+  );
+}

package/src/components/items/DocInfo.tsx

@@ -0,0 +1,20 @@
+import { IconInfoCircle } from '@tabler/icons-react';
+
+import { type BaseDocProps, DocTooltip } from './DocTooltip';
+
+interface DocInfoProps extends BaseDocProps {
+  size?: number;
+}
+
+export function DocInfo({
+  size = 18,
+  text,
+  detail,
+  link
+}: Readonly<DocInfoProps>) {
+  return (
+    <DocTooltip text={text} detail={detail} link={link}>
+      <IconInfoCircle size={size} />
+    </DocTooltip>
+  );
+}

package/src/components/items/DocTooltip.tsx

@@ -0,0 +1,98 @@
+import { Trans } from '@lingui/react/macro';
+import { Anchor, Container, HoverCard, ScrollArea, Text } from '@mantine/core';
+import { useEffect, useRef, useState } from 'react';
+
+import * as classes from '../../main.css';
+
+export interface BaseDocProps {
+  text: string | JSX.Element;
+  detail?: string | JSX.Element;
+  link?: string;
+  docchildren?: React.ReactNode;
+}
+
+export interface DocTooltipProps extends BaseDocProps {
+  children: React.ReactNode;
+}
+
+export function DocTooltip({
+  children,
+  text,
+  detail,
+  link,
+  docchildren
+}: Readonly<DocTooltipProps>) {
+  return (
+    <HoverCard
+      shadow='md'
+      openDelay={200}
+      closeDelay={200}
+      withinPortal={true}
+      classNames={{ dropdown: classes.docHover }}
+    >
+      <HoverCard.Target>
+        <div>{children}</div>
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        <ConstBody
+          text={text}
+          detail={detail}
+          docchildren={docchildren}
+          link={link}
+        />
+      </HoverCard.Dropdown>
+    </HoverCard>
+  );
+}
+
+function ConstBody({
+  text,
+  detail,
+  docchildren,
+  link
+}: Readonly<{
+  text: string | JSX.Element;
+  detail?: string | JSX.Element;
+  docchildren?: React.ReactNode;
+  link?: string;
+}>) {
+  const [height, setHeight] = useState(0);
+  const ref = useRef(null);
+
+  // dynamically set height of scroll area based on content to remove unnecessary scroll bar
+  useEffect(() => {
+    if (ref.current == null) return;
+
+    const height = ref.current['clientHeight'];
+    if (height > 250) {
+      setHeight(250);
+    } else {
+      setHeight(height + 1);
+    }
+  });
+
+  return (
+    <Container maw={400} p={0}>
+      <Text>{text}</Text>
+      {(detail || docchildren) && (
+        <ScrollArea h={height} mah={250}>
+          <div ref={ref}>
+            {detail && (
+              <Text size='xs' c='dimmed'>
+                {detail}
+              </Text>
+            )}
+            {docchildren}
+          </div>
+        </ScrollArea>
+      )}
+      {link && (
+        <Anchor href={link} target='_blank'>
+          <Text size={'sm'}>
+            <Trans>Read More</Trans>
+          </Text>
+        </Anchor>
+      )}
+    </Container>
+  );
+}

package/src/components/items/ErrorItem.tsx

@@ -0,0 +1,17 @@
+import { t } from '@lingui/core/macro';
+import { Alert, Text } from '@mantine/core';
+
+export function ErrorItem({
+  id,
+  error
+}: Readonly<{ id: string; error?: any }>) {
+  const error_message = error?.message || error?.toString() || t`Unknown error`;
+
+  return (
+    <>
+      <Alert color='red' title={t`An error occurred`}>
+        <Text>{error_message}</Text>
+      </Alert>
+    </>
+  );
+}

package/src/components/items/Expand.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+/**
+ * A component that expands to fill the available space
+ */
+export default function Expand({
+  children,
+  flex
+}: {
+  children: ReactNode;
+  flex?: number;
+}) {
+  return <div style={{ flexGrow: flex ?? 1 }}>{children}</div>;
+}

package/src/components/items/GettingStartedCarousel.css.ts

@@ -0,0 +1,30 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const card = style({
+  height: rem(170),
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center'
+});
+
+export const title = style({
+  fontWeight: 900,
+  lineHeight: 1.2,
+  fontSize: rem(32),
+  marginTop: 0,
+  [vars.lightSelector]: { color: vars.colors.dark[5] },
+  [vars.darkSelector]: { color: vars.colors.white[0] }
+});
+
+export const category = style({
+  opacity: 0.7,
+  fontWeight: 700,
+  [vars.lightSelector]: { color: vars.colors.dark[5] },
+  [vars.darkSelector]: { color: vars.colors.white[0] }
+});