@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/modules/record-field/meta-inputs/components/PhoneInput.tsx

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import { IconCheck } from '@tabler/icons-react';
+import { Combobox, Command, Input, Popover } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import parsePhoneNumberFromString, { CountryCode } from 'libphonenumber-js';
+import { CountryPhoneCodes } from 'erxes-ui/constants/CountryPhoneCodes';
+import { TCountryCode } from 'erxes-ui/types';
+import { formatPhoneNumber } from 'erxes-ui/utils/format';
+import { phoneSchema } from 'erxes-ui/modules/inputs/validations/phoneValidation';
+
+interface PhoneInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange'
+  > {
+  value?: string;
+  onChange?: (value: string, defaultCountryCode: CountryCode) => void;
+  className?: string;
+  defaultCountry?: CountryCode;
+  placeholder?: string;
+  onEnter?: (phone: string) => void;
+  onValidationChange?: (isValid: boolean, error?: string) => void;
+}
+
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  (
+    {
+      value,
+      onChange,
+      className,
+      defaultCountry,
+      placeholder,
+      onEnter,
+      onValidationChange,
+      ...props
+    },
+    ref,
+  ) => {
+
+    const displayValue =
+      value && !value.startsWith('+') ? `+${value}` : value || '';
+
+    let parsedNumber;
+    try {
+      parsedNumber = parsePhoneNumberFromString(displayValue);
+    } catch {
+      parsedNumber = null;
+    }
+
+    const initialCountry = parsedNumber?.country;
+    const [selectedCountry, setSelectedCountry] = useState<TCountryCode | undefined>(
+      CountryPhoneCodes.find((c) => c.code === initialCountry)
+    );
+
+    const initialValue = displayValue
+      ? parsedNumber
+        ? parsedNumber.formatInternational()
+        : displayValue
+      : selectedCountry?.dial_code || '';
+    const [phoneNumber, setPhoneNumber] = useState<string>(() =>
+      formatPhoneNumber({ value: initialValue || selectedCountry?.dial_code || '' }),
+    );
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [validationError, setValidationError] = useState<string>('');
+
+    const validatePhone = (phone: string) => {
+      const cleanPhone = phone.replace(/[\s\-\()]/g, '');
+
+      try {
+        phoneSchema.parse({ phone: cleanPhone });
+        setValidationError('');
+        onValidationChange?.(true);
+        return true;
+      } catch (error: any) {
+        const errorMessage =
+          error.errors?.[0]?.message || 'Invalid phone number';
+        setValidationError(errorMessage);
+        onValidationChange?.(false, errorMessage);
+        return false;
+      }
+    };
+
+    const handleSelect = (phoneCode: string) => {
+      const country = CountryPhoneCodes.find((c) => c.dial_code === phoneCode);
+      if (country) {
+        setSelectedCountry(country);
+        setPhoneNumber(country.dial_code);
+      }
+      setOpen(false);
+      if (ref && typeof ref !== 'function' && 'current' in ref) {
+        ref.current?.focus();
+      }
+    };
+
+    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let input = e.target.value;
+      if (!input.startsWith('+')) {
+        input = '+' + input;
+      }
+
+      let parsedNumber;
+      try {
+        parsedNumber = parsePhoneNumberFromString(input);
+      } catch {
+        parsedNumber = null;
+      }
+
+      let countryToUse = selectedCountry;
+      const countryCode = parsedNumber?.country;
+      if (countryCode) {
+        const newCountry = CountryPhoneCodes.find(
+          (c) => c.code === countryCode,
+        );
+        if (newCountry) {
+          setSelectedCountry(newCountry);
+          countryToUse = newCountry;
+        }
+      }
+
+      const formattedPhone = formatPhoneNumber({
+        defaultCountry: countryToUse?.code as CountryCode,
+        value: input,
+      });
+
+      setPhoneNumber(formattedPhone);
+
+      const cleanInput = input.replace(/[a-zA-Z\s]/g, '');
+      validatePhone(cleanInput);
+
+      onChange?.(cleanInput, countryToUse?.code as CountryCode);
+    };
+    const handleBlur = () => {
+      if (!phoneNumber.startsWith('+')) {
+        const updatedNumber = '+' + phoneNumber;
+        setPhoneNumber(updatedNumber);
+        const cleanNumber = updatedNumber.replace(/[a-zA-Z\s]/g, '');
+        validatePhone(cleanNumber);
+        onChange?.(cleanNumber, selectedCountry?.code as CountryCode);
+      } else {
+        validatePhone(phoneNumber.replace(/[a-zA-Z\s]/g, ''));
+      }
+    };
+    return (
+      <div className={'flex items-center justify-start rounded gap-1'}>
+        <Popover open={open} onOpenChange={setOpen}>
+          <Combobox.TriggerBase
+            variant="secondary"
+            aria-expanded={open}
+            className={cn(
+              'text-xl w-8 px-0 justify-center shadow-xs',
+              className,
+            )}
+          >
+            {selectedCountry?.flag}
+          </Combobox.TriggerBase>
+          <Popover.Content className="w-56 p-0" align="start">
+            <Command>
+              <Command.Input placeholder="Search country..." className="h-9" />
+              <Command.List className="max-h-[300px] overflow-auto">
+                <Command.Group>
+                  {CountryPhoneCodes.map((country) => (
+                    <Command.Item
+                      key={country.code}
+                      value={country.name}
+                      onSelect={() => handleSelect(country.dial_code)}
+                      className="flex items-center justify-between px-2 py-1.5"
+                    >
+                      <div className="flex items-center">
+                        <span className="mr-2">{country.flag}</span>
+                        <span className="text-sm">{country.name}</span>
+                        <span className="ml-2 text-sm text-muted-foreground">
+                          {country.dial_code}
+                        </span>
+                      </div>
+                      {selectedCountry?.code === country.code && (
+                        <IconCheck className="size-4" />
+                      )}
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              </Command.List>
+            </Command>
+          </Popover.Content>
+        </Popover>
+        <div className="flex-1">
+          <Input
+            value={phoneNumber}
+            onChange={handlePhoneChange}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            ref={ref}
+            className={cn(
+              'bg-accent',
+              validationError &&
+              'border-destructive focus-visible:ring-destructive',
+              className,
+            )}
+            type="tel"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                onEnter?.(value || '');
+                e.preventDefault();
+              }
+              if (props.onKeyDown) {
+                props.onKeyDown(e);
+              }
+            }}
+            {...props}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+PhoneInput.displayName = 'PhoneInput';

package/src/modules/record-field/meta-inputs/components/PhoneVerificationInput.tsx

@@ -0,0 +1,80 @@
+import React, { useId, useState } from 'react';
+import { Select } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import {
+  PHONE_VALIDATION_STATUS_INFOS,
+  PhoneIconComponents,
+} from 'erxes-ui/constants/PhoneValidationStatusInfos';
+
+interface PhoneVerificationInputProps {
+  value: string | null;
+  className?: string;
+  onChange: (value: string) => void;
+  inputValue: string;
+}
+export const PhoneVerificationInput = ({
+  value,
+  onChange,
+  className,
+  inputValue,
+}: PhoneVerificationInputProps) => {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [currentValue, setCurrentValue] = useState(value);
+
+  const currentStatus = PHONE_VALIDATION_STATUS_INFOS.find(
+    (info) => info.value === currentValue,
+  );
+
+  const handleValueChange = (newValue: string) => {
+    setCurrentValue(newValue);
+    onChange(newValue);
+  };
+
+  const IconComponent =
+    PhoneIconComponents[currentStatus?.icon || 'IconCircleDashed'];
+
+  return (
+    <Select
+      open={open}
+      onOpenChange={setOpen}
+      value={currentValue || 'unknown'}
+      onValueChange={handleValueChange}
+    >
+      <Select.Trigger
+        id={id}
+        className={cn(
+          'flex items-center w-min [&>svg]:hidden',
+          className,
+        )}
+      >
+        <IconComponent
+          className={cn('block!', currentStatus?.className)}
+          size={16}
+        />
+      </Select.Trigger>
+      <Select.Content className="text-base font-medium shadow-lg">
+        {PHONE_VALIDATION_STATUS_INFOS.map((info) => {
+          const ItemIcon = PhoneIconComponents[info.icon];
+          return (
+            <Select.Item
+              key={info.value}
+              value={info.value}
+              className={cn(
+                'h-cell w-56',
+                currentStatus?.value === info.value && 'bg-muted',
+              )}
+            >
+              <div className="flex flex-row items-center gap-2">
+                <ItemIcon className={cn('', info.className)} size={16} />
+                <span>{info.label}</span>
+              </div>
+            </Select.Item>
+          );
+        })}
+      </Select.Content>
+    </Select>
+  );
+};
+
+export default PhoneVerificationInput;

package/src/modules/record-field/meta-inputs/components/TextFieldInput.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Input, InputProps } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+
+export const TextFieldInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        className={cn('h-cell w-full rounded-none px-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+TextFieldInput.displayName = 'TextFieldInput';

package/src/modules/record-table/components/CheckboxColumn.tsx

@@ -0,0 +1,107 @@
+import { Checkbox } from 'erxes-ui/components/checkbox';
+import { ColumnDef, Row, Table } from '@tanstack/react-table';
+
+const dragSelection = {
+  owner: null as Table<unknown> | null,
+  selecting: false,
+  suppressClickOn: null as { table: Table<unknown>; rowId: string } | null,
+};
+
+const DRAG_END_EVENTS = ['pointerup', 'pointercancel', 'blur'] as const;
+
+const endDragSelection = () => {
+  dragSelection.owner = null;
+  document.body.style.userSelect = '';
+  DRAG_END_EVENTS.forEach((event) =>
+    window.removeEventListener(event, endDragSelection),
+  );
+};
+
+const startDragSelection = <TData,>(
+  selecting: boolean,
+  row: Row<TData>,
+  table: Table<TData>,
+) => {
+  const owner = table as unknown as Table<unknown>;
+  dragSelection.owner = owner;
+  dragSelection.selecting = selecting;
+  dragSelection.suppressClickOn = { table: owner, rowId: row.id };
+  document.body.style.userSelect = 'none';
+  DRAG_END_EVENTS.forEach((event) =>
+    window.addEventListener(event, endDragSelection),
+  );
+};
+
+const CheckboxCell = <TData,>({
+  row,
+  table,
+}: {
+  row: Row<TData>;
+  table: Table<TData>;
+}) => (
+  <div
+    className="flex items-center justify-center size-full"
+    onPointerDown={(event) => {
+      dragSelection.suppressClickOn = null;
+
+      if (!event.shiftKey || event.button !== 0) {
+        return;
+      }
+
+      event.preventDefault();
+      const selecting = !row.getIsSelected();
+      startDragSelection(selecting, row, table);
+      row.toggleSelected(selecting);
+    }}
+    onPointerEnter={(event) => {
+      if (
+        dragSelection.owner !== (table as unknown as Table<unknown>) ||
+        event.buttons !== 1
+      ) {
+        return;
+      }
+
+      row.toggleSelected(dragSelection.selecting);
+    }}
+    onClickCapture={(event) => {
+      const suppressed = dragSelection.suppressClickOn;
+
+      if (
+        suppressed?.table !== (table as unknown as Table<unknown>) ||
+        suppressed.rowId !== row.id
+      ) {
+        return;
+      }
+
+      dragSelection.suppressClickOn = null;
+      event.preventDefault();
+      event.stopPropagation();
+    }}
+  >
+    <Checkbox
+      checked={row.getIsSelected()}
+      onCheckedChange={(value) => row.toggleSelected(!!value)}
+    />
+  </div>
+);
+
+export const checkboxColumn: ColumnDef<any> = {
+  accessorKey: 'checkbox',
+  id: 'checkbox',
+  header: ({ table }) => {
+    const isAllSelected = table.getIsAllPageRowsSelected();
+    const isSomeSelected = table.getIsSomePageRowsSelected();
+
+    return (
+      <div className="flex items-center justify-center h-8">
+        <Checkbox
+          checked={isAllSelected || (isSomeSelected && 'indeterminate')}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all rows"
+        />
+      </div>
+    );
+  },
+  size: 33,
+  cell: ({ row, table }) => <CheckboxCell row={row} table={table} />,
+};

package/src/modules/record-table/components/MoreColumn.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { IconDots } from '@tabler/icons-react';
+
+import { Button, ButtonProps } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib/utils';
+
+export const RecordTableMoreButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      className={cn(
+        'h-8 w-full focus-visible:outline-transparent rounded-none focus-visible:shadow-subtle',
+        className,
+      )}
+      {...props}
+    >
+      {children || <IconDots className="text-muted-foreground" />}
+    </Button>
+  );
+});

