@connectycube/react-ui-kit 0.0.18 → 0.0.19

package/src/components/attachment.tsx

@@ -0,0 +1,270 @@
+import type React from 'react';
+import { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
+import { File, FileXCorner, type LucideProps } from 'lucide-react';
+import { Spinner } from './spinner';
+import { cn, getRandomString } from './utils';
+
+interface AttachmentProps {
+  uid?: string;
+  url?: string;
+  mimeType?: string;
+  uploading?: boolean;
+  onReady?: (skipOnce?: boolean) => void;
+  linkProps?: AttachmentLinkProps;
+  containerProps?: React.ComponentProps<'div'>;
+}
+
+interface AttachmentLinkProps
+  extends React.ComponentProps<'a'>,
+    Omit<AttachmentProps, 'containerProps' & 'mimeType' & 'onReady'> {
+  children?: React.ReactNode;
+}
+
+interface AttachmentImageProps
+  extends React.ComponentProps<'img'>,
+    Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
+
+interface AttachmentAudioProps
+  extends React.ComponentProps<'audio'>,
+    Omit<AttachmentProps, 'linkProps' & 'mimeType' & 'onReady'> {}
+
+interface AttachmentVideoProps extends React.ComponentProps<'video'>, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  maxSize?: number;
+}
+
+interface AttachmentFileProps extends LucideProps, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+interface AttachmentFailedProps extends LucideProps, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+function AttachmentLinkBase(
+  { url, uploading = false, children, ...props }: AttachmentLinkProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  return (
+    <a
+      ref={ref}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      href={url}
+      className={cn(
+        'group relative min-h-12 min-w-12 w-full flex items-center justify-center rounded-md overflow-hidden bg-ring/10 hover:bg-ring/20 transition-color duration-300 ease-out cursor-pointer',
+        props?.className
+      )}
+    >
+      {children}
+      <Spinner loading={uploading} layout="overlay" />
+    </a>
+  );
+}
+
+const AttachmentLink = forwardRef<HTMLAnchorElement, AttachmentLinkProps>(AttachmentLinkBase);
+
+AttachmentLink.displayName = 'AttachmentLink';
+
+function AttachmentAudioBase(
+  { uid, url, uploading = false, containerProps, ...props }: AttachmentAudioProps,
+  ref: React.ForwardedRef<HTMLAudioElement>
+) {
+  const audioId = `attachment_audio_${uid || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      className={cn('relative min-h-12 min-w-12 w-full rounded-md overflow-hidden', containerProps?.className)}
+    >
+      <audio ref={ref} src={url} id={audioId} controls {...props} />
+      <Spinner loading={uploading} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentAudio = forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
+
+function AttachmentVideoBase(
+  { uid, url, maxSize = 360, uploading = false, onReady = () => {}, containerProps, ...props }: AttachmentVideoProps,
+  ref: React.ForwardedRef<HTMLVideoElement>
+) {
+  const videoId = `attachment_video_${uid || getRandomString()}`;
+  const videoMaxSize = `${maxSize}px`;
+  const playerRef = useRef<HTMLVideoElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({
+    maxHeight: videoMaxSize,
+    maxWidth: videoMaxSize,
+  });
+  const handleCanPlay = (event: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+    const player = playerRef.current;
+
+    if (player) {
+      const { videoWidth, videoHeight } = player;
+      const ratio = videoWidth / videoHeight || 1;
+      const height = ratio < 1 ? videoMaxSize : `${Math.round(maxSize / ratio)}px`;
+      const width = ratio < 1 ? `${Math.round(maxSize * ratio)}px` : videoMaxSize;
+
+      setStyle({ height, width, maxHeight: height, maxWidth: width });
+      props.onCanPlay?.(event);
+      onReady();
+    }
+  };
+
+  useImperativeHandle(ref, () => playerRef.current!, []);
+
+  return (
+    <div
+      {...containerProps}
+      className={cn('relative min-h-20 w-full rounded-md overflow-hidden', containerProps?.className)}
+    >
+      <video
+        id={videoId}
+        ref={playerRef}
+        src={url}
+        controls
+        preload="metadata"
+        style={style}
+        {...props}
+        onCanPlay={handleCanPlay}
+        className={cn('size-full', props?.className)}
+      />
+      <Spinner loading={uploading} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentVideo = forwardRef<HTMLVideoElement, AttachmentVideoProps>(AttachmentVideoBase);
+
+AttachmentVideo.displayName = 'AttachmentVideo';
+
+function AttachmentImageBase(
+  { uid, url, uploading = false, onReady = () => {}, linkProps, ...props }: AttachmentImageProps,
+  ref: React.ForwardedRef<HTMLImageElement>
+) {
+  const imageId = `attachment_image_${uid || getRandomString()}`;
+  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    props.onLoad?.(event);
+    onReady();
+  };
+
+  return (
+    <AttachmentLink href={url} uploading={uploading} {...linkProps}>
+      <img
+        ref={ref}
+        src={url}
+        id={imageId}
+        alt="attachment"
+        {...props}
+        className={cn(
+          'rounded-md object-cover min-h-12 min-w-12 max-h-[360px] group-hover:scale-103 transition-transform duration-300 ease-out',
+          props?.className
+        )}
+        onLoad={handleLoad}
+      />
+    </AttachmentLink>
+  );
+}
+
+const AttachmentImage = forwardRef<HTMLImageElement, AttachmentImageProps>(AttachmentImageBase);
+
+AttachmentImage.displayName = 'AttachmentImage';
+
+function AttachmentFile({ url, name, uploading = false, iconElement, linkProps, ...props }: AttachmentFileProps) {
+  const fileId = `attachment_file_${props.id || getRandomString()}`;
+
+  return (
+    <AttachmentLink
+      href={url}
+      uploading={uploading}
+      {...linkProps}
+      className={cn('flex-row gap-2 px-2', linkProps?.className)}
+    >
+      {iconElement || (
+        <File
+          id={fileId}
+          {...props}
+          className={cn(
+            'size-6 shrink-0 text-foreground/85 group-hover:text-foreground duration-300 ease-out',
+            props?.className
+          )}
+        />
+      )}
+      {name && (
+        <span className="font-medium line-clamp-1 break-all text-foreground/85 group-hover:text-foreground duration-300 ease-out">
+          {name}
+        </span>
+      )}
+    </AttachmentLink>
+  );
+}
+
+AttachmentFile.displayName = 'AttachmentFile';
+
+function AttachmentFailed({
+  name = 'Unknown file',
+  uploading = false,
+  iconElement,
+  containerProps,
+  ...props
+}: AttachmentFailedProps) {
+  const failedId = `attachment_failed_${props.id || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      className={cn(
+        'relative min-h-12 min-w-12 w-full flex flex-row items-center justify-center gap-2 px-2 bg-red-600/10 rounded-md overflow-hidden',
+        containerProps?.className
+      )}
+    >
+      {iconElement || (
+        <FileXCorner id={failedId} {...props} className={cn('size-6 shrink-0 text-red-600', props?.className)} />
+      )}
+      <span className="font-medium line-clamp-1 break-all text-red-600">{name}</span>
+      <Spinner loading={uploading} layout="overlay" />
+    </div>
+  );
+}
+
+AttachmentFailed.displayName = 'AttachmentFailed';
+
+function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
+  const [type = ''] = mimeType?.split('/') || [];
+
+  if (!props.url) {
+    return <AttachmentFailed {...props} />;
+  }
+
+  switch (type) {
+    case 'image':
+      return <AttachmentImage {...props} />;
+    case 'video':
+      return <AttachmentVideo {...props} />;
+    case 'audio':
+      return <AttachmentAudio {...props} />;
+    default:
+      return <AttachmentFile name={mimeType} {...props} />;
+  }
+}
+
+const Attachment = memo(AttachmentBase);
+
+export {
+  Attachment,
+  AttachmentLink,
+  AttachmentImage,
+  AttachmentAudio,
+  AttachmentVideo,
+  AttachmentFile,
+  AttachmentFailed,
+  type AttachmentLinkProps,
+  type AttachmentImageProps,
+  type AttachmentAudioProps,
+  type AttachmentVideoProps,
+  type AttachmentFileProps,
+  type AttachmentFailedProps,
+  type AttachmentProps,
+};

