@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/modules/inputs/components/SexField.tsx

@@ -0,0 +1,31 @@
+import { Combobox, Command } from 'erxes-ui/components';
+import { SexCodes } from 'erxes-ui/constants';
+import { SexCode } from 'erxes-ui/types';
+
+export const SexField = ({
+  value,
+  onValueChange,
+}: {
+  value: SexCode;
+  onValueChange: (value: SexCode) => void;
+}) => {
+  return (
+    <Command>
+      <Command.Input />
+      <Command.List>
+        {Object.entries(SexCodes).map(([key, val]) => (
+          <Command.Item
+            key={key}
+            value={val.label}
+            onSelect={() => {
+              onValueChange(Number(key) as SexCode);
+            }}
+          >
+            {val.label}
+            <Combobox.Check checked={value === Number(key)} />
+          </Command.Item>
+        ))}
+      </Command.List>
+    </Command>
+  );
+};

package/src/modules/inputs/components/TimezoneSelect.tsx

@@ -0,0 +1,48 @@
+import { Combobox, Command, Popover } from 'erxes-ui/components';
+import { IANA_TIME_ZONES } from 'erxes-ui/constants/IanaTimeZones';
+import { formatTimeZoneLabel } from 'erxes-ui/utils/localization/formatTimeZoneLabel';
+import React, { useState } from 'react';
+
+export const TimezoneSelect = React.forwardRef<
+  React.ElementRef<typeof Combobox.Trigger>,
+  React.ComponentProps<typeof Combobox.Trigger> & {
+    value: string;
+    onValueChange: (value: string) => void;
+  }
+>(({ value, onValueChange, ...props }, ref) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Combobox.Trigger ref={ref} {...props}>
+        {/* Nothing chosen is a real state - an organization that has never set
+            a zone stores none - and the formatter throws on an empty one. The
+            placeholder is what that state looks like. */}
+        <Combobox.Value
+          placeholder="Select timezone"
+          value={value ? formatTimeZoneLabel(value) : undefined}
+        />
+      </Combobox.Trigger>
+      <Combobox.Content>
+        <Command>
+          <Command.Input />
+          <Command.List>
+            <Command.Empty>no timezone found</Command.Empty>
+            {IANA_TIME_ZONES.map((timezone) => (
+              <Command.Item
+                key={timezone}
+                value={timezone}
+                onSelect={() => {
+                  onValueChange(timezone);
+                  setOpen(false);
+                }}
+              >
+                {formatTimeZoneLabel(timezone)}
+                <Combobox.Check checked={timezone === value} />
+              </Command.Item>
+            ))}
+          </Command.List>
+        </Command>
+      </Combobox.Content>
+    </Popover>
+  );
+});

package/src/modules/inputs/contexts/EmailFieldsContext.tsx

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import { TEmails } from '../components/EmailField';
+import { ValidationStatus } from 'erxes-ui/types';
+
+export const EmailFieldsContext = createContext<{
+  recordId: string;
+  onValueChange?: (emails: TEmails) => void;
+  noValidation?: boolean;
+  onValidationStatusChange?: (status: ValidationStatus) => void;
+}>({
+  recordId: '',
+  onValueChange: undefined,
+  noValidation: false,
+  onValidationStatusChange: undefined,
+});

package/src/modules/inputs/contexts/FullNameFieldContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export const FullNameFieldContext = createContext<{
+  fullName: string;
+  firstName: string;
+  lastName: string;
+  setFirstName: (firstName: string) => void;
+  setLastName: (lastName: string) => void;
+} | null>(null);

package/src/modules/inputs/contexts/PhoneFieldsContext.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { IPhoneStatus, TPhones } from '../components/PhoneField';
+
+export const PhoneFieldsContext = createContext<{
+  recordId: string;
+  onValueChange?: (phones: TPhones) => void;
+  onValidationStatusChange?: (status: IPhoneStatus) => void;
+}>({
+  recordId: '',
+  onValueChange: undefined,
+  onValidationStatusChange: undefined,
+});

