Add aliases for shlink-web-component and shlink-frontend-kit packages

shlink-web-component/src/Main.tsx

@@ -1,16 +1,16 @@
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useToggle } from '@shlinkio/shlink-frontend-kit';
 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 } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
 
-type MainProps = {
+export type MainProps = {
   createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
 };
 

shlink-web-component/src/ShlinkWebComponent.tsx

@@ -2,7 +2,7 @@ import type { Store } from '@reduxjs/toolkit';
 import type Bottle from 'bottlejs';
 import type { FC, ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { Provider } from 'react-redux';
+import { Provider as ReduxStoreProvider } from 'react-redux';
 import type { ShlinkApiClient } from './api-contract';
 import { FeaturesProvider, useFeatures } from './utils/features';
 import type { SemVer } from './utils/helpers/version';
@@ -18,9 +18,8 @@ type ShlinkWebComponentProps = {
   createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
 };
 
-// FIXME
-// This allows to track the reference to be resolved by the container, but it's hacky and relies on not more than one
-// ShlinkWebComponent rendered at the same time
+// FIXME This allows to track the reference to be resolved by the container, but it's hacky and relies on not more than
+//       one ShlinkWebComponent rendered at the same time
 let apiClientRef: ShlinkApiClient;
 
 export const createShlinkWebComponent = (
@@ -46,7 +45,7 @@ export const createShlinkWebComponent = (
   }, [apiClient]);
 
   return !theStore ? <></> : (
-    <Provider store={theStore}>
+    <ReduxStoreProvider store={theStore}>
       <SettingsProvider value={settings}>
         <FeaturesProvider value={features}>
           <RoutesPrefixProvider value={routesPrefix}>
@@ -54,6 +53,6 @@ export const createShlinkWebComponent = (
           </RoutesPrefixProvider>
         </FeaturesProvider>
       </SettingsProvider>
-    </Provider>
+    </ReduxStoreProvider>
   );
 };

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

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

shlink-web-component/src/domains/DomainSelector.tsx

@@ -1,10 +1,10 @@
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
 import { isEmpty, pipe } from 'ramda';
 import { useEffect } from 'react';
 import type { InputProps } from 'reactstrap';
 import { Button, DropdownItem, Input, InputGroup, UncontrolledTooltip } from 'reactstrap';
-import { DropdownBtn, useToggle } from '../../../shlink-frontend-kit/src';
 import type { DomainsList } from './reducers/domainsList';
 import './DomainSelector.scss';
 

shlink-web-component/src/domains/ManageDomains.tsx

@@ -1,6 +1,6 @@
+import { Message, Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useEffect } from 'react';
-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/src/domains/helpers/DomainDropdown.tsx

@@ -1,9 +1,9 @@
 import { faChartPie as pieChartIcon, faEdit as editIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { DropdownItem } from 'reactstrap';
-import { RowDropdownBtn, useToggle } from '../../../../shlink-frontend-kit/src';
 import { useFeature } from '../../utils/features';
 import { useRoutesPrefix } from '../../utils/routesPrefix';
 import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';

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

@@ -4,11 +4,11 @@ import {
   faTimes as invalidIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useElementRef } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { UncontrolledTooltip } from 'reactstrap';
-import { useElementRef } from '../../../../shlink-frontend-kit/src';
 import type { MediaMatcher } from '../../utils/types';
 import type { DomainStatus } from '../data';
 

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

@@ -1,8 +1,8 @@
+import type { InputFormGroupProps } from '@shlinkio/shlink-frontend-kit';
+import { InputFormGroup } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-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/src/overview/helpers/HighlightCard.tsx

@@ -1,9 +1,9 @@
 import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useElementRef } from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { Card, CardText, CardTitle, UncontrolledTooltip } from 'reactstrap';
-import { useElementRef } from '../../../../shlink-frontend-kit/src';
 import './HighlightCard.scss';
 
 export type HighlightCardProps = PropsWithChildren<{

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

@@ -1,14 +1,13 @@
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Message, parseQuery, Result } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 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, Result } from '../../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../common/ShlinkApiError';
 import { useGoBack } from '../utils/helpers/hooks';
-import { parseQuery } from '../utils/helpers/query';
 import { useSetting } from '../utils/settings';
 import type { ShortUrlIdentifier } from './data';
 import { shortUrlDataFromShortUrl, urlDecodeShortCode } from './helpers';

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

@@ -1,6 +1,7 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faAndroid, faApple } from '@fortawesome/free-brands-svg-icons';
 import { faDesktop } from '@fortawesome/free-solid-svg-icons';
