@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/constants/PhoneValidationStatusInfos.tsx

@@ -0,0 +1,57 @@
+import {
+  IconCircleDashedCheck,
+  IconCircleDashed,
+  IconDeviceMobile,
+} from '@tabler/icons-react';
+
+export const PhoneIconComponents = {
+  IconCircleDashedCheck,
+  IconCircleDashed,
+  IconDeviceMobile,
+} as const;
+export type TPhoneValidationStatusInfo = {
+  label: string;
+  value: string;
+  icon: keyof typeof PhoneIconComponents;
+  className?: string;
+}[];
+
+export const PHONE_VALIDATION_STATUS_INFOS: TPhoneValidationStatusInfo = [
+  {
+    label: 'Validated',
+    value: 'valid',
+    icon: 'IconCircleDashedCheck',
+    className: 'text-green-500',
+  },
+  {
+    label: 'Unvalidated',
+    value: 'invalid',
+    icon: 'IconCircleDashed',
+    className: 'text-muted-foreground',
+  },
+  {
+    label: 'Unknown',
+    value: 'unknown',
+    icon: 'IconCircleDashed',
+    className: 'text-muted-foreground',
+  },
+  {
+    label: 'Mobile Phone Number',
+    value: 'mobile-phone-number',
+    icon: 'IconDeviceMobile',
+    className: 'text-muted-foreground',
+  },
+];
+// [
+//   { label: 'Unknown', value: 'unknown' },
+//   { label: 'Valid', value: 'valid' },
+//   { label: 'Invalid', value: 'invalid' },
+//   {
+//     label: 'Accept all unverifiable',
+//     value: 'accept_all_unverifiable',
+//   },
+//   { label: 'Disposable', value: 'disposable' },
+//   { label: 'Catch all', value: 'catchall' },
+//   { label: 'Bad syntax', value: 'bad_syntax' },
+//   { label: 'Not checked', value: 'not_checked' },
+// ];

package/src/constants/SexCodes.ts

@@ -0,0 +1,16 @@
+import { SexCode } from 'erxes-ui/types';
+
+export const SexCodes: Record<SexCode, { label: string }> = {
+  [SexCode.NOT_KNOWN]: {
+    label: 'Not known',
+  },
+  [SexCode.MALE]: {
+    label: 'Male',
+  },
+  [SexCode.FEMALE]: {
+    label: 'Female',
+  },
+  [SexCode.NOT_APPLICABLE]: {
+    label: 'Not applicable',
+  },
+};

package/src/constants/index.ts

@@ -0,0 +1,5 @@
+export * from './AttachmentGql';
+export * from './CurrencyCodes';
+export * from './GraphqlConstants';
+export * from './CountryPhoneCodes';
+export * from './SexCodes';

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export * from './use-confirm';
+export * from './use-media-query';
+export * from './use-mobile';
+export * from './use-toast';
+export * from './use-upload';
+export * from './use-query-state';
+export * from './use-is-matching-location';
+export * from './use-upload-new';
+export * from './use-upload-chunked';

package/src/hooks/use-confirm.tsx