package/src/modules/inputs/hooks/useEmailFields.tsx

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { EmailFieldsContext } from '../contexts/EmailFieldsContext';
+
+export const useEmailFields = () => useContext(EmailFieldsContext);

package/src/modules/inputs/hooks/useFullNameField.tsx

@@ -0,0 +1,12 @@
+import { FullNameFieldContext } from 'erxes-ui/modules/inputs/contexts/FullNameFieldContext';
+import { useContext } from 'react';
+
+export const useFullNameField = () => {
+  const context = useContext(FullNameFieldContext);
+  if (!context) {
+    throw new Error(
+      'useFullNameField must be used within a FullNameFieldProvider',
+    );
+  }
+  return context;
+};

package/src/modules/inputs/hooks/usePhoneFields.tsx

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { PhoneFieldsContext } from '../contexts/PhoneFieldsContext';
+
+export const usePhoneFields = () => useContext(PhoneFieldsContext);

package/src/modules/inputs/index.ts

@@ -0,0 +1,8 @@
+export * from './components/FullNameField';
+export * from './components/EmailField';
+export * from './components/PhoneField';
+export * from './components/CurrencyField';
+export * from './components/SexField';
+export * from './components/TimezoneSelect';
+export * from './components/LanguageSelect';
+export * from './components/NumberField';

package/src/modules/inputs/states/emailFieldStates.ts

@@ -0,0 +1,15 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { TEmails } from '../components/EmailField';
+
+export const showEmailInputFamilyState = atomFamily((recordId: string) =>
+  atom(false),
+);
+
+export const emailsFamilyState = atomFamily((recordId: string) =>
+  atom<TEmails>([]),
+);
+
+export const editingEmailFamilyState = atomFamily((recordId: string) =>
+  atom<string | null>(null),
+);

package/src/modules/inputs/states/phoneFieldStates.ts

@@ -0,0 +1,15 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { TPhones } from '../components/PhoneField';
+
+export const showPhoneInputFamilyState = atomFamily((recordId: string) =>
+  atom(false),
+);
+
+export const phonesFamilyState = atomFamily((recordId: string) =>
+  atom<TPhones>([]),
+);
+
+export const editingPhoneFamilyState = atomFamily((recordId: string) =>
+  atom<string | null>(null),
+);

package/src/modules/inputs/validations/emailValidation.ts

@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const emailSchema = z.object({
+    email: z.string().email("")
+  });
+  
+  

package/src/modules/inputs/validations/phoneValidation.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const phoneSchema = z.object({
+  phone: z
+    .string()
+    .min(8, 'Phone number must be at least 8 characters')
+    .max(16, 'Phone number must not exceed 16 characters')
+    .regex(
+      /^\+?[\d]+$/,
+      'Phone number can only contain digits and + prefix',
+    ),
+});

package/src/modules/layout/components/Page.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { cn } from 'erxes-ui/lib';
+
+export const PageContainer = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+  }
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn('flex flex-col h-full overflow-hidden', className)}
+      {...props}
+    >
+      {children || 'Page'}
+    </div>
+  );
+});
+
+export const PageSubHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex-none bg-background px-3 py-2 border-b flex gap-3 h-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+PageContainer.displayName = 'PageContainer';

package/src/modules/layout/index.ts

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

package/src/modules/motion/components/TextEffect.tsx

