@connectycube/react-ui-kit 0.1.0 → 0.1.2

package/src/components/connectycube-ui/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 };

package/src/components/connectycube-ui/dialog-item.jsx

@@ -1,149 +0,0 @@
-import { forwardRef, memo } from 'react';
-import { Users } from 'lucide-react';
-import { cn } from './utils';
-import { Avatar } from './avatar';
-import { StatusSent } from './status-sent';
-import { FormattedDate } from './formatted-date';
-import { Badge } from './badge';
-
-function DialogItemBase(
-  {
-    index = -1,
-    isPrivateDialog,
-    selected,
-    onSelect = () => {},
-    name,
-    photo,
-    userOnline,
-    userPresence,
-    hasGroupIcon,
-    lastSentStatus,
-    lastSentDate,
-    lastSenderName,
-    lastMessage,
-    typingStatusText,
-    draft,
-    draftLabel = 'Draft',
-    unreadCount = 0,
-    language = 'en',
-    divider = 'bottom',
-    avatarProps,
-    contentProps,
-    headerProps,
-    headerLeftProps,
-    groupIconProps,
-    nameProps,
-    headerRightProps,
-    statusSentIconProps,
-    formattedDateProps,
-    footerProps,
-    lastMessageProps,
-    draftLabelProps,
-    lastSenderNameProps,
-    unreadBadgeProps,
-    dividerProps,
-    ...props
-  },
-  ref
-) {
-  const avatarSource = photo || avatarProps?.src;
-  const avatarFallback = name || avatarProps?.name;
-  const avatarOnline = isPrivateDialog ? userOnline || avatarProps?.online : false;
-  const avatarPresence = isPrivateDialog ? userPresence || avatarProps?.presence : undefined;
-  const showTopDivider = divider === 'top' || (divider === 'both' && index === 0);
-  const showBottomDivider = divider === 'bottom' || divider === 'both';
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      onClick={onSelect}
-      className={cn(
-        'flex items-start gap-2 px-2 flex-1 cursor-pointer',
-        'transition-colors duration-200 ease-linear',
-        `${selected ? 'border-l-[0.25em] pl-1 border-l-ring bg-ring/20' : 'hover:bg-ring/5'}`,
-        props?.className
-      )}
-    >
-      <Avatar
-        src={avatarSource}
-        name={avatarFallback}
-        online={avatarOnline}
-        presence={avatarPresence}
-        {...avatarProps}
-        className={cn(`size-13 my-2 ${photo ? 'bg-ring/10' : 'bg-ring/30'}`, avatarProps?.className)}
-      />
-
-      <div
-        {...contentProps}
-        className={cn('relative self-stretch flex-1 flex-col text-foreground', contentProps?.className)}
-      >
-        <div {...headerProps} className={cn('flex items-center justify-between gap-1', headerProps?.className)}>
-          <div {...headerLeftProps} className={cn('flex items-center gap-1', headerLeftProps?.className)}>
-            {!isPrivateDialog && hasGroupIcon && (
-              <Users
-                {...groupIconProps}
-                className={cn('text-muted-foreground size-4 min-w-4', groupIconProps?.className)}
-              />
-            )}
-            <span {...nameProps} className={cn('font-medium text-left line-clamp-1', nameProps?.className)}>
-              {name}
-            </span>
-          </div>
-          <div {...headerRightProps} className={cn('flex items-center gap-1', headerRightProps?.className)}>
-            <StatusSent status={lastSentStatus} {...statusSentIconProps} />
-            <FormattedDate date={lastSentDate} language={language} {...formattedDateProps} />
-          </div>
-        </div>
-        <div {...footerProps} className={cn('flex items-start justify-between gap-1', footerProps?.className)}>
-          <span
-            {...lastMessageProps}
-            className={cn('text-sm text-left text-muted-foreground line-clamp-2', lastMessageProps?.className)}
-          >
-            {typingStatusText ||
-              (draft ? (
-                <span>
-                  <span
-                    {...draftLabelProps}
-                    className={cn('text-red-500 font-medium', draftLabelProps?.className)}
-                  >{`${draftLabel}: `}</span>
-                  {draft}
-                </span>
-              ) : (
-                <span>
-                  {lastSenderName && (
-                    <span
-                      {...lastSenderNameProps}
-                      className={cn('font-semibold', lastSenderNameProps?.className)}
-                    >{`${lastSenderName}: `}</span>
-                  )}
-                  {lastMessage}
-                </span>
-              ))}
-          </span>
-          {unreadCount > 0 && (
-            <Badge
-              {...unreadBadgeProps}
-              className={cn(
-                'bg-ring text-background text-xs rounded-full p-1 h-6 min-w-6 mt-0.5',
-                unreadBadgeProps?.className
-              )}
-            >
-              {unreadCount}
-            </Badge>
-          )}
-        </div>
-        {showTopDivider && (
-          <div {...dividerProps} className={cn('absolute -top-px left-0 right-0 border-t', dividerProps?.className)} />
-        )}
-        {showBottomDivider && <div className="absolute bottom-0 left-0 right-0 border-b" />}
-      </div>
-    </div>
-  );
-}
-
-const DialogItem = memo(forwardRef(DialogItemBase));
-
-DialogItem.displayName = 'DialogItem';
-
-export { DialogItem };

