@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/forms/fields/RelatedModelField.tsx

@@ -1,339 +0,0 @@
-import { t } from '@lingui/core/macro';
-import {
-  Input,
-  darken,
-  useMantineColorScheme,
-  useMantineTheme
-} from '@mantine/core';
-import { useDebouncedValue, useId } from '@mantine/hooks';
-import { useQuery } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  type FieldValues,
-  type UseControllerReturn,
-  useFormContext
-} from 'react-hook-form';
-import Select from 'react-select';
-
-import type { ApiFormFieldType } from '@lib/types/Forms';
-import { useApi } from '../../../contexts/ApiContext';
-import { vars } from '../../../theme';
-import { RenderInstance } from '../../render/Instance';
-
-/**
- * Render a 'select' field for searching the database against a particular model type
- */
-export function RelatedModelField({
-  controller,
-  fieldName,
-  definition,
-  limit = 10
-}: Readonly<{
-  controller: UseControllerReturn<FieldValues, any>;
-  definition: ApiFormFieldType;
-  fieldName: string;
-  limit?: number;
-}>) {
-  const api = useApi();
-  const fieldId = useId();
-  const {
-    field,
-    fieldState: { error }
-  } = controller;
-
-  const form = useFormContext();
-
-  // Keep track of the primary key value for this field
-  const [pk, setPk] = useState<number | null>(null);
-
-  const [offset, setOffset] = useState<number>(0);
-
-  const [initialData, setInitialData] = useState<{}>({});
-  const [data, setData] = useState<any[]>([]);
-  const dataRef = useRef<any[]>([]);
-
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  // If an initial value is provided, load from the API
-  useEffect(() => {
-    // If the value is unchanged, do nothing
-    if (field.value === pk) return;
-
-    if (
-      field?.value !== null &&
-      field?.value !== undefined &&
-      field?.value !== ''
-    ) {
-      const url = `${definition.api_url}${field.value}/`;
-
-      if (!url) {
-        setPk(null);
-        return;
-      }
-
-      api.get(url).then((response) => {
-        const pk_field = definition.pk_field ?? 'pk';
-        if (response.data?.[pk_field]) {
-          const value = {
-            value: response.data[pk_field],
-            data: response.data
-          };
-
-          // Run custom callback for this field (if provided)
-          if (definition.onValueChange) {
-            definition.onValueChange(response.data[pk_field], response.data);
-          }
-
-          setInitialData(value);
-          dataRef.current = [value];
-          setPk(response.data[pk_field]);
-        }
-      });
-    } else {
-      setPk(null);
-    }
-  }, [definition.api_url, definition.pk_field, field.value]);
-
-  // Search input query
-  const [value, setValue] = useState<string>('');
-  const [searchText] = useDebouncedValue(value, 250);
-
-  const [filters, setFilters] = useState<any>({});
-
-  const resetSearch = useCallback(() => {
-    setOffset(0);
-    setData([]);
-    dataRef.current = [];
-  }, []);
-
-  // reset current data on search value change
-  useEffect(() => {
-    resetSearch();
-  }, [searchText, filters]);
-
-  const selectQuery = useQuery({
-    enabled:
-      isOpen &&
-      !definition.disabled &&
-      !!definition.api_url &&
-      !definition.hidden,
-    queryKey: [`related-field-${fieldName}`, fieldId, offset, searchText],
-    queryFn: async () => {
-      if (!definition.api_url) {
-        return null;
-      }
-
-      let _filters = definition.filters ?? {};
-
-      if (definition.adjustFilters) {
-        _filters =
-          definition.adjustFilters({
-            filters: _filters,
-            data: form.getValues()
-          }) ?? _filters;
-      }
-
-      // If the filters have changed, clear the data
-      if (JSON.stringify(_filters) !== JSON.stringify(filters)) {
-        resetSearch();
-        setFilters(_filters);
-      }
-
-      const params = {
-        ..._filters,
-        search: searchText,
-        offset: offset,
-        limit: limit
-      };
-
-      return api
-        .get(definition.api_url, {
-          params: params
-        })
-        .then((response) => {
-          // current values need to be accessed via a ref, otherwise "data" has old values here
-          // and this results in no overriding the data which means the current value cannot be displayed
-          const values: any[] = [...dataRef.current];
-          const alreadyPresentPks = values.map((x) => x.value);
-
-          const results = response.data?.results ?? response.data ?? [];
-
-          results.forEach((item: any) => {
-            const pk_field = definition.pk_field ?? 'pk';
-            const pk = item[pk_field];
-
-            if (pk && !alreadyPresentPks.includes(pk)) {
-              values.push({
-                value: pk,
-                data: item
-              });
-            }
-          });
-
-          setData(values);
-          dataRef.current = values;
-          return response;
-        })
-        .catch((error) => {
-          setData([]);
-          return error;
-        });
-    }
-  });
-
-  /**
-   * Format an option for display in the select field
-   */
-  const formatOption = useCallback(
-    (option: any) => {
-      const data = option.data ?? option;
-
-      if (definition.modelRenderer) {
-        return <definition.modelRenderer instance={data} />;
-      }
-
-      return (
-        <RenderInstance instance={data} model={definition.model ?? undefined} />
-      );
-    },
-    [definition.model, definition.modelRenderer]
-  );
-
-  // Update form values when the selected value changes
-  const onChange = useCallback(
-    (value: any) => {
-      const _pk = value?.value ?? null;
-      field.onChange(_pk);
-
-      setPk(_pk);
-
-      // Run custom callback for this field (if provided)
-      definition.onValueChange?.(_pk, value?.data ?? {});
-    },
-    [field.onChange, definition]
-  );
-
-  /* Construct a "cut-down" version of the definition,
-   * which does not include any attributes that the lower components do not recognize
-   */
-  const fieldDefinition = useMemo(() => {
-    return {
-      ...definition,
-      onValueChange: undefined,
-      adjustFilters: undefined,
-      exclude: undefined,
-      read_only: undefined
-    };
-  }, [definition]);
-
-  const currentValue = useMemo(() => {
-    if (!pk) {
-      return null;
-    }
-
-    const _data = [...data, initialData];
-    return _data.find((item) => item.value === pk);
-  }, [pk, data]);
-
-  // Field doesn't follow Mantine theming
-  // Define color theme to pass to field based on Mantine theme
-  const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme();
-
-  const colors = useMemo(() => {
-    let colors: any;
-    if (colorScheme === 'dark') {
-      colors = {
-        neutral0: vars.colors.dark[6],
-        neutral5: vars.colors.dark[4],
-        neutral10: vars.colors.dark[4],
-        neutral20: vars.colors.dark[4],
-        neutral30: vars.colors.dark[3],
-        neutral40: vars.colors.dark[2],
-        neutral50: vars.colors.dark[1],
-        neutral60: vars.colors.dark[0],
-        neutral70: vars.colors.dark[0],
-        neutral80: vars.colors.dark[0],
-        neutral90: vars.colors.dark[0],
-        primary: vars.colors.primaryColors[7],
-        primary25: vars.colors.primaryColors[6],
-        primary50: vars.colors.primaryColors[5],
-        primary75: vars.colors.primaryColors[4]
-      };
-    } else {
-      colors = {
-        neutral0: vars.colors.white,
-        neutral5: darken(vars.colors.white, 0.05),
-        neutral10: darken(vars.colors.white, 0.1),
-        neutral20: darken(vars.colors.white, 0.2),
-        neutral30: darken(vars.colors.white, 0.3),
-        neutral40: darken(vars.colors.white, 0.4),
-        neutral50: darken(vars.colors.white, 0.5),
-        neutral60: darken(vars.colors.white, 0.6),
-        neutral70: darken(vars.colors.white, 0.7),
-        neutral80: darken(vars.colors.white, 0.8),
-        neutral90: darken(vars.colors.white, 0.9),
-        primary: vars.colors.primaryColors[7],
-        primary25: vars.colors.primaryColors[4],
-        primary50: vars.colors.primaryColors[5],
-        primary75: vars.colors.primaryColors[6]
-      };
-    }
-    return colors;
-  }, [theme]);
-
-  return (
-    <Input.Wrapper
-      {...fieldDefinition}
-      error={definition.error ?? error?.message}
-      styles={{ description: { paddingBottom: '5px' } }}
-    >
-      <Select
-        id={fieldId}
-        aria-label={`related-field-${field.name}`}
-        value={currentValue}
-        ref={field.ref}
-        options={data}
-        filterOption={null}
-        onInputChange={(value: any) => {
-          setValue(value);
-          resetSearch();
-        }}
-        onChange={onChange}
-        onMenuScrollToBottom={() => setOffset(offset + limit)}
-        onMenuOpen={() => {
-          setIsOpen(true);
-          resetSearch();
-          selectQuery.refetch();
-        }}
-        onMenuClose={() => {
-          setIsOpen(false);
-        }}
-        isLoading={
-          selectQuery.isFetching ||
-          selectQuery.isLoading ||
-          selectQuery.isRefetching
-        }
-        isClearable={!definition.required}
-        isDisabled={definition.disabled}
-        isSearchable={true}
-        placeholder={definition.placeholder || `${t`Search`}...`}
-        loadingMessage={() => `${t`Loading`}...`}
-        menuPortalTarget={document.body}
-        noOptionsMessage={() => t`No results found`}
-        menuPosition='fixed'
-        styles={{ menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) }}
-        formatOptionLabel={(option: any) => formatOption(option)}
-        theme={(theme) => {
-          return {
-            ...theme,
-            colors: {
-              ...theme.colors,
-              ...colors
-            }
-          };
-        }}
-      />
-    </Input.Wrapper>
-  );
-}

