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

src/api/services/ShlinkApiClient.ts

@@ -1,5 +1,4 @@
-import { isEmpty, isNil, reject } from 'ramda';
-import { orderToString } from '../../../shlink-frontend-kit/src';
+import { orderToString, stringifyQuery } from '@shlinkio/shlink-frontend-kit';
 import type {
   ShlinkApiClient as BaseShlinkApiClient,
   ShlinkDomainRedirects,
@@ -16,10 +15,11 @@ import type {
   ShlinkTagsStatsResponse,
   ShlinkVisits,
   ShlinkVisitsOverview,
-  ShlinkVisitsParams } from '../../../shlink-web-component/src/api-contract';
-import { isRegularNotFound, parseApiError } from '../../../shlink-web-component/src/api-contract/utils';
+  ShlinkVisitsParams,
+} from '@shlinkio/shlink-web-component/api-contract';
+import { isRegularNotFound, parseApiError } from '@shlinkio/shlink-web-component/api-contract/utils';
+import { isEmpty, isNil, reject } from 'ramda';
 import type { ShortUrl, ShortUrlData } from '../../../shlink-web-component/src/short-urls/data';
-import { stringifyQuery } from '../../../shlink-web-component/src/utils/helpers/query';
 import type { HttpClient } from '../../common/services/HttpClient';
 import { replaceAuthorityFromUri } from '../../utils/helpers/uri';
 import type { OptionalString } from '../../utils/utils';

src/app/App.tsx

@@ -1,8 +1,8 @@
+import type { Settings } from '@shlinkio/shlink-web-component';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
-import type { Settings } from '../../shlink-web-component/src';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { ServersMap } from '../servers/data';

src/common/AppUpdateBanner.tsx

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

src/common/ErrorHandler.tsx

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

src/common/MainHeader.tsx

@@ -1,11 +1,11 @@
 import { faChevronDown as arrowIcon, faCogs as cogsIcon } 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 } 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 '../../shlink-frontend-kit/src';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './MainHeader.scss';
 

src/common/NotFound.tsx

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

src/common/ShlinkWebComponentContainer.tsx

@@ -1,6 +1,6 @@
+import type { Settings, ShlinkWebComponentType } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import type { Settings, ShlinkWebComponentType } from '../../shlink-web-component/src';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
 import { isReachableServer } from '../servers/data';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';

src/common/services/provideServices.ts

@@ -1,5 +1,5 @@
+import { ShlinkWebComponent } from '@shlinkio/shlink-web-component';
 import type Bottle from 'bottlejs';
-import { ShlinkWebComponent } from '../../../shlink-web-component/src';
 import type { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 import { ErrorHandler } from '../ErrorHandler';

src/container/types.ts

@@ -1,4 +1,4 @@
-import type { Settings } from '../../shlink-web-component/src';
+import type { Settings } from '@shlinkio/shlink-web-component';
 import type { Sidebar } from '../common/reducers/sidebar';
 import type { SelectedServer, ServersMap } from '../servers/data';
 

src/servers/CreateServer.tsx

@@ -1,9 +1,9 @@
+import { Result, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 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 } from '../utils/helpers/hooks';

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 { useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren } from 'react';
-import { useToggle } from '../../shlink-frontend-kit/src';
 import type { ServerWithId } from './data';
 import type { DeleteServerModalProps } from './DeleteServerModal';
 

src/servers/ManageServers.tsx

@@ -1,10 +1,10 @@
 import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 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 type { ServersMap } from './data';

src/servers/ManageServersRowDropdown.tsx

@@ -6,10 +6,10 @@ import {
   faPlug as connectIcon,
 } 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 type { ServerWithId } from './data';
 import type { DeleteServerModalProps } from './DeleteServerModal';
 

src/servers/helpers/ImportServersBtn.tsx

@@ -1,10 +1,10 @@
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useElementRef, useToggle } from '@shlinkio/shlink-frontend-kit';
 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 '../../../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,6 +1,6 @@