package/src/components/connectycube-ui/dialog-item.tsx

@@ -1,188 +0,0 @@
-import type React from 'react';
-import { forwardRef, memo } from 'react';
-import { Users, type LucideProps } from 'lucide-react';
-import { cn } from './utils';
-import { Avatar, type AvatarProps } from './avatar';
-import { type PresenceStatus } from './presence';
-import { StatusSent, type StatusSentProps } from './status-sent';
-import { FormattedDate, type FormattedDateProps } from './formatted-date';
-import { Badge, type BadgeProps } from './badge';
-
-interface DialogItemProps extends React.ComponentProps<'div'> {
-  index?: number;
-  isPrivateDialog?: boolean;
-  selected?: boolean;
-  onSelect?: () => void;
-  name: string;
-  photo?: string;
-  userOnline?: boolean;
-  userPresence?: PresenceStatus;
-  hasGroupIcon?: boolean;
-  lastSentStatus?: StatusSentProps['status'];
-  lastSentDate?: FormattedDateProps['date'];
-  lastSenderName?: string;
-  lastMessage?: string;
-  typingStatusText?: string;
-  draft?: string;
-  draftLabel?: string;
-  unreadCount?: number;
-  language?: string;
-  divider?: 'top' | 'bottom' | 'both' | 'none';
-  avatarProps?: AvatarProps;
-  contentProps?: React.ComponentProps<'div'>;
-  headerProps?: React.ComponentProps<'div'>;
-  headerLeftProps?: React.ComponentProps<'div'>;
-  groupIconProps?: LucideProps;
-  nameProps?: React.ComponentProps<'span'>;
-  headerRightProps?: React.ComponentProps<'div'>;
-  statusSentIconProps?: StatusSentProps;
-  formattedDateProps?: FormattedDateProps;
-  footerProps?: React.ComponentProps<'div'>;
-  lastMessageProps?: React.ComponentProps<'span'>;
-  draftLabelProps?: React.ComponentProps<'span'>;
-  lastSenderNameProps?: React.ComponentProps<'span'>;
-  unreadBadgeProps?: BadgeProps;
-  dividerProps?: React.ComponentProps<'div'>;
-}
-
-function DialogItemBase(
-  {
-    index = -1,
-    isPrivateDialog,
-    selected,
-    onSelect = () => {},
-    name,
-    photo,
-    userOnline,
-    userPresence,
-    hasGroupIcon,
-    lastSentStatus,
-    lastSentDate,
-    lastSenderName,
-    lastMessage,
-    typingStatusText,
-    draft,
-    draftLabel = 'Draft',
-    unreadCount = 0,
-    language = 'en',
-    divider = 'bottom',
-    avatarProps,
-    contentProps,
-    headerProps,
-    headerLeftProps,
-    groupIconProps,
-    nameProps,
-    headerRightProps,
-    statusSentIconProps,
-    formattedDateProps,
-    footerProps,
-    lastMessageProps,
-    draftLabelProps,
-    lastSenderNameProps,
-    unreadBadgeProps,
-    dividerProps,
-    ...props
-  }: DialogItemProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const avatarSource = photo || avatarProps?.src;
-  const avatarFallback = name || avatarProps?.name;
-  const avatarOnline = isPrivateDialog ? userOnline || avatarProps?.online : false;
-  const avatarPresence = isPrivateDialog ? userPresence || avatarProps?.presence : undefined;
-  const showTopDivider = divider === 'top' || (divider === 'both' && index === 0);
-  const showBottomDivider = divider === 'bottom' || divider === 'both';
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      onClick={onSelect}
-      className={cn(
-        'flex items-start gap-2 px-2 flex-1 cursor-pointer',
-        'transition-colors duration-200 ease-linear',
-        `${selected ? 'border-l-[0.25em] pl-1 border-l-ring bg-ring/20' : 'hover:bg-ring/5'}`,
-        props?.className
-      )}
-    >
-      <Avatar
-        src={avatarSource}
-        name={avatarFallback}
-        online={avatarOnline}
-        presence={avatarPresence}
-        {...avatarProps}
-        className={cn(`size-13 my-2 ${photo ? 'bg-ring/10' : 'bg-ring/30'}`, avatarProps?.className)}
-      />
-
-      <div
-        {...contentProps}
-        className={cn('relative self-stretch flex-1 flex-col text-foreground', contentProps?.className)}
-      >
-        <div {...headerProps} className={cn('flex items-center justify-between gap-1', headerProps?.className)}>
-          <div {...headerLeftProps} className={cn('flex items-center gap-1', headerLeftProps?.className)}>
-            {!isPrivateDialog && hasGroupIcon && (
-              <Users
-                {...groupIconProps}
-                className={cn('text-muted-foreground size-4 min-w-4', groupIconProps?.className)}
-              />
-            )}
-            <span {...nameProps} className={cn('font-medium text-left line-clamp-1', nameProps?.className)}>
-              {name}
-            </span>
-          </div>
-          <div {...headerRightProps} className={cn('flex items-center gap-1', headerRightProps?.className)}>
-            <StatusSent status={lastSentStatus} {...statusSentIconProps} />
-            <FormattedDate date={lastSentDate} language={language} {...formattedDateProps} />
-          </div>
-        </div>
-        <div {...footerProps} className={cn('flex items-start justify-between gap-1', footerProps?.className)}>
-          <span
-            {...lastMessageProps}
-            className={cn('text-sm text-left text-muted-foreground line-clamp-2', lastMessageProps?.className)}
-          >
-            {typingStatusText ||
-              (draft ? (
-                <span>
-                  <span
-                    {...draftLabelProps}
-                    className={cn('text-red-500 font-medium', draftLabelProps?.className)}
-                  >{`${draftLabel}: `}</span>
-                  {draft}
-                </span>
-              ) : (
-                <span>
-                  {lastSenderName && (
-                    <span
-                      {...lastSenderNameProps}
-                      className={cn('font-semibold', lastSenderNameProps?.className)}
-                    >{`${lastSenderName}: `}</span>
-                  )}
-                  {lastMessage}
-                </span>
-              ))}
-          </span>
-          {unreadCount > 0 && (
-            <Badge
-              {...unreadBadgeProps}
-              className={cn(
-                'bg-ring text-background text-xs rounded-full p-1 h-6 min-w-6 mt-0.5',
-                unreadBadgeProps?.className
-              )}
-            >
-              {unreadCount}
-            </Badge>
-          )}
-        </div>
-        {showTopDivider && (
-          <div {...dividerProps} className={cn('absolute -top-px left-0 right-0 border-t', dividerProps?.className)} />
-        )}
-        {showBottomDivider && <div className="absolute bottom-0 left-0 right-0 border-b" />}
-      </div>
-    </div>
-  );
-}
-
-const DialogItem = memo(forwardRef<HTMLDivElement, DialogItemProps>(DialogItemBase));
-
-DialogItem.displayName = 'DialogItem';
-
-export { DialogItem };

