@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/buttons/RemoveRowButton.tsx

@@ -1,22 +0,0 @@
-import { t } from '@lingui/core/macro';
-
-import { InvenTreeIcon } from '../../functions/icons';
-import { ActionButton } from './ActionButton';
-
-export default function RemoveRowButton({
-  onClick,
-  tooltip = t`Remove this row`
-}: Readonly<{
-  onClick: () => void;
-  tooltip?: string;
-}>) {
-  return (
-    <ActionButton
-      onClick={onClick}
-      icon={<InvenTreeIcon icon='square_x' />}
-      tooltip={tooltip}
-      tooltipAlignment='top-end'
-      color='red'
-    />
-  );
-}

package/src/components/buttons/SSOButton.tsx

@@ -1,53 +0,0 @@
-import { Button, Tooltip } from '@mantine/core';
-import {
-  IconBrandAzure,
-  IconBrandBitbucket,
-  IconBrandDiscord,
-  IconBrandFacebook,
-  IconBrandFlickr,
-  IconBrandGithub,
-  IconBrandGitlab,
-  IconBrandGoogle,
-  IconBrandReddit,
-  IconBrandTwitch,
-  IconBrandTwitter,
-  IconLogin
-} from '@tabler/icons-react';
-
-import type { AuthProvider } from '@lib/types/Auth';
-import { t } from '@lingui/core/macro';
-import { ProviderLogin } from '../../functions/auth';
-
-const brandIcons: { [key: string]: JSX.Element } = {
-  google: <IconBrandGoogle />,
-  github: <IconBrandGithub />,
-  facebook: <IconBrandFacebook />,
-  discord: <IconBrandDiscord />,
-  twitter: <IconBrandTwitter />,
-  bitbucket: <IconBrandBitbucket />,
-  flickr: <IconBrandFlickr />,
-  gitlab: <IconBrandGitlab />,
-  reddit: <IconBrandReddit />,
-  twitch: <IconBrandTwitch />,
-  microsoft: <IconBrandAzure />
-};
-
-export function SsoButton({ provider }: Readonly<{ provider: AuthProvider }>) {
-  return (
-    <Tooltip
-      label={t`You will be redirected to the provider for further actions.`}
-    >
-      <Button
-        leftSection={getBrandIcon(provider)}
-        radius='xl'
-        component='a'
-        onClick={() => ProviderLogin(provider)}
-      >
-        {provider.name}
-      </Button>
-    </Tooltip>
-  );
-}
-function getBrandIcon(provider: AuthProvider) {
-  return brandIcons[provider.id] || <IconLogin />;
-}

package/src/components/buttons/ScanButton.tsx

@@ -1,27 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { ActionIcon, Tooltip } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { IconQrcode } from '@tabler/icons-react';
-import BarcodeScanDialog from '../barcodes/BarcodeScanDialog';
-
-/**
- * A button which opens the QR code scanner modal
- */
-export function ScanButton() {
-  const [opened, { open, close }] = useDisclosure(false);
-
-  return (
-    <>
-      <Tooltip position='bottom-end' label={t`Scan Barcode`}>
-        <ActionIcon
-          onClick={open}
-          variant='transparent'
-          title={t`Open Barcode Scanner`}
-        >
-          <IconQrcode />
-        </ActionIcon>
-      </Tooltip>
-      <BarcodeScanDialog opened={opened} onClose={close} />
-    </>
-  );
-}

package/src/components/buttons/SegmentedIconControl.tsx

@@ -1,51 +0,0 @@
-import {
-  ActionIcon,
-  type MantineColor,
-  type MantineSize,
-  SegmentedControl,
-  Tooltip
-} from '@mantine/core';
-import type { ReactNode } from 'react';
-
-export type SegmentedIconControlItem = {
-  label: string;
-  value: string;
-  icon: ReactNode;
-};
-
-export default function SegmentedIconControl({
-  data,
-  value,
-  size = 'sm',
-  color,
-  onChange
-}: {
-  data: SegmentedIconControlItem[];
-  value: string;
-  size?: MantineSize;
-  color?: MantineColor;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <SegmentedControl
-      value={value}
-      onChange={onChange}
-      data={data.map((item) => ({
-        value: item.value,
-        label: (
-          <Tooltip label={item.label}>
-            <ActionIcon
-              variant='transparent'
-              color={color}
-              size={size}
-              aria-label={`segmented-icon-control-${item.value}`}
-              onClick={() => onChange(item.value)}
-            >
-              {item.icon}
-            </ActionIcon>
-          </Tooltip>
-        )
-      }))}
-    />
-  );
-}

