@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/types/Relations.ts

@@ -0,0 +1,14 @@
+export interface IRelation {
+  _id: string;
+  entities: {
+    contentType: string;
+    contentId: string;
+  }[];
+}
+
+export interface IRelationInput {
+  entities: {
+    contentType: string;
+    contentId: string;
+  }[];
+}

package/src/types/SexCode.ts

@@ -0,0 +1,6 @@
+export enum SexCode {
+  NOT_KNOWN = 0,
+  MALE = 1,
+  FEMALE = 2,
+  NOT_APPLICABLE = 9,
+}

package/src/types/Theme.ts

@@ -0,0 +1,2 @@
+export type ThemeOption = 'light' | 'dark' | 'system';
+export type ThemeValue = 'light' | 'dark';

package/src/types/UIConfig.ts

@@ -0,0 +1,198 @@
+import type {
+  ApolloQueryResult,
+  OperationVariables,
+  QueryOptions,
+} from '@apollo/client';
+
+export type TSearchPayload = Readonly<Record<string, unknown>>;
+
+export type TSearchResultItem = {
+  id: string;
+  title: string;
+  description?: string;
+  createdAt?: string;
+  path: string;
+  matchFields?: Array<{
+    label: string;
+    labelKey?: string;
+    labelNamespace?: string;
+    value: string;
+  }>;
+};
+
+export type TSearchPageInfo = {
+  hasNextPage: boolean;
+  endCursor: string | null;
+};
+
+export type TSearchSelection = {
+  /** Globally unique alias. MUST start with `gs_<pluginName>_`. */
+  alias: string;
+  /** Root Query field, e.g. `customers`. Used for quarantine + diagnostics. */
+  field: string;
+  /** Arg body without parens, e.g. `searchValue: $searchValue, limit: $limit`. */
+  args?: string;
+  /** Selection set incl. braces. Omit for scalar fields like `productsTotalCount`. */
+  body?: string;
+  /** When true, an error on this alias does not fail the whole group. */
+  optional?: boolean;
+};
+
+export type TSearchGroupResult = {
+  items: TSearchResultItem[];
+  totalCount: number;
+  countMode: 'exact' | 'approximate';
+  pageInfo: TSearchPageInfo;
+};
+
+export type TSearchProviderDefinition<TNode> = {
+  /** Repo-unique, kebab-case, e.g. `sales-deals`. */
+  key: string;
+  /** English source of truth. */
+  label: string;
+  labelKey?: string;
+  labelNamespace?: string;
+  icon?: React.ElementType;
+  order?: number;
+  selections: TSearchSelection[];
+  select: (payload: TSearchPayload) => {
+    nodes: TNode[];
+    totalCount?: number;
+    pageInfo: TSearchPageInfo;
+  };
+  toItem: (node: TNode) => TSearchResultItem | null;
+};
+
+export type ISearchProvider = {
+  key: string;
+  label: string;
+  labelKey?: string;
+  labelNamespace?: string;
+  icon?: React.ElementType;
+  order?: number;
+  selections: TSearchSelection[];
+  resolve: (payload: TSearchPayload, limit: number) => TSearchGroupResult;
+};
+
+export type TPropertyInputMeta = Record<string, unknown>;
+
+export type TActivityRowProps = {
+  activity: {
+    _id: string;
+    activityType: string;
+    sourcePlugin?: string;
+    createdAt: string | Date;
+    metadata?: Record<string, any>;
+    [key: string]: any;
+  };
+};
+
+export type TProductRemainderProduct = {
+  _id: string;
+  code: string;
+  remainder?: TProductRemainderValue | null;
+};
+
+export type TProductRemainderValue = {
+  remainder?: number;
+  remainders?: unknown[];
+};
+
+export type TProductRemainderPatch = {
+  _id: string;
+  remainder: TProductRemainderValue;
+};
+
+export type TProductRemainderQuery = <
+  TData,
+  TVariables extends OperationVariables = OperationVariables,
+>(
+  options: QueryOptions<TVariables, TData>,
+) => Promise<ApolloQueryResult<TData>>;
+
+export type TProductRemainderProvider = (params: {
+  products: TProductRemainderProduct[];
+  pipelineId?: string;
+  query: TProductRemainderQuery;
+}) => Promise<TProductRemainderPatch[]>;
+
+export type TPropertyInputProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  meta?: TPropertyInputMeta;
+  onMetaChange: (meta: TPropertyInputMeta) => void;
+  disabled?: boolean;
+};
+
+export type IUIConfig = {
+  name: string;
+  path: string;
+  icon?: React.ElementType;
+  i18n?: boolean;
+  i18nNamespace?: string;
+  hasFloatingWidget?: boolean;
+  settingsOnly?: boolean;
+  settingsNavigation?: () => React.ReactNode;
+  navigationGroup?: {
+    name: string;
+    defaultPath?: string;
+    icon: React.ElementType;
+    content: () => React.ReactNode;
+    subGroup?: () => React.ReactNode;
+  };
+
+  widgets?: {
+    relationWidgets?: {
+      name: string;
+      icon?: React.ElementType;
+      label?: string;
+    }[];
+    // Sections a plugin adds to another plugin's settings page, e.g. what a
+    // POS or a pipeline sends to loyalty.
+    relationSettingsWidgets?: {
+      name: string;
+      icon?: React.ElementType;
+      label?: string;
+    }[];
+    // Fields a plugin offers for picking its own records inside another
+    // plugin's form, with whatever creating one there takes.
+    recordPickerWidgets?: {
+      name: string;
+      contentType: string;
+    }[];
+    customerDetailWidgets?: {
+      name: string;
+    }[];
+    formWidgets?: {
+      name: string;
+      contentType: string;
+      icon?: React.ElementType;
+    }[];
+    propertyInputs?: Record<string, React.ComponentType<TPropertyInputProps>>;
+    activityRows?: Record<string, React.ComponentType<TActivityRowProps>>;
+    productRemainderProviders?: TProductRemainderProvider[];
+  };
+  modules?: {
+    name: string;
+    icon?: React.ElementType;
+    path: string;
+    hasAutomation?: boolean;
+    hasRelationWidget?: boolean;
+    hasFloatingWidget?: boolean;
+    hasSegmentConfigWidget?: boolean;
+  }[];
+  searchProviders?: ISearchProvider[];
+};
+
+export type ICoreModule = {
+  name: string;
+  icon?: React.ElementType;
+  path: string;
+  hasSettings?: boolean;
+  settingsOnly?: boolean;
+  submenus?: {
+    name: string;
+    path: string;
+    icon?: React.ElementType;
+  }[];
+};

