@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/utils/localization/formatDateISOStringToRelativeDate.ts

@@ -0,0 +1,39 @@
+import {
+  differenceInDays,
+  formatDistance,
+  formatDistanceStrict,
+  isToday,
+  startOfDay,
+} from 'date-fns';
+
+export const formatDateISOStringToRelativeDate = (
+  isoDate: string,
+  isDayMaximumPrecision = false,
+) => {
+  const now = new Date();
+  const targetDate = new Date(isoDate);
+
+  if (isDayMaximumPrecision && isToday(targetDate)) return 'Today';
+
+  const isWithin24h = Math.abs(differenceInDays(targetDate, now)) < 1;
+
+  if (isDayMaximumPrecision || !isWithin24h)
+    return formatDistance(startOfDay(targetDate), startOfDay(now), {
+      addSuffix: true,
+    });
+
+  return formatDistance(targetDate, now, { addSuffix: true });
+};
+
+export const formatDateISOStringToRelativeDateShort = (isoDate: string) => {
+  const now = new Date();
+  const targetDate = new Date(isoDate);
+
+  return formatDistanceStrict(targetDate, now, { addSuffix: false })
+    .replace(/\s*years?/g, 'y')
+    .replace(/\s*months?/g, 'mo')
+    .replace(/\s*days?/g, 'd')
+    .replace(/\s*hours?/g, 'h')
+    .replace(/\s*minutes?/g, 'm')
+    .replace(/\s*seconds?/g, 's');
+};

package/src/utils/localization/formatTimeZoneLabel.ts

@@ -0,0 +1,29 @@
+import { formatInTimeZone } from 'date-fns-tz';
+import { enUS } from 'date-fns/locale';
+
+/**
+ * Formats a IANA time zone to a select option label.
+ * @param ianaTimeZone IANA time zone
+ * @returns Formatted label
+ * @example 'Europe/Paris' => '(GMT+01:00) Central European Time - Paris'
+ */
+export const formatTimeZoneLabel = (ianaTimeZone: string) => {
+  const timeZoneWithGmtOffset = formatInTimeZone(
+    Date.now(),
+    ianaTimeZone,
+    `(OOOO) zzzz`,
+    { locale: enUS },
+  );
+  const ianaTimeZoneParts = ianaTimeZone.split('/');
+  const location =
+    ianaTimeZoneParts.length > 1
+      ? ianaTimeZoneParts.slice(-1)[0].replace(/_/g, ' ')
+      : undefined;
+
+  const timeZoneLabel =
+    !location || timeZoneWithGmtOffset.includes(location)
+      ? timeZoneWithGmtOffset
+      : [timeZoneWithGmtOffset, location].join(' - ');
+
+  return timeZoneLabel;
+};

package/src/utils/localization/index.ts

@@ -0,0 +1,3 @@
+export * from './detectTimeZone';
+export * from './formatTimeZoneLabel';
+export * from './formatDateISOStringToRelativeDate';

package/src/utils/logDebug.ts

@@ -0,0 +1,4 @@
+/* eslint-disable no-console */
+export const logDebug = (message: any, ...optionalParams: any[]) => {
+  console.debug(message, optionalParams);
+};

package/src/utils/regex/index.ts

@@ -0,0 +1 @@
+export * from './passwordRegex';

package/src/utils/regex/passwordRegex.ts

@@ -0,0 +1 @@
+export const PASSWORD_REGEX = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

package/src/utils/searchProvider.ts

