@connectycube/react-ui-kit 0.0.17 → 0.0.19

package/src/components/dialog-item.tsx

@@ -0,0 +1,188 @@
+import type React from 'react';
+import { Avatar, type AvatarProps } from './avatar';
+import { Users, type LucideProps } from 'lucide-react';
+import { forwardRef, memo } from 'react';
+import { FormattedDate, type FormattedDateProps } from './formatted-date';
+import { StatusSent, type StatusSentProps } from './status-sent';
+import { type PresenceStatus } from './presence';
+import { cn } from './utils';
+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, type DialogItemProps };

package/src/components/dismiss-layer.tsx

@@ -16,7 +16,7 @@ function DismissLayerBase(
 ) {
   const innerRef = useRef<HTMLDivElement>(null);
 
-  useImperativeHandle(ref, () => innerRef.current!);
+  useImperativeHandle(ref, () => innerRef.current!, []);
 
   const handleClickOrTouch = useCallback(
     (e: React.MouseEvent | React.TouchEvent) => {

package/src/components/file-picker.tsx

@@ -0,0 +1,231 @@
+import type React from 'react';
+import { forwardRef, useState } from 'react';
+import { FilePlusCorner, LucideProps, Paperclip } from 'lucide-react';
+import { Label, type LabelProps } from './label';
+import { cn } from './utils';
+
+const areValidFiles = (files: File[], accept?: string): boolean => {
+  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: FileList | null,
+  accept: string,
+  multiple: boolean,
+  onSelectFile: (files: File[]) => void,
+  onInvalidFile: () => void
+) => {
+  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();
+  }
+};
+
+interface FilePickerInputProps extends React.ComponentProps<'input'> {
+  onSelectFile: (files: File[]) => void;
+  onInvalidFile?: () => void;
+  iconElement?: React.ReactNode;
+  labelProps?: LabelProps;
+  iconProps?: LucideProps;
+}
+
+interface FilePickerDropzoneProps extends FilePickerInputProps {
+  children?: React.ReactNode;
+  placeholder?: string;
+  dropZoneProps?: React.ComponentProps<'div'>;
+  placeholderContainerProps?: React.ComponentProps<'div'>;
+  iconProps?: LucideProps;
+  placeholderProps?: React.ComponentProps<'span'>;
+}
+
+function FilePickerInputBase(
+  {
+    onSelectFile = () => {},
+    onInvalidFile = () => {},
+    multiple = false,
+    accept = '*/*',
+    iconElement,
+    labelProps,
+    iconProps,
+    ...props
+  }: FilePickerInputProps,
+  ref?: React.ForwardedRef<HTMLInputElement>
+) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    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<HTMLInputElement, FilePickerInputProps>(FilePickerInputBase);
+
+FilePickerInput.displayName = 'FilePickerInput';
+
+function FilePickerDropzoneBase(
+  {
+    onSelectFile = () => {},
+    onInvalidFile = () => {},
+    multiple = false,
+    accept = '*/*',
+    children,
+    iconElement,
+    placeholder,
+    dropZoneProps,
+    placeholderContainerProps,
+    iconProps,
+    placeholderProps,
+    ...props
+  }: FilePickerDropzoneProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragEvent = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    handleDragEvent(event);
+    setIsDragging(false);
+    handleFiles(event.dataTransfer.files, accept, multiple, onSelectFile, onInvalidFile);
+    event.dataTransfer.clearData();
+  };
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    handleDragEvent(event);
+
+    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+      setIsDragging(false);
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragEvent}
+      {...props}
+      className={cn('relative size-full min-h-0', props?.className)}
+    >
+      {children}
+      <div
+        onDrop={handleDrop}
+        {...dropZoneProps}
+        className={cn(
+          '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<HTMLDivElement, FilePickerDropzoneProps>(FilePickerDropzoneBase);
+
+FilePickerDropzone.displayName = 'FilePickerDropzone';
+
+export {
+  FilePickerInput,
+  FilePickerDropzone,
+  FilePickerInput as Input,
+  FilePickerDropzone as Dropzone,
+  type FilePickerInputProps,
+  type FilePickerDropzoneProps,
+};

package/src/components/formatted-date.tsx

@@ -0,0 +1,57 @@
+import { forwardRef, memo } from 'react';
+import { differenceInCalendarDays, format, formatDistanceToNow, isToday } from 'date-fns';
+import { el, enUS, uk, type Locale } from 'date-fns/locale';
+import { cn } from './utils';
+
+interface FormattedDateProps extends React.ComponentProps<'span'> {
+  date?: Date | string | number | null | undefined;
+  language?: string;
+  distanceToNow?: boolean;
+}
+
+const locales: Record<string, Locale> = {
+  en: enUS,
+  el: el,
+  ua: uk,
+};
+
+function formatDate(date: string | number | Date, language: string = 'en', distanceToNow = false): string {
+  const locale = locales[language] ?? enUS;
+
+  if (distanceToNow) {
+    return formatDistanceToNow(date, { locale, addSuffix: true });
+  }
+
+  const isWithinLast7Days = (date: Date | string | number) => {
+    const diff = differenceInCalendarDays(new Date(), date);
+
+    return diff >= 0 && diff <= 6;
+  };
+
+  return isToday(date)
+    ? format(date, 'p', { locale })
+    : isWithinLast7Days(date)
+      ? format(date, 'eeee', { locale })
+      : format(date, 'P', { locale });
+}
+
+function FormattedDateBase(
+  { date, language, distanceToNow, ...props }: FormattedDateProps,
+  ref: React.ForwardedRef<HTMLSpanElement>
+) {
+  if (!date) {
+    return null;
+  }
+
+  return (
+    <span ref={ref} {...props} className={cn('text-xs text-muted-foreground', props?.className)}>
+      {formatDate(date, language, distanceToNow)}
+    </span>
+  );
+}
+
+const FormattedDate = memo(forwardRef<HTMLSpanElement, FormattedDateProps>(FormattedDateBase));
+
+FormattedDate.displayName = 'FormattedDate';
+
+export { FormattedDate, type FormattedDateProps };

package/src/components/input.tsx

@@ -19,7 +19,7 @@ function InputBase(props: InputProps, ref?: React.ForwardedRef<HTMLInputElement>
   );
 }
 
-const Input = forwardRef(InputBase);
+const Input = forwardRef<HTMLInputElement, InputProps>(InputBase);
 
 Input.displayName = 'Input';
 

package/src/components/label.tsx

@@ -0,0 +1,23 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { Root as LabelRoot, type LabelProps } from '@radix-ui/react-label';
+import { cn } from './utils';
+
+function LabelBase({ ...props }: LabelProps, ref: React.ForwardedRef<HTMLLabelElement>) {
+  return (
+    <LabelRoot
+      ref={ref}
+      {...props}
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props?.className
+      )}
+    />
+  );
+}
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelBase);
+
+Label.displayName = 'Label';
+
+export { Label, type LabelProps };

