@connectycube/react-ui-kit 0.0.20 → 0.1.0

package/src/components/call-message.tsx

@@ -1,75 +0,0 @@
-import type React from 'react';
-import { forwardRef, memo } from 'react';
-import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing, type LucideProps } from 'lucide-react';
-import { FormattedDate, type FormattedDateProps } from './formatted-date';
-import { cn } from './utils';
-
-interface CallMessageProps extends React.ComponentProps<'div'> {
-  signal?: 'reject' | 'notAnswer' | 'hungUp' | 'cancel' | undefined;
-  info?: string | undefined;
-  duration?: number | undefined;
-  fromMe: boolean;
-  isLast: boolean;
-  iconElement?: React.ReactNode;
-  iconProps?: LucideProps;
-  infoProps?: React.ComponentProps<'span'>;
-  formattedDateProps?: FormattedDateProps;
-}
-
-function formatDuration(seconds: number): string {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  const s = seconds % 60;
-  const pad = (num: number) => String(num).padStart(2, '0');
-
-  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
-}
-
-function CallMessageBase(
-  {
-    signal,
-    info,
-    duration = 0,
-    fromMe = false,
-    isLast = false,
-    iconElement,
-    iconProps,
-    infoProps,
-    formattedDateProps,
-    ...props
-  }: CallMessageProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const CallIcon =
-    signal === 'hungUp' ? Phone : fromMe ? (signal === 'reject' ? PhoneIncoming : PhoneOutgoing) : PhoneMissed;
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      className={cn(
-        'flex items-center justify-center gap-2 rounded-full w-fit bg-ring/20 mx-auto px-3 py-1.5',
-        isLast ? 'my-2' : 'mt-2',
-        props?.className
-      )}
-    >
-      {iconElement || (
-        <CallIcon
-          {...iconProps}
-          className={cn('size-4', signal === 'hungUp' ? 'text-green-500' : 'text-red-500', iconProps?.className)}
-        />
-      )}
-      <span
-        {...infoProps}
-        className={cn('text-sm mb-px', infoProps?.className)}
-      >{`${info}${duration ? ` - ${formatDuration(duration)}` : ''}`}</span>
-      <FormattedDate distanceToNow {...formattedDateProps} />
-    </div>
-  );
-}
-
-const CallMessage = memo(forwardRef<HTMLDivElement, CallMessageProps>(CallMessageBase));
-
-CallMessage.displayName = 'CallMessage';
-
-export { CallMessage, type CallMessageProps };

package/src/components/chat-message.tsx

@@ -1,138 +0,0 @@
-import type React from 'react';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { useInView } from 'react-intersection-observer';
-import { Attachment, type AttachmentProps } from './attachment';
-import { Avatar, type AvatarProps } from './avatar';
-import { FormattedDate, type FormattedDateProps } from './formatted-date';
-import { LinkifyText, type LinkifyTextProps } from './linkify-text';
-import { LinkPreview, type LinkPreviewProps } from './link-preview';
-import { StatusSent, type StatusSentProps } from './status-sent';
-import { cn } from './utils';
-
-interface ChatMessageProps extends React.ComponentProps<'div'> {
-  isLast: boolean;
-  fromMe: boolean;
-  sameSenderAbove: boolean;
-  title?: string;
-  senderName?: string;
-  senderAvatar?: string;
-  attachmentElement?: React.ReactNode;
-  linkifyTextElement?: React.ReactNode;
-  linkPreviewElement?: React.ReactNode;
-  onView?: () => void;
-  avatarProps?: AvatarProps;
-  bubbleProps?: React.ComponentProps<'div'>;
-  titleProps?: React.ComponentProps<'span'>;
-  formattedDateProps?: FormattedDateProps;
-  statusSentProps?: StatusSentProps;
-  attachmentProps?: AttachmentProps;
-  linkifyTextProps?: LinkifyTextProps;
-  linkPreviewProps?: LinkPreviewProps;
-}
-
-function ChatMessageBase(
-  {
-    isLast,
-    fromMe,
-    sameSenderAbove,
-    title,
-    senderName,
-    senderAvatar,
-    attachmentElement,
-    linkifyTextElement,
-    linkPreviewElement,
-    onView = () => {},
-    avatarProps,
-    bubbleProps,
-    titleProps,
-    formattedDateProps,
-    statusSentProps,
-    attachmentProps,
-    linkifyTextProps,
-    linkPreviewProps,
-    children,
-    ...props
-  }: ChatMessageProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const [setRef, inView] = useInView();
-  const messageRef = useRef<HTMLDivElement>(null);
-  const setRefs = useCallback(
-    (node: HTMLDivElement) => {
-      messageRef.current = node;
-      setRef(node);
-    },
-    [setRef]
-  );
-  const hasAvatar = Boolean((avatarProps || senderAvatar) && !sameSenderAbove);
-  const hasAvatarMargin = Boolean((avatarProps || senderAvatar) && sameSenderAbove);
-  const hasThinMarginTop = hasAvatarMargin || Boolean(fromMe && sameSenderAbove);
-
-  useEffect(() => {
-    if (inView) {
-      onView();
-    }
-  }, [inView, onView]);
-
-  useImperativeHandle(ref, () => messageRef.current!, []);
-
-  return (
-    <div
-      ref={setRefs}
-      {...props}
-      className={cn(
-        `flex relative text-left whitespace-pre-wrap`,
-        fromMe ? 'self-end flex-row-reverse ml-12' : `self-start mr-12`,
-        isLast && 'mb-2',
-        hasThinMarginTop ? 'mt-1' : 'mt-2',
-        inView && 'view',
-        props?.className
-      )}
-    >
-      {hasAvatar && (
-        <Avatar
-          name={senderName}
-          src={senderAvatar}
-          imageProps={{ className: 'bg-ring/30' }}
-          fallbackProps={{ className: 'bg-ring/30' }}
-          {...avatarProps}
-          className={cn('mt-1 mr-1', avatarProps?.className)}
-        />
-      )}
-
-      <div
-        className={cn(
-          'relative flex flex-col min-w-42 max-w-120 rounded-xl px-2 pt-2 pb-6',
-          fromMe ? 'bg-blue-200' : 'bg-gray-200',
-          hasAvatarMargin && 'ml-9',
-          bubbleProps?.className
-        )}
-      >
-        {(title || senderName) && (
-          <span
-            {...titleProps}
-            className={cn(
-              'font-semibold',
-              title && 'mb-1 py-1.5 text-xs text-muted-foreground italic border-b',
-              titleProps?.className
-            )}
-          >
-            {title || senderName}
-          </span>
-        )}
-        {children}
-        {attachmentElement || (attachmentProps ? <Attachment {...attachmentProps} /> : null)}
-        {linkifyTextElement || (linkifyTextProps ? <LinkifyText {...linkifyTextProps} /> : null)}
-        {linkPreviewElement || (linkPreviewProps ? <LinkPreview {...linkPreviewProps} /> : null)}
-        <div className="absolute bottom-1 right-2 flex items-center gap-1 italic">
-          <FormattedDate distanceToNow {...formattedDateProps} />
-          <StatusSent {...statusSentProps} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const ChatMessage = memo(forwardRef<HTMLDivElement, ChatMessageProps>(ChatMessageBase));
-
-export { ChatMessage, type ChatMessageProps };