@@ -0,0 +1,212 @@
+import { ReactNode, useCallback } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { createRoot } from 'react-dom/client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import {
+  AlertDialog,
+  ButtonProps,
+  buttonVariants,
+  Form,
+  Input,
+} from 'erxes-ui/components';
+
+type OptionProps = {
+  okLabel?: string;
+  cancelLabel?: string;
+  description?: string;
+  confirmationValue?: string;
+  content?: ReactNode;
+  variants?: {
+    ok?: ButtonProps['variant'];
+    cancel?: ButtonProps['variant'];
+  };
+};
+
+type ConfirmDialogProp = {
+  message: string;
+  options?: OptionProps;
+  open: boolean;
+  onConfirm: () => void;
+  onDismiss: () => void;
+};
+
+export const confirmValidationSchema = z
+  .object({
+    confirm: z.string(),
+  })
+  .required();
+
+export type FormType = z.infer<typeof confirmValidationSchema>;
+
+const ConfirmDialog = ({
+  message,
+  options,
+  open,
+  onConfirm,
+  onDismiss,
+}: ConfirmDialogProp) => {
+  const {
+    okLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    description = '',
+    confirmationValue = '',
+    content,
+    variants = {},
+  } = options || ({} as OptionProps);
+
+  const form = useForm<FormType>({
+    mode: 'onBlur',
+    defaultValues: {
+      confirm: '',
+    },
+    resolver: zodResolver(confirmValidationSchema),
+  });
+
+  const dismiss = () => {
+    onDismiss();
+  };
+
+  const proceed: SubmitHandler<FormType> = () => {
+    const { confirm } = form.getValues();
+
+    if (confirmationValue) {
+      if (confirm === confirmationValue) {
+        return onConfirm();
+      }
+
+      return form.setError(
+        'confirm',
+        { type: 'custom', message: `Enter ${confirmationValue} to confirm` },
+        { shouldFocus: true },
+      );
+    }
+
+    return onConfirm();
+  };
+
+  const renderConfirm = (formInstance: ReturnType<typeof useForm>) => {
+    if (!confirmationValue) {
+      return null;
+    }
+
+    return (
+      <Form.Field
+        name="confirm"
+        control={formInstance.control as any}
+        render={({ field }: { field: any }) => (
+          <Form.Item>
+            <Form.Label className="text-xs select-none" variant="peer">
+              Type <span className="font-semibold">{confirmationValue}</span> in
+              the field below to confirm.
+            </Form.Label>
+            <Form.Control>
+              <Input
+                type="text"
+                placeholder="Enter confirmation"
+                {...field}
+                autoFocus
+              />
+            </Form.Control>
+            <Form.Message />
+          </Form.Item>
+        )}
+      />
+    );
+  };
+
+  return (
+    <AlertDialog open={open}>
+      <AlertDialog.Content>
+        <Form {...form}>
+          <AlertDialog.Header>
+            <AlertDialog.Title>{message}</AlertDialog.Title>
+            {description && (
+              <AlertDialog.Description> {description} </AlertDialog.Description>
+            )}
+          </AlertDialog.Header>
+          {content}
+          <form onSubmit={form.handleSubmit(proceed)}>
+            {renderConfirm(form as any)}
+            <br />
+            <AlertDialog.Footer>
+              <AlertDialog.Cancel
+                onClick={dismiss}
+                type="button"
+                className={
+                  variants.cancel
+                    ? buttonVariants({ variant: variants.cancel })
+                    : undefined
+                }
+              >
+                {cancelLabel}
+              </AlertDialog.Cancel>
+              <AlertDialog.Action
+                type="submit"
+                className={
+                  variants.ok
+                    ? buttonVariants({ variant: variants.ok })
+                    : undefined
+                }
+              >
+                {okLabel}
+              </AlertDialog.Action>
+            </AlertDialog.Footer>
+          </form>
+        </Form>
+      </AlertDialog.Content>
+    </AlertDialog>
+  );
+};
+
+export const useConfirm = () => {
+  const confirm = useCallback(
+    ({ message, options }: { message: string; options?: OptionProps }) => {
+      return new Promise<void>((resolve) => {
+        const wrapper = document.createElement('div');
+        document.body.appendChild(wrapper);
+
+        let isOpen = true;
+
+        const cleanup = () => {
+          if (!isOpen) return;
+
+          isOpen = false;
+
+          try {
+            root.unmount();
+          } catch (error) {
+            console.error('Error unmounting confirm dialog:', error);
+          } finally {
+            wrapper.parentNode?.removeChild(wrapper);
+          }
+        };
+
+        const handleConfirm = () => {
+          resolve();
+          cleanup();
+        };
+
+        const handleDismiss = () => {
+          cleanup();
+        };
+
+        const root = createRoot(wrapper);
+        root.render(
+          <ConfirmDialog
+            message={message}
+            options={options}
+            open={true}
+            onConfirm={handleConfirm}
+            onDismiss={handleDismiss}
+          />,
+        );
+      });
+    },
+    [],
+  );
+
+  return { confirm };
+};

