Move more components to shlink-web-component when applicable

shlink-web-component/utils/components/CopyToClipboardIcon.scss

@@ -0,0 +1,4 @@
+.copy-to-clipboard-icon {
+  cursor: pointer;
+  font-size: 1.2rem;
+}

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

@@ -0,0 +1,16 @@
+import { faClone as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import './CopyToClipboardIcon.scss';
+
+interface CopyToClipboardIconProps {
+  text: string;
+  onCopy?: (text: string, result: boolean) => void;
+}
+
+export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
+  <CopyToClipboard text={text} onCopy={onCopy}>
+    <FontAwesomeIcon icon={copyIcon} className="ms-2 copy-to-clipboard-icon" />
+  </CopyToClipboard>
+);

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

@@ -0,0 +1,17 @@
+import { faFileCsv } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import type { ButtonProps } from 'reactstrap';
+import { Button } from 'reactstrap';
+import { prettify } from '../helpers/numbers';
+
+type ExportBtnProps = Omit<ButtonProps, 'outline' | 'color' | 'disabled'> & {
+  amount?: number;
+  loading?: boolean;
+};
+
+export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
+  <Button {...rest} outline color="primary" disabled={loading}>
+    <FontAwesomeIcon icon={faFileCsv} /> {loading ? 'Exporting...' : <>Export ({prettify(amount)})</>}
+  </Button>
+);

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