+import { Checkbox, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import classNames from 'classnames';
 import { parseISO } from 'date-fns';
 import { isEmpty, pipe, replace, trim } from 'ramda';
@@ -8,7 +9,6 @@ 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, 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/src/short-urls/ShortUrlsFilteringBar.tsx

@@ -1,11 +1,11 @@
 import { faTag, faTags } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { OrderDir } from '@shlinkio/shlink-frontend-kit';
+import { OrderingDropdown, SearchField } from '@shlinkio/shlink-frontend-kit';
 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 '../../../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/src/short-urls/ShortUrlsList.tsx

@@ -1,9 +1,9 @@
+import type { OrderDir } from '@shlinkio/shlink-frontend-kit';
+import { determineOrderDir } from '@shlinkio/shlink-frontend-kit';
 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 { ShlinkShortUrlsListParams, ShlinkShortUrlsOrder } from '../api-contract';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';

shlink-web-component/src/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 { useToggle } from '@shlinkio/shlink-frontend-kit';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
-import { useToggle } from '../../../shlink-frontend-kit/src';
 import './UseExistingIfFoundInfoIcon.scss';
 
 const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => (

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

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

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

@@ -1,10 +1,10 @@
 import { faClone as copyIcon } from '@fortawesome/free-regular-svg-icons';
 import { faTimes as closeIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Result } from '@shlinkio/shlink-frontend-kit';
 import { useEffect } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
-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/src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -1,7 +1,7 @@
+import { Result } from '@shlinkio/shlink-frontend-kit';
 import { pipe } from 'ramda';
 import { useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-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/src/short-urls/helpers/ExportShortUrlsBtn.tsx

@@ -1,6 +1,6 @@
+import { useToggle } from '@shlinkio/shlink-frontend-kit';
 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 type { ReportExporter } from '../../utils/services/ReportExporter';

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

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

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

@@ -1,10 +1,10 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { faCalendarXmark, faCheck, faLinkSlash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useElementRef } from '@shlinkio/shlink-frontend-kit';
 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 type { ShortUrl } from '../data';
 

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

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

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

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

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

@@ -5,9 +5,9 @@ import {
   faQrcode as qrIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { DropdownItem } from 'reactstrap';
-import { RowDropdownBtn, useToggle } from '../../../../shlink-frontend-kit/src';
 import type { ShortUrl, ShortUrlModalProps } from '../data';
 import { ShortUrlDetailLink } from './ShortUrlDetailLink';
 

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

@@ -1,11 +1,10 @@
+import { orderToString, parseQuery, stringifyQuery, stringToOrder } from '@shlinkio/shlink-frontend-kit';
 import { isEmpty, pipe } from 'ramda';
 import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-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';
-import { parseQuery, stringifyQuery } from '../../utils/helpers/query';
 import { useRoutesPrefix } from '../../utils/routesPrefix';
 import type { ShortUrlsOrder, ShortUrlsOrderableFields } from '../data';
 

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

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

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

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

shlink-web-component/src/tags/TagsList.tsx

@@ -1,8 +1,8 @@
+import { determineOrderDir, Message, OrderingDropdown, Result, SearchField, sortList } from '@shlinkio/shlink-frontend-kit';
 import { pipe } from 'ramda';
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 import { Row } from 'reactstrap';
-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/src/tags/TagsTable.tsx

@@ -1,11 +1,10 @@
+import { parseQuery, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import { splitEvery } from 'ramda';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-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';
 import { TableOrderIcon } from '../utils/table/TableOrderIcon';
 import type { TagsListChildrenProps, TagsOrder, TagsOrderableFields } from './data/TagsListChildrenProps';
 import type { TagsTableRowProps } from './TagsTableRow';

shlink-web-component/src/tags/TagsTableRow.tsx

@@ -1,9 +1,9 @@
 import { faPencilAlt as editIcon, faTrash as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { DropdownItem } from 'reactstrap';
-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/src/tags/data/TagsListChildrenProps.ts

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

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

@@ -1,5 +1,5 @@
+import { Result } from '@shlinkio/shlink-frontend-kit';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-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/src/tags/helpers/EditTagModal.tsx

@@ -1,10 +1,10 @@
 import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Result, useToggle } from '@shlinkio/shlink-frontend-kit';
 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, useToggle } from '../../../../shlink-frontend-kit/src';
 import { ShlinkApiError } from '../../common/ShlinkApiError';
 import { handleEventPreventingDefault } from '../../utils/helpers';
 import type { ColorGenerator } from '../../utils/services/ColorGenerator';

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

@@ -1,10 +1,10 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useElementRef } from '@shlinkio/shlink-frontend-kit';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import type { InputProps } from 'reactstrap';
 import { Input } from 'reactstrap';
-import { useElementRef } from '../../../../shlink-frontend-kit/src';
 import './IconInput.scss';
 
 type IconInputProps = InputProps & {

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

@@ -1,9 +1,9 @@
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Placement } from '@popperjs/core';
+import { useElementRef } from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import { useElementRef } from '../../../../shlink-frontend-kit/src';
 
 export type InfoTooltipProps = PropsWithChildren<{
   className?: string;

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

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

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

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

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

@@ -1,8 +1,8 @@
+import { parseQuery, stringifyQuery } from '@shlinkio/shlink-frontend-kit';
 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 { parseQuery, stringifyQuery } from './query';
 
 const DEFAULT_DELAY = 2000;
 

shlink-web-component/src/utils/helpers/qrCodes.ts

@@ -1,5 +1,5 @@
+import { stringifyQuery } from '@shlinkio/shlink-frontend-kit';
 import { isEmpty } from 'ramda';
-import { stringifyQuery } from './query';
 
 export type QrCodeFormat = 'svg' | 'png';
 

shlink-web-component/src/utils/helpers/query.ts

@@ -1,5 +0,0 @@
-import qs from 'qs';
-
-export const parseQuery = <T>(search: string) => qs.parse(search, { ignoreQueryPrefix: true }) as unknown as T;
-
-export const stringifyQuery = (query: any): string => qs.stringify(query, { arrayFormat: 'brackets' });

shlink-web-component/src/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 '../../../../shlink-frontend-kit/src';
+import type { Order } from '@shlinkio/shlink-frontend-kit';
 
 interface TableOrderIconProps<T> {
   currentOrder: Order<T>;

shlink-web-component/src/visits/ShortUrlVisits.tsx

@@ -1,3 +1,4 @@
+import { parseQuery } from '@shlinkio/shlink-frontend-kit';
 import { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
@@ -6,7 +7,6 @@ import type { ShortUrlIdentifier } from '../short-urls/data';
 import { urlDecodeShortCode } from '../short-urls/helpers';
 import type { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
 import { useGoBack } from '../utils/helpers/hooks';
-import { parseQuery } from '../utils/helpers/query';
 import type { ReportExporter } from '../utils/services/ReportExporter';
 import type { LoadShortUrlVisits, ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits';
 import { ShortUrlVisitsHeader } from './ShortUrlVisitsHeader';

shlink-web-component/src/visits/VisitsStats.tsx

@@ -1,13 +1,13 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { faCalendarAlt, faChartPie, faList, faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Message, NavPillItem, NavPills, Result } from '@shlinkio/shlink-frontend-kit';
 import classNames from 'classnames';
 import { isEmpty, pipe, propEq, values } from 'ramda';
 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, 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/src/visits/VisitsTable.tsx

@@ -1,11 +1,11 @@
 import { faCheck as checkIcon, faRobot as botIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Order } from '@shlinkio/shlink-frontend-kit';
+import { determineOrderDir, SearchField, sortList } from '@shlinkio/shlink-frontend-kit';
 import classNames from 'classnames';
 import { min, splitEvery } from 'ramda';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-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/src/visits/charts/LineChartCard.tsx

@@ -1,3 +1,4 @@
+import { ToggleSwitch, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
 import {
   add,
@@ -23,7 +24,6 @@ import {
   DropdownToggle,
   UncontrolledDropdown,
 } from 'reactstrap';
-import { ToggleSwitch, useToggle } from '../../../../shlink-frontend-kit/src';
 import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../../../src/utils/theme';
 import { formatInternational } from '../../utils/dates/helpers/date';
 import { rangeOf } from '../../utils/helpers';

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

@@ -1,8 +1,8 @@
+import type { Order } from '@shlinkio/shlink-frontend-kit';
+import { OrderingDropdown } from '@shlinkio/shlink-frontend-kit';
 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 '../../../../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/src/visits/helpers/OpenMapModalBtn.tsx

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

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

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

shlink-web-component/src/visits/helpers/hooks.ts

@@ -1,4 +1,5 @@
 import type { DeepPartial } from '@reduxjs/toolkit';
+import { parseQuery, stringifyQuery } from '@shlinkio/shlink-frontend-kit';
 import { isEmpty, isNil, mergeDeepRight, pipe } from 'ramda';
 import { useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -7,7 +8,6 @@ import type { DateRange } from '../../utils/dates/helpers/dateIntervals';
 import { datesToDateRange } from '../../utils/dates/helpers/dateIntervals';
 import type { BooleanString } from '../../utils/helpers';
 import { parseBooleanToString } from '../../utils/helpers';
-import { parseQuery, stringifyQuery } from '../../utils/helpers/query';
 import type { OrphanVisitType, VisitsFilter } from '../types';
 
 interface VisitsQuery {

shlink-web-component/test/Main.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import type { MainProps } from '../src/Main';
+import { Main as createMain } from '../src/Main';
+import { FeaturesProvider } from '../src/utils/features';
+
+type SetUpOptions = {
+  currentPath: string
+  createNotFound?: MainProps['createNotFound'];
+  domainVisitsSupported?: boolean;
+};
+
+describe('<Main />', () => {
+  const Main = createMain(
+    () => <>TagsList</>,
+    () => <>ShortUrlsList</>,
+    () => <>CreateShortUrl</>,
+    () => <>ShortUrlVisits</>,
+    () => <>TagVisits</>,
+    () => <>DomainVisits</>,
+    () => <>OrphanVisits</>,
+    () => <>NonOrphanVisits</>,
+    () => <>OverviewRoute</>,
+    () => <>EditShortUrl</>,
+    () => <>ManageDomains</>,
+  );
+  const setUp = ({ createNotFound, currentPath, domainVisitsSupported = true }: SetUpOptions) => {
+    const history = createMemoryHistory();
+    history.push(currentPath);
+
+    return render(
+      <Router location={history.location} navigator={history}>
+        <FeaturesProvider value={fromPartial({ domainVisits: domainVisitsSupported })}>
+          <Main createNotFound={createNotFound} />
+        </FeaturesProvider>
+      </Router>,
+    );
+  };
+
+  it.each([
+    ['/overview', 'OverviewRoute'],
+    ['/list-short-urls/1', 'ShortUrlsList'],
+    ['/create-short-url', 'CreateShortUrl'],
+    ['/short-code/abc123/visits/foo', 'ShortUrlVisits'],
+    ['/short-code/abc123/edit', 'EditShortUrl'],
+    ['/tag/foo/visits/foo', 'TagVisits'],
+    ['/orphan-visits/foo', 'OrphanVisits'],
+    ['/manage-tags', 'TagsList'],
+    ['/domain/domain.com/visits/foo', 'DomainVisits'],
+    ['/non-orphan-visits/foo', 'NonOrphanVisits'],
+    ['/manage-domains', 'ManageDomains'],
+  ])(
+    'renders expected component based on location and server version',
+    (currentPath, expectedContent) => {
+      setUp({ currentPath });
+      expect(screen.getByText(expectedContent)).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    ['/domain/domain.com/visits/foo', false],
+    ['/foo/bar/baz', true],
+  ])('renders not-found when trying to navigate to invalid route', (currentPath, domainVisitsSupported) => {
+    const createNotFound = () => <>Oops! Route not found.</>;
+
+    setUp({ currentPath, domainVisitsSupported, createNotFound });
+
+    expect(screen.getByText('Oops! Route not found.')).toBeInTheDocument();
+  });
+});

shlink-web-component/test/__helpers__/TestModalWrapper.tsx

@@ -1,5 +1,5 @@
+import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC, ReactElement } from 'react';
-import { useToggle } from '../../../shlink-frontend-kit/src';
 
 interface RenderModalArgs {
   isOpen: boolean;

shlink-web-component/test/utils/dates/DateIntervalDropdownItems.test.tsx

@@ -1,5 +1,5 @@
+import { DropdownBtn } from '@shlinkio/shlink-frontend-kit';
 import { screen, waitFor } from '@testing-library/react';
-import { DropdownBtn } from '../../../../shlink-frontend-kit/src';
 import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
 import type { DateInterval } from '../../../src/utils/dates/helpers/dateIntervals';
 import { DATE_INTERVALS, rangeOrIntervalToString } from '../../../src/utils/dates/helpers/dateIntervals';

shlink-web-component/test/utils/helpers/query.test.ts

@@ -1,25 +0,0 @@
-import { parseQuery, stringifyQuery } from '../../../src/utils/helpers/query';
-
-describe('query', () => {
-  describe('parseQuery', () => {
-    it.each([
-      ['', {}],
-      ['foo=bar', { foo: 'bar' }],
-      ['?foo=bar', { foo: 'bar' }],
-      ['?foo=bar&baz=123', { foo: 'bar', baz: '123' }],
-    ])('parses query string as expected', (queryString, expectedResult) => {
-      expect(parseQuery(queryString)).toEqual(expectedResult);
-    });
-  });
-
-  describe('stringifyQuery', () => {
-    it.each([
-      [{}, ''],
-      [{ foo: 'bar' }, 'foo=bar'],
-      [{ foo: 'bar', baz: '123' }, 'foo=bar&baz=123'],
-      [{ bar: 'foo', list: ['one', 'two'] }, encodeURI('bar=foo&list[]=one&list[]=two')],
-    ])('stringifies query as expected', (queryObj, expectedResult) => {
-      expect(stringifyQuery(queryObj)).toEqual(expectedResult);
-    });
-  });
-});

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

@@ -1,5 +1,5 @@
+import type { OrderDir } from '@shlinkio/shlink-frontend-kit';
 import { render } from '@testing-library/react';
-import type { OrderDir } from '../../../../shlink-frontend-kit/src';
 import { TableOrderIcon } from '../../../src/utils/table/TableOrderIcon';
 
 describe('<TableOrderIcon />', () => {