First shlink-frontend-kit iteration

This commit is contained in:
Alejandro Celaya 2023-07-31 21:36:44 +02:00
parent 5ec5396da6
commit 99ce8c9f74
102 changed files with 152 additions and 168 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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);

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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 { ShortUrl, ShortUrlMeta } from '../short-urls/data';
import type { Visit } from '../visits/types'; import type { Visit } from '../visits/types';

View file

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

View file

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

View file

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

View file

@ -8,7 +8,7 @@ import type { FC } from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
import { UncontrolledTooltip } from 'reactstrap'; 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 { MediaMatcher } from '../../utils/types';
import type { DomainStatus } from '../data'; import type { DomainStatus } from '../data';

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -2,9 +2,9 @@ import { pipe } from 'ramda';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { Card } from 'reactstrap'; 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 { 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 type { ShlinkShortUrlsListParams, ShlinkShortUrlsOrder } from '../api-contract';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
import { Topics } from '../mercure/helpers/Topics'; import { Topics } from '../mercure/helpers/Topics';

View file

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

View file

@ -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 { ShlinkVisitsSummary } from '../../api-contract';
import type { Nullable, OptionalString } from '../../utils/helpers'; import type { Nullable, OptionalString } from '../../utils/helpers';

View file

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

View file

@ -1,7 +1,7 @@
import { pipe } from 'ramda'; import { pipe } from 'ramda';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; 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 { isInvalidDeletionError } from '../../api-contract/utils';
import { ShlinkApiError } from '../../common/ShlinkApiError'; import { ShlinkApiError } from '../../common/ShlinkApiError';
import { handleEventPreventingDefault } from '../../utils/helpers'; import { handleEventPreventingDefault } from '../../utils/helpers';

View file

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

View file

@ -1,5 +1,5 @@
import type { ChangeEvent, FC, PropsWithChildren } from 'react'; 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'; import { InfoTooltip } from '../../utils/components/InfoTooltip';
type ShortUrlFormCheckboxGroupProps = PropsWithChildren<{ type ShortUrlFormCheckboxGroupProps = PropsWithChildren<{

View file

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

View file

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

View file

@ -1,5 +1,5 @@
import { DropdownItem } 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 { hasValue } from '../../utils/helpers';
import type { ShortUrlsFilter } from '../data'; import type { ShortUrlsFilter } from '../data';

View file

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

View file

@ -1,7 +1,7 @@
import { isEmpty, pipe } from 'ramda'; import { isEmpty, pipe } from 'ramda';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import { useLocation, useNavigate } from 'react-router-dom'; 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 { TagsFilteringMode } from '../../api-contract';
import type { BooleanString } from '../../utils/helpers'; import type { BooleanString } from '../../utils/helpers';
import { parseOptionalBooleanToString } from '../../utils/helpers'; import { parseOptionalBooleanToString } from '../../utils/helpers';

View file

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

View file

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

View file

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

View file

@ -2,7 +2,7 @@ import { splitEvery } from 'ramda';
import type { FC } from 'react'; import type { FC } from 'react';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom'; 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 { SimplePaginator } from '../utils/components/SimplePaginator';
import { useQueryState } from '../utils/helpers/hooks'; import { useQueryState } from '../utils/helpers/hooks';
import { parseQuery } from '../utils/helpers/query'; import { parseQuery } from '../utils/helpers/query';

View file

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

View file

@ -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'; import type { SimplifiedTag } from './index';
export const TAGS_ORDERABLE_FIELDS = { export const TAGS_ORDERABLE_FIELDS = {

View file

@ -1,5 +1,5 @@
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; 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 { ShlinkApiError } from '../../common/ShlinkApiError';
import type { TagModalProps } from '../data'; import type { TagModalProps } from '../data';
import type { TagDeletion } from '../reducers/tagDelete'; import type { TagDeletion } from '../reducers/tagDelete';

View file

@ -4,10 +4,9 @@ import { pipe } from 'ramda';
import { useState } from 'react'; import { useState } from 'react';
import { HexColorPicker } from 'react-colorful'; import { HexColorPicker } from 'react-colorful';
import { Button, Input, InputGroup, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap'; 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 { ShlinkApiError } from '../../common/ShlinkApiError';
import { handleEventPreventingDefault } from '../../utils/helpers'; import { handleEventPreventingDefault } from '../../utils/helpers';
import { useToggle } from '../../utils/helpers/hooks';
import type { ColorGenerator } from '../../utils/services/ColorGenerator'; import type { ColorGenerator } from '../../utils/services/ColorGenerator';
import type { TagModalProps } from '../data'; import type { TagModalProps } from '../data';
import type { EditTag, TagEdition } from '../reducers/tagEdit'; import type { EditTag, TagEdition } from '../reducers/tagEdit';

View file

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

View file

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

View file

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

View file

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

View file

@ -2,7 +2,6 @@ import type { DependencyList, EffectCallback } from 'react';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useSwipeable as useReactSwipeable } from 'react-swipeable'; import { useSwipeable as useReactSwipeable } from 'react-swipeable';
import { v4 as uuid } from 'uuid';
import { parseQuery, stringifyQuery } from './query'; import { parseQuery, stringifyQuery } from './query';
const DEFAULT_DELAY = 2000; const DEFAULT_DELAY = 2000;
@ -75,17 +74,3 @@ export const useGoBack = () => {
const navigate = useNavigate(); const navigate = useNavigate();
return () => navigate(-1); 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);

View file

@ -1,6 +1,6 @@
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons'; import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 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> { interface TableOrderIconProps<T> {
currentOrder: Order<T>; currentOrder: Order<T>;

View file

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

View file

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

View file

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

View file

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

View file

@ -2,7 +2,7 @@ import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useState } from 'react'; import { useState } from 'react';
import { Button, Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap'; 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 type { CityStats } from '../types';
import { MapModal } from './MapModal'; import { MapModal } from './MapModal';
import './OpenMapModalBtn.scss'; import './OpenMapModalBtn.scss';

View file

@ -1,6 +1,6 @@
import type { DropdownItemProps } from 'reactstrap'; import type { DropdownItemProps } from 'reactstrap';
import { DropdownItem } 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 { hasValue } from '../../utils/helpers';
import type { OrphanVisitType, VisitsFilter } from '../types'; import type { OrphanVisitType, VisitsFilter } from '../types';

View file

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

View file

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

View file

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

View file

@ -5,7 +5,7 @@ import type { FC } from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'; 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 { ShlinkLogo } from './img/ShlinkLogo';
import './MainHeader.scss'; import './MainHeader.scss';

View file

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

View file

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

View file

@ -1,7 +1,7 @@
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons'; import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { FC, PropsWithChildren } from 'react'; 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 { ServerWithId } from './data';
import type { DeleteServerModalProps } from './DeleteServerModal'; import type { DeleteServerModalProps } from './DeleteServerModal';

View file

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

View file

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

View file

@ -4,7 +4,7 @@ import { complement, pipe } from 'ramda';
import type { ChangeEvent, FC, PropsWithChildren } from 'react'; import type { ChangeEvent, FC, PropsWithChildren } from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Button, UncontrolledTooltip } from 'reactstrap'; 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 { ServerData, ServersMap } from '../data';
import type { ServersImporter } from '../services/ServersImporter'; import type { ServersImporter } from '../services/ServersImporter';
import { DuplicatedServersModal } from './DuplicatedServersModal'; import { DuplicatedServersModal } from './DuplicatedServersModal';

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,11 +1,12 @@
import type { FC, ReactNode } from 'react'; import type { FC, ReactNode } from 'react';
import { DropdownItem, FormGroup } from 'reactstrap'; 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 { FormText } from '../utils/forms/FormText';
import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup'; import type { Defined } from '../utils/types';
import { SimpleCard } from '../utils/SimpleCard';
import { ToggleSwitch } from '../utils/ToggleSwitch'; type ShortUrlsSettings = Defined<Settings['shortUrlCreation']>;
import type { Settings, ShortUrlCreationSettings as ShortUrlsSettings, TagFilteringMode } from './reducers/settings'; type TagFilteringMode = Defined<ShortUrlsSettings['tagFilteringMode']>;
interface ShortUrlCreationProps { interface ShortUrlCreationProps {
settings: Settings; settings: Settings;

View file

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

View file

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

View file

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

View file

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

View file

@ -2,8 +2,9 @@ import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import { mergeDeepRight } from 'ramda'; import { mergeDeepRight } from 'ramda';
import type { Settings } from '../../../shlink-web-component'; 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 = { export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
field: 'dateCreated', field: 'dateCreated',

View file

@ -1,10 +1,11 @@
import type { FC } from 'react'; import type { FC } from 'react';
import { DropdownItem } from 'reactstrap'; import { DropdownItem } from 'reactstrap';
import { DropdownBtn } from '../../../shlink-frontend-kit/src';
import type { Settings } from '../../../shlink-web-component'; import type { Settings } from '../../../shlink-web-component';
import { rangeOrIntervalToString } from '../../../shlink-web-component/utils/dates/helpers/dateIntervals'; 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 { export interface DateIntervalSelectorProps {
active?: DateInterval; active?: DateInterval;

View file

@ -1,6 +1,5 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { v4 as uuid } from 'uuid';
import { parseQuery } from '../../../shlink-web-component/utils/helpers/query'; import { parseQuery } from '../../../shlink-web-component/utils/helpers/query';
const DEFAULT_DELAY = 2000; const DEFAULT_DELAY = 2000;
@ -35,17 +34,3 @@ export const useParsedQuery = <T>(): T => {
const { search } = useLocation(); const { search } = useLocation();
return parseQuery<T>(search); 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);

1
src/utils/types.ts Normal file
View file

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

View file

@ -1,5 +1,5 @@
import { render, screen } from '@testing-library/react'; 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'; import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<Checkbox />', () => { describe('<Checkbox />', () => {

View file

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

View file

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

View file

@ -1,7 +1,7 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom'; 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 />', () => { describe('<NavPills />', () => {
let originalError: typeof console.error; let originalError: typeof console.error;

View file

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

View file

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

View file

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

View file

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

View file

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

Some files were not shown because too many files have changed in this diff Show more