@connectycube/react-ui-kit 0.1.0 → 0.1.2

package/src/components/chat-list.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef, useCallback } from 'react';
+import * as React from 'react';
 import { Virtualizer, VirtualizerProps, type VirtualizerHandle } from 'virtua';
 import { FilePickerDropzone, type FilePickerDropzoneProps } from './file-picker';
 import { QuickActions, type QuickActionsProps } from './quick-actions';
@@ -25,6 +25,7 @@ interface ChatListProps extends VirtualizerProps {
 
 interface ChatListHandle extends VirtualizerHandle {
   scrollToBottom: (force?: boolean) => void;
+  setShift: (shift: boolean) => void;
 }
 
 function DefaultChatListWrapper({ children, ...props }: React.ComponentProps<'div'>) {
@@ -53,6 +54,7 @@ function ChatListBase(
     children,
     quickActionsVisible,
     minItemsCount = 1,
+    shift = false,
     ...props
   }: ChatListProps,
   ref: React.ForwardedRef<ChatListHandle>
@@ -60,11 +62,11 @@ function ChatListBase(
   const ChatListWrapper = enableFilePickerDropzone ? FilePickerDropzone : DefaultChatListWrapper;
   const chatListWrapperProps = enableFilePickerDropzone ? filePickerDropzoneProps : containerProps;
   const itemsCount = Array.isArray(children) ? children.length : Array.isArray(props.data) ? props.data.length : 0;
-  const itemsCountRef = useRef<number>(0);
-  const keyRef = useRef<string | undefined>(undefined);
-  const [shouldPrependMessages, setShouldPrependMessages] = useState<boolean>(false);
-  const [isPreparing, setIsPreparing] = useState<boolean>(false);
-  const virtuaRef = useRef<VirtualizerHandle>(null);
+  const itemsCountRef = React.useRef<number>(0);
+  const keyRef = React.useRef<string | undefined>(undefined);
+  const [isPreparing, setIsPreparing] = React.useState<boolean>(false);
+  const [_shift, setShift] = React.useState<boolean>(shift);
+  const virtuaRef = React.useRef<VirtualizerHandle>(null);
   const prepareNextVirtualizer = () => {
     queueMicrotask(() => {
       setIsPreparing(true);
@@ -77,7 +79,6 @@ function ChatListBase(
     if (!virtuaRef.current) return;
 
     if (typeof onScrollStartReached === 'function' && offset < offsetToReach) {
-      setShouldPrependMessages(true);
       onScrollStartReached();
     }
 
@@ -88,18 +89,20 @@ function ChatListBase(
       onScrollEndReached();
     }
   };
-  const scrollToBottom = useCallback(
+  const scrollToBottom = React.useCallback(
     (force: boolean = false) => {
-      if (!virtuaRef.current) return;
+      if (!virtuaRef.current || itemsCount === 0) return;
 
       if (force || virtuaRef.current.scrollSize - virtuaRef.current.scrollOffset < virtuaRef.current.viewportSize * 2) {
-        queueMicrotask(() => virtuaRef.current?.scrollToIndex(itemsCount - 1, { align: 'start' }));
+        requestAnimationFrame(() => {
+          virtuaRef.current?.scrollToIndex(itemsCount - 1, { align: 'start' });
+        });
       }
     },
     [itemsCount]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (key !== keyRef.current) {
       prepareNextVirtualizer();
       onListReset?.(keyRef.current, key);
@@ -108,7 +111,7 @@ function ChatListBase(
     }
   }, [key, onListReset]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (itemsCountRef.current === 0 && itemsCount > 0) {
       prepareNextVirtualizer();
       onListCreate?.();
@@ -117,30 +120,34 @@ function ChatListBase(
     }
 
     if (itemsCount > itemsCountRef.current) {
+      const isPrepend = _shift;
+
       onListGrow?.();
       itemsCountRef.current = itemsCount;
 
-      if (shouldPrependMessages) {
-        queueMicrotask(() => setShouldPrependMessages(false));
+      if (isPrepend) {
+        queueMicrotask(() => setShift(false));
+      } else {
+        scrollToBottom();
       }
-
-      scrollToBottom();
     }
-  }, [itemsCount, shouldPrependMessages, onListCreate, onListGrow, scrollToBottom]);
+  }, [itemsCount, _shift, onListCreate, onListGrow, scrollToBottom]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     virtuaRef.current?.scrollBy(textareaMeasurement.shift);
   }, [textareaMeasurement]);
 
-  useImperativeHandle(ref, () => ({ ...(virtuaRef.current || ({} as VirtualizerHandle)), scrollToBottom }), [
-    scrollToBottom,
-  ]);
+  React.useImperativeHandle(
+    ref,
+    () => ({ ...(virtuaRef.current || ({} as VirtualizerHandle)), scrollToBottom, setShift }),
+    [scrollToBottom]
+  );
 
   if (isPreparing) {
     return null;
   }
 
-  if (minItemsCount >= itemsCount) {
+  if (minItemsCount > itemsCount) {
     return quickActionsVisible ? <QuickActions {...quickActionsProps} /> : <Spinner loading layout="centered" />;
   }
 
@@ -149,7 +156,7 @@ function ChatListBase(
       <Spinner loading={loading} className="my-5" />
       <div className="flex flex-col h-full overflow-y-auto px-2">
         <div className="grow" />
-        <Virtualizer ref={virtuaRef} onScroll={handleOnScroll} shift={shouldPrependMessages} {...props}>
+        <Virtualizer ref={virtuaRef} onScroll={handleOnScroll} shift={_shift} {...props}>
           {children}
         </Virtualizer>
       </div>
@@ -157,7 +164,7 @@ function ChatListBase(
   );
 }
 
-const ChatList = forwardRef<ChatListHandle, ChatListProps>(ChatListBase);
+const ChatList = React.forwardRef<ChatListHandle, ChatListProps>(ChatListBase);
 
 ChatList.displayName = 'ChatList';
 

package/src/components/checkbox.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
@@ -33,7 +32,7 @@ function CheckboxBase(
   );
 }
 
-const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxBase);
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxBase);
 
 Checkbox.displayName = 'Checkbox';
 

package/src/components/dialog-item.tsx

@@ -1,7 +1,6 @@
-import type React from 'react';
+import * as 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';
@@ -184,7 +183,7 @@ function DialogItemBase(
   );
 }
 
-const DialogItem = memo(forwardRef<HTMLDivElement, DialogItemProps>(DialogItemBase));
+const DialogItem = React.memo(React.forwardRef<HTMLDivElement, DialogItemProps>(DialogItemBase));
 
 DialogItem.displayName = 'DialogItem';
 

package/src/components/dialogs-list.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import * as React from 'react';
 import { VList, type VListHandle, type VListProps } from 'virtua';
 import { PlaceholderText } from './placeholder-text';
 
@@ -43,7 +42,7 @@ function DialogsListBase(
   }: DialogsListProps,
   ref: React.ForwardedRef<VListHandle>
 ) {
-  const vListRef = useRef<VListHandle>(null);
+  const vListRef = React.useRef<VListHandle>(null);
   const skeletonList = Array.from({ length: pendingListLength }).map((_, i) => (
     <PendingItem key={`pending_dialog_item_${i}`} />
   ));
@@ -64,7 +63,7 @@ function DialogsListBase(
     }
   };
 
-  useImperativeHandle(ref, () => vListRef.current || ({} as VListHandle), []);
+  React.useImperativeHandle(ref, () => vListRef.current || ({} as VListHandle), []);
 
   if (placeholderVisible) {
     return <PlaceholderText titles={placeholderTitles} className="text-base text-muted" />;
@@ -77,7 +76,7 @@ function DialogsListBase(
   );
 }
 
-const DialogsList = forwardRef<VListHandle, DialogsListProps>(DialogsListBase);
+const DialogsList = React.forwardRef<VListHandle, DialogsListProps>(DialogsListBase);
 
 DialogsList.displayName = 'DialogsList';
 

package/src/components/dismiss-layer.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 
 interface DismissLayerProps extends React.ComponentProps<'div'> {
@@ -14,11 +13,11 @@ function DismissLayerBase(
   { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, ...props }: DismissLayerProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  const innerRef = useRef<HTMLDivElement>(null);
+  const innerRef = React.useRef<HTMLDivElement>(null);
 
-  useImperativeHandle(ref, () => innerRef.current || ({} as HTMLDivElement), []);
+  React.useImperativeHandle(ref, () => innerRef.current || ({} as HTMLDivElement), []);
 
-  const handleClickOrTouch = useCallback(
+  const handleClickOrTouch = React.useCallback(
     (e: React.MouseEvent | React.TouchEvent) => {
       if (!disableClickOutside && active && e.target === innerRef.current) {
         onDismiss();
@@ -26,7 +25,7 @@ function DismissLayerBase(
     },
     [disableClickOutside, active, onDismiss]
   );
-  const handleKeyEvent = useCallback(
+  const handleKeyEvent = React.useCallback(
     (ev: KeyboardEvent) => {
       if (!disableEscKeyPress && active && ev.key === 'Escape') {
         onDismiss();
@@ -35,7 +34,7 @@ function DismissLayerBase(
     [disableEscKeyPress, active, onDismiss]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!disableEscKeyPress && active) {
       document.addEventListener('keydown', handleKeyEvent);
 
@@ -59,7 +58,7 @@ function DismissLayerBase(
   );
 }
 
-const DismissLayer = forwardRef<HTMLDivElement, DismissLayerProps>(DismissLayerBase);
+const DismissLayer = React.forwardRef<HTMLDivElement, DismissLayerProps>(DismissLayerBase);
 
 DismissLayer.displayName = 'DismissLayer';
 

package/src/components/file-picker.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef, useState } from 'react';
+import * as React from 'react';
 import { FilePlusCorner, LucideProps, Paperclip } from 'lucide-react';
 import { Label, type LabelProps } from './label';
 import { cn } from './utils';
@@ -124,7 +123,7 @@ function FilePickerInputBase(
   );
 }
 
-const FilePickerInput = forwardRef<HTMLInputElement, FilePickerInputProps>(FilePickerInputBase);
+const FilePickerInput = React.forwardRef<HTMLInputElement, FilePickerInputProps>(FilePickerInputBase);
 
 FilePickerInput.displayName = 'FilePickerInput';
 
@@ -145,7 +144,7 @@ function FilePickerDropzoneBase(
   }: FilePickerDropzoneProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  const [isDragging, setIsDragging] = useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
   const handleDragEvent = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     event.stopPropagation();
@@ -217,7 +216,7 @@ function FilePickerDropzoneBase(
   );
 }
 
-const FilePickerDropzone = forwardRef<HTMLDivElement, FilePickerDropzoneProps>(FilePickerDropzoneBase);
+const FilePickerDropzone = React.forwardRef<HTMLDivElement, FilePickerDropzoneProps>(FilePickerDropzoneBase);
 
 FilePickerDropzone.displayName = 'FilePickerDropzone';
 

package/src/components/formatted-date.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, memo } from 'react';
+import * as React from 'react';
 import { differenceInCalendarDays, format, formatDistanceToNow, isToday } from 'date-fns';
-import { el, enUS, uk, type Locale } from 'date-fns/locale';
+import { el, enUS, uk, es, type Locale } from 'date-fns/locale';
 import { cn } from './utils';
 
 interface FormattedDateProps extends React.ComponentProps<'span'> {
@@ -13,6 +13,7 @@ const locales: Record<string, Locale> = {
   en: enUS,
   el: el,
   ua: uk,
+  es: es,
 };
 
 function formatDate(date: string | number | Date, language: string = 'en', distanceToNow = false): string {
@@ -50,7 +51,7 @@ function FormattedDateBase(
   );
 }
 
-const FormattedDate = memo(forwardRef<HTMLSpanElement, FormattedDateProps>(FormattedDateBase));
+const FormattedDate = React.memo(React.forwardRef<HTMLSpanElement, FormattedDateProps>(FormattedDateBase));
 
 FormattedDate.displayName = 'FormattedDate';
 

package/src/components/input.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 
 type InputProps = React.ComponentProps<'input'>;
@@ -19,7 +18,7 @@ function InputBase(props: InputProps, ref?: React.ForwardedRef<HTMLInputElement>
   );
 }
 
-const Input = forwardRef<HTMLInputElement, InputProps>(InputBase);
+const Input = React.forwardRef<HTMLInputElement, InputProps>(InputBase);
 
 Input.displayName = 'Input';
 

package/src/components/label.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { Root as LabelRoot, type LabelProps } from '@radix-ui/react-label';
 import { cn } from './utils';
 
@@ -16,7 +15,7 @@ function LabelBase({ ...props }: LabelProps, ref: React.ForwardedRef<HTMLLabelEl
   );
 }
 
-const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelBase);
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(LabelBase);
 
 Label.displayName = 'Label';
 

package/src/components/link-preview.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef, memo, useCallback, useState } from 'react';
+import * as React from 'react';
 import { Globe, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
 
@@ -52,29 +51,20 @@ function LinkPreviewBase(
   }: 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]
-  );
+  const [iconSrc, setIconSrc] = React.useState<React.ComponentProps<'img'>['src']>(icon);
+  const [imageSrc, setImageSrc] = React.useState<React.ComponentProps<'img'>['src']>(image);
+  const handleOnLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    imageProps?.onLoad?.(event);
+    onReady();
+  };
+  const handleIconOnError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    iconProps?.onError?.(event);
+    setIconSrc(undefined);
+  };
+  const handleImageOnError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    imageProps?.onError?.(event);
+    setImageSrc(undefined);
+  };
 
   return (
     <a
@@ -142,7 +132,7 @@ function LinkPreviewBase(
   );
 }
 