package/src/components/buttons/SplitButton.css.ts

@@ -1,19 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-import { vars } from '../../theme';
-
-export const button = style({
-  borderTopRightRadius: 0,
-  borderBottomRightRadius: 0,
-
-  ':before': {
-    borderRadius: '0 !important'
-  }
-});
-
-export const icon = style({
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
-  border: 0,
-  borderLeft: `1px solid ${vars.colors.primaryShade}`
-});

package/src/components/buttons/SplitButton.tsx

@@ -1,111 +0,0 @@
-import {
-  ActionIcon,
-  Button,
-  Group,
-  Menu,
-  Text,
-  Tooltip,
-  useMantineTheme
-} from '@mantine/core';
-import { IconChevronDown } from '@tabler/icons-react';
-import { useEffect, useMemo, useState } from 'react';
-
-import { identifierString } from '../../functions/conversion';
-import type { TablerIconType } from '../../functions/icons';
-import * as classes from './SplitButton.css';
-
-interface SplitButtonOption {
-  key: string;
-  name: string;
-  onClick: () => void;
-  icon: TablerIconType;
-  disabled?: boolean;
-  tooltip?: string;
-}
-
-interface SplitButtonProps {
-  options: SplitButtonOption[];
-  defaultSelected: string;
-  name: string;
-  selected?: string;
-  setSelected?: (value: string) => void;
-  loading?: boolean;
-}
-
-export function SplitButton({
-  options,
-  defaultSelected,
-  selected,
-  name,
-  setSelected,
-  loading
-}: Readonly<SplitButtonProps>) {
-  const [current, setCurrent] = useState<string>(defaultSelected);
-
-  useEffect(() => {
-    setSelected?.(current);
-  }, [current]);
-
-  useEffect(() => {
-    if (!selected) return;
-    setCurrent(selected);
-  }, [selected]);
-
-  const currentOption = useMemo(() => {
-    return options.find((option) => option.key === current);
-  }, [current, options]);
-
-  const theme = useMantineTheme();
-
-  return (
-    <Group wrap='nowrap' style={{ gap: 0 }}>
-      <Button
-        onClick={currentOption?.onClick}
-        disabled={loading ? false : currentOption?.disabled}
-        className={classes.button}
-        loading={loading}
-        aria-label={`split-button-${name}`}
-      >
-        {currentOption?.name}
-      </Button>
-      <Menu
-        transitionProps={{ transition: 'pop' }}
-        position='bottom-end'
-        withinPortal
-      >
-        <Menu.Target>
-          <ActionIcon
-            variant='filled'
-            color={theme.primaryColor}
-            size={36}
-            className={classes.icon}
-            aria-label={`split-button-${name}-action`}
-          >
-            <IconChevronDown size={16} />
-          </ActionIcon>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          {options.map((option) => (
-            <Menu.Item
-              key={option.key}
-              onClick={() => {
-                setCurrent(option.key);
-                option.onClick();
-              }}
-              aria-label={`split-button-${name}-item-${identifierString(
-                option.key
-              )}`}
-              disabled={option.disabled}
-              leftSection={<option.icon />}
-            >
-              <Tooltip label={option.tooltip} position='right'>
-                <Text>{option.name}</Text>
-              </Tooltip>
-            </Menu.Item>
-          ))}
-        </Menu.Dropdown>
-      </Menu>
-    </Group>
-  );
-}

package/src/components/buttons/SpotlightButton.tsx

@@ -1,22 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { ActionIcon, Tooltip } from '@mantine/core';
-import { IconCommand } from '@tabler/icons-react';
-
-import { firstSpotlight } from '../nav/Layout';
-
-/**
- * A button which opens the quick command modal
- */
-export function SpotlightButton() {
-  return (
-    <Tooltip position='bottom-end' label={t`Open spotlight`}>
-      <ActionIcon
-        onClick={() => firstSpotlight.open()}
-        variant='transparent'
-        aria-label='open-spotlight'
-      >
-        <IconCommand />
-      </ActionIcon>
-    </Tooltip>
-  );
-}

package/src/components/buttons/StarredToggleButton.tsx

