@connectycube/react-ui-kit 0.0.20 → 0.0.22

package/gen/components/chat-input.jsx

@@ -0,0 +1,152 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { SendHorizontal } from 'lucide-react';
+import { Label } from './label';
+import { cn } from './utils';
+
+function ChatInputSendBase({ onSend = () => {}, iconElement, iconProps, ...props }, ref) {
+  return (
+    <Label
+      ref={ref}
+      {...props}
+      onClick={onSend}
+      className={cn('group rounded-full py-2 pl-2.5 pr-1.5 cursor-pointer bg-ring/90 hover:bg-ring', props?.className)}
+    >
+      {iconElement || (
+        <SendHorizontal
+          {...iconProps}
+          className={cn(
+            'text-background group-hover:scale-110 transition-all duration-200 ease-out',
+            iconProps?.className
+          )}
+        />
+      )}
+    </Label>
+  );
+}
+
+const ChatInputSend = forwardRef(ChatInputSendBase);
+
+ChatInputSend.displayName = 'ChatInputSend';
+
+function ChatInputBase(
+  {
+    pending = false,
+    draft,
+    onSend = () => {},
+    onDraft = () => {},
+    onTyping = () => {},
+    onHeightGrow = () => {},
+    hideChatInputSend = false,
+    chatInputSendProps,
+    containerProps,
+    children,
+    ...props
+  },
+  ref
+) {
+  const [value, setValue] = useState();
+  const textareaRef = useRef(null);
+  const textareaHeightRef = useRef(0);
+  const typingRef = useRef(false);
+  const typingTimeoutRef = useRef(undefined);
+  const handleStopTyping = () => {
+    typingRef.current = false;
+    onTyping(false);
+
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = undefined;
+    }
+  };
+  const handleOnChange = (event) => {
+    const { data } = event.nativeEvent;
+
+    setValue(event.target.value);
+
+    if (!typingRef.current && typeof data === 'string' && data.length > 0) {
+      typingRef.current = true;
+      onTyping(true);
+    }
+
+    clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(handleStopTyping, 5000);
+  };
+  const handleOnSend = async () => {
+    handleStopTyping();
+
+    if (typeof value === 'string' && value.length > 0) {
+      onSend(value.trim());
+      setValue('');
+      textareaRef.current?.focus();
+    }
+  };
+  const handleOnHeightChange = (height, meta) => {
+    if (!height && !meta) return;
+
+    if (height !== textareaHeightRef.current) {
+      const shift = height > textareaHeightRef.current ? meta.rowHeight : -meta.rowHeight;
+
+      onHeightGrow({
+        height,
+        shift,
+      });
+    }
+
+    textareaHeightRef.current = height;
+  };
+  const handleOnKeyDown = (event) => {
+    if (event.key === 'Enter' && event.shiftKey === false) {
+      event.preventDefault();
+      props.onKeyDown?.(event);
+      handleOnSend();
+    }
+  };
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    handleStopTyping();
+    queueMicrotask(() => setValue(draft));
+    textarea?.focus();
+
+    return () => {
+      onDraft(textarea?.value);
+    };
+  }, [props.key]);
+
+  useImperativeHandle(ref, () => textareaRef.current || {}, []);
+
+  return (
+    <div {...containerProps} className={cn('flex items-end gap-2', containerProps?.className)}>
+      <TextareaAutosize
+        name="textarea-autosize"
+        ref={textareaRef}
+        autoFocus
+        minRows={1}
+        maxRows={8}
+        {...props}
+        value={value}
+        onChange={handleOnChange}
+        onKeyDown={handleOnKeyDown}
+        onHeightChange={handleOnHeightChange}
+        className={cn(
+          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-11 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          'resize-none py-2.5',
+          pending && 'pointer-events-none bg-muted-foreground border-ring ring-ring/50 animate-pulse',
+          props?.className
+        )}
+      />
+      {!hideChatInputSend && <ChatInputSend onSend={handleOnSend} {...chatInputSendProps} />}
+      {children}
+    </div>
+  );
+}
+
+const ChatInput = forwardRef(ChatInputBase);
+
+ChatInput.displayName = 'ChatInput';
+
+export { ChatInput };