package/src/modules/record-table/components/RecordTableArrowEffect.tsx

@@ -0,0 +1,67 @@
+import { Key } from 'erxes-ui/types/Key';
+import { useRecordTableHotkey } from '../contexts/RecordTableHotkeyContext';
+import { useScopedHotkeys } from 'erxes-ui/modules/hotkey';
+
+export const RecordTableArrowEffect = ({
+  columnLength,
+  rowLength,
+}: {
+  columnLength: number;
+  rowLength: number;
+}) => {
+  const { activeCell, setActiveCell, scope } = useRecordTableHotkey();
+  useScopedHotkeys(
+    Key.ArrowRight,
+    () => {
+      if (
+        activeCell[0] === rowLength - 1 &&
+        activeCell[1] === columnLength - 1
+      ) {
+        return;
+      }
+      if (activeCell[1] === columnLength - 1 && activeCell[0] < rowLength) {
+        return setActiveCell([activeCell[0] + 1, 0]);
+      }
+      setActiveCell([activeCell[0], activeCell[1] + 1]);
+    },
+    scope,
+  );
+
+  useScopedHotkeys(
+    Key.ArrowLeft,
+    () => {
+      if (activeCell[0] === 0 && activeCell[1] === 0) {
+        return;
+      }
+      if (activeCell[1] === 0 && activeCell[0] > 0) {
+        return setActiveCell([activeCell[0] - 1, columnLength - 1]);
+      }
+      setActiveCell([activeCell[0], activeCell[1] - 1]);
+    },
+    scope,
+  );
+
+  useScopedHotkeys(
+    Key.ArrowUp,
+    () => {
+      if (activeCell[0] === 0) {
+        return;
+      }
+      setActiveCell([activeCell[0] - 1, activeCell[1]]);
+    },
+    scope,
+  );
+
+  useScopedHotkeys(
+    Key.ArrowDown,
+    () => {
+      if (activeCell[0] === rowLength - 1) {
+        return;
+      }
+      setActiveCell([activeCell[0] + 1, activeCell[1]]);
+    },
+    scope,
+  );
+
+  return null;
+};