package/src/hooks/use-cursor-pagination.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { isUndefinedOrNull } from 'erxes-ui/utils';
+import { useEffect, useRef, useState } from 'react';
+
+export const useCursorScroll = ({
+  dataLength,
+  hasPreviousPage,
+  offset = 102,
+}: {
+  dataLength?: number;
+  hasPreviousPage?: boolean;
+  offset?: number;
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const distanceFromBottomRef = useRef(0);
+
+  const [isFetchBackward, setIsFetchBackward] = useState(false);
+
+  useEffect(() => {
+    if (scrollRef.current && !isUndefinedOrNull(hasPreviousPage)) {
+      scrollRef.current.scrollTop = hasPreviousPage ? offset : 0;
+    }
+  }, [hasPreviousPage]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      if (distanceFromBottomRef.current && isFetchBackward) {
+        scrollRef.current.scrollTop =
+          scrollRef.current.scrollHeight - distanceFromBottomRef.current;
+        distanceFromBottomRef.current = 0;
+        setIsFetchBackward(false);
+      }
+    }
+  }, [dataLength]);
+
+  return {
+    scrollRef,
+    isFetchBackward,
+    setIsFetchBackward,
+    distanceFromBottomRef,
+  };
+};

package/src/hooks/use-is-matching-location.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+
+export const useIsMatchingLocation = (basePath?: string) => {
+  const location = useLocation();
+
+  return useCallback(
+    (path: string) => {
+      const constructedPath = basePath
+        ? new URL(basePath + path, document.location.origin).pathname ?? ''
+        : path;
+
+      return !!matchPath(constructedPath, location.pathname);
+    },
+    [location.pathname, basePath],
+  );
+};

package/src/hooks/use-media-query.tsx

@@ -0,0 +1,26 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+const canMatchMedia = (): boolean =>
+  typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+
+// Read synchronously so the first render already matches the viewport.
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (!canMatchMedia()) {
+        return () => undefined;
+      }
+
+      const mediaQuery = window.matchMedia(query);
+      mediaQuery.addEventListener('change', onChange);
+      return () => mediaQuery.removeEventListener('change', onChange);
+    },
+    [query],
+  );
+
+  return useSyncExternalStore(
+    subscribe,
+    () => (canMatchMedia() ? window.matchMedia(query).matches : false),
+    () => false,
+  );
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,7 @@
+import { useMediaQuery } from 'erxes-ui/hooks/use-media-query';
+
+const MOBILE_BREAKPOINT = 1024;
+
+export function useIsMobile(): boolean {
+  return useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+}

package/src/hooks/use-query-state.tsx

