First shlink-frontend-kit iteration

shlink-frontend-kit/src/block/index.ts

@@ -0,0 +1,3 @@
+export * from './Message';
+export * from './Result';
+export * from './SimpleCard';

shlink-frontend-kit/src/form/BooleanControl.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { identity } from 'ramda';
 import type { ChangeEvent, FC, PropsWithChildren } from 'react';
-import { useDomId } from './helpers/hooks';
+import { useDomId } from '../hooks';
 
 export type BooleanControlProps = PropsWithChildren<{
   checked?: boolean;

shlink-frontend-kit/src/form/InputFormGroup.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import type { InputType } from 'reactstrap/types/lib/Input';
-import { useDomId } from '../helpers/hooks';
+import { useDomId } from '../hooks';
 import { LabeledFormGroup } from './LabeledFormGroup';
 
 export type InputFormGroupProps = PropsWithChildren<{

shlink-frontend-kit/src/form/SearchField.scss

@@ -1,4 +1,4 @@
-@import '../utils/mixins/vertical-align';
+@import '../../../src/utils/mixins/vertical-align';
 
 .search-field {
   position: relative;

shlink-frontend-kit/src/form/index.ts

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './ToggleSwitch';
+export * from './InputFormGroup';
+export * from './LabeledFormGroup';
+export * from './SearchField';

shlink-frontend-kit/src/hooks/index.ts

@@ -0,0 +1,16 @@
+import { useRef, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+
+type ToggleResult = [boolean, () => void, () => void, () => void];
+
+export const useToggle = (initialValue = false): ToggleResult => {
+  const [flag, setFlag] = useState<boolean>(initialValue);
+  return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
+};
+
+export const useDomId = (): string => {
+  const { current: id } = useRef(`dom-${uuid()}`);
+  return id;
+};
+
+export const useElementRef = <T>() => useRef<T | null>(null);

shlink-frontend-kit/src/index.ts

@@ -0,0 +1,5 @@
+export * from './block';
+export * from './form';
+export * from './hooks';
+export * from './navigation';
+export * from './ordering';

shlink-frontend-kit/src/navigation/DropdownBtn.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 
-@import '../utils/mixins/vertical-align';
+@import '../../../src/utils/mixins/vertical-align';
 
 .dropdown-btn__toggle.dropdown-btn__toggle {
   text-align: left;

shlink-frontend-kit/src/navigation/DropdownBtn.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import type { DropdownToggleProps } from 'reactstrap/types/lib/DropdownToggle';
-import { useToggle } from './helpers/hooks';
+import { useToggle } from '../hooks';
 import './DropdownBtn.scss';
 
 export type DropdownBtnProps = PropsWithChildren<Omit<DropdownToggleProps, 'caret' | 'size' | 'outline'> & {

shlink-frontend-kit/src/navigation/NavPills.scss

@@ -1,4 +1,4 @@
-@import './base';
+@import '../../../src/utils/base';
 
 .nav-pills__nav {
   position: sticky !important;

shlink-frontend-kit/src/navigation/index.ts

@@ -0,0 +1,3 @@
+export * from './DropdownBtn';
+export * from './RowDropdownBtn';
+export * from './NavPills';

shlink-frontend-kit/src/ordering/OrderingDropdown.tsx

@@ -3,8 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { toPairs } from 'ramda';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
-import type { Order, OrderDir } from './helpers/ordering';
-import { determineOrderDir } from './helpers/ordering';
+import type { Order, OrderDir } from './ordering';
+import { determineOrderDir } from './ordering';
 import './OrderingDropdown.scss';
 
 export interface OrderingDropdownProps<T extends string = string> {

shlink-frontend-kit/src/ordering/index.ts

@@ -0,0 +1,2 @@
+export * from './ordering';
+export * from './OrderingDropdown';

shlink-web-component/Main.tsx

@@ -4,9 +4,10 @@ import classNames from 'classnames';
 import type { FC, ReactNode } from 'react';
 import { useEffect } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { useToggle } from '../shlink-frontend-kit/src';
 import { AsideMenu } from './common/AsideMenu';
 import { useFeature } from './utils/features';
-import { useSwipeable, useToggle } from './utils/helpers/hooks';
+import { useSwipeable } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
 
 type MainProps = {

shlink-web-component/api-contract/types.ts

@@ -1,4 +1,4 @@
-import type { Order } from '../../src/utils/helpers/ordering';
+import type { Order } from '../../shlink-frontend-kit/src';
 import type { ShortUrl, ShortUrlMeta } from '../short-urls/data';
 import type { Visit } from '../visits/types';
 

shlink-web-component/domains/DomainSelector.tsx

@@ -4,8 +4,7 @@ import { isEmpty, pipe } from 'ramda';
 import { useEffect } from 'react';
 import type { InputProps } from 'reactstrap';
 import { Button, DropdownItem, Input, InputGroup, UncontrolledTooltip } from 'reactstrap';
-import { DropdownBtn } from '../../src/utils/DropdownBtn';
-import { useToggle } from '../utils/helpers/hooks';
+import { DropdownBtn, useToggle } from '../../shlink-frontend-kit/src';
 import type { DomainsList } from './reducers/domainsList';
 import './DomainSelector.scss';
 

shlink-web-component/domains/ManageDomains.tsx

@@ -1,9 +1,6 @@
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import { Message } from '../../src/utils/Message';
-import { Result } from '../../src/utils/Result';
-import { SearchField } from '../../src/utils/SearchField';
-import { SimpleCard } from '../../src/utils/SimpleCard';
+import { Message, Result, SearchField, SimpleCard } from '../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../common/ShlinkApiError';
 import { DomainRow } from './DomainRow';
 import type { EditDomainRedirects } from './reducers/domainRedirects';

shlink-web-component/domains/helpers/DomainDropdown.tsx

@@ -3,9 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { DropdownItem } from 'reactstrap';
-import { RowDropdownBtn } from '../../../src/utils/RowDropdownBtn';
+import { RowDropdownBtn, useToggle } from '../../../shlink-frontend-kit/src';
 import { useFeature } from '../../utils/features';
-import { useToggle } from '../../utils/helpers/hooks';
 import { useRoutesPrefix } from '../../utils/routesPrefix';
 import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
 import type { Domain } from '../data';

shlink-web-component/domains/helpers/DomainStatusIcon.tsx

@@ -8,7 +8,7 @@ import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { UncontrolledTooltip } from 'reactstrap';
-import { useElementRef } from '../../utils/helpers/hooks';
+import { useElementRef } from '../../../shlink-frontend-kit/src';
 import type { MediaMatcher } from '../../utils/types';
 import type { DomainStatus } from '../data';
 

shlink-web-component/domains/helpers/EditDomainRedirectsModal.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import { useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import type { InputFormGroupProps } from '../../../src/utils/forms/InputFormGroup';
-import { InputFormGroup } from '../../../src/utils/forms/InputFormGroup';
+import type { InputFormGroupProps } from '../../../shlink-frontend-kit/src';
+import { InputFormGroup } from '../../../shlink-frontend-kit/src';
 import type { ShlinkDomain } from '../../api-contract';
 import { InfoTooltip } from '../../utils/components/InfoTooltip';
 import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/helpers';

shlink-web-component/overview/helpers/HighlightCard.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { Card, CardText, CardTitle, UncontrolledTooltip } from 'reactstrap';
-import { useElementRef } from '../../utils/helpers/hooks';
+import { useElementRef } from '../../../shlink-frontend-kit/src';
 import './HighlightCard.scss';
 
 export type HighlightCardProps = PropsWithChildren<{

shlink-web-component/short-urls/EditShortUrl.tsx

@@ -5,8 +5,7 @@ import { useEffect, useMemo } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { useLocation, useParams } from 'react-router-dom';
 import { Button, Card } from 'reactstrap';
-import { Message } from '../../src/utils/Message';
-import { Result } from '../../src/utils/Result';
+import { Message, Result } from '../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../common/ShlinkApiError';
 import { useGoBack } from '../utils/helpers/hooks';
 import { parseQuery } from '../utils/helpers/query';

shlink-web-component/short-urls/ShortUrlForm.tsx

@@ -8,8 +8,7 @@ import type { ChangeEvent, FC } from 'react';
 import { useEffect, useState } from 'react';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import type { InputType } from 'reactstrap/types/lib/Input';
-import { Checkbox } from '../../src/utils/Checkbox';
-import { SimpleCard } from '../../src/utils/SimpleCard';
+import { Checkbox, SimpleCard } from '../../shlink-frontend-kit/src';
 import type { DomainSelectorProps } from '../domains/DomainSelector';
 import type { TagsSelectorProps } from '../tags/helpers/TagsSelector';
 import { IconInput } from '../utils/components/IconInput';

shlink-web-component/short-urls/ShortUrlsFilteringBar.tsx

@@ -4,9 +4,8 @@ import classNames from 'classnames';
 import { isEmpty, pipe } from 'ramda';
 import type { FC } from 'react';
 import { Button, InputGroup, Row, UncontrolledTooltip } from 'reactstrap';
-import type { OrderDir } from '../../src/utils/helpers/ordering';
-import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
-import { SearchField } from '../../src/utils/SearchField';
+import type { OrderDir } from '../../shlink-frontend-kit/src';
+import { OrderingDropdown, SearchField } from '../../shlink-frontend-kit/src';
 import type { TagsSelectorProps } from '../tags/helpers/TagsSelector';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
 import { formatIsoDate } from '../utils/dates/helpers/date';

shlink-web-component/short-urls/ShortUrlsList.tsx

@@ -2,9 +2,9 @@ import { pipe } from 'ramda';
 import { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { Card } from 'reactstrap';
+import type { OrderDir } from '../../shlink-frontend-kit/src';
+import { determineOrderDir } from '../../shlink-frontend-kit/src';
 import { DEFAULT_SHORT_URLS_ORDERING } from '../../src/settings/reducers/settings';
-import type { OrderDir } from '../../src/utils/helpers/ordering';
-import { determineOrderDir } from '../../src/utils/helpers/ordering';
 import type { ShlinkShortUrlsListParams, ShlinkShortUrlsOrder } from '../api-contract';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';

shlink-web-component/short-urls/UseExistingIfFoundInfoIcon.tsx

@@ -1,7 +1,7 @@
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
-import { useToggle } from '../utils/helpers/hooks';
+import { useToggle } from '../../shlink-frontend-kit/src';
 import './UseExistingIfFoundInfoIcon.scss';
 
 const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => (

shlink-web-component/short-urls/data/index.ts

@@ -1,4 +1,4 @@
-import type { Order } from '../../../src/utils/helpers/ordering';
+import type { Order } from '../../../shlink-frontend-kit/src';
 import type { ShlinkVisitsSummary } from '../../api-contract';
 import type { Nullable, OptionalString } from '../../utils/helpers';
 

shlink-web-component/short-urls/helpers/CreateShortUrlResult.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
-import { Result } from '../../../src/utils/Result';
+import { Result } from '../../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../../common/ShlinkApiError';
 import type { TimeoutToggle } from '../../utils/helpers/hooks';
 import type { ShortUrlCreation } from '../reducers/shortUrlCreation';

shlink-web-component/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -1,7 +1,7 @@
 import { pipe } from 'ramda';
 import { useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { Result } from '../../../src/utils/Result';
+import { Result } from '../../../shlink-frontend-kit/src';
 import { isInvalidDeletionError } from '../../api-contract/utils';
 import { ShlinkApiError } from '../../common/ShlinkApiError';
 import { handleEventPreventingDefault } from '../../utils/helpers';

shlink-web-component/short-urls/helpers/ExportShortUrlsBtn.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import { useCallback } from 'react';
+import { useToggle } from '../../../shlink-frontend-kit/src';
 import type { ShlinkApiClient } from '../../api-contract';
 import { ExportBtn } from '../../utils/components/ExportBtn';
-import { useToggle } from '../../utils/helpers/hooks';
 import type { ReportExporter } from '../../utils/services/ReportExporter';
 import type { ShortUrl } from '../data';
 import { useShortUrlsQuery } from './hooks';

shlink-web-component/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent, FC, PropsWithChildren } from 'react';
-import { Checkbox } from '../../../src/utils/Checkbox';
+import { Checkbox } from '../../../shlink-frontend-kit/src';
 import { InfoTooltip } from '../../utils/components/InfoTooltip';
 
 type ShortUrlFormCheckboxGroupProps = PropsWithChildren<{

shlink-web-component/short-urls/helpers/ShortUrlStatus.tsx

@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isBefore } from 'date-fns';
 import type { FC, ReactNode } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../../../shlink-frontend-kit/src';
 import { formatHumanFriendly, now, parseISO } from '../../utils/dates/helpers/date';
-import { useElementRef } from '../../utils/helpers/hooks';
 import type { ShortUrl } from '../data';
 
 interface ShortUrlStatusProps {

shlink-web-component/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -2,8 +2,8 @@ import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../../../shlink-frontend-kit/src';
 import { formatHumanFriendly, parseISO } from '../../utils/dates/helpers/date';
-import { useElementRef } from '../../utils/helpers/hooks';
 import { prettify } from '../../utils/helpers/numbers';
 import type { ShortUrl } from '../data';
 import { ShortUrlDetailLink } from './ShortUrlDetailLink';

shlink-web-component/short-urls/helpers/ShortUrlsFilterDropdown.tsx

@@ -1,5 +1,5 @@
 import { DropdownItem } from 'reactstrap';
-import { DropdownBtn } from '../../../src/utils/DropdownBtn';
+import { DropdownBtn } from '../../../shlink-frontend-kit/src';
 import { hasValue } from '../../utils/helpers';
 import type { ShortUrlsFilter } from '../data';
 

shlink-web-component/short-urls/helpers/ShortUrlsRowMenu.tsx

@@ -7,8 +7,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
 import { DropdownItem } from 'reactstrap';
-import { RowDropdownBtn } from '../../../src/utils/RowDropdownBtn';
-import { useToggle } from '../../utils/helpers/hooks';
+import { RowDropdownBtn, useToggle } from '../../../shlink-frontend-kit/src';
 import type { ShortUrl, ShortUrlModalProps } from '../data';
 import { ShortUrlDetailLink } from './ShortUrlDetailLink';
 

shlink-web-component/short-urls/helpers/hooks.ts

@@ -1,7 +1,7 @@
 import { isEmpty, pipe } from 'ramda';
 import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { orderToString, stringToOrder } from '../../../src/utils/helpers/ordering';
+import { orderToString, stringToOrder } from '../../../shlink-frontend-kit/src';
 import type { TagsFilteringMode } from '../../api-contract';
 import type { BooleanString } from '../../utils/helpers';
 import { parseOptionalBooleanToString } from '../../utils/helpers';

shlink-web-component/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { DropdownItem } from 'reactstrap';
-import { DropdownBtn } from '../../../../src/utils/DropdownBtn';
+import { DropdownBtn } from '../../../../shlink-frontend-kit/src';
 import type { QrErrorCorrection } from '../../../utils/helpers/qrCodes';
 
 interface QrErrorCorrectionDropdownProps {

shlink-web-component/short-urls/helpers/qr-codes/QrFormatDropdown.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { DropdownItem } from 'reactstrap';
-import { DropdownBtn } from '../../../../src/utils/DropdownBtn';
+import { DropdownBtn } from '../../../../shlink-frontend-kit/src';
 import type { QrCodeFormat } from '../../../utils/helpers/qrCodes';
 
 interface QrFormatDropdownProps {

shlink-web-component/tags/TagsList.tsx

@@ -2,11 +2,7 @@ import { pipe } from 'ramda';
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 import { Row } from 'reactstrap';
-import { determineOrderDir, sortList } from '../../src/utils/helpers/ordering';
-import { Message } from '../../src/utils/Message';
-import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
-import { Result } from '../../src/utils/Result';
-import { SearchField } from '../../src/utils/SearchField';
+import { determineOrderDir, Message, OrderingDropdown, Result, SearchField, sortList } from '../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../common/ShlinkApiError';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';

shlink-web-component/tags/TagsTable.tsx

@@ -2,7 +2,7 @@ import { splitEvery } from 'ramda';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import { SimpleCard } from '../../src/utils/SimpleCard';
+import { SimpleCard } from '../../shlink-frontend-kit/src';
 import { SimplePaginator } from '../utils/components/SimplePaginator';
 import { useQueryState } from '../utils/helpers/hooks';
 import { parseQuery } from '../utils/helpers/query';

shlink-web-component/tags/TagsTableRow.tsx

@@ -3,8 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { DropdownItem } from 'reactstrap';
-import { RowDropdownBtn } from '../../src/utils/RowDropdownBtn';
-import { useToggle } from '../utils/helpers/hooks';
+import { RowDropdownBtn, useToggle } from '../../shlink-frontend-kit/src';
 import { prettify } from '../utils/helpers/numbers';
 import { useRoutesPrefix } from '../utils/routesPrefix';
 import type { ColorGenerator } from '../utils/services/ColorGenerator';

shlink-web-component/tags/data/TagsListChildrenProps.ts

@@ -1,4 +1,4 @@
-import type { Order } from '../../../src/utils/helpers/ordering';
+import type { Order } from '../../../shlink-frontend-kit/src';
 import type { SimplifiedTag } from './index';
 
 export const TAGS_ORDERABLE_FIELDS = {

shlink-web-component/tags/helpers/DeleteTagConfirmModal.tsx

@@ -1,5 +1,5 @@
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { Result } from '../../../src/utils/Result';
+import { Result } from '../../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../../common/ShlinkApiError';
 import type { TagModalProps } from '../data';
 import type { TagDeletion } from '../reducers/tagDelete';

shlink-web-component/tags/helpers/EditTagModal.tsx

@@ -4,10 +4,9 @@ import { pipe } from 'ramda';
 import { useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { Button, Input, InputGroup, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
-import { Result } from '../../../src/utils/Result';
+import { Result, useToggle } from '../../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../../common/ShlinkApiError';
 import { handleEventPreventingDefault } from '../../utils/helpers';
-import { useToggle } from '../../utils/helpers/hooks';
 import type { ColorGenerator } from '../../utils/services/ColorGenerator';
 import type { TagModalProps } from '../data';
 import type { EditTag, TagEdition } from '../reducers/tagEdit';

shlink-web-component/utils/components/IconInput.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import type { FC } from 'react';
 import type { InputProps } from 'reactstrap';
 import { Input } from 'reactstrap';
-import { useElementRef } from '../../../src/utils/helpers/hooks';
+import { useElementRef } from '../../../shlink-frontend-kit/src';
 import './IconInput.scss';
 
 type IconInputProps = InputProps & {

shlink-web-component/utils/components/InfoTooltip.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Placement } from '@popperjs/core';
 import type { FC, PropsWithChildren } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import { useElementRef } from '../helpers/hooks';
+import { useElementRef } from '../../../shlink-frontend-kit/src';
 
 export type InfoTooltipProps = PropsWithChildren<{
   className?: string;

shlink-web-component/utils/dates/DateIntervalSelector.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { DropdownBtn } from '../../../src/utils/DropdownBtn';
+import { DropdownBtn } from '../../../shlink-frontend-kit/src';
 import type { DateIntervalDropdownProps } from './DateIntervalDropdownItems';
 import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
 import { rangeOrIntervalToString } from './helpers/dateIntervals';

shlink-web-component/utils/dates/DateRangeSelector.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DropdownItem } from 'reactstrap';
-import { DropdownBtn } from '../../../src/utils/DropdownBtn';
+import { DropdownBtn } from '../../../shlink-frontend-kit/src';
 import { useEffectExceptFirstTime } from '../helpers/hooks';
 import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
 import { DateRangeRow } from './DateRangeRow';

shlink-web-component/utils/helpers/hooks.ts

@@ -2,7 +2,6 @@ import type { DependencyList, EffectCallback } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
-import { v4 as uuid } from 'uuid';
 import { parseQuery, stringifyQuery } from './query';
 
 const DEFAULT_DELAY = 2000;
@@ -75,17 +74,3 @@ export const useGoBack = () => {
   const navigate = useNavigate();
   return () => navigate(-1);
 };
-
-type ToggleResult = [boolean, () => void, () => void, () => void];
-
-export const useToggle = (initialValue = false): ToggleResult => {
-  const [flag, setFlag] = useState<boolean>(initialValue);
-  return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
-};
-
-export const useDomId = (): string => {
-  const { current: id } = useRef(`dom-${uuid()}`);
-  return id;
-};
-
-export const useElementRef = <T>() => useRef<T | null>(null);

shlink-web-component/utils/table/TableOrderIcon.tsx

@@ -1,6 +1,6 @@
 import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Order } from '../../../src/utils/helpers/ordering';
+import type { Order } from '../../../shlink-frontend-kit/src';
 
 interface TableOrderIconProps<T> {
   currentOrder: Order<T>;

shlink-web-component/visits/VisitsStats.tsx

@@ -7,9 +7,7 @@ import type { FC, PropsWithChildren } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { Button, Progress, Row } from 'reactstrap';
-import { Message } from '../../src/utils/Message';
-import { NavPillItem, NavPills } from '../../src/utils/NavPills';
-import { Result } from '../../src/utils/Result';
+import { Message, NavPillItem, NavPills, Result } from '../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../common/ShlinkApiError';
 import { ExportBtn } from '../utils/components/ExportBtn';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';

shlink-web-component/visits/VisitsTable.tsx

@@ -4,9 +4,8 @@ import classNames from 'classnames';
 import { min, splitEvery } from 'ramda';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import type { Order } from '../../src/utils/helpers/ordering';
-import { determineOrderDir, sortList } from '../../src/utils/helpers/ordering';
-import { SearchField } from '../../src/utils/SearchField';
+import type { Order } from '../../shlink-frontend-kit/src';
+import { determineOrderDir, SearchField, sortList } from '../../shlink-frontend-kit/src';
 import { SimplePaginator } from '../utils/components/SimplePaginator';
 import { Time } from '../utils/dates/Time';
 import { prettify } from '../utils/helpers/numbers';

shlink-web-component/visits/charts/LineChartCard.tsx

@@ -23,12 +23,11 @@ import {
   DropdownToggle,
   UncontrolledDropdown,
 } from 'reactstrap';
+import { ToggleSwitch, useToggle } from '../../../shlink-frontend-kit/src';
 import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../../src/utils/theme';
-import { ToggleSwitch } from '../../../src/utils/ToggleSwitch';
 import { formatInternational } from '../../utils/dates/helpers/date';
 import { rangeOf } from '../../utils/helpers';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
-import { useToggle } from '../../utils/helpers/hooks';
 import { prettify } from '../../utils/helpers/numbers';
 import type { NormalizedVisit, Stats } from '../types';
 import { fillTheGaps } from '../utils';

shlink-web-component/visits/charts/SortableBarChartCard.tsx

@@ -1,8 +1,8 @@
 import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
 import type { FC, ReactNode } from 'react';
 import { useState } from 'react';
-import type { Order } from '../../../src/utils/helpers/ordering';
-import { OrderingDropdown } from '../../../src/utils/OrderingDropdown';
+import type { Order } from '../../../shlink-frontend-kit/src';
+import { OrderingDropdown } from '../../../shlink-frontend-kit/src';
 import { PaginationDropdown } from '../../utils/components/PaginationDropdown';
 import { SimplePaginator } from '../../utils/components/SimplePaginator';
 import { rangeOf } from '../../utils/helpers';

shlink-web-component/visits/helpers/OpenMapModalBtn.tsx

@@ -2,7 +2,7 @@ import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
 import { Button, Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
-import { useDomId, useToggle } from '../../utils/helpers/hooks';
+import { useDomId, useToggle } from '../../../shlink-frontend-kit/src';
 import type { CityStats } from '../types';
 import { MapModal } from './MapModal';
 import './OpenMapModalBtn.scss';

shlink-web-component/visits/helpers/VisitsFilterDropdown.tsx

@@ -1,6 +1,6 @@
 import type { DropdownItemProps } from 'reactstrap';
 import { DropdownItem } from 'reactstrap';
-import { DropdownBtn } from '../../../src/utils/DropdownBtn';
+import { DropdownBtn } from '../../../shlink-frontend-kit/src';
 import { hasValue } from '../../utils/helpers';
 import type { OrphanVisitType, VisitsFilter } from '../types';
 

src/api/services/ShlinkApiClient.ts

@@ -1,4 +1,5 @@
 import { isEmpty, isNil, reject } from 'ramda';
+import { orderToString } from '../../../shlink-frontend-kit/src';
 import type {
   ShlinkApiClient as BaseShlinkApiClient,
   ShlinkDomainRedirects,
@@ -20,7 +21,6 @@ import { isRegularNotFound, parseApiError } from '../../../shlink-web-component/
 import type { ShortUrl, ShortUrlData } from '../../../shlink-web-component/short-urls/data';
 import { stringifyQuery } from '../../../shlink-web-component/utils/helpers/query';
 import type { HttpClient } from '../../common/services/HttpClient';
-import { orderToString } from '../../utils/helpers/ordering';
 import { replaceAuthorityFromUri } from '../../utils/helpers/uri';
 import type { OptionalString } from '../../utils/utils';
 

src/common/AppUpdateBanner.tsx

@@ -2,8 +2,7 @@ import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC, MouseEventHandler } from 'react';
 import { Alert, Button } from 'reactstrap';
-import { useToggle } from '../utils/helpers/hooks';
-import { SimpleCard } from '../utils/SimpleCard';
+import { SimpleCard, useToggle } from '../../shlink-frontend-kit/src';
 import './AppUpdateBanner.scss';
 
 interface AppUpdateBannerProps {

src/common/ErrorHandler.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { Component } from 'react';
 import { Button } from 'reactstrap';
-import { SimpleCard } from '../utils/SimpleCard';
+import { SimpleCard } from '../../shlink-frontend-kit/src';
 
 interface ErrorHandlerState {
   hasError: boolean;

src/common/MainHeader.tsx

@@ -5,7 +5,7 @@ import type { FC } from 'react';
 import { useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
-import { useToggle } from '../utils/helpers/hooks';
+import { useToggle } from '../../shlink-frontend-kit/src';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './MainHeader.scss';
 

src/common/NotFound.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
-import { SimpleCard } from '../utils/SimpleCard';
+import { SimpleCard } from '../../shlink-frontend-kit/src';
 
 type NotFoundProps = PropsWithChildren<{ to?: string }>;
 

src/servers/CreateServer.tsx

@@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from 'reactstrap';
 import { v4 as uuid } from 'uuid';
+import { Result, useToggle } from '../../shlink-frontend-kit/src';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { TimeoutToggle } from '../utils/helpers/hooks';
-import { useGoBack, useToggle } from '../utils/helpers/hooks';
-import { Result } from '../utils/Result';
+import { useGoBack } from '../utils/helpers/hooks';
 import type { ServerData, ServersMap, ServerWithId } from './data';
 import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 import type { ImportServersBtnProps } from './helpers/ImportServersBtn';

src/servers/DeleteServerButton.tsx

@@ -1,7 +1,7 @@
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC, PropsWithChildren } from 'react';
-import { useToggle } from '../utils/helpers/hooks';
+import { useToggle } from '../../shlink-frontend-kit/src';
 import type { ServerWithId } from './data';
 import type { DeleteServerModalProps } from './DeleteServerModal';
 

src/servers/ManageServers.tsx

@@ -4,11 +4,9 @@ import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Row } from 'reactstrap';
+import { Result, SearchField, SimpleCard } from '../../shlink-frontend-kit/src';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { TimeoutToggle } from '../utils/helpers/hooks';
-import { Result } from '../utils/Result';
-import { SearchField } from '../utils/SearchField';
-import { SimpleCard } from '../utils/SimpleCard';
 import type { ServersMap } from './data';
 import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
 import type { ManageServersRowProps } from './ManageServersRow';

src/servers/ManageServersRowDropdown.tsx

@@ -9,8 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { DropdownItem } from 'reactstrap';
-import { useToggle } from '../utils/helpers/hooks';
-import { RowDropdownBtn } from '../utils/RowDropdownBtn';
+import { RowDropdownBtn, useToggle } from '../../shlink-frontend-kit/src';
 import type { ServerWithId } from './data';
 import type { DeleteServerModalProps } from './DeleteServerModal';
 

src/servers/helpers/ImportServersBtn.tsx

@@ -4,7 +4,7 @@ import { complement, pipe } from 'ramda';
 import type { ChangeEvent, FC, PropsWithChildren } from 'react';
 import { useEffect, useState } from 'react';
 import { Button, UncontrolledTooltip } from 'reactstrap';
-import { useElementRef, useToggle } from '../../utils/helpers/hooks';
+import { useElementRef, useToggle } from '../../../shlink-frontend-kit/src';
 import type { ServerData, ServersMap } from '../data';
 import type { ServersImporter } from '../services/ServersImporter';
 import { DuplicatedServersModal } from './DuplicatedServersModal';

src/servers/helpers/ServerError.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
+import { Message } from '../../../shlink-frontend-kit/src';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
-import { Message } from '../../utils/Message';
 import type { SelectedServer, ServersMap } from '../data';
 import { isServerWithId } from '../data';
 import type { DeleteServerButtonProps } from '../DeleteServerButton';

src/servers/helpers/ServerForm.tsx

@@ -1,7 +1,6 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useEffect, useState } from 'react';
-import { InputFormGroup } from '../../utils/forms/InputFormGroup';
-import { SimpleCard } from '../../utils/SimpleCard';
+import { InputFormGroup, SimpleCard } from '../../../shlink-frontend-kit/src';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import type { ServerData } from '../data';
 

src/servers/helpers/withSelectedServer.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import { Message } from '../../../shlink-frontend-kit/src';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
-import { Message } from '../../utils/Message';
 import type { SelectedServer } from '../data';
 import { isNotFoundServer } from '../data';
 

src/settings/RealTimeUpdatesSettings.tsx

@@ -1,11 +1,8 @@
 import classNames from 'classnames';
 import { FormGroup, Input } from 'reactstrap';
+import { LabeledFormGroup, SimpleCard, ToggleSwitch, useDomId } from '../../shlink-frontend-kit/src';
 import type { Settings } from '../../shlink-web-component';
 import { FormText } from '../utils/forms/FormText';
-import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
-import { useDomId } from '../utils/helpers/hooks';
-import { SimpleCard } from '../utils/SimpleCard';
-import { ToggleSwitch } from '../utils/ToggleSwitch';
 
 type RealTimeUpdatesProps = {
   settings: Settings;

src/settings/Settings.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
+import { NavPillItem, NavPills } from '../../shlink-frontend-kit/src';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { NavPillItem, NavPills } from '../utils/NavPills';
 
 const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
   <>

src/settings/ShortUrlCreationSettings.tsx

@@ -1,11 +1,12 @@
 import type { FC, ReactNode } from 'react';
 import { DropdownItem, FormGroup } from 'reactstrap';
-import { DropdownBtn } from '../utils/DropdownBtn';
+import { DropdownBtn, LabeledFormGroup, SimpleCard, ToggleSwitch } from '../../shlink-frontend-kit/src';
+import type { Settings } from '../../shlink-web-component';
 import { FormText } from '../utils/forms/FormText';
-import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
-import { SimpleCard } from '../utils/SimpleCard';
-import { ToggleSwitch } from '../utils/ToggleSwitch';
-import type { Settings, ShortUrlCreationSettings as ShortUrlsSettings, TagFilteringMode } from './reducers/settings';
+import type { Defined } from '../utils/types';
+
+type ShortUrlsSettings = Defined<Settings['shortUrlCreation']>;
+type TagFilteringMode = Defined<ShortUrlsSettings['tagFilteringMode']>;
 
 interface ShortUrlCreationProps {
   settings: Settings;

src/settings/ShortUrlsListSettings.tsx

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
+import { LabeledFormGroup, OrderingDropdown, SimpleCard } from '../../shlink-frontend-kit/src';
+import type { Settings } from '../../shlink-web-component';
 import { SHORT_URLS_ORDERABLE_FIELDS } from '../../shlink-web-component/short-urls/data';
-import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
-import { OrderingDropdown } from '../utils/OrderingDropdown';
-import { SimpleCard } from '../utils/SimpleCard';
-import type { Settings, ShortUrlsListSettings as ShortUrlsSettings } from './reducers/settings';
+import type { Defined } from '../utils/types';
 import { DEFAULT_SHORT_URLS_ORDERING } from './reducers/settings';
 
+type ShortUrlsSettings = Defined<Settings['shortUrlsList']>;
+
 interface ShortUrlsListSettingsProps {
   settings: Settings;
   setShortUrlsListSettings: (settings: ShortUrlsSettings) => void;

src/settings/TagsSettings.tsx

@@ -1,9 +1,10 @@
 import type { FC } from 'react';
+import { LabeledFormGroup, OrderingDropdown, SimpleCard } from '../../shlink-frontend-kit/src';
+import type { Settings } from '../../shlink-web-component';
 import { TAGS_ORDERABLE_FIELDS } from '../../shlink-web-component/tags/data/TagsListChildrenProps';
-import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
-import { OrderingDropdown } from '../utils/OrderingDropdown';
-import { SimpleCard } from '../utils/SimpleCard';
-import type { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings';
+import type { Defined } from '../utils/types';
+
+type TagsSettingsOptions = Defined<Settings['tags']>;
 
 interface TagsProps {
   settings: Settings;

src/settings/UserInterfaceSettings.tsx

@@ -1,13 +1,15 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
-import { SimpleCard } from '../utils/SimpleCard';
+import { SimpleCard, ToggleSwitch } from '../../shlink-frontend-kit/src';
+import type { Settings } from '../../shlink-web-component';
 import type { Theme } from '../utils/theme';
 import { changeThemeInMarkup } from '../utils/theme';
-import { ToggleSwitch } from '../utils/ToggleSwitch';
-import type { Settings, UiSettings } from './reducers/settings';
+import type { Defined } from '../utils/types';
 import './UserInterfaceSettings.scss';
 
+type UiSettings = Defined<Settings['ui']>;
+
 interface UserInterfaceProps {
   settings: Settings;
   setUiSettings: (settings: UiSettings) => void;

src/settings/VisitsSettings.tsx

@@ -1,12 +1,10 @@
 import type { FC } from 'react';
 import { FormGroup } from 'reactstrap';
+import { LabeledFormGroup, SimpleCard, ToggleSwitch } from '../../shlink-frontend-kit/src';
 import type { Settings } from '../../shlink-web-component';
 import type { DateInterval } from '../../shlink-web-component/utils/dates/helpers/dateIntervals';
 import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
 import { FormText } from '../utils/forms/FormText';
-import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
-import { SimpleCard } from '../utils/SimpleCard';
-import { ToggleSwitch } from '../utils/ToggleSwitch';
 
 type VisitsSettingsConfig = Settings['visits'];
 

src/settings/reducers/settings.ts

@@ -2,8 +2,9 @@ import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { mergeDeepRight } from 'ramda';
 import type { Settings } from '../../../shlink-web-component';
+import type { Defined } from '../../utils/types';
 
-type ShortUrlsOrder = Exclude<Exclude<Settings['shortUrlsList'], undefined>['defaultOrdering'], undefined>;
+type ShortUrlsOrder = Defined<Defined<Settings['shortUrlsList']>['defaultOrdering']>;
 
 export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
   field: 'dateCreated',

src/utils/dates/DateIntervalSelector.tsx

@@ -1,10 +1,11 @@
 import type { FC } from 'react';
 import { DropdownItem } from 'reactstrap';
+import { DropdownBtn } from '../../../shlink-frontend-kit/src';
 import type { Settings } from '../../../shlink-web-component';
 import { rangeOrIntervalToString } from '../../../shlink-web-component/utils/dates/helpers/dateIntervals';
-import { DropdownBtn } from '../DropdownBtn';
+import type { Defined } from '../types';
 
-type DateInterval = Exclude<Settings['visits'], undefined>['defaultInterval'];
+type DateInterval = Defined<Settings['visits']>['defaultInterval'];
 
 export interface DateIntervalSelectorProps {
   active?: DateInterval;

src/utils/helpers/hooks.ts

@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { parseQuery } from '../../../shlink-web-component/utils/helpers/query';
 
 const DEFAULT_DELAY = 2000;
@@ -35,17 +34,3 @@ export const useParsedQuery = <T>(): T => {
   const { search } = useLocation();
   return parseQuery<T>(search);
 };
-
-type ToggleResult = [boolean, () => void, () => void, () => void];
-
-export const useToggle = (initialValue = false): ToggleResult => {
-  const [flag, setFlag] = useState<boolean>(initialValue);
-  return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
-};
-
-export const useDomId = (): string => {
-  const { current: id } = useRef(`dom-${uuid()}`);
-  return id;
-};
-
-export const useElementRef = <T>() => useRef<T | null>(null);

src/utils/types.ts

@@ -0,0 +1 @@
+export type Defined<T> = Exclude<T, undefined>;

test/utils/Checkbox.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { Checkbox } from '../../src/utils/Checkbox';
+import { Checkbox } from '../../shlink-frontend-kit/src/form/Checkbox';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<Checkbox />', () => {

test/utils/DropdownBtn.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
-import type { DropdownBtnProps } from '../../src/utils/DropdownBtn';
-import { DropdownBtn } from '../../src/utils/DropdownBtn';
+import type { DropdownBtnProps } from '../../shlink-frontend-kit/src/navigation/DropdownBtn';
+import { DropdownBtn } from '../../shlink-frontend-kit/src/navigation/DropdownBtn';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DropdownBtn />', () => {

test/utils/Message.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
-import type { MessageProps } from '../../src/utils/Message';
-import { Message } from '../../src/utils/Message';
+import type { MessageProps } from '../../shlink-frontend-kit/src/block/Message';
+import { Message } from '../../shlink-frontend-kit/src/block/Message';
 
 describe('<Message />', () => {
   const setUp = (props: PropsWithChildren<MessageProps> = {}) => render(<Message {...props} />);

test/utils/NavPills.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import { NavPillItem, NavPills } from '../../src/utils/NavPills';
+import { NavPillItem, NavPills } from '../../shlink-frontend-kit/src/navigation/NavPills';
 
 describe('<NavPills />', () => {
   let originalError: typeof console.error;

test/utils/OrderingDropdown.test.tsx

@@ -1,8 +1,8 @@
 import { screen } from '@testing-library/react';
 import { values } from 'ramda';
-import type { OrderDir } from '../../src/utils/helpers/ordering';
-import type { OrderingDropdownProps } from '../../src/utils/OrderingDropdown';
-import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
+import type { OrderDir } from '../../shlink-frontend-kit/src/ordering/ordering';
+import type { OrderingDropdownProps } from '../../shlink-frontend-kit/src/ordering/OrderingDropdown';
+import { OrderingDropdown } from '../../shlink-frontend-kit/src/ordering/OrderingDropdown';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<OrderingDropdown />', () => {

test/utils/Result.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import type { ResultProps, ResultType } from '../../src/utils/Result';
-import { Result } from '../../src/utils/Result';
+import type { ResultProps, ResultType } from '../../shlink-frontend-kit/src/block/Result';
+import { Result } from '../../shlink-frontend-kit/src/block/Result';
 
 describe('<Result />', () => {
   const setUp = (props: ResultProps) => render(<Result {...props} />);

test/utils/RowDropdownBtn.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import type { DropdownBtnMenuProps } from '../../src/utils/RowDropdownBtn';
-import { RowDropdownBtn } from '../../src/utils/RowDropdownBtn';
+import type { DropdownBtnMenuProps } from '../../shlink-frontend-kit/src/navigation/RowDropdownBtn';
+import { RowDropdownBtn } from '../../shlink-frontend-kit/src/navigation/RowDropdownBtn';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<RowDropdownBtn />', () => {

test/utils/SimpleCard.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { SimpleCard } from '../../src/utils/SimpleCard';
+import { SimpleCard } from '../../shlink-frontend-kit/src/block/SimpleCard';
 
 describe('<SimpleCard />', () => {
   it('does not render title if not provided', () => {

test/utils/dates/DateIntervalDropdownItems.test.tsx

@@ -1,8 +1,8 @@
 import { screen, waitFor } from '@testing-library/react';
+import { DropdownBtn } from '../../../shlink-frontend-kit/src/navigation/DropdownBtn';
 import type { DateInterval } from '../../../shlink-web-component/utils/dates/helpers/dateIntervals';
 import { DATE_INTERVALS, rangeOrIntervalToString } from '../../../shlink-web-component/utils/dates/helpers/dateIntervals';
 import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
-import { DropdownBtn } from '../../../src/utils/DropdownBtn';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<DateIntervalDropdownItems />', () => {