package/src/components/forms/fields/TableField.tsx

@@ -1,275 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Alert, Container, Group, Stack, Table, Text } from '@mantine/core';
-import { IconExclamationCircle } from '@tabler/icons-react';
-import { type ReactNode, useCallback, useEffect, useMemo } from 'react';
-import type { FieldValues, UseControllerReturn } from 'react-hook-form';
-
-import type { ApiFormFieldType } from '@lib/types/Forms';
-import { identifierString } from '../../../functions/conversion';
-import { InvenTreeIcon } from '../../../functions/icons';
-import { AddItemButton } from '../../buttons/AddItemButton';
-import { StandaloneField } from '../StandaloneField';
-
-export interface TableFieldRowProps {
-  item: any;
-  idx: number;
-  rowErrors: any;
-  control: UseControllerReturn<FieldValues, any>;
-  changeFn: (idx: number, key: string, value: any) => void;
-  removeFn: (idx: number) => void;
-}
-
-function TableFieldRow({
-  item,
-  idx,
-  errors,
-  definition,
-  control,
-  changeFn,
-  removeFn
-}: Readonly<{
-  item: any;
-  idx: number;
-  errors: any;
-  definition: ApiFormFieldType;
-  control: UseControllerReturn<FieldValues, any>;
-  changeFn: (idx: number, key: string, value: any) => void;
-  removeFn: (idx: number) => void;
-}>) {
-  // Table fields require render function
-  if (!definition.modelRenderer) {
-    return (
-      <Table.Tr key='table-row-no-renderer'>
-        <Table.Td colSpan={definition.headers?.length}>
-          <Alert color='red' title={t`Error`} icon={<IconExclamationCircle />}>
-            {t`modelRenderer entry required for tables`}
-          </Alert>
-        </Table.Td>
-      </Table.Tr>
-    );
-  }
-
-  return definition.modelRenderer({
-    item: item,
-    idx: idx,
-    rowErrors: errors,
-    control: control,
-    changeFn: changeFn,
-    removeFn: removeFn
-  });
-}
-
-export function TableFieldErrorWrapper({
-  props,
-  errorKey,
-  children
-}: Readonly<{
-  props: TableFieldRowProps;
-  errorKey: string;
-  children: ReactNode;
-}>) {
-  const msg = props?.rowErrors?.[errorKey];
-
-  return (
-    <Stack gap='xs'>
-      {children}
-      {msg && (
-        <Text size='xs' c='red'>
-          {msg.message}
-        </Text>
-      )}
-    </Stack>
-  );
-}
-
-export function TableField({
-  definition,
-  fieldName,
-  control
-}: Readonly<{
-  definition: ApiFormFieldType;
-  fieldName: string;
-  control: UseControllerReturn<FieldValues, any>;
-}>) {
-  const {
-    field,
-    fieldState: { error }
-  } = control;
-  const { value } = field;
-
-  const onRowFieldChange = (idx: number, key: string, value: any) => {
-    const val = field.value;
-    val[idx][key] = value;
-
-    field.onChange(val);
-  };
-
-  const removeRow = (idx: number) => {
-    const val = field.value;
-    val.splice(idx, 1);
-    field.onChange(val);
-  };
-
-  const fieldDefinition = useMemo(() => {
-    return {
-      ...definition,
-      modelRenderer: undefined,
-      onValueChange: undefined,
-      adjustFilters: undefined,
-      read_only: undefined,
-      addRow: undefined
-    };
-  }, [definition]);
-
-  // Extract errors associated with the current row
-  const rowErrors: any = useCallback(
-    (idx: number) => {
-      if (Array.isArray(error)) {
-        return error[idx];
-      }
-    },
-    [error]
-  );
-
-  return (
-    <Table
-      highlightOnHover
-      striped
-      aria-label={`table-field-${field.name}`}
-      style={{ width: '100%' }}
-    >
-      <Table.Thead>
-        <Table.Tr>
-          {definition.headers?.map((header, index) => {
-            return (
-              <Table.Th
-                key={`table-header-${identifierString(header.title)}-${index}`}
-                style={header.style}
-              >
-                {header.title}
-              </Table.Th>
-            );
-          })}
-        </Table.Tr>
-      </Table.Thead>
-
-      <Table.Tbody>
-        {value.length > 0 ? (
-          value.map((item: any, idx: number) => {
-            return (
-              <TableFieldRow
-                key={`table-row-${idx}`}
-                item={item}
-                idx={idx}
-                errors={rowErrors(idx)}
-                control={control}
-                definition={definition}
-                changeFn={onRowFieldChange}
-                removeFn={removeRow}
-              />
-            );
-          })
-        ) : (
-          <Table.Tr key='table-row-no-entries'>
-            <Table.Td
-              style={{ textAlign: 'center' }}
-              colSpan={definition.headers?.length}
-            >
-              <span
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  gap: '5px'
-                }}
-              >
-                <InvenTreeIcon icon='info' />
-                <Trans>No entries available</Trans>
-              </span>
-            </Table.Td>
-          </Table.Tr>
-        )}
-      </Table.Tbody>
-      {definition.addRow && (
-        <Table.Tfoot>
-          <Table.Tr>
-            <Table.Td colSpan={definition.headers?.length}>
-              <AddItemButton
-                tooltip={t`Add new row`}
-                onClick={() => {
-                  if (definition.addRow === undefined) return;
-                  const ret = definition.addRow();
-                  if (ret) {
-                    const val = field.value;
-                    val.push(ret);
-                    field.onChange(val);
-                  }
-                }}
-              />
-            </Table.Td>
-          </Table.Tr>
-        </Table.Tfoot>
-      )}
-    </Table>
-  );
-}
-
-/*
- * Display an "extra" row below the main table row, for additional information.
- * - Each "row" can display an extra row of information below the main row
- */
-export function TableFieldExtraRow({
-  visible,
-  fieldName,
-  fieldDefinition,
-  defaultValue,
-  emptyValue,
-  error,
-  onValueChange
-}: {
-  visible: boolean;
-  fieldName?: string;
-  fieldDefinition: ApiFormFieldType;
-  defaultValue?: any;
-  error?: string;
-  emptyValue?: any;
-  onValueChange: (value: any) => void;
-}) {
-  // Callback whenever the visibility of the sub-field changes
-  useEffect(() => {
-    if (!visible) {
-      // If the sub-field is hidden, reset the value to the "empty" value
-      onValueChange(emptyValue);
-    }
-  }, [visible]);
-
-  const field: ApiFormFieldType = useMemo(() => {
-    return {
-      ...fieldDefinition,
-      default: defaultValue,
-      onValueChange: (value: any) => {
-        onValueChange(value);
-      }
-    };
-  }, [fieldDefinition]);
-
-  return (
-    visible && (
-      <Table.Tr>
-        <Table.Td colSpan={10}>
-          <Group grow preventGrowOverflow={false} justify='flex-apart' p='xs'>
-            <Container flex={0} p='xs'>
-              <InvenTreeIcon icon='downright' />
-            </Container>
-            <StandaloneField
-              fieldName={fieldName ?? 'field'}
-              fieldDefinition={field}
-              defaultValue={defaultValue}
-              error={fieldDefinition.error ?? error}
-            />
-          </Group>
-        </Table.Td>
-      </Table.Tr>
-    )
-  );
-}