package/gen/components/chat-list.jsx

@@ -0,0 +1,151 @@
+import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef, useCallback } from 'react';
+import { Virtualizer } from 'virtua';
+import { FilePickerDropzone } from './file-picker';
+import { QuickActions } from './quick-actions';
+import { Spinner } from './spinner';
+import { cn } from './utils';
+
+function DefaultChatListWrapper({ children, ...props }) {
+  return (
+    <div {...props} className={cn('relative size-full min-h-0', props?.className)}>
+      {children}
+    </div>
+  );
+}
+
+function ChatListBase(
+  {
+    key,
+    loading = false,
+    textareaMeasurement,
+    offsetToReach = 200,
+    onScrollStartReached,
+    onScrollEndReached,
+    onListReset,
+    onListCreate,
+    onListGrow,
+    enableFilePickerDropzone = true,
+    containerProps,
+    filePickerDropzoneProps,
+    quickActionsProps,
+    children,
+    quickActionsVisible,
+    minItemsCount = 1,
+    ...props
+  },
+  ref
+) {
+  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(0);
+  const keyRef = useRef(undefined);
+  const [shouldPrependMessages, setShouldPrependMessages] = useState(false);
+  const [isPreparing, setIsPreparing] = useState(false);
+  const virtuaRef = useRef(null);
+  const prepareNextVirtualizer = () => {
+    queueMicrotask(() => {
+      setIsPreparing(true);
+      queueMicrotask(() => setIsPreparing(false));
+    });
+  };
+  const handleOnScroll = async (offset) => {
+    props.onScroll?.(offset);
+
+    if (!virtuaRef.current) return;
+
+    if (typeof onScrollStartReached === 'function' && offset < offsetToReach) {
+      setShouldPrependMessages(true);
+      onScrollStartReached();
+    }
+
+    if (
+      typeof onScrollEndReached === 'function' &&
+      virtuaRef.current.viewportSize + offset + offsetToReach > virtuaRef.current.scrollSize
+    ) {
+      onScrollEndReached();
+    }
+  };
+  const scrollToBottom = useCallback(
+    (force = false) => {
+      if (!virtuaRef.current) return;
+
+      if (force || virtuaRef.current.scrollSize - virtuaRef.current.scrollOffset < virtuaRef.current.viewportSize * 2) {
+        queueMicrotask(() =>
+          virtuaRef.current?.scrollToIndex(itemsCount - 1, {
+            align: 'start',
+          })
+        );
+      }
+    },
+    [itemsCount]
+  );
+
+  useEffect(() => {
+    if (key !== keyRef.current) {
+      prepareNextVirtualizer();
+      onListReset?.(keyRef.current, key);
+      keyRef.current = key;
+      itemsCountRef.current = 0;
+    }
+  }, [key, onListReset]);
+
+  useEffect(() => {
+    if (itemsCountRef.current === 0 && itemsCount > 0) {
+      prepareNextVirtualizer();
+      onListCreate?.();
+      itemsCountRef.current = itemsCount;
+      scrollToBottom(true);
+    }
+
+    if (itemsCount > itemsCountRef.current) {
+      onListGrow?.();
+      itemsCountRef.current = itemsCount;
+
+      if (shouldPrependMessages) {
+        queueMicrotask(() => setShouldPrependMessages(false));
+      }
+
+      scrollToBottom();
+    }
+  }, [itemsCount, shouldPrependMessages, onListCreate, onListGrow, scrollToBottom]);
+
+  useEffect(() => {
+    virtuaRef.current?.scrollBy(textareaMeasurement.shift);
+  }, [textareaMeasurement]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...(virtuaRef.current || {}),
+      scrollToBottom,
+    }),
+    [scrollToBottom]
+  );
+
+  if (isPreparing) {
+    return null;
+  }
+
+  if (minItemsCount >= itemsCount) {
+    return quickActionsVisible ? <QuickActions {...quickActionsProps} /> : <Spinner loading layout="centered" />;
+  }
+
+  return (
+    <ChatListWrapper {...chatListWrapperProps}>
+      <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}>
+          {children}
+        </Virtualizer>
+      </div>
+    </ChatListWrapper>
+  );
+}
+
+const ChatList = forwardRef(ChatListBase);
+
+ChatList.displayName = 'ChatList';
+
+export { ChatList };