@@ -1,62 +0,0 @@
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import { t } from '@lingui/core/macro';
-import { showNotification } from '@mantine/notifications';
-import { IconBell } from '@tabler/icons-react';
-import { useApi } from '../../contexts/ApiContext';
-import { ActionButton } from './ActionButton';
-
-export default function StarredToggleButton({
-  instance,
-  model,
-  successFunction
-}: Readonly<{
-  instance: any;
-  model: ModelType.part | ModelType.partcategory;
-  successFunction: () => void;
-}>): JSX.Element {
-  const api = useApi();
-
-  function change(starred: boolean, partPk: number) {
-    api
-      .patch(
-        apiUrl(
-          model == ModelType.part
-            ? ApiEndpoints.part_list
-            : ApiEndpoints.category_list,
-          partPk
-        ),
-        { starred: !starred }
-      )
-      .then(() => {
-        showNotification({
-          title: 'Subscription updated',
-          message: `Subscription ${starred ? 'removed' : 'added'}`,
-          autoClose: 5000,
-          color: 'blue'
-        });
-        successFunction();
-      })
-      .catch((error) => {
-        showNotification({
-          title: 'Error',
-          message: error.message,
-          autoClose: 5000,
-          color: 'red'
-        });
-      });
-  }
-
-  return (
-    <ActionButton
-      icon={<IconBell />}
-      color={instance.starred ? 'green' : 'blue'}
-      size='lg'
-      variant={instance.starred ? 'filled' : 'outline'}
-      tooltip={t`Unsubscribe from part`}
-      onClick={() => change(instance.starred, instance.pk)}
-      tooltipAlignment='bottom'
-    />
-  );
-}

package/src/components/buttons/YesNoButton.tsx

@@ -1,42 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Badge, Skeleton } from '@mantine/core';
-
-import { isTrue } from '../../functions/conversion';
-
-export function PassFailButton({
-  value,
-  passText,
-  failText
-}: Readonly<{
-  value: any;
-  passText?: string;
-  failText?: string;
-}>) {
-  const v = isTrue(value);
-  const pass = passText ?? t`Pass`;
-  const fail = failText ?? t`Fail`;
-
-  return (
-    <Badge
-      color={v ? 'lime.5' : 'red.6'}
-      variant='filled'
-      radius='lg'
-      size='sm'
-      style={{ maxWidth: '50px' }}
-    >
-      {v ? pass : fail}
-    </Badge>
-  );
-}
-
-export function YesNoButton({ value }: Readonly<{ value: any }>) {
-  return <PassFailButton value={value} passText={t`Yes`} failText={t`No`} />;
-}
-
-export function YesNoUndefinedButton({ value }: Readonly<{ value?: boolean }>) {
-  if (value === undefined) {
-    return <Skeleton height={15} width={32} />;
-  } else {
-    return <YesNoButton value={value} />;
-  }
-}

package/src/components/calendar/Calendar.tsx