package/src/components/forms/fields/TextField.tsx

@@ -1,81 +0,0 @@
-import { TextInput } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
-import { IconX } from '@tabler/icons-react';
-import { useCallback, useEffect, useId, useState } from 'react';
-import type { FieldValues, UseControllerReturn } from 'react-hook-form';
-
-/*
- * Custom implementation of the mantine <TextInput> component,
- * used for rendering text input fields in forms.
- * Uses a debounced value to prevent excessive re-renders.
- */
-export default function TextField({
-  controller,
-  fieldName,
-  definition,
-  onChange,
-  onKeyDown
-}: Readonly<{
-  controller: UseControllerReturn<FieldValues, any>;
-  definition: any;
-  fieldName: string;
-  onChange: (value: any) => void;
-  onKeyDown: (value: any) => void;
-}>) {
-  const fieldId = useId();
-  const {
-    field,
-    fieldState: { error }
-  } = controller;
-
-  const { value } = field;
-
-  const [rawText, setRawText] = useState<string>(value || '');
-
-  const [debouncedText] = useDebouncedValue(rawText, 100);
-
-  useEffect(() => {
-    setRawText(value || '');
-  }, [value]);
-
-  const onTextChange = useCallback((value: any) => {
-    setRawText(value);
-  }, []);
-
-  useEffect(() => {
-    if (debouncedText !== value) {
-      onChange(debouncedText);
-    }
-  }, [debouncedText]);
-
-  return (
-    <TextInput
-      {...definition}
-      ref={field.ref}
-      id={fieldId}
-      aria-label={`text-field-${field.name}`}
-      type={definition.field_type}
-      value={rawText || ''}
-      error={definition.error ?? error?.message}
-      radius='sm'
-      onChange={(event) => onTextChange(event.currentTarget.value)}
-      onBlur={(event) => {
-        if (event.currentTarget.value != value) {
-          onChange(event.currentTarget.value);
-        }
-      }}
-      onKeyDown={(event) => {
-        if (event.code === 'Enter') {
-          // Bypass debounce on enter key
-          onChange(event.currentTarget.value);
-        }
-        onKeyDown(event.code);
-      }}
-      rightSection={
-        value && !definition.required ? (
-          <IconX size='1rem' color='red' onClick={() => onTextChange('')} />
-        ) : null
-      }
-    />
-  );
-}