@@ -0,0 +1,77 @@
+import {
+  ISearchProvider,
+  TSearchPageInfo,
+  TSearchPayload,
+  TSearchProviderDefinition,
+} from '../types/UIConfig';
+import { isAnObject } from './isAnObject';
+
+export const readCursorList = <TNode>(
+  payload: TSearchPayload,
+  alias: string,
+): { nodes: TNode[]; totalCount: number; pageInfo: TSearchPageInfo } => {
+  const page = payload[alias];
+
+  if (!isAnObject(page)) {
+    return {
+      nodes: [],
+      totalCount: 0,
+      pageInfo: { hasNextPage: false, endCursor: null },
+    };
+  }
+
+  const { list, totalCount, pageInfo } = page as {
+    list?: TNode[];
+    totalCount?: number;
+    pageInfo?: Partial<TSearchPageInfo> | null;
+  };
+
+  const endCursor =
+    typeof pageInfo?.endCursor === 'string' ? pageInfo.endCursor : null;
+
+  return {
+    nodes: Array.isArray(list) ? list : [],
+    totalCount: totalCount ?? 0,
+    pageInfo: {
+      hasNextPage: pageInfo?.hasNextPage === true && Boolean(endCursor),
+      endCursor,
+    },
+  };
+};
+
+export const readArray = <TNode>(
+  payload: TSearchPayload,
+  alias: string,
+): TNode[] => {
+  const value = payload[alias];
+
+  return Array.isArray(value) ? (value as TNode[]) : [];
+};
+
+export const readNumber = (payload: TSearchPayload, alias: string): number =>
+  typeof payload[alias] === 'number' ? (payload[alias] as number) : 0;
+
+export const defineSearchProvider = <TNode>(
+  definition: TSearchProviderDefinition<TNode>,
+): ISearchProvider => ({
+  key: definition.key,
+  label: definition.label,
+  labelKey: definition.labelKey,
+  labelNamespace: definition.labelNamespace,
+  icon: definition.icon,
+  order: definition.order,
+  selections: definition.selections,
+  resolve: (payload) => {
+    const { nodes, totalCount, pageInfo } = definition.select(payload);
+    const items = nodes
+      .map(definition.toItem)
+      .filter((item): item is NonNullable<typeof item> => item !== null);
+
+    return {
+      items,
+      totalCount: Math.max(totalCount ?? nodes.length, items.length),
+      countMode: totalCount === undefined ? 'approximate' : 'exact',
+      pageInfo,
+    };
+  },
+});

package/src/utils/string-array.ts

@@ -0,0 +1,24 @@
+import { type ClipboardEvent } from 'react';
+
+export const handleStringArrayPaste = ({
+  event,
+  value,
+  onValueChange,
+}: {
+  event: ClipboardEvent<HTMLInputElement>;
+  value: string[];
+  onValueChange: (value: string[]) => void;
+}) => {
+  const pastedValues = event.clipboardData
+    .getData('text')
+    .split(/\r\n|\r|\n/)
+    .map((value) => value.trim())
+    .filter(Boolean);
+
+  if (pastedValues.length <= 1) {
+    return;
+  }
+
+  event.preventDefault();
+  onValueChange(Array.from(new Set([...value, ...pastedValues])));
+};

package/src/utils/stripHtml.ts

@@ -0,0 +1,15 @@
+export const stripHtml = (value?: string | null) => {
+  if (!value) {
+    return '';
+  }
+
+  const { body } = new DOMParser().parseFromString(value, 'text/html');
+
+  return (body.textContent || '').replaceAll(/\s+/g, ' ').trim();
+};
+
+export const getPersonName = (
+  person: { firstName?: string | null; lastName?: string | null } | null,
+  fallback: string,
+) =>
+  [person?.firstName, person?.lastName].filter(Boolean).join(' ') || fallback;

package/src/utils/urlParser.ts

