Move more components to shlink-web-component when applicable

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;
+};