@@ -0,0 +1,288 @@
+import { cn } from 'erxes-ui/lib';
+import type {
+  TargetAndTransition,
+  Transition,
+  Variant,
+  Variants,
+} from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+import React from 'react';
+
+export type PresetType = 'blur-sm' | 'fade-in-blur' | 'scale' | 'fade' | 'slide';
+
+export type PerType = 'word' | 'char' | 'line';
+
+export type TextEffectProps = {
+  children: string;
+  per?: PerType;
+  as?: keyof React.JSX.IntrinsicElements;
+  variants?: {
+    container?: Variants;
+    item?: Variants;
+  };
+  className?: string;
+  preset?: PresetType;
+  delay?: number;
+  speedReveal?: number;
+  speedSegment?: number;
+  trigger?: boolean;
+  onAnimationComplete?: () => void;
+  onAnimationStart?: () => void;
+  segmentWrapperClassName?: string;
+  containerTransition?: Transition;
+  segmentTransition?: Transition;
+  style?: React.CSSProperties;
+};
+
+const defaultStaggerTimes: Record<PerType, number> = {
+  char: 0.03,
+  word: 0.05,
+  line: 0.1,
+};
+
+const defaultContainerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+  exit: {
+    transition: { staggerChildren: 0.05, staggerDirection: -1 },
+  },
+};
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+  },
+  exit: { opacity: 0 },
+};
+
+const presetVariants: Record<
+  PresetType,
+  { container: Variants; item: Variants }
+> = {
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, filter: 'blur(12px)' },
+      visible: { opacity: 1, filter: 'blur(0px)' },
+      exit: { opacity: 0, filter: 'blur(12px)' },
+    },
+  },
+  'fade-in-blur': {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20, filter: 'blur(12px)' },
+      visible: { opacity: 1, y: 0, filter: 'blur(0px)' },
+      exit: { opacity: 0, y: 20, filter: 'blur(12px)' },
+    },
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0 },
+      visible: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0 },
+    },
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 },
+      exit: { opacity: 0 },
+    },
+  },
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      visible: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 20 },
+    },
+  },
+};
+
+const AnimationComponent: React.FC<{
+  segment: string;
+  variants: Variants;
+  per: 'line' | 'word' | 'char';
+  segmentWrapperClassName?: string;
+}> = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {
+  const content =
+    per === 'line' ? (
+      <motion.span variants={variants} className="block">
+        {segment}
+      </motion.span>
+    ) : per === 'word' ? (
+      <motion.span
+        aria-hidden="true"
+        variants={variants}
+        className="inline-block whitespace-pre"
+      >
+        {segment}
+      </motion.span>
+    ) : (
+      <motion.span className="inline-block whitespace-pre">
+        {segment.split('').map((char, charIndex) => (
+          <motion.span
+            key={`char-${charIndex}`}
+            aria-hidden="true"
+            variants={variants}
+            className="inline-block whitespace-pre"
+          >
+            {char}
+          </motion.span>
+        ))}
+      </motion.span>
+    );
+
+  if (!segmentWrapperClassName) {
+    return content;
+  }
+
+  const defaultWrapperClassName = per === 'line' ? 'block' : 'inline-block';
+
+  return (
+    <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
+      {content}
+    </span>
+  );
+});
+
+AnimationComponent.displayName = 'AnimationComponent';
+
+const splitText = (text: string, per: PerType) => {
+  if (per === 'line') return text.split('\n');
+  return text.split(/(\s+)/);
+};
+
+const hasTransition = (
+  variant?: Variant,
+): variant is TargetAndTransition & { transition?: Transition } => {
+  if (!variant) return false;
+  return typeof variant === 'object' && 'transition' in variant;
+};
+
+const createVariantsWithTransition = (
+  baseVariants: Variants,
+  transition?: Transition & { exit?: Transition },
+): Variants => {
+  if (!transition) return baseVariants;
+
+  const { exit: _, ...mainTransition } = transition;
+
+  return {
+    ...baseVariants,
+    visible: {
+      ...baseVariants.visible,
+      transition: {
+        ...(hasTransition(baseVariants.visible)
+          ? baseVariants.visible.transition
+          : {}),
+        ...mainTransition,
+      },
+    },
+    exit: {
+      ...baseVariants.exit,
+      transition: {
+        ...(hasTransition(baseVariants.exit)
+          ? baseVariants.exit.transition
+          : {}),
+        ...mainTransition,
+        staggerDirection: -1,
+      },
+    },
+  };
+};
+
+export function TextEffect({
+  children,
+  per = 'word',
+  as = 'p',
+  variants,
+  className,
+  preset = 'fade',
+  delay = 0,
+  speedReveal = 1,
+  speedSegment = 1,
+  trigger = true,
+  onAnimationComplete,
+  onAnimationStart,
+  segmentWrapperClassName,
+  containerTransition,
+  segmentTransition,
+  style,
+}: TextEffectProps) {
+  const segments = splitText(children, per);
+  const MotionTag = motion[as as keyof typeof motion] as typeof motion.div;
+
+  const baseVariants = preset
+    ? presetVariants[preset]
+    : { container: defaultContainerVariants, item: defaultItemVariants };
+
+  const stagger = defaultStaggerTimes[per] / speedReveal;
+
+  const baseDuration = 0.3 / speedSegment;
+
+  const customStagger = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+      ?.staggerChildren
+    : undefined;
+
+  const customDelay = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+      ?.delayChildren
+    : undefined;
+
+  const computedVariants = {
+    container: createVariantsWithTransition(
+      variants?.container || baseVariants.container,
+      {
+        staggerChildren: customStagger ?? stagger,
+        delayChildren: customDelay ?? delay,
+        ...containerTransition,
+        exit: {
+          staggerChildren: customStagger ?? stagger,
+          staggerDirection: -1,
+        },
+      },
+    ),
+    item: createVariantsWithTransition(variants?.item || baseVariants.item, {
+      duration: baseDuration,
+      ...segmentTransition,
+    }),
+  };
+
+  return (
+    <AnimatePresence mode="popLayout">
+      {trigger && (
+        <MotionTag
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          variants={computedVariants.container}
+          className={className}
+          onAnimationComplete={onAnimationComplete}
+          onAnimationStart={onAnimationStart}
+          style={style}
+        >
+          {per !== 'line' ? <span className="sr-only">{children}</span> : null}
+          {segments.map((segment, index) => (
+            <AnimationComponent
+              key={`${per}-${index}-${segment}`}
+              segment={segment}
+              variants={computedVariants.item}
+              per={per}
+              segmentWrapperClassName={segmentWrapperClassName}
+            />
+          ))}
+        </MotionTag>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/modules/motion/components/TextLoop.tsx

@@ -0,0 +1,71 @@
+import { cn } from 'erxes-ui/lib';
+import {
+  motion,
+  AnimatePresence,
+  Transition,
+  Variants,
+  AnimatePresenceProps,
+} from 'motion/react';
+import { useState, useEffect, Children } from 'react';
+
+export type TextLoopProps = {
+  children: React.ReactNode[];
+  className?: string;
+  interval?: number;
+  transition?: Transition;
+  variants?: Variants;
+  onIndexChange?: (index: number) => void;
+  trigger?: boolean;
+  mode?: AnimatePresenceProps['mode'];
+};
+
+export function TextLoop({
+  children,
+  className,
+  interval = 2,
+  transition = { duration: 0.3 },
+  variants,
+  onIndexChange,
+  trigger = true,
+  mode = 'popLayout',
+}: TextLoopProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const items = Children.toArray(children);
+
+  useEffect(() => {
+    if (!trigger) return;
+
+    const intervalMs = interval * 1000;
+    const timer = setInterval(() => {
+      setCurrentIndex((current) => {
+        const next = (current + 1) % items.length;
+        onIndexChange?.(next);
+        return next;
+      });
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [items.length, interval, onIndexChange, trigger]);
+
+  const motionVariants: Variants = {
+    initial: { y: 20, opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: -20, opacity: 0 },
+  };
+
+  return (
+    <div className={cn('relative inline-block whitespace-nowrap', className)}>
+      <AnimatePresence mode={mode} initial={false}>
+        <motion.div
+          key={currentIndex}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          transition={transition}
+          variants={variants || motionVariants}
+        >
+          {items[currentIndex]}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/modules/motion/index.ts

@@ -0,0 +1,2 @@
+export * from './components/TextLoop';
+export * from './components/TextEffect';