@@ -0,0 +1,66 @@
+// check if valid url
+export const isValidURL = (url: string) => {
+  try {
+    return Boolean(new URL(url));
+  } catch {
+    return false;
+  }
+};
+
+export const urlify = (text: string) => {
+  // validate url except html a tag
+  const urlRegex =
+    /(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w-]+)+[\w\-_~:/?#[\]@!&',;=.]+(?![^<>]*>|[^"]*?<\/a)/g;
+
+  return text.replace(urlRegex, (url) => {
+    if (url.startsWith('http')) {
+      return `<a href="${url}" target="_blank">${url}</a>`;
+    }
+
+    return `<a href="http://${url}" target="_blank">${url}</a>`;
+  });
+};
+
+// extract hostname e.g: www.domain.com
+const extractHostname = (url: string) => {
+  let hostname;
+
+  if (!url) {
+    url = '';
+  }
+
+  if (url.indexOf('://') > -1) {
+    hostname = url.split('/')[2];
+  } else {
+    hostname = url.split('/')[0];
+  }
+
+  hostname = hostname.split(':')[0];
+  hostname = hostname.split('?')[0];
+
+  return hostname;
+};
+
+// extract root domain e.g: domain.com
+const extractRootDomain = (url: string) => {
+  let domain = extractHostname(url);
+  const splitArr = domain.split('.');
+  const arrLen = splitArr.length;
+
+  if (arrLen > 2) {
+    domain = splitArr[arrLen - 2] + '.' + splitArr[arrLen - 1];
+    if (
+      splitArr[arrLen - 1].length === 2 &&
+      splitArr[arrLen - 1].length === 2
+    ) {
+      domain = splitArr[arrLen - 3] + '.' + domain;
+    }
+  }
+  return domain;
+};
+
+export default {
+  isValidURL,
+  extractHostname,
+  extractRootDomain,
+};

package/src/utils/videoEmbed.ts

@@ -0,0 +1,56 @@
+export type VideoEmbedProvider = 'youtube' | 'vimeo';
+
+export type VideoEmbedInfo = {
+  provider: VideoEmbedProvider;
+  embedUrl: string;
+  thumbnailUrl?: string;
+};
+
+const YOUTUBE_LONG_PATTERN =
+  /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/)([a-z0-9_-]{11})(?=$|[?&#/])/i;
+
+const YOUTUBE_SHORT_PATTERN =
+  /^(?:https?:\/\/)?youtu\.be\/([a-z0-9_-]{11})(?=$|[?&#/])/i;
+
+const VIMEO_PATTERN =
+  /^(?:https?:\/\/)?(?:www\.|player\.)?vimeo\.com\/(?:video\/)?(\d+)(?=$|[?&#/])/i;
+
+/** Parses a YouTube or Vimeo URL into an embeddable iframe URL (and thumbnail, when derivable without a network call). */
+export const parseVideoEmbedUrl = (url: string): VideoEmbedInfo | null => {
+  const trimmed = url.trim();
+  if (!trimmed) return null;
+
+  const youtubeMatch =
+    YOUTUBE_LONG_PATTERN.exec(trimmed) || YOUTUBE_SHORT_PATTERN.exec(trimmed);
+  if (youtubeMatch) {
+    const id = youtubeMatch[1];
+    return {
+      provider: 'youtube',
+      embedUrl: `https://www.youtube.com/embed/${id}`,
+      thumbnailUrl: `https://img.youtube.com/vi/${id}/hqdefault.jpg`,
+    };
+  }
+
+  const vimeoMatch = VIMEO_PATTERN.exec(trimmed);
+  if (vimeoMatch) {
+    const id = vimeoMatch[1];
+    return {
+      provider: 'vimeo',
+      embedUrl: `https://player.vimeo.com/video/${id}`,
+    };
+  }
+
+  return null;
+};
+
+/**
+ * Cloudflare Stream returns an HLS playback URL like
+ * `https://customer-xxx.cloudflarestream.com/{uid}/manifest/video.m3u8`.
+ * Extract the base so we can build a thumbnail (`/thumbnails/thumbnail.jpg`).
+ */
+export const getCloudflareStreamBase = (url: string): string | null => {
+  const match = url.match(
+    /^(https:\/\/customer-[^/]+\.cloudflarestream\.com\/[^/]+)/,
+  );
+  return match ? match[1] : null;
+};