@inventreedb/ui 0.0.1

package/src/components/buttons/RemoveRowButton.tsx

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

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

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

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

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

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

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

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

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

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