package/src/components/avatar.tsx

@@ -7,7 +7,7 @@ import { cn } from './utils';
 interface AvatarProps extends AvatarPrimitive.AvatarProps {
   src?: string | undefined;
   name?: string | undefined;
-  online?: boolean;
+  online?: boolean | undefined;
   presence?: PresenceStatus;
   onlineProps?: React.ComponentProps<'div'>;
   presenceProps?: PresenceBadgeProps;

package/src/components/dialog-item.tsx

@@ -1,11 +1,11 @@
 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 { 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'> {
@@ -85,9 +85,9 @@ function DialogItemBase(
   }: DialogItemProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  const avatarSource = photo || avatarProps?.src || undefined;
-  const avatarFallback = name || avatarProps?.name || undefined;
-  const avatarOnline = isPrivateDialog ? userOnline || avatarProps?.online || false : false;
+  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';
@@ -185,4 +185,4 @@ const DialogItem = memo(forwardRef<HTMLDivElement, DialogItemProps>(DialogItemBa
 
 DialogItem.displayName = 'DialogItem';
 
-export { 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

@@ -176,14 +176,14 @@ function FilePickerDropzoneBase(
       onDragLeave={handleDragLeave}
       onDragOver={handleDragEvent}
       {...props}
-      className={cn('size-full relative', props?.className)}
+      className={cn('relative size-full min-h-0', props?.className)}
     >
       {children}
       <div
         onDrop={handleDrop}
         {...dropZoneProps}
         className={cn(
-          'group absolute top-0 left-0 size-full',
+          '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',

package/src/components/stream-view.tsx

@@ -1,17 +1,13 @@
 import type React from 'react';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Maximize, Minimize, PictureInPicture2, type LucideProps } from 'lucide-react';
-import { cn } from './utils';
+import { cn, getRandomString } from './utils';
 
 interface StreamViewProps extends React.ComponentProps<'video'> {
   stream?: MediaStream | null;
   mirror?: boolean;
 }
 
-function getRandomString(length = 8): string {
-  return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
-}
-
 function StreamViewBase(
   { id, stream, mirror, className, muted, ...props }: StreamViewProps,
   ref: React.ForwardedRef<HTMLVideoElement>

package/src/components/switch.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from './utils';
+
+type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root>;
+
+function Switch(props: SwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      className={cn(
+        'peer data-[state=checked]:bg-ring data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15em] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring disabled:cursor-not-allowed disabled:opacity-50',
+        props?.className
+      )}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch, type SwitchProps };

package/src/components/utils.ts

@@ -5,6 +5,10 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+export function getRandomString(length = 8): string {
+  return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
+}
+
 export function capitalize(str?: string): string {
   return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
 }

package/src/index.ts

@@ -1,7 +1,75 @@
-export { DismissLayer } from './components/dismiss-layer';
+export {
+  Attachment,
+  AttachmentLink,
+  AttachmentImage,
+  AttachmentAudio,
+  AttachmentVideo,
+  AttachmentFile,
+  AttachmentFailed,
+  type AttachmentProps,
+  type AttachmentLinkProps,
+  type AttachmentImageProps,
+  type AttachmentAudioProps,
+  type AttachmentVideoProps,
+  type AttachmentFileProps,
+  type AttachmentFailedProps,
+} from './components/attachment';
 
-export type { DismissLayerProps } from './components/dismiss-layer';
+export { Avatar, type AvatarProps } from './components/avatar';
 
-export { StreamView, LocalStreamView, RemoteStreamView, FullscreenStreamView } from './components/stream-view';
+export { Badge, type BadgeProps } from './components/badge';
 
-export type { StreamViewProps, FullscreenStreamViewProps, FullscreenStreamViewRef } from './components/stream-view';
+export { Button, type ButtonProps } from './components/button';
+
+export { DialogItem, type DialogItemProps } from './components/dialog-item';
+
+export { DismissLayer, type DismissLayerProps } from './components/dismiss-layer';
+
+export {
+  FilePickerInput,
+  FilePickerDropzone,
+  type FilePickerInputProps,
+  type FilePickerDropzoneProps,
+} from './components/file-picker';
+
+export { FormattedDate, type FormattedDateProps } from './components/formatted-date';
+
+export { Input, type InputProps } from './components/input';
+
+export { Label, type LabelProps } from './components/label';
+
+export { LinkPreview, type LinkPreviewProps } from './components/link-preview';
+
+export { LinkifyText, type LinkifyTextProps } from './components/linkify-text';
+
+export { PlaceholderText, type PlaceholderTextProps } from './components/placeholder-text';
+
+export {
+  Presence,
+  PresenceBadge,
+  type PresenceStatus,
+  type PresenceProps,
+  type PresenceBadgeProps,
+} from './components/presence';
+
+export { Search, type SearchProps } from './components/search';
+
+export { Spinner, type SpinnerProps } from './components/spinner';
+
+export { StatusIndicator, type StatusName, type StatusIndicatorProps } from './components/status-indicator';
+
+export { StatusSent, type StatusSentProps } from './components/status-sent';
+
+export {
+  StreamView,
+  LocalStreamView,
+  RemoteStreamView,
+  FullscreenStreamView,
+  type StreamViewProps,
+  type FullscreenStreamViewProps,
+  type FullscreenStreamViewRef,
+} from './components/stream-view';
+
+export { Switch, type SwitchProps } from './components/switch';
+
+export * from './components/utils';