+import { Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
-import { Message } from '../../../shlink-frontend-kit/src';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { SelectedServer, ServersMap } from '../data';
 import { isServerWithId } from '../data';

src/servers/helpers/ServerForm.tsx

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

src/servers/helpers/withSelectedServer.tsx

@@ -1,7 +1,7 @@
+import { Message } from '@shlinkio/shlink-frontend-kit';
 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 type { SelectedServer } from '../data';
 import { isNotFoundServer } from '../data';

src/servers/reducers/selectedServer.ts

@@ -1,6 +1,6 @@
 import { createAction, createSlice } from '@reduxjs/toolkit';
+import type { ShlinkHealth } from '@shlinkio/shlink-web-component/api-contract';
 import { memoizeWith, pipe } from 'ramda';
-import type { ShlinkHealth } from '../../../shlink-web-component/src/api-contract';
 import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { createAsyncThunk } from '../../utils/helpers/redux';
 import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';

src/settings/RealTimeUpdatesSettings.tsx

@@ -1,7 +1,7 @@
+import { LabeledFormGroup, SimpleCard, ToggleSwitch, useDomId } from '@shlinkio/shlink-frontend-kit';
+import type { Settings } from '@shlinkio/shlink-web-component';
 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/src';
 import { FormText } from '../utils/forms/FormText';
 
 type RealTimeUpdatesProps = {

src/settings/Settings.tsx

@@ -1,6 +1,6 @@
+import { NavPillItem, NavPills } from '@shlinkio/shlink-frontend-kit';
 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';
 
 const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (

src/settings/ShortUrlCreationSettings.tsx

@@ -1,7 +1,7 @@
+import { DropdownBtn, LabeledFormGroup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
+import type { Settings, ShortUrlCreationSettings as ShortUrlsSettings } from '@shlinkio/shlink-web-component';
 import type { FC, ReactNode } from 'react';
 import { DropdownItem, FormGroup } from 'reactstrap';
-import { DropdownBtn, LabeledFormGroup, SimpleCard, ToggleSwitch } from '../../shlink-frontend-kit/src';
-import type { Settings, ShortUrlCreationSettings as ShortUrlsSettings } from '../../shlink-web-component/src';
 import { FormText } from '../utils/forms/FormText';
 import type { Defined } from '../utils/types';
 

src/settings/ShortUrlsListSettings.tsx

@@ -1,6 +1,6 @@
+import { LabeledFormGroup, OrderingDropdown, SimpleCard } from '@shlinkio/shlink-frontend-kit';
+import type { Settings, ShortUrlsListSettings as ShortUrlsSettings } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
-import { LabeledFormGroup, OrderingDropdown, SimpleCard } from '../../shlink-frontend-kit/src';
-import type { Settings, ShortUrlsListSettings as ShortUrlsSettings } from '../../shlink-web-component/src';
 import { SHORT_URLS_ORDERABLE_FIELDS } from '../../shlink-web-component/src/short-urls/data';
 import { DEFAULT_SHORT_URLS_ORDERING } from './reducers/settings';
 

src/settings/TagsSettings.tsx

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

src/settings/UserInterfaceSettings.tsx

@@ -1,8 +1,8 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
+import type { Settings, UiSettings } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
-import { SimpleCard, ToggleSwitch } from '../../shlink-frontend-kit/src';
-import type { Settings, UiSettings } from '../../shlink-web-component/src';
 import type { Theme } from '../utils/theme';
 import { changeThemeInMarkup } from '../utils/theme';
 import './UserInterfaceSettings.scss';

src/settings/VisitsSettings.tsx

@@ -1,8 +1,8 @@
+import { LabeledFormGroup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
+import type { Settings, VisitsSettings as VisitsSettingsConfig } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
 import { FormGroup } from 'reactstrap';
-import { LabeledFormGroup, SimpleCard, ToggleSwitch } from '../../shlink-frontend-kit/src';
-import type { Settings, VisitsSettings as VisitsSettingsConfig } from '../../shlink-web-component/src';
-import type { DateInterval } from '../../shlink-web-component/src/utils/dates/helpers/dateIntervals';
+import type { DateInterval } from '../utils/dates/DateIntervalSelector';
 import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
 import { FormText } from '../utils/forms/FormText';
 

src/settings/reducers/settings.ts

@@ -1,12 +1,14 @@
 import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import { mergeDeepRight } from 'ramda';
 import type {
   Settings,
   ShortUrlCreationSettings,
   ShortUrlsListSettings,
   TagsSettings,
-  UiSettings, VisitsSettings } from '../../../shlink-web-component/src';
+  UiSettings,
+  VisitsSettings,
+} from '@shlinkio/shlink-web-component';
+import { mergeDeepRight } from 'ramda';
 import type { Defined } from '../../utils/types';
 
 type ShortUrlsOrder = Defined<ShortUrlsListSettings['defaultOrdering']>;

src/utils/dates/DateIntervalSelector.tsx

@@ -1,8 +1,7 @@
+import { DropdownBtn } from '@shlinkio/shlink-frontend-kit';
+import type { VisitsSettings } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
 import { DropdownItem } from 'reactstrap';
-import { DropdownBtn } from '../../../shlink-frontend-kit/src';
-import type { VisitsSettings } from '../../../shlink-web-component/src';
-import { rangeOrIntervalToString } from '../../../shlink-web-component/src/utils/dates/helpers/dateIntervals';
 
 export type DateInterval = VisitsSettings['defaultInterval'];
 
@@ -22,8 +21,16 @@ export const INTERVAL_TO_STRING_MAP: Record<Exclude<DateInterval, 'all'>, string
   last365Days: 'Last 365 days',
 };
 
+const intervalToString = (interval: DateInterval | undefined, fallback: string): string => {
+  if (!interval || interval === 'all') {
+    return fallback;
+  }
+
+  return INTERVAL_TO_STRING_MAP[interval];
+};
+
 export const DateIntervalSelector: FC<DateIntervalSelectorProps> = ({ onChange, active, allText }) => (
-  <DropdownBtn text={rangeOrIntervalToString(active) ?? allText}>
+  <DropdownBtn text={intervalToString(active, allText)}>
     <DropdownItem active={active === 'all'} onClick={() => onChange('all')}>
       {allText}
     </DropdownItem>

src/utils/helpers/hooks.ts

@@ -1,6 +1,6 @@
+import { parseQuery } from '@shlinkio/shlink-frontend-kit';
 import { useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { parseQuery } from '../../../shlink-web-component/src/utils/helpers/query';
 
 const DEFAULT_DELAY = 2000;