@@ -1,193 +0,0 @@
-import type { CalendarOptions, DatesSetArg } from '@fullcalendar/core';
-import allLocales from '@fullcalendar/core/locales-all';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction';
-import FullCalendar from '@fullcalendar/react';
-
-import type { TableFilter } from '@lib/types/Filters';
-import { t } from '@lingui/core/macro';
-import {
-  ActionIcon,
-  Box,
-  Button,
-  Group,
-  Indicator,
-  LoadingOverlay,
-  Popover,
-  Stack,
-  Tooltip
-} from '@mantine/core';
-import { type DateValue, MonthPicker } from '@mantine/dates';
-import {
-  IconCalendarMonth,
-  IconChevronLeft,
-  IconChevronRight,
-  IconDownload,
-  IconFilter
-} from '@tabler/icons-react';
-import { useCallback, useState } from 'react';
-import type { CalendarState } from '../../hooks/UseCalendar';
-import { useLocalState } from '../../states/LocalState';
-import { FilterSelectDrawer } from '../../tables/FilterSelectDrawer';
-import { TableSearchInput } from '../../tables/Search';
-import { Boundary } from '../Boundary';
-import { ActionButton } from '../buttons/ActionButton';
-import { StylishText } from '../items/StylishText';
-
-export interface InvenTreeCalendarProps extends CalendarOptions {
-  enableDownload?: boolean;
-  enableFilters?: boolean;
-  enableSearch?: boolean;
-  filters?: TableFilter[];
-  isLoading?: boolean;
-  state: CalendarState;
-}
-
-export default function Calendar({
-  enableDownload,
-  enableFilters = false,
-  enableSearch,
-  isLoading,
-  filters,
-  state,
-  ...calendarProps
-}: InvenTreeCalendarProps) {
-  const [monthSelectOpened, setMonthSelectOpened] = useState<boolean>(false);
-
-  const [filtersVisible, setFiltersVisible] = useState<boolean>(false);
-
-  const [locale] = useLocalState((s) => [s.language]);
-
-  const selectMonth = useCallback(
-    (date: DateValue) => {
-      state.selectMonth(date);
-      setMonthSelectOpened(false);
-    },
-    [state.selectMonth]
-  );
-
-  // Callback when the calendar date range is adjusted
-  const datesSet = useCallback(
-    (dateInfo: DatesSetArg) => {
-      if (state.ref?.current) {
-        const api = state.ref.current.getApi();
-
-        // Update calendar state
-        state.setMonthName(api.view.title);
-        state.setStartDate(dateInfo.start);
-        state.setEndDate(dateInfo.end);
-      }
-
-      // Pass the dates set to the parent component
-      calendarProps.datesSet?.(dateInfo);
-    },
-    [calendarProps.datesSet, state.ref, state.setMonthName]
-  );
-
-  return (
-    <>
-      {state.exportModal.modal}
-      {enableFilters && filters && (filters?.length ?? 0) > 0 && (
-        <Boundary label={`InvenTreeCalendarFilterDrawer-${state.name}`}>
-          <FilterSelectDrawer
-            title={t`Calendar Filters`}
-            availableFilters={filters}
-            filterSet={state.filterSet}
-            opened={filtersVisible}
-            onClose={() => setFiltersVisible(false)}
-          />
-        </Boundary>
-      )}
-      <Stack gap='xs'>
-        <Group justify='space-between' gap='xs'>
-          <Group gap={0} justify='left'>
-            <ActionButton
-              icon={<IconChevronLeft />}
-              onClick={state.prevMonth}
-              tooltipAlignment='top'
-              tooltip={t`Previous month`}
-            />
-            <Popover
-              opened={monthSelectOpened}
-              onClose={() => setMonthSelectOpened(false)}
-              position='bottom-start'
-              shadow='md'
-            >
-              <Popover.Target>
-                <Tooltip label={t`Select month`} position='top'>
-                  <Button
-                    m={0}
-                    variant='transparent'
-                    aria-label='calendar-select-month'
-                    onClick={() => {
-                      setMonthSelectOpened(!monthSelectOpened);
-                    }}
-                  >
-                    <IconCalendarMonth />
-                  </Button>
-                </Tooltip>
-              </Popover.Target>
-              <Popover.Dropdown>
-                <MonthPicker onChange={selectMonth} />
-              </Popover.Dropdown>
-            </Popover>
-            <ActionButton
-              icon={<IconChevronRight />}
-              onClick={state.nextMonth}
-              tooltipAlignment='top'
-              tooltip={t`Next month`}
-            />
-            <StylishText size='lg'>{state.monthName}</StylishText>
-          </Group>
-          <Group justify='right' gap='xs' wrap='nowrap'>
-            {enableSearch && (
-              <TableSearchInput searchCallback={state.setSearchTerm} />
-            )}
-            {enableFilters && filters && filters.length > 0 && (
-              <Indicator
-                size='xs'
-                label={state.filterSet.activeFilters?.length ?? 0}
-                disabled={state.filterSet.activeFilters?.length == 0}
-              >
-                <ActionIcon
-                  variant='transparent'
-                  aria-label='calendar-select-filters'
-                >
-                  <Tooltip label={t`Calendar Filters`} position='top-end'>
-                    <IconFilter
-                      onClick={() => setFiltersVisible(!filtersVisible)}
-                    />
-                  </Tooltip>
-                </ActionIcon>
-              </Indicator>
-            )}
-            {enableDownload && (
-              <ActionIcon
-                variant='transparent'
-                aria-label='calendar-export-data'
-              >
-                <Tooltip label={t`Download data`} position='top-end'>
-                  <IconDownload onClick={state.exportModal.open} />
-                </Tooltip>
-              </ActionIcon>
-            )}
-          </Group>
-        </Group>
-        <Box pos='relative'>
-          <LoadingOverlay visible={state.query.isFetching} />
-          <FullCalendar
-            ref={state.ref}
-            plugins={[dayGridPlugin, interactionPlugin]}
-            initialView='dayGridMonth'
-            locales={allLocales}
-            locale={locale}
-            headerToolbar={false}
-            footerToolbar={false}
-            {...calendarProps}
-            datesSet={datesSet}
-          />
-        </Box>
-      </Stack>
-    </>
-  );
-}