package/src/components/link-preview.tsx

@@ -0,0 +1,149 @@
+import type React from 'react';
+import { forwardRef, memo, useCallback, useState } from 'react';
+import { Globe, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+const decodeHtmlEntities = (text: string) => {
+  if (text.length === 0) {
+    return text;
+  }
+
+  const element = document.createElement('div');
+
+  element.innerHTML = text;
+
+  return element.textContent.trim();
+};
+
+interface LinkPreviewProps extends React.ComponentProps<'a'> {
+  thin?: boolean;
+  title?: string;
+  description?: string;
+  icon?: React.ComponentProps<'img'>['src'];
+  image?: React.ComponentProps<'img'>['src'];
+  onReady?: () => void;
+  iconFallbackElement?: React.ReactElement;
+  titleContainerProps?: React.ComponentProps<'div'>;
+  iconProps?: React.ComponentProps<'img'>;
+  iconFallbackProps?: LucideProps;
+  titleProps?: React.ComponentProps<'span'>;
+  descriptionProps?: React.ComponentProps<'div'>;
+  imageContainerProps?: React.ComponentProps<'div'>;
+  imageProps?: React.ComponentProps<'img'>;
+}
+
+function LinkPreviewBase(
+  {
+    thin = false,
+    title = '',
+    description = '',
+    icon,
+    iconFallbackElement,
+    image,
+    onReady = () => {},
+    titleContainerProps,
+    iconProps,
+    iconFallbackProps,
+    titleProps,
+    descriptionProps,
+    imageContainerProps,
+    imageProps,
+    ...props
+  }: LinkPreviewProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  const [iconSrc, setIconSrc] = useState<React.ComponentProps<'img'>['src']>(icon);
+  const [imageSrc, setImageSrc] = useState<React.ComponentProps<'img'>['src']>(image);
+  const handleOnLoad = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      imageProps?.onLoad?.(event);
+      onReady();
+    },
+    [onReady, imageProps]
+  );
+  const handleIconOnError = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      iconProps?.onError?.(event);
+      setIconSrc(undefined);
+    },
+    [iconProps]
+  );
+  const handleImageOnError = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      imageProps?.onError?.(event);
+      setImageSrc(undefined);
+    },
+    [imageProps]
+  );
+
+  return (
+    <a
+      ref={ref}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      className={cn(
+        'transition-color duration-300 ease-out',
+        'grid items-start gap-2 p-2 mt-1 overflow-hidden rounded border-l-4 border-l-ring bg-white hover:bg-ring/20',
+        thin ? 'grid-cols-3' : 'grid-cols-1',
+        props?.className
+      )}
+    >
+      <div
+        {...titleContainerProps}
+        className={cn('flex items-start gap-2', thin ? 'col-span-3' : 'col-span-1', titleContainerProps?.className)}
+      >
+        {iconSrc ? (
+          <img
+            alt="icon"
+            src={iconSrc}
+            {...iconProps}
+            onError={handleIconOnError}
+            className={cn('size-5', iconProps?.className)}
+          />
+        ) : (
+          iconFallbackElement || <Globe {...iconFallbackProps} className={cn('size-5', iconFallbackProps?.className)} />
+        )}
+        <span
+          {...titleProps}
+          className={cn('text-sm font-bold', thin ? 'line-clamp-1' : 'line-clamp-2', titleProps?.className)}
+        >
+          {decodeHtmlEntities(title)}
+        </span>
+      </div>
+      {description && (
+        <span
+          {...descriptionProps}
+          className={cn(
+            'text-sm line-clamp-5',
+            thin ? (imageSrc ? 'col-span-2' : 'col-span-3') : 'col-span-1',
+            descriptionProps?.className
+          )}
+        >
+          {decodeHtmlEntities(description)}
+        </span>
+      )}
+      {imageSrc && (
+        <div
+          {...imageContainerProps}
+          className={cn('flex items-center justify-center', imageContainerProps?.className)}
+        >
+          <img
+            alt="banner"
+            src={imageSrc}
+            {...imageProps}
+            onLoad={handleOnLoad}
+            onError={handleImageOnError}
+            className={cn('rounded max-w-full object-contain', thin ? 'max-h-25' : 'max-h-60', imageProps?.className)}
+          />
+        </div>
+      )}
+    </a>
+  );
+}
+
+const LinkPreview = memo(forwardRef<HTMLAnchorElement, LinkPreviewProps>(LinkPreviewBase));
+
+LinkPreview.displayName = 'LinkPreview';
+
+export { LinkPreview, type LinkPreviewProps };