package/src/modules/record-table/components/RecordTableCell.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Cell } from '@tanstack/react-table';
+
+import { Table } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib/utils';
+
+export const RecordTableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.HTMLAttributes<HTMLTableCellElement> & { cell: Cell<any, unknown> }
+>(({ children, className, cell, style, ...props }, ref) => {
+  const { column } = cell;
+
+  return (
+    <Table.Cell
+      ref={ref}
+      className={cn(
+        'p-0 transition-colors isolate',
+        column.getIsPinned() && [
+          'sticky z-1',
+          'bg-background',
+          'group-hover/table-row:bg-background',
+          'group-data-[state=selected]/table-row:bg-background',
+          'before:content-[""] before:absolute before:inset-0 before:-z-1',
+          'group-hover/table-row:before:bg-muted',
+          'group-data-[state=selected]/table-row:before:bg-primary/10',
+        ],
+        className,
+      )}
+      style={{
+        width: `var(--col-${column.id}-width)`,
+        left:
+          column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </Table.Cell>
+  );
+});

package/src/modules/record-table/components/RecordTableCellInline.tsx

@@ -0,0 +1,104 @@
+import { Badge, Button, Popover } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib/utils';
+import React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { UseHotkeysOptionsWithoutBuggyOptions } from 'erxes-ui/modules/hotkey';
+
+export interface ReactTablePopoverProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
+  scope?: string;
+  closeOnEnter?: boolean;
+  scopeOptions?: UseHotkeysOptionsWithoutBuggyOptions;
+}
+
+const RecordTableCellTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentPropsWithoutRef<typeof Button>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <Popover.Trigger asChild>
+      <Button
+        variant="ghost"
+        className={cn(
+          'h-8 px-2 w-full justify-start text-left rounded-none focus-visible:relative focus-visible:z-10 focus-visible:outline-none focus-visible:shadow-subtle overflow-hidden',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Button>
+    </Popover.Trigger>
+  );
+});
+
+const RecordTableCellContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, ...props }, ref) => {
+  return (
+    <Popover.Content
+      align="start"
+      sideOffset={-32}
+      disableTransition
+      className={cn(
+        'p-0 w-(--radix-popper-anchor-width) min-w-56 rounded',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+RecordTableCellTrigger.displayName = 'RecordTableCellTrigger';
+
+const RecordTableCellDisplay = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentPropsWithoutRef<typeof Button>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <Button
+      variant="ghost"
+      className={cn(
+        'h-8 px-2 w-full justify-start text-left font-normal rounded-none overflow-hidden',
+        className,
+      )}
+      ref={ref}
+      asChild
+      tabIndex={-1}
+      {...props}
+    >
+      <div>{children}</div>
+    </Button>
+  );
+});
+
+RecordTableCellDisplay.displayName = 'RecordTableCellDisplay';
+
+export const RecordTableInlineAnchor = React.forwardRef<
+  React.ElementRef<typeof Badge>,
+  React.ComponentPropsWithoutRef<typeof Badge>
+>(({ className, onClick, children, ...props }, ref) => {
+  return (
+    <Badge
+      ref={ref}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick?.(e);
+      }}
+      variant="secondary"
+      className={cn('min-w-32 group truncate', className)}
+      {...props}
+    >
+      {children}
+    </Badge>
+  );
+});
+RecordTableInlineAnchor.displayName = 'RecordTableInlineAnchor';
+
+export const RecordTableInlineCell = Object.assign(RecordTableCellDisplay, {
+  Trigger: RecordTableCellTrigger,
+  Content: RecordTableCellContent,
+  Anchor: RecordTableInlineAnchor,
+});