@@ -0,0 +1,193 @@
+import { useSearchParams } from 'react-router-dom';
+
+let searchParamsDraft: URLSearchParams | null = null;
+let draftSourceSearch = '';
+
+const getSearchParamsDraft = () => {
+  const currentSearch = window.location.search;
+  const draftSearch = searchParamsDraft?.toString();
+  const draftTargetSearch = draftSearch ? `?${draftSearch}` : '';
+
+  if (
+    !searchParamsDraft ||
+    (draftSourceSearch !== currentSearch && draftTargetSearch !== currentSearch)
+  ) {
+    draftSourceSearch = currentSearch;
+    searchParamsDraft = new URLSearchParams(currentSearch);
+
+    queueMicrotask(() => {
+      searchParamsDraft = null;
+      draftSourceSearch = '';
+    });
+  }
+
+  return new URLSearchParams(searchParamsDraft);
+};
+
+const updateSearchParamsDraft = (nextParams: URLSearchParams) => {
+  searchParamsDraft = new URLSearchParams(nextParams);
+};
+
+// Single key types and hook
+export type QueryState<T> = [T | null, (value: T | null) => void];
+
+export function useQueryState<T>(
+  queryKey: string,
+  options?: {
+    defaultValue?: T;
+  },
+): QueryState<T> {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const parseQueryValue = (value: string | null): T | null => {
+    if (!value) {
+      if (options?.defaultValue !== undefined) {
+        return options.defaultValue;
+      }
+      return null;
+    }
+
+    if (queryKey === 'searchValue') {
+      return value as T;
+    }
+
+    try {
+      const parsed = JSON.parse(value);
+      return parsed as T;
+    } catch {
+      if (value === 'true') return true as T;
+      if (value === 'false') return false as T;
+      return value as T;
+    }
+  };
+
+  const query = parseQueryValue(searchParams.get(queryKey));
+
+  const setQuery = (value: T | null) => {
+    const nextParams = getSearchParamsDraft();
+
+    if (value !== null) {
+      const stringValue =
+        typeof value === 'object' ? JSON.stringify(value) : String(value);
+
+      if (nextParams.get(queryKey) === stringValue) return;
+      if (!nextParams.has(queryKey) && value === query) return;
+
+      nextParams.set(queryKey, stringValue);
+    } else if (nextParams.has(queryKey)) {
+      nextParams.delete(queryKey);
+    } else {
+      return;
+    }
+
+    updateSearchParamsDraft(nextParams);
+    setSearchParams(nextParams);
+  };
+
+  return [query, setQuery];
+}
+
+// Multiple keys types and hook
+type QueryTypes = Record<string, unknown>;
+type QueryValues<T extends QueryTypes> = {
+  [K in keyof T]: T[K] | null;
+};
+
+export function useMultiQueryState<T extends QueryTypes>(
+  queryKeys: (keyof T)[],
+): [QueryValues<T>, (values: Partial<QueryValues<T>>) => void] {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const parseQueryValue = <K extends keyof T>(
+    value: string | null,
+    key: K,
+  ): T[K] | null => {
+    if (!value) return null;
+
+    if (key === 'searchValue') {
+      return value as T[K];
+    }
+
+    try {
+      const parsed = JSON.parse(value);
+
+      return parsed as T[K];
+    } catch {
+      if (value === 'true') return true as T[K];
+      if (value === 'false') return false as T[K];
+      return value as T[K];
+    }
+  };
+
+  const queries = queryKeys.reduce((acc, key) => {
+    acc[key] = parseQueryValue(searchParams.get(String(key)), key);
+    return acc;
+  }, {} as QueryValues<T>);
+
+  const setQueries = (values: Partial<QueryValues<T>>) => {
+    const nextParams = getSearchParamsDraft();
+    let hasChanges = false;
+
+    Object.entries(values).forEach(([key, value]) => {
+      if (value !== null) {
+        const stringValue =
+          typeof value === 'object' ? JSON.stringify(value) : String(value);
+
+        if (nextParams.get(key) === stringValue) return;
+
+        nextParams.set(key, stringValue);
+        hasChanges = true;
+      } else if (nextParams.has(key)) {
+        nextParams.delete(key);
+        hasChanges = true;
+      }
+    });
+
+    if (!hasChanges) return;
+
+    updateSearchParamsDraft(nextParams);
+    setSearchParams(nextParams, { replace: true });
+  };
+
+  return [queries, setQueries];
+}
+
+export const useNonNullMultiQueryState = <T extends QueryTypes>(
+  queryKeys: (keyof T)[],
+): QueryValues<T> => {
+  const [queries] = useMultiQueryState(queryKeys);
+
+  const nonNullQueries = Object.fromEntries(
+    Object.entries(queries).filter(([_, value]) => value !== null),
+  ) as QueryValues<T>;
+
+  return nonNullQueries;
+};
+
+export function useSetQueryStateByKey() {
+  const [, setSearchParams] = useSearchParams();
+
+  const setQuery = (key: string, value: string) => {
+    const nextParams = getSearchParamsDraft();
+    if (nextParams.get(key) === value) return;
+    nextParams.set(key, value);
+    updateSearchParamsDraft(nextParams);
+    setSearchParams(nextParams);
+  };
+
+  return setQuery;
+}
+
+export function useRemoveQueryStateByKey() {
+  const [, setSearchParams] = useSearchParams();
+
+  const removeQuery = (key: string) => {
+    const nextParams = getSearchParamsDraft();
+    if (!nextParams.has(key)) return;
+    nextParams.delete(key);
+    updateSearchParamsDraft(nextParams);
+    setSearchParams(nextParams);
+  };
+
+  return removeQuery;
+}