package/src/types/Utils.ts

@@ -0,0 +1,12 @@
+export interface IAttachment {
+  url: string;
+  name: string;
+  size: number;
+  type: string;
+  duration?: number;
+}
+
+export interface IPdfAttachment {
+  pdf?: IAttachment;
+  pages: IAttachment[];
+}

package/src/types/ValidationStatus.ts

@@ -0,0 +1,4 @@
+export enum ValidationStatus {
+  Valid = 'valid',
+  Invalid = 'invalid',
+}

package/src/types/index.ts

@@ -0,0 +1,11 @@
+export * from './CountryCode';
+export * from './CurrencyCode';
+export * from './Displays';
+export * from './Gql';
+export * from './Key';
+export * from './Relations';
+export * from './SexCode';
+export * from './Theme';
+export * from './UIConfig';
+export * from './Utils';
+export * from './ValidationStatus';

package/src/utils/IsUndefinedOrNull.ts

@@ -0,0 +1,4 @@
+import { isNull, isUndefined } from '@sniptt/guards';
+
+export const isUndefinedOrNull = (value: any): value is null | undefined =>
+  isUndefined(value) || isNull(value);

package/src/utils/colors.ts

@@ -0,0 +1,68 @@
+export interface OKLCHColor {
+  lightness: number;
+  chroma: number;
+  hue: number;
+}
+
+export const stringToHslColor = (
+  str: string,
+  saturation: number,
+  lightness: number,
+) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  const h = hash % 360;
+  return `hsl(${h}, ${saturation}%, ${lightness}%)`;
+};
+
+export const hexToOklch = (hex: string, onlyValue = false): string => {
+  let cleanHex = hex.replace('#', '');
+
+  if (cleanHex.length === 3) {
+    cleanHex = cleanHex
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+
+  if (!/^[0-9A-Fa-f]{0,6}$/.test(cleanHex)) {
+    throw new Error(`Invalid hex color format: ${hex}`);
+  }
+
+  const r = Number.parseInt(cleanHex.substring(0, 2), 16) / 255;
+  const g = Number.parseInt(cleanHex.substring(2, 4), 16) / 255;
+  const b = Number.parseInt(cleanHex.substring(4, 6), 16) / 255;
+
+  const linearR = r <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+  const linearG = g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+  const linearB = b <= 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+
+  const x = 0.4124564 * linearR + 0.3575761 * linearG + 0.1804375 * linearB;
+  const y = 0.2126729 * linearR + 0.7151522 * linearG + 0.072175 * linearB;
+  const z = 0.0193339 * linearR + 0.119192 * linearG + 0.9503041 * linearB;
+
+  const l = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
+  const m = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
+  const s = 0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z;
+
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const b_ = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+
+  const C = Math.sqrt(a * a + b_ * b_);
+  let h = Math.atan2(b_, a) * (180 / Math.PI);
+  if (h < 0) h += 360;
+
+  if (onlyValue) {
+    return `${L} ${C} ${h}`;
+  }
+
+  return `oklch(${L} ${C} ${h})`;
+};

package/src/utils/config/index.ts

@@ -0,0 +1,83 @@
+declare global {
+  interface Window {
+    env?: Record<string, string>;
+    __APOLLO_CLIENT__?: any;
+  }
+}
+
+const getDefaultUrl = () => {
+  if (process.env.NODE_ENV === 'development') {
+    return 'http://localhost:4000';
+  } else {
+    return `${window.location.protocol}//${window.location.hostname}/gateway`;
+  }
+};
+
+const getSubdomain = () => {
+  return window.location.hostname.split('.')[0];
+};
+
+let memoizedApiUrl: string | null = null;
+
+const getApi = (): string => {
+  // if (memoizedApiUrl) return memoizedApiUrl;
+
+  const envApiUrl =
+    window.env?.REACT_APP_API_URL ??
+    (process.env.REACT_APP_API_URL || getDefaultUrl());
+
+  memoizedApiUrl = envApiUrl?.includes('<subdomain>')
+    ? envApiUrl.replace('<subdomain>', getSubdomain())
+    : envApiUrl;
+
+  return memoizedApiUrl;
+};
+
+const cdnUrl = () => {
+  return (
+    window.env?.REACT_APP_IMAGE_CDN_URL ?? process.env.REACT_APP_IMAGE_CDN_URL
+  );
+};
+
+const googleMapApiKey = () => {
+  return (
+    window.env?.REACT_APP_GOOGLE_MAP_API_KEY ??
+    process.env.REACT_APP_GOOGLE_MAP_API_KEY
+  );
+};
+
+const hideCoreModules = () => {
+  return (
+    window.env?.REACT_APP_HIDE_CORE_MODULES ??
+    process.env.REACT_APP_HIDE_CORE_MODULES
+  );
+};
+
+const sentryDsn = () => {
+  return window.env?.REACT_APP_SENTRY_DSN ?? process.env.REACT_APP_SENTRY_DSN;
+};
+
+const sentryEnvironment = () => {
+  return (
+    window.env?.REACT_APP_SENTRY_ENVIRONMENT ??
+    process.env.REACT_APP_SENTRY_ENVIRONMENT
+  );
+};
+
+const NODE_ENV = process.env.NODE_ENV || 'development';
+const REACT_APP_API_URL = getApi();
+const REACT_APP_IMAGE_CDN_URL = cdnUrl();
+const REACT_APP_GOOGLE_MAP_API_KEY = googleMapApiKey();
+const REACT_APP_HIDE_CORE_MODULES = hideCoreModules();
+const REACT_APP_SENTRY_DSN = sentryDsn();
+const REACT_APP_SENTRY_ENVIRONMENT = sentryEnvironment();
+
+export {
+  NODE_ENV,
+  REACT_APP_API_URL,
+  REACT_APP_IMAGE_CDN_URL,
+  REACT_APP_GOOGLE_MAP_API_KEY,
+  REACT_APP_HIDE_CORE_MODULES,
+  REACT_APP_SENTRY_DSN,
+  REACT_APP_SENTRY_ENVIRONMENT,
+};

package/src/utils/cookie-storage.ts

@@ -0,0 +1,29 @@
+import Cookies from 'js-cookie';
+
+class CookieStorage {
+  private keys: Set<string> = new Set();
+
+  getItem(key: string): string | undefined {
+    return Cookies.get(key);
+  }
+
+  setItem(
+    key: string,
+    value: string,
+    attributes?: Cookies.CookieAttributes
+  ): void {
+    this.keys.add(key);
+    Cookies.set(key, value, attributes);
+  }
+
+  removeItem(key: string): void {
+    this.keys.delete(key);
+    Cookies.remove(key);
+  }
+
+  clear(): void {
+    this.keys.forEach((key) => this.removeItem(key));
+  }
+}
+
+export const cookieStorage = new CookieStorage();

package/src/utils/core.ts

@@ -0,0 +1,82 @@
+import { REACT_APP_API_URL, REACT_APP_IMAGE_CDN_URL } from 'erxes-ui/utils';
+
+import { isValidURL } from 'erxes-ui/utils/urlParser';
+
+export const readImage = (
+  value?: string,
+  width?: number,
+  inline?: boolean,
+  format?: string,
+  quality?: number,
+): string => {
+  if (
+    !value ||
+    isValidURL(value) ||
+    (typeof value === 'string' && value.includes('http')) ||
+    (typeof value === 'string' && value.startsWith('/'))
+  ) {
+    return value || '';
+  }
+
+  if (REACT_APP_IMAGE_CDN_URL) {
+    let url = `${REACT_APP_IMAGE_CDN_URL}/width=${width || 500}`;
+
+    url += format ? `,format=${format}` : '';
+    url += quality ? `,quality=${quality}` : '';
+
+    return `${url}/${REACT_APP_API_URL}/read-file?key=${encodeURIComponent(
+      value,
+    )}`;
+  }
+
+  let url = `${REACT_APP_API_URL}/read-file?key=${encodeURIComponent(value)}`;
+
+  if (width) {
+    url += `&width=${width}`;
+  }
+
+  if (inline) {
+    url += `&inline=${inline}`;
+  }
+
+  if (format) {
+    url += `&format=${format}`;
+  }
+
+  return url;
+};
+
+export const renderFullName = (data: any) => {
+  if(!data) return null;
+
+  if (data.firstName || data.lastName || data.middleName) {
+    return (
+      (data.firstName || '') +
+      ' ' +
+      (data.middleName || '') +
+      ' ' +
+      (data.lastName || '') 
+    );
+  }
+
+  if (data.primaryEmail || data.primaryPhone) {
+    return data.primaryEmail || data.primaryPhone;
+  }
+
+  if (data.emails && data.emails.length > 0) {
+    return data.emails[0]?.email || 'Unknown';
+  }
+
+  if (data.phones && data.phones.length > 0) {
+    return data.phones[0]?.phone || 'Unknown';
+  }
+
+  const { visitorContactInfo } = data;
+
+  if (visitorContactInfo) {
+    return visitorContactInfo.phone || visitorContactInfo.email || 'Unknown';
+  }
+
+  return 'Unknown';
+};
+

package/src/utils/fixOrder.ts

@@ -0,0 +1,16 @@
+export const fixOrder = ({
+  order,
+  name,
+}: {
+  order?: string;
+  name?: string;
+}) => {
+  let fixedOrder = order;
+  if (name?.includes('/')) {
+    fixedOrder = fixedOrder?.replace(name, name.replace(/\//g, ''));
+  }
+  if (fixedOrder?.endsWith('/')) {
+    fixedOrder = fixedOrder?.slice(0, -1);
+  }
+  return fixedOrder;
+};

package/src/utils/format/formatAmount.ts

@@ -0,0 +1,17 @@
+export const formatAmount = (amount: number, kind?: 'short' | 'finance') => {
+  if (kind === 'short') {
+    if (amount < 1000) {
+      return amount.toFixed(1).replace(/\.?0+$/, '');
+    }
+    if (amount < 1000000) {
+      return (amount / 1000).toFixed(1).replace(/\.?0+$/, '') + 'k';
+    }
+    if (amount < 1000000000) {
+      return (amount / 1000000).toFixed(1).replace(/\.?0+$/, '') + 'm';
+    }
+    return (amount / 1000000000).toFixed(1).replace(/\.?0+$/, '') + 'b';
+  }
+
+  return Number(amount.toFixed(2)).toLocaleString();
+
+};

package/src/utils/format/formatPhoneNumber.ts

@@ -0,0 +1,11 @@
+import { AsYouType, CountryCode } from 'libphonenumber-js';
+
+export const formatPhoneNumber = ({
+  defaultCountry,
+  value,
+}: {
+  defaultCountry?: CountryCode;
+  value: string;
+}): string => {
+  return new AsYouType({ defaultCountry: defaultCountry }).input(value);
+};

package/src/utils/format/index.ts

@@ -0,0 +1,2 @@
+export * from './formatAmount';
+export * from './formatPhoneNumber';

package/src/utils/getPluginAssetsUrl.ts

@@ -0,0 +1,16 @@
+import { getInstance } from '@module-federation/enhanced/runtime';
+
+export const getPluginAssetsUrl = (pluginName: string, url: string) => {
+  const instance = getInstance();
+  const remotes = instance?.options.remotes;
+
+  const remote = remotes?.find((r) => r.name === `${pluginName}_ui`);
+
+  if (remote && 'entry' in remote && typeof remote.entry === 'string') {
+    const assetsUrl = remote.entry.replace('remoteEntry.js', 'assets');
+
+    return `${assetsUrl}/${url}`;
+  }
+
+  return url;
+};

package/src/utils/highlightMatch.tsx

@@ -0,0 +1,35 @@
+const escapeRegExp = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
+
+export const highlightMatch = (
+  text: string,
+  searchValue: string,
+): React.ReactNode => {
+  const term = searchValue.trim();
+
+  if (!term) {
+    return text;
+  }
+
+  const parts = text.split(new RegExp(`(${escapeRegExp(term)})`, 'ig'));
+  const lowerTerm = term.toLowerCase();
+  let offset = 0;
+
+  return parts.map((part) => {
+    const start = offset;
+    offset += part.length;
+
+    if (part.toLowerCase() !== lowerTerm) {
+      return part;
+    }
+
+    return (
+      <mark
+        key={`${start}:${part}`}
+        className="rounded-[2px] bg-yellow-100 text-foreground dark:bg-yellow-500/25"
+      >
+        {part}
+      </mark>
+    );
+  });
+};

package/src/utils/index.ts

@@ -0,0 +1,18 @@
+export * from './colors';
+export * from './config';
+export * from './cookie-storage';
+export * from './core';
+export * from './format';
+export * from './getPluginAssetsUrl';
+export * from './highlightMatch';
+export * from './isAnObject';
+export * from './isDefined';
+export * from './isDeeplyEqual';
+export * from './localization';
+export * from './regex';
+export * from './IsUndefinedOrNull';
+export * from './isEnabled';
+export * from './string-array';
+export * from './searchProvider';
+export * from './stripHtml';
+export * from './videoEmbed';

package/src/utils/isAnObject.ts

@@ -0,0 +1,3 @@
+export const isAnObject = (obj: any): obj is object => {
+  return typeof obj === 'object' && obj !== null && Object.keys(obj).length > 0;
+};

package/src/utils/isDeeplyEqual.ts

@@ -0,0 +1,4 @@
+import deepEqual from 'deep-equal';
+
+export const isDeeplyEqual = <T>(a: T, b: T, options?: { strict: boolean }) =>
+  deepEqual(a, b, options);

package/src/utils/isDefined.ts

@@ -0,0 +1,4 @@
+import { isNull, isUndefined } from '@sniptt/guards';
+
+export const isDefined = <T>(value: T | null | undefined): value is T =>
+  !isUndefined(value) && !isNull(value);

package/src/utils/isEnabled.ts

@@ -0,0 +1,7 @@
+export const isEnabled = (pluginName: string) => {
+  const ENABLED_PLUGINS = (process.env.ENABLED_PLUGINS || '')
+    .split(',')
+    .filter(Boolean);
+
+  return ENABLED_PLUGINS.includes(pluginName);
+};

package/src/utils/localization/detectTimeZone.ts

@@ -0,0 +1,6 @@
+/**
+ * Detects the user's time zone.
+ * @returns a IANA time zone
+ */
+export const detectTimeZone = () =>
+  Intl.DateTimeFormat().resolvedOptions().timeZone;