package/src/components/connectycube-ui/file-picker.jsx

@@ -1,200 +0,0 @@
-import { forwardRef, useState } from 'react';
-import { FilePlusCorner, Paperclip } from 'lucide-react';
-import { Label } from './label';
-import { cn } from './utils';
-
-const areValidFiles = (files, accept) => {
-  if (files.length === 0) {
-    return false;
-  }
-
-  const acceptList =
-    typeof accept === 'string' ? accept.split(/\s*,\s*|\s+/).map((type) => type.toLowerCase().trim()) : null;
-
-  if (acceptList === null || acceptList.length === 0) {
-    return false;
-  }
-
-  return files.every((file) => {
-    const { type, size } = file;
-
-    if (typeof type !== 'string' || typeof size !== 'number' || size <= 0 || type.length === 0) {
-      return false;
-    }
-
-    const fileMimeType = type.toLowerCase();
-    const [fileType, fileSubtype] = fileMimeType.split('/');
-
-    return acceptList.some(
-      (acceptType) =>
-        acceptType.startsWith('*') ||
-        acceptType === fileMimeType ||
-        (fileType && acceptType.endsWith('/*') && acceptType.startsWith(fileType)) ||
-        (acceptType.startsWith('.') && acceptType.slice(1) === fileSubtype)
-    );
-  });
-};
-const handleFiles = (fileList, accept, multiple, onSelectFile, onInvalidFile) => {
-  const files = Array.from(fileList || []).filter(Boolean);
-
-  if (files.length === 0) {
-    return;
-  }
-
-  const validated = areValidFiles(files, accept);
-
-  if (validated) {
-    onSelectFile(multiple ? files : files[0] ? [files[0]] : []);
-  } else {
-    onInvalidFile();
-  }
-};
-
-function FilePickerInputBase(
-  {
-    onSelectFile = () => {},
-    onInvalidFile = () => {},
-    multiple = false,
-    accept = '*/*',
-    iconElement,
-    labelProps,
-    iconProps,
-    ...props
-  },
-  ref
-) {
-  const handleChange = (event) => {
-    handleFiles(event.currentTarget.files, accept, multiple, onSelectFile, onInvalidFile);
-    event.currentTarget.value = '';
-  };
-
-  return (
-    <Label
-      {...labelProps}
-      htmlFor="file-uploader"
-      className={cn(
-        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-in-out cursor-pointer',
-        labelProps?.className
-      )}
-    >
-      {iconElement || (
-        <Paperclip
-          {...iconProps}
-          className={cn(
-            'text-foreground group-hover:scale-110 transition-all duration-200 ease-in-out',
-            iconProps?.className
-          )}
-        />
-      )}
-      <input
-        ref={ref}
-        id="file-uploader"
-        type="file"
-        multiple={multiple}
-        accept={accept}
-        onChange={handleChange}
-        {...props}
-        className={cn('hidden', props?.className)}
-      />
-    </Label>
-  );
-}
-
-const FilePickerInput = forwardRef(FilePickerInputBase);
-
-FilePickerInput.displayName = 'FilePickerInput';
-
-function FilePickerDropzoneBase(
-  {
-    onSelectFile = () => {},
-    onInvalidFile = () => {},
-    multiple = false,
-    accept = '*/*',
-    children,
-    iconElement,
-    placeholder,
-    dropZoneProps,
-    placeholderContainerProps,
-    iconProps,
-    placeholderProps,
-    ...props
-  },
-  ref
-) {
-  const [isDragging, setIsDragging] = useState(false);
-  const handleDragEvent = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  const handleDrop = (event) => {
-    handleDragEvent(event);
-    setIsDragging(false);
-    handleFiles(event.dataTransfer.files, accept, multiple, onSelectFile, onInvalidFile);
-    event.dataTransfer.clearData();
-  };
-  const handleDragEnter = (event) => {
-    handleDragEvent(event);
-
-    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
-      setIsDragging(true);
-    }
-  };
-  const handleDragLeave = (event) => {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      setIsDragging(false);
-    }
-  };
-
-  return (
-    <div
-      ref={ref}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragEvent}
-      {...props}
-      className={cn('size-full relative', props?.className)}
-    >
-      {children}
-      <div
-        onDrop={handleDrop}
-        {...dropZoneProps}
-        className={cn(
-          'group absolute top-0 left-0 size-full',
-          'flex items-center justify-center',
-          'transition-all duration-300 ease-out',
-          'border-2 border-dashed border-ring bg-ring/25 rounded-md',
-          isDragging
-            ? 'opacity-100 pointer-events-auto visible scale-100'
-            : 'opacity-0 pointer-events-none invisible scale-98',
-          dropZoneProps?.className
-        )}
-      >
-        <div
-          {...placeholderContainerProps}
-          className={cn(
-            'bg-muted flex flex-row items-center gap-2 rounded-full py-2 px-4 transition-all',
-            isDragging ? 'scale-100' : 'scale-90',
-            placeholderContainerProps?.className
-          )}
-        >
-          {iconElement || (
-            <FilePlusCorner
-              absoluteStrokeWidth
-              {...iconProps}
-              className={cn('text-ring size-6', iconProps?.className)}
-            />
-          )}
-          <span {...placeholderProps} className={cn('text-ring text-md font-bold', placeholderProps?.className)}>
-            {placeholder || 'Drop files here'}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const FilePickerDropzone = forwardRef(FilePickerDropzoneBase);
-
-FilePickerDropzone.displayName = 'FilePickerDropzone';
-
-export { FilePickerInput, FilePickerDropzone, FilePickerInput as Input, FilePickerDropzone as Dropzone };