@@ -0,0 +1,24 @@
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Placement } from '@popperjs/core';
+import type { FC, PropsWithChildren } from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../helpers/hooks';
+
+export type InfoTooltipProps = PropsWithChildren<{
+  className?: string;
+  placement: Placement;
+}>;
+
+export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {
+  const ref = useElementRef<HTMLSpanElement>();
+
+  return (
+    <>
+      <span className={className} ref={ref}>
+        <FontAwesomeIcon icon={infoIcon} />
+      </span>
+      <UncontrolledTooltip target={ref} placement={placement}>{children}</UncontrolledTooltip>
+    </>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+
+interface PaginationDropdownProps {
+  ranges: number[];
+  value: number;
+  setValue: (newValue: number) => void;
+  toggleClassName?: string;
+}
+
+export const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: PaginationDropdownProps) => (
+  <UncontrolledDropdown>
+    <DropdownToggle caret color="link" className={toggleClassName}>Paginate</DropdownToggle>
+    <DropdownMenu end>
+      {ranges.map((itemsPerPage) => (
+        <DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
+          <b>{itemsPerPage}</b> items per page
+        </DropdownItem>
+      ))}
+      <DropdownItem divider />
+      <DropdownItem disabled={value === Infinity} onClick={() => setValue(Infinity)}>
+        <i>Clear pagination</i>
+      </DropdownItem>
+    </DropdownMenu>
+  </UncontrolledDropdown>
+);

shlink-web-component/utils/components/SimplePaginator.scss

@@ -0,0 +1,3 @@
+.simple-paginator {
+  user-select: none;
+}

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

@@ -0,0 +1,50 @@
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import type { NumberOrEllipsis } from '../helpers/pagination';
+import {
+  keyForPage,
+  pageIsEllipsis,
+  prettifyPageNumber,
+  progressivePagination,
+} from '../helpers/pagination';
+import './SimplePaginator.scss';
+
+interface SimplePaginatorProps {
+  pagesCount: number;
+  currentPage: number;
+  setCurrentPage: (currentPage: number) => void;
+  centered?: boolean;
+}
+
+export const SimplePaginator: FC<SimplePaginatorProps> = (
+  { pagesCount, currentPage, setCurrentPage, centered = true },
+) => {
+  if (pagesCount < 2) {
+    return null;
+  }
+
+  const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
+
+  return (
+    <Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
+      <PaginationItem disabled={currentPage <= 1}>
+        <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
+      </PaginationItem>
+      {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
+        <PaginationItem
+          key={keyForPage(pageNumber, index)}
+          disabled={pageIsEllipsis(pageNumber)}
+          active={currentPage === pageNumber}
+        >
+          <PaginationLink role="link" tag="span" onClick={onClick(pageNumber)}>
+            {prettifyPageNumber(pageNumber)}
+          </PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
+      </PaginationItem>
+    </Pagination>
+  );
+};

shlink-web-component/utils/features.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
-import type { SemVer } from '../../src/utils/helpers/version';
-import { versionMatch } from '../../src/utils/helpers/version';
+import type { SemVer } from './helpers/version';
+import { versionMatch } from './helpers/version';
 
 const supportedFeatures = {
   domainVisits: '3.1.0',

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

@@ -0,0 +1,16 @@
+import type { ActiveElement, ChartEvent, ChartType, TooltipItem } from 'chart.js';
+import { prettify } from './numbers';
+
+export const pointerOnHover = ({ native }: ChartEvent, [firstElement]: ActiveElement[]) => {
+  if (!native?.target) {
+    return;
+  }
+
+  const canvas = native.target as HTMLCanvasElement;
+
+  canvas.style.cursor = firstElement ? 'pointer' : 'default';
+};
+
+export const renderChartLabel = ({ dataset, raw }: TooltipItem<ChartType>) => `${dataset.label}: ${prettify(`${raw}`)}`;
+
+export const renderPieChartLabel = ({ label, raw }: TooltipItem<ChartType>) => `${label}: ${prettify(`${raw}`)}`;

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

@@ -0,0 +1,17 @@
+export const saveUrl = ({ document }: Window, url: string, filename: string) => {
+  const link = document.createElement('a');
+
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+export const saveCsv = (window: Window, csv: string, filename: string) => {
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+
+  saveUrl(window, url, filename);
+};

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

@@ -0,0 +1,32 @@
+import { isEmpty, isNil, pipe, range } from 'ramda';
+import type { SyntheticEvent } from 'react';
+
+type Optional<T> = T | null | undefined;
+
+export type OptionalString = Optional<string>;
+
+export const handleEventPreventingDefault = <T>(handler: () => T) => pipe(
+  (e: SyntheticEvent) => e.preventDefault(),
+  handler,
+);
+
+export const rangeOf = <T>(size: number, mappingFn: (value: number) => T, startAt = 1): T[] =>
+  range(startAt, size + 1).map(mappingFn);
+
+export type Empty = null | undefined | '' | never[];
+
+export const hasValue = <T>(value: T | Empty): value is T => !isNil(value) && !isEmpty(value);
+
+export type Nullable<T> = {
+  [P in keyof T]: T[P] | null
+};
+
+export const nonEmptyValueOrNull = <T>(value: T): T | null => (isEmpty(value) ? null : value);
+
+export type BooleanString = 'true' | 'false';
+
+export const parseBooleanToString = (value: boolean): BooleanString => (value ? 'true' : 'false');
+
+export const parseOptionalBooleanToString = (value?: boolean): BooleanString | undefined => (
+  value === undefined ? undefined : parseBooleanToString(value)
+);

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

@@ -0,0 +1,7 @@
+import { Parser } from '@json2csv/plainjs';
+
+const jsonParser = new Parser(); // This accepts options if needed
+
+export const jsonToCsv = <T>(data: T[]): string => jsonParser.parse(data);
+
+export type JsonToCsv = typeof jsonToCsv;

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

@@ -0,0 +1,7 @@
+const TEN_ROUNDING_NUMBER = 10;
+const { ceil } = Math;
+const formatter = new Intl.NumberFormat('en-US');
+
+export const prettify = (number: number | string) => formatter.format(Number(number));
+
+export const roundTen = (number: number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;

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

@@ -0,0 +1,39 @@
+import { max, min, range } from 'ramda';
+import { prettify } from './numbers';
+
+const DELTA = 2;
+
+export const ELLIPSIS = '...';
+
+type Ellipsis = typeof ELLIPSIS;
+
+export type NumberOrEllipsis = number | Ellipsis;
+
+export const progressivePagination = (currentPage: number, pageCount: number): NumberOrEllipsis[] => {
+  const pages: NumberOrEllipsis[] = range(
+    max(DELTA, currentPage - DELTA),
+    min(pageCount - 1, currentPage + DELTA) + 1,
+  );
+
+  if (currentPage - DELTA > DELTA) {
+    pages.unshift(ELLIPSIS);
+  }
+  if (currentPage + DELTA < pageCount - 1) {
+    pages.push(ELLIPSIS);
+  }
+
+  pages.unshift(1);
+  pages.push(pageCount);
+
+  return pages;
+};
+
+export const pageIsEllipsis = (pageNumber: NumberOrEllipsis): pageNumber is Ellipsis => pageNumber === ELLIPSIS;
+
+export const prettifyPageNumber = (pageNumber: NumberOrEllipsis): string => (
+  pageIsEllipsis(pageNumber) ? pageNumber : prettify(pageNumber)
+);
+
+export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => (
+  !pageIsEllipsis(pageNumber) ? `${pageNumber}` : `${pageNumber}_${index}`
+);

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

@@ -0,0 +1,23 @@
+import { isEmpty } from 'ramda';
+import { stringifyQuery } from './query';
+
+export type QrCodeFormat = 'svg' | 'png';
+
+export type QrErrorCorrection = 'L' | 'M' | 'Q' | 'H';
+
+export interface QrCodeOptions {
+  size: number;
+  format: QrCodeFormat;
+  margin: number;
+  errorCorrection: QrErrorCorrection;
+}
+
+export const buildQrCodeUrl = (shortUrl: string, { margin, ...options }: QrCodeOptions): string => {
+  const baseUrl = `${shortUrl}/qr-code`;
+  const query = stringifyQuery({
+    ...options,
+    margin: margin > 0 ? margin : undefined,
+  });
+
+  return `${baseUrl}${isEmpty(query) ? '' : `?${query}`}`;
+};

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

@@ -0,0 +1,21 @@
+import { compare } from 'compare-versions';
+
+type SemVerPatternFragment = `${bigint | '*'}`;
+
+type SemVerPattern = SemVerPatternFragment
+| `${SemVerPatternFragment}.${SemVerPatternFragment}`
+| `${SemVerPatternFragment}.${SemVerPatternFragment}.${SemVerPatternFragment}`;
+
+type Versions = {
+  maxVersion?: SemVerPattern;
+  minVersion?: SemVerPattern;
+};
+
+export type SemVer = `${bigint}.${bigint}.${bigint}` | 'latest';
+
+export const versionMatch = (versionToMatch: SemVer, { maxVersion, minVersion }: Versions): boolean => {
+  const matchesMinVersion = !minVersion || compare(versionToMatch, minVersion, '>=');
+  const matchesMaxVersion = !maxVersion || compare(versionToMatch, maxVersion, '<=');
+
+  return matchesMaxVersion && matchesMinVersion;
+};

shlink-web-component/utils/services/ColorGenerator.ts

@@ -1,6 +1,6 @@
 import { isNil } from 'ramda';
-import type { LocalStorage } from '../../../src/utils/services/LocalStorage';
-import { rangeOf } from '../../../src/utils/utils';
+import { rangeOf } from '../helpers';
+import type { LocalStorage } from './LocalStorage';
 
 const HEX_COLOR_LENGTH = 6;
 const HEX_DIGITS = '0123456789ABCDEF';

shlink-web-component/utils/services/ImageDownloader.ts

@@ -0,0 +1,13 @@
+import { saveUrl } from '../helpers/files';
+import type { Fetch } from '../types';
+
+export class ImageDownloader {
+  public constructor(private readonly fetch: Fetch, private readonly window: Window) {}
+
+  public async saveImage(imgUrl: string, filename: string): Promise<void> {
+    const data = await this.fetch(imgUrl).then((resp) => resp.blob());
+    const url = URL.createObjectURL(data);
+
+    saveUrl(this.window, url, filename);
+  }
+}

shlink-web-component/utils/services/ReportExporter.ts

@@ -1,7 +1,7 @@
-import type { JsonToCsv } from '../../../src/utils/helpers/csvjson';
-import { saveCsv } from '../../../src/utils/helpers/files';
 import type { ExportableShortUrl } from '../../short-urls/data';
 import type { NormalizedVisit } from '../../visits/types';
+import { saveCsv } from '../helpers/files';
+import type { JsonToCsv } from '../helpers/json';
 
 export class ReportExporter {
   public constructor(private readonly window: Window, private readonly jsonToCsv: JsonToCsv) {

shlink-web-component/utils/services/provideServices.ts

@@ -1,13 +1,23 @@
 import type Bottle from 'bottlejs';
 import { useTimeoutToggle } from '../helpers/hooks';
+import { jsonToCsv } from '../helpers/json';
 import { ColorGenerator } from './ColorGenerator';
+import { ImageDownloader } from './ImageDownloader';
 import { LocalStorage } from './LocalStorage';
+import { ReportExporter } from './ReportExporter';
 
 export function provideServices(bottle: Bottle) {
+  bottle.constant('window', window);
+  bottle.constant('fetch', window.fetch.bind(window));
+  bottle.service('ImageDownloader', ImageDownloader, 'fetch', 'window');
+
   bottle.constant('localStorage', window.localStorage);
   bottle.service('Storage', LocalStorage, 'localStorage');
   bottle.service('ColorGenerator', ColorGenerator, 'Storage');
 
+  bottle.constant('jsonToCsv', jsonToCsv);
+  bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');
+
   bottle.constant('setTimeout', window.setTimeout);
   bottle.constant('clearTimeout', window.clearTimeout);
   bottle.serviceFactory('useTimeoutToggle', useTimeoutToggle, 'setTimeout', 'clearTimeout');

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

@@ -0,0 +1,19 @@
+import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Order } from '../../../src/utils/helpers/ordering';
+
+interface TableOrderIconProps<T> {
+  currentOrder: Order<T>;
+  field: T;
+  className?: string;
+}
+
+export function TableOrderIcon<T extends string = string>(
+  { currentOrder, field, className = 'ms-1' }: TableOrderIconProps<T>,
+) {
+  if (!currentOrder.dir || currentOrder.field !== field) {
+    return null;
+  }
+
+  return <FontAwesomeIcon icon={currentOrder.dir === 'ASC' ? caretUpIcon : caretDownIcon} className={className} />;
+}

shlink-web-component/utils/types/index.ts

@@ -0,0 +1,3 @@
+export type MediaMatcher = (query: string) => MediaQueryList;
+
+export type Fetch = typeof window.fetch;