@connectycube/react-ui-kit 0.0.18 → 0.0.20

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

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';
@@ -137,7 +137,10 @@ function DialogItemBase(
         <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)}
+            className={cn(
+              'text-sm text-left text-muted-foreground break-all line-clamp-2',
+              lastMessageProps?.className
+            )}
           >
             {typingStatusText ||
               (draft ? (
@@ -185,4 +188,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/linkify-text.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { Opts } from 'linkifyjs';
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import Linkify from 'linkify-react';
 import { cn } from './utils';
 
@@ -8,16 +8,32 @@ const DEFAULT_LINKIFY_OPTIONS: Opts = {
   target: '_blank',
   rel: 'noopener noreferrer',
 };
+const DEFAULT_SKELETON_LINES_CLASS_NAMES = ['w-full', 'w-3/4', 'w-1/2'];
 
 interface LinkifyTextProps extends React.ComponentProps<'p'> {
-  text: string;
+  text?: string;
+  pending?: boolean;
+  onReady?: () => void;
   linkifyProps?: Opts;
+  skeletonContainerProps?: React.ComponentProps<'div'>;
+  skeletonLineProps?: React.ComponentProps<'span'>;
+  skeletonLinesClassNames?: string[];
 }
 
 function LinkifyTextBase(
-  { text, linkifyProps, ...props }: LinkifyTextProps,
+  {
+    text,
+    pending = false,
+    onReady = () => {},
+    linkifyProps,
+    skeletonContainerProps,
+    skeletonLineProps,
+    skeletonLinesClassNames = DEFAULT_SKELETON_LINES_CLASS_NAMES,
+    ...props
+  }: LinkifyTextProps,
   ref: React.ForwardedRef<HTMLParagraphElement>
 ) {
+  const pendingRef = useRef(pending);
   const options = useMemo(
     () => ({
       ...DEFAULT_LINKIFY_OPTIONS,
@@ -27,6 +43,31 @@ function LinkifyTextBase(
     [linkifyProps]
   );
 
+  useEffect(() => {
+    if (pendingRef.current && !pending) {
+      onReady();
+    }
+
+    pendingRef.current = pending;
+  }, [pending, onReady]);
+
+  if (pending) {
+    return (
+      <div
+        {...skeletonContainerProps}
+        className={cn('flex items-start flex-col size-full', skeletonContainerProps?.className)}
+      >
+        {skeletonLinesClassNames.map((width, index) => (
+          <span
+            {...skeletonLineProps}
+            key={`${width}_${index}`}
+            className={cn('bg-muted-foreground animate-pulse rounded-md my-1 h-4', skeletonLineProps?.className, width)}
+          ></span>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <p ref={ref} {...props} className={cn('wrap-break-word text-base', props?.className)}>
       <Linkify options={options}>{text}</Linkify>

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,25 @@
+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,81 @@
-export { DismissLayer } from './components/dismiss-layer';
+export { AlertDialog, type AlertDialogProps } from './components/alert-dialog';
 
-export type { DismissLayerProps } 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 { StreamView, LocalStreamView, RemoteStreamView, FullscreenStreamView } from './components/stream-view';
+export { Avatar, type AvatarProps } from './components/avatar';
 
-export type { StreamViewProps, FullscreenStreamViewProps, FullscreenStreamViewRef } from './components/stream-view';
+export { Badge, type BadgeProps } from './components/badge';
+
+export { Button, type ButtonProps } from './components/button';
+
+export { CallMessage, type CallMessageProps } from './components/call-message';
+
+export { ChatMessage, type ChatMessageProps } from './components/chat-message';
+
+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';