package/gen/components/checkbox.jsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+import { cn } from './utils';
+
+function CheckboxBase({ iconElement, iconProps, indicatorProps, ...props }, ref) {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      {...props}
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-ring data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-ring data-[state=checked]:border-ring focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props?.className
+      )}
+    >
+      <CheckboxPrimitive.Indicator
+        {...indicatorProps}
+        className={cn('flex items-center justify-center text-current transition-none', indicatorProps?.className)}
+      >
+        {iconElement || <CheckIcon {...iconProps} className={cn('size-3.5', iconProps?.className)} />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+const Checkbox = forwardRef(CheckboxBase);
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/gen/components/dialog-item.jsx

@@ -60,7 +60,7 @@ function DialogItemBase(
       onClick={onSelect}
       className={cn(
         'flex items-start gap-2 px-2 flex-1 cursor-pointer',
-        'transition-colors duration-200 ease-linear',
+        'transition-colors duration-200 ease-out',
         `${selected ? 'border-l-[0.25em] pl-1 border-l-ring bg-ring/20' : 'hover:bg-ring/5'}`,
         props?.className
       )}

package/gen/components/dialogs-list.jsx

@@ -0,0 +1,73 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { VList } from 'virtua';
+import { PlaceholderText } from './placeholder-text';
+
+const PendingItem = () => (
+  <div className="flex flex-row gap-2 mx-2 border-b">
+    <div className="size-13 my-2 rounded-full bg-muted animate-pulse" />
+    <div className="flex-1 text-muted">
+      <div className="flex flex-row items-center justify-between h-6">
+        <div className="w-2/3 h-4 rounded-full bg-muted animate-pulse" />
+        <div className="w-1/6 h-3.5 rounded-full bg-muted animate-pulse" />
+      </div>
+      <div className="flex flex-col items-start justify-around h-10">
+        <div className="w-7/8 h-3.5 rounded-full bg-muted animate-pulse" />
+        <div className="w-5/6 h-3.5 rounded-full bg-muted animate-pulse" />
+      </div>
+    </div>
+  </div>
+);
+
+function DialogsListBase(
+  {
+    children,
+    pending,
+    pendingListLength = 5,
+    offsetToReach = 50,
+    placeholderVisible,
+    placeholderTitles = ['No dialogs yet.', 'Start a conversation!'],
+    onScrollStartReached,
+    onScrollEndReached,
+    ...props
+  },
+  ref
+) {
+  const vListRef = useRef(null);
+  const skeletonList = Array.from({
+    length: pendingListLength,
+  }).map((_, i) => <PendingItem key={`pending_dialog_item_${i}`} />);
+  const handleOnScroll = async (offset) => {
+    props.onScroll?.(offset);
+
+    if (!vListRef.current) return;
+
+    if (typeof onScrollStartReached === 'function' && offset < offsetToReach) {
+      onScrollStartReached();
+    }
+
+    if (
+      typeof onScrollEndReached === 'function' &&
+      vListRef.current.viewportSize + offset + offsetToReach > vListRef.current.scrollSize
+    ) {
+      onScrollEndReached();
+    }
+  };
+
+  useImperativeHandle(ref, () => vListRef.current || {}, []);
+
+  if (placeholderVisible) {
+    return <PlaceholderText titles={placeholderTitles} className="text-base text-muted" />;
+  }
+
+  return (
+    <VList ref={vListRef} onScroll={handleOnScroll} className="size-full overflow-y-scroll" {...props}>
+      {pending ? skeletonList : children}
+    </VList>
+  );
+}
+
+const DialogsList = forwardRef(DialogsListBase);
+
+DialogsList.displayName = 'DialogsList';
+
+export { DialogsList };

package/gen/components/dismiss-layer.jsx

@@ -7,7 +7,7 @@ function DismissLayerBase(
 ) {
   const innerRef = useRef(null);
 
-  useImperativeHandle(ref, () => innerRef.current, []);
+  useImperativeHandle(ref, () => innerRef.current || {}, []);
 
   const handleClickOrTouch = useCallback(
     (e) => {

package/gen/components/file-picker.jsx

@@ -73,7 +73,7 @@ function FilePickerInputBase(
       {...labelProps}
       htmlFor="file-uploader"
       className={cn(
-        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-in-out cursor-pointer',
+        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-out cursor-pointer',
         labelProps?.className
       )}
     >
@@ -81,7 +81,7 @@ function FilePickerInputBase(
         <Paperclip
           {...iconProps}
           className={cn(
-            'text-foreground group-hover:scale-110 transition-all duration-200 ease-in-out',
+            'text-foreground group-hover:scale-110 transition-all duration-200 ease-out',
             iconProps?.className
           )}
         />

package/gen/components/placeholder-text.jsx

@@ -12,7 +12,11 @@ function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
       className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', props?.className)}
     >
       {rows.map((row, index) => (
-        <div key={`placeholder-text-${index}`} {...rowProps} className={cn('text-center', rowProps?.className)}>
+        <div
+          key={`placeholder-text-${index}`}
+          {...rowProps}
+          className={cn('text-center text-muted-foreground', rowProps?.className)}
+        >
           {row}
         </div>
       ))}

package/gen/components/quick-actions.jsx

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import { cn } from './utils';
+
+function QuickActionsBase(
+  {
+    title,
+    description,
+    actions = [],
+    onAction = () => {},
+    containerProps,
+    titleProps,
+    descriptionProps,
+    actionProps,
+    ...props
+  },
+  ref
+) {
+  if (!actions.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      {...containerProps}
+      className={cn('flex flex-col h-full overflow-y-auto py-2', containerProps?.className)}
+    >
+      <div className="grow" />
+      <div {...props} className={cn('grid gap-2 m-4', props?.className)}>
+        {title && (
+          <h2 {...titleProps} className={cn('font-medium text-foreground text-lg', titleProps?.className)}>
+            {title}
+          </h2>
+        )}
+        {description && (
+          <span {...descriptionProps} className={cn('text-sm text-muted-foreground mb-4', descriptionProps?.className)}>
+            {description}
+          </span>
+        )}
+        {actions.map((action, index) => (
+          <div
+            key={index}
+            {...actionProps}
+            className={cn(
+              'w-full border p-2 rounded-md wrap-break-word cursor-pointer overflow-hidden text-ellipsis bg-ring/5 hover:bg-ring/20 transition-colors duration-200 ease-out',
+              actionProps?.className
+            )}
+            onClick={() => onAction(action)}
+          >
+            {action}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const QuickActions = forwardRef(QuickActionsBase);
+
+QuickActions.displayName = 'QuickActions';
+
+export { QuickActions };

package/gen/components/search.jsx

@@ -58,7 +58,7 @@ function SearchBase(
           onClick={handleOnCancel}
           {...cancelIconProps}
           className={cn(
-            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-in-out',
+            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-out',
             value.length > 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-75 pointer-events-none',
             cancelIconProps?.className
           )}

package/gen/components/status-call.jsx

@@ -0,0 +1,18 @@
+import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing } from 'lucide-react';
+import { cn } from './utils';
+
+const StatusCall = ({ fromMe, status, ...props }) => {
+  const CallIcon =
+    status === 'hungUp' ? Phone : fromMe ? PhoneOutgoing : status === 'reject' ? PhoneIncoming : PhoneMissed;
+
+  return (
+    <CallIcon
+      {...props}
+      className={cn('size-4', status === 'hungUp' ? 'text-green-500' : 'text-red-500', props?.className)}
+    />
+  );
+};
+
+StatusCall.displayName = 'StatusCall';
+
+export { StatusCall };

package/gen/components/stream-view.jsx

@@ -9,7 +9,7 @@ function StreamViewBase({ id, stream, mirror, className, muted, ...props }, ref)
   const defaultClassName = 'size-full object-contain';
   const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
 
-  useImperativeHandle(ref, () => innerRef.current);
+  useImperativeHandle(ref, () => innerRef.current || {}, []);
 
   useEffect(() => {
     if (innerRef.current && stream) {
@@ -116,13 +116,13 @@ function FullscreenStreamViewBase(
 
   useImperativeHandle(
     ref,
-    () =>
-      Object.assign(innerRef.current, {
-        isFullscreen,
-        isPictureInPicture,
-        toggleFullscreen,
-        togglePictureInPicture,
-      }),
+    () => ({
+      ...(innerRef.current || {}),
+      isFullscreen,
+      isPictureInPicture,
+      toggleFullscreen,
+      togglePictureInPicture,
+    }),
     [isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture]
   );
 

package/gen/index.js

@@ -1,3 +1,5 @@
+export { AlertDialog } from './components/alert-dialog';
+
 export {
   Attachment,
   AttachmentLink,
@@ -14,12 +16,18 @@ export { Badge } from './components/badge';
 
 export { Button } from './components/button';
 
-export { CallMessage } from './components/call-message';
+export { ChatBubbleMessage, ChatBubbleInfo } from './components/chat-bubble';
+
+export { ChatInput } from './components/chat-input';
+
+export { ChatList } from './components/chat-list';
 
-export { ChatMessage } from './components/chat-message';
+export { Checkbox } from './components/checkbox';
 
 export { DialogItem } from './components/dialog-item';
 
+export { DialogsList } from './components/dialogs-list';
+
 export { DismissLayer } from './components/dismiss-layer';
 
 export { FilePickerInput, FilePickerDropzone } from './components/file-picker';
@@ -38,10 +46,14 @@ export { PlaceholderText } from './components/placeholder-text';
 
 export { Presence, PresenceBadge } from './components/presence';
 
+export { QuickActions } from './components/quick-actions';
+
 export { Search } from './components/search';
 
 export { Spinner } from './components/spinner';
 
+export { StatusCall } from './components/status-call';
+
 export { StatusIndicator } from './components/status-indicator';
 
 export { StatusSent } from './components/status-sent';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -64,6 +64,7 @@
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
@@ -72,9 +73,11 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "linkify-react": "^4.3.2",
-    "lucide-react": "^0.561.0",
+    "lucide-react": "^0.562.0",
     "react-intersection-observer": "^10.0.0",
-    "tailwind-merge": "^3.4.0"
+    "react-textarea-autosize": "^8.5.9",
+    "tailwind-merge": "^3.4.0",
+    "virtua": "^0.48.2"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -89,22 +92,22 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "@stylistic/eslint-plugin": "^5.6.1",
-    "@types/node": "^25.0.1",
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "execa": "^9.6.1",
     "fast-glob": "^3.3.3",
-    "fs-extra": "^11.3.2",
+    "fs-extra": "^11.3.3",
     "globals": "^16.5.0",
     "prettier": "^3.7.4",
     "prompts": "^2.4.2",
-    "rollup": "^4.53.3",
+    "rollup": "^4.53.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0"
+    "typescript-eslint": "^8.50.0"
   },
   "engines": {
     "node": ">=18"