@inventreedb/ui 0.0.1 → 0.0.2

package/src/components/items/ActionDropdown.tsx

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

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

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

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-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] }
-});