-const LinkPreview = memo(forwardRef<HTMLAnchorElement, LinkPreviewProps>(LinkPreviewBase));
+const LinkPreview = React.memo(React.forwardRef<HTMLAnchorElement, LinkPreviewProps>(LinkPreviewBase));
 
 LinkPreview.displayName = 'LinkPreview';
 

package/src/components/linkify-text.tsx

@@ -1,6 +1,5 @@
-import type React from 'react';
+import * as React from 'react';
 import type { Opts } from 'linkifyjs';
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import Linkify from 'linkify-react';
 import { cn } from './utils';
 
@@ -33,8 +32,8 @@ function LinkifyTextBase(
   }: LinkifyTextProps,
   ref: React.ForwardedRef<HTMLParagraphElement>
 ) {
-  const pendingRef = useRef(pending);
-  const options = useMemo(
+  const pendingRef = React.useRef(pending);
+  const options = React.useMemo(
     () => ({
       ...DEFAULT_LINKIFY_OPTIONS,
       ...linkifyProps,
@@ -43,7 +42,7 @@ function LinkifyTextBase(
     [linkifyProps]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (pendingRef.current && !pending) {
       onReady();
     }
@@ -75,7 +74,7 @@ function LinkifyTextBase(
   );
 }
 
-const LinkifyText = memo(forwardRef<HTMLParagraphElement, LinkifyTextProps>(LinkifyTextBase));
+const LinkifyText = React.memo(React.forwardRef<HTMLParagraphElement, LinkifyTextProps>(LinkifyTextBase));
 
 LinkifyText.displayName = 'LinkifyText';
 

package/src/components/placeholder-text.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { forwardRef } from 'react';
 import { cn } from './utils';
 
 interface PlaceholderTextProps extends React.ComponentProps<'div'> {
@@ -33,7 +32,7 @@ function PlaceholderTextBase(
   );
 }
 
-const PlaceholderText = forwardRef(PlaceholderTextBase);
+const PlaceholderText = React.forwardRef(PlaceholderTextBase);
 
 PlaceholderText.displayName = 'PlaceholderText';
 

package/src/components/presence.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import * as React from 'react';
 import { capitalize, cn } from './utils';
 
 type PresenceStatus = 'available' | 'busy' | 'away' | 'unknown' | undefined;

package/src/components/quick-actions.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 
 interface QuickActionsProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -67,7 +66,7 @@ function QuickActionsBase(
   );
 }
 
-const QuickActions = forwardRef<HTMLDivElement, QuickActionsProps>(QuickActionsBase);
+const QuickActions = React.forwardRef<HTMLDivElement, QuickActionsProps>(QuickActionsBase);
 
 QuickActions.displayName = 'QuickActions';
 

package/src/components/search.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef, useState } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 import { Input, type InputProps } from './input';
 import { Search as SearchIcon, X as CloseIcon, type LucideProps } from 'lucide-react';
@@ -27,7 +26,7 @@ function SearchBase(
   }: SearchProps,
   ref?: React.ForwardedRef<HTMLInputElement>
 ) {
-  const [value, setValue] = useState<string>('');
+  const [value, setValue] = React.useState<string>('');
   const handleOnSearch = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const keyword = e.target.value;
 
@@ -79,7 +78,7 @@ function SearchBase(
   );
 }
 
-const Search = forwardRef<HTMLInputElement, SearchProps>(SearchBase);
+const Search = React.forwardRef<HTMLInputElement, SearchProps>(SearchBase);
 
 Search.displayName = 'Search';
 

package/src/components/spinner.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Loader, LoaderCircle, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
 
@@ -7,7 +8,7 @@ interface SpinnerProps extends LucideProps {
   layout?: 'absolute' | 'centered' | 'overlay' | 'flow';
 }
 
-function Spinner({ loading = false, layout = 'flow', type = 'default', ...props }: SpinnerProps) {
+const Spinner: React.FC<SpinnerProps> = ({ loading = false, layout = 'flow', type = 'default', ...props }) => {
   const LoaderIcon = type === 'circle' ? LoaderCircle : Loader;
 
   if (!loading) {
@@ -35,7 +36,7 @@ function Spinner({ loading = false, layout = 'flow', type = 'default', ...props
     default:
       return spinnerElement;
   }
-}
+};
 
 Spinner.displayName = 'Spinner';
 

package/src/components/status-call.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
 

package/src/components/status-indicator.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from './utils';
 
@@ -78,7 +77,7 @@ function StatusIndicatorBase(
   );
 }
 
-const StatusIndicator = forwardRef(StatusIndicatorBase);
+const StatusIndicator = React.forwardRef(StatusIndicatorBase);
 
 StatusIndicator.displayName = 'StatusIndicator';
 

package/src/components/status-sent.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Ban, Check, CheckCheck, Clock, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
 

package/src/components/stream-view.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import * as React from 'react';
 import { Maximize, Minimize, PictureInPicture2, type LucideProps } from 'lucide-react';
 import { cn, getRandomString } from './utils';
 
@@ -12,15 +11,15 @@ function StreamViewBase(
   { id, stream, mirror, className, muted, ...props }: StreamViewProps,
   ref: React.ForwardedRef<HTMLVideoElement>
 ) {
-  const innerRef = useRef<HTMLVideoElement>(null);
-  const elementId = useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
+  const innerRef = React.useRef<HTMLVideoElement>(null);
+  const elementId = React.useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
   const isMuted = typeof muted === 'boolean' ? muted : false;
   const defaultClassName = 'size-full object-contain';
   const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
 
-  useImperativeHandle(ref, () => innerRef.current || ({} as HTMLVideoElement), []);
+  React.useImperativeHandle(ref, () => innerRef.current || ({} as HTMLVideoElement), []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (innerRef.current && stream) {
       innerRef.current.srcObject = stream;
 
@@ -53,7 +52,7 @@ function StreamViewBase(
   );
 }
 
-const StreamView = forwardRef<HTMLVideoElement, StreamViewProps>(StreamViewBase);
+const StreamView = React.forwardRef<HTMLVideoElement, StreamViewProps>(StreamViewBase);
 
 StreamView.displayName = 'StreamView';
 
@@ -64,7 +63,7 @@ function LocalStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref:
   return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
 }
 
-const LocalStreamView = forwardRef<HTMLVideoElement, StreamViewProps>(LocalStreamViewBase);
+const LocalStreamView = React.forwardRef<HTMLVideoElement, StreamViewProps>(LocalStreamViewBase);
 
 LocalStreamView.displayName = 'LocalStreamView';
 
@@ -75,7 +74,7 @@ function RemoteStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref:
   return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
 }
 
-const RemoteStreamView = forwardRef<HTMLVideoElement, StreamViewProps>(RemoteStreamViewBase);
+const RemoteStreamView = React.forwardRef<HTMLVideoElement, StreamViewProps>(RemoteStreamViewBase);
 
 RemoteStreamView.displayName = 'RemoteStreamView';
 
@@ -116,10 +115,10 @@ function FullscreenStreamViewBase(
   }: FullscreenStreamViewProps,
   ref: React.ForwardedRef<FullscreenStreamViewRef>
 ) {
-  const innerRef = useRef<HTMLDivElement>(null);
-  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
-  const [isPictureInPicture, setIsPictureInPicture] = useState<boolean>(false);
-  const toggleFullscreen = useCallback(async () => {
+  const innerRef = React.useRef<HTMLDivElement>(null);
+  const [isFullscreen, setIsFullscreen] = React.useState<boolean>(false);
+  const [isPictureInPicture, setIsPictureInPicture] = React.useState<boolean>(false);
+  const toggleFullscreen = React.useCallback(async () => {
     const container = innerRef.current;
 
     if (!container) return;
@@ -138,13 +137,13 @@ function FullscreenStreamViewBase(
       console.error('Fullscreen error:', err);
     }
   }, []);
-  const togglePictureInPicture = useCallback(() => {
+  const togglePictureInPicture = React.useCallback(() => {
     if (pipElement) {
       setIsPictureInPicture((prevState) => !prevState);
     }
   }, [pipElement]);
 
-  useImperativeHandle(
+  React.useImperativeHandle(
     ref,
     () => ({
       ...(innerRef.current || ({} as HTMLDivElement)),
@@ -156,7 +155,7 @@ function FullscreenStreamViewBase(
     [isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     const onFullscreenChange = () => {
       setIsFullscreen(!!document.fullscreenElement);
       setIsPictureInPicture(!!document.fullscreenElement);
@@ -218,7 +217,9 @@ function FullscreenStreamViewBase(
   );
 }
 
-const FullscreenStreamView = forwardRef<FullscreenStreamViewRef, FullscreenStreamViewProps>(FullscreenStreamViewBase);
+const FullscreenStreamView = React.forwardRef<FullscreenStreamViewRef, FullscreenStreamViewProps>(
+  FullscreenStreamViewBase
+);
 
 FullscreenStreamView.displayName = 'FullscreenStreamView';