@connectycube/react-ui-kit 0.1.0 → 0.1.2

package/README.md

@@ -1,4 +1,4 @@
-# DRAFT: @connectycube/react-ui-kit
+# @connectycube/react-ui-kit (BETA)
 
 **Simple React UI Kit generator with TSX/JSX support**
 
@@ -44,7 +44,7 @@ export function App() {
 You can generate new components in your project using the CLI:
 
 ```bash
-npx @connectycube/react-ui-kit add local-stream
+npx @connectycube/react-ui-kit@beta add local-stream
 ```
 
 This will:

package/gen/components/alert-dialog.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Button } from './button';
 import { cn } from './utils';
@@ -87,7 +87,7 @@ function AlertDialogBase(
   );
 }
 
-const AlertDialog = forwardRef(AlertDialogBase);
+const AlertDialog = React.forwardRef(AlertDialogBase);
 
 AlertDialog.displayName = 'AlertDialog';
 

package/gen/components/attachment.jsx

@@ -1,16 +1,15 @@
-import { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
+import * as React from 'react';
 import { File, FileXCorner } from 'lucide-react';
 import { Spinner } from './spinner';
 import { cn, getRandomString } from './utils';
 
-function AttachmentLinkBase({ url, pending = false, children, ...props }, ref) {
+function AttachmentLinkBase({ pending = false, children, ...props }, ref) {
   return (
     <a
       ref={ref}
       target="_blank"
       rel="noopener noreferrer"
       {...props}
-      href={url}
       className={cn(
         'group relative min-h-8 min-w-8 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
@@ -22,7 +21,7 @@ function AttachmentLinkBase({ url, pending = false, children, ...props }, ref) {
   );
 }
 
-const AttachmentLink = forwardRef(AttachmentLinkBase);
+const AttachmentLink = React.forwardRef(AttachmentLinkBase);
 
 AttachmentLink.displayName = 'AttachmentLink';
 
@@ -40,7 +39,7 @@ function AttachmentAudioBase({ uid, url, pending = false, containerProps, ...pro
   );
 }
 
-const AttachmentAudio = forwardRef(AttachmentAudioBase);
+const AttachmentAudio = React.forwardRef(AttachmentAudioBase);
 
 function AttachmentVideoBase(
   { uid, url, maxSize = 360, pending = false, onReady = () => {}, containerProps, ...props },
@@ -48,8 +47,8 @@ function AttachmentVideoBase(
 ) {
   const videoId = `attachment_video_${uid || getRandomString()}`;
   const videoMaxSize = `${maxSize}px`;
-  const playerRef = useRef(null);
-  const [style, setStyle] = useState({
+  const playerRef = React.useRef(null);
+  const [style, setStyle] = React.useState({
     maxHeight: videoMaxSize,
     maxWidth: videoMaxSize,
   });
@@ -73,7 +72,7 @@ function AttachmentVideoBase(
     }
   };
 
-  useImperativeHandle(ref, () => playerRef.current || {}, []);
+  React.useImperativeHandle(ref, () => playerRef.current || {}, []);
 
   return (
     <div
@@ -96,7 +95,7 @@ function AttachmentVideoBase(
   );
 }
 
-const AttachmentVideo = forwardRef(AttachmentVideoBase);
+const AttachmentVideo = React.forwardRef(AttachmentVideoBase);
 
 AttachmentVideo.displayName = 'AttachmentVideo';
 
@@ -125,7 +124,7 @@ function AttachmentImageBase({ uid, url, pending = false, onReady = () => {}, li
   );
 }
 
-const AttachmentImage = forwardRef(AttachmentImageBase);
+const AttachmentImage = React.forwardRef(AttachmentImageBase);
 
 AttachmentImage.displayName = 'AttachmentImage';
 
@@ -201,7 +200,7 @@ function AttachmentBase({ mimeType, onReady = () => {}, containerProps = {}, lin
   }
 }
 
-const Attachment = memo(AttachmentBase);
+const Attachment = React.memo(AttachmentBase);
 
 Attachment.displayName = 'Attachment';
 

package/gen/components/avatar.jsx

@@ -1,4 +1,4 @@
-import { memo, forwardRef } from 'react';
+import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { PresenceBadge } from './presence';
 import { cn } from './utils';
@@ -59,7 +59,7 @@ function AvatarBase(
   );
 }
 
-const Avatar = memo(forwardRef(AvatarBase));
+const Avatar = React.memo(React.forwardRef(AvatarBase));
 
 Avatar.displayName = 'Avatar';
 

package/gen/components/badge.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from './utils';
@@ -38,7 +38,7 @@ function BadgeBase({ className, variant, asChild = false, ...props }, ref) {
   );
 }
 
-const Badge = forwardRef(BadgeBase);
+const Badge = React.forwardRef(BadgeBase);
 
 Badge.displayName = 'Badge';
 

package/gen/components/button.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from './utils';
@@ -50,8 +50,9 @@ function ButtonBase({ asChild = false, variant, size, className, ...props }, ref
   );
 }
 
-const Button = forwardRef(ButtonBase);
+const Button = React.forwardRef(ButtonBase);
 
 Button.displayName = 'Button';
 
-export { Button };
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants };

package/gen/components/chat-bubble.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import * as React from 'react';
 import { useInView } from 'react-intersection-observer';
 import { Avatar } from './avatar';
 import { FormattedDate } from './formatted-date';
@@ -7,8 +7,8 @@ import { cn } from './utils';
 
 function ChatBubbleBase({ onView = () => {}, isLast, children, ...props }, ref) {
   const [setRef, inView] = useInView();
-  const messageRef = useRef(null);
-  const setRefs = useCallback(
+  const messageRef = React.useRef(null);
+  const setRefs = React.useCallback(
     (node) => {
       messageRef.current = node;
       setRef(node);
@@ -16,13 +16,13 @@ function ChatBubbleBase({ onView = () => {}, isLast, children, ...props }, ref)
     [setRef]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (inView) {
       onView();
     }
   }, [inView, onView]);
 
-  useImperativeHandle(ref, () => messageRef.current || {}, []);
+  React.useImperativeHandle(ref, () => messageRef.current || {}, []);
 
   return (
     <div ref={setRefs} {...props} className={cn('mt-2', isLast && 'mb-2', inView && 'view', props?.className)}>
@@ -31,7 +31,7 @@ function ChatBubbleBase({ onView = () => {}, isLast, children, ...props }, ref)
   );
 }
 
-const ChatBubble = forwardRef(ChatBubbleBase);
+const ChatBubble = React.forwardRef(ChatBubbleBase);
 
 function ChatBubbleMessageBase(
   {
@@ -111,7 +111,7 @@ function ChatBubbleMessageBase(
   );
 }
 
-const ChatBubbleMessage = memo(forwardRef(ChatBubbleMessageBase));
+const ChatBubbleMessage = React.memo(React.forwardRef(ChatBubbleMessageBase));
 
 ChatBubbleMessage.displayName = 'ChatBubbleMessage';
 
@@ -134,7 +134,7 @@ function ChatBubbleInfoBase(
   );
 }
 
-const ChatBubbleInfo = memo(forwardRef(ChatBubbleInfoBase));
+const ChatBubbleInfo = React.memo(React.forwardRef(ChatBubbleInfoBase));
 
 ChatBubbleInfo.displayName = 'ChatBubbleInfo';
 

package/gen/components/chat-input.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import * as React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { SendHorizontal } from 'lucide-react';
 import { Label } from './label';
@@ -25,7 +25,7 @@ function ChatInputSendBase({ onSend = () => {}, iconElement, iconProps, ...props
   );
 }
 
-const ChatInputSend = forwardRef(ChatInputSendBase);
+const ChatInputSend = React.forwardRef(ChatInputSendBase);
 
 ChatInputSend.displayName = 'ChatInputSend';
 
@@ -45,11 +45,11 @@ function ChatInputBase(
   },
   ref
 ) {
-  const [value, setValue] = useState();
-  const textareaRef = useRef(null);
-  const textareaHeightRef = useRef(0);
-  const typingRef = useRef(false);
-  const typingTimeoutRef = useRef(undefined);
+  const [value, setValue] = React.useState();
+  const textareaRef = React.useRef(null);
+  const textareaHeightRef = React.useRef(0);
+  const typingRef = React.useRef(false);
+  const typingTimeoutRef = React.useRef(undefined);
   const handleStopTyping = () => {
     typingRef.current = false;
     onTyping(false);
@@ -103,7 +103,7 @@ function ChatInputBase(
     }
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     const textarea = textareaRef.current;
 
     handleStopTyping();
@@ -115,7 +115,7 @@ function ChatInputBase(
     };
   }, [props.key]);
 
-  useImperativeHandle(ref, () => textareaRef.current || {}, []);
+  React.useImperativeHandle(ref, () => textareaRef.current || {}, []);
 
   return (
     <div {...containerProps} className={cn('flex items-end gap-2', containerProps?.className)}>
@@ -145,7 +145,7 @@ function ChatInputBase(
   );
 }
 
-const ChatInput = forwardRef(ChatInputBase);
+const ChatInput = React.forwardRef(ChatInputBase);
 
 ChatInput.displayName = 'ChatInput';
 

package/gen/components/chat-list.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef, useCallback } from 'react';
+import * as React from 'react';
 import { Virtualizer } from 'virtua';
 import { FilePickerDropzone } from './file-picker';
 import { QuickActions } from './quick-actions';
@@ -38,11 +38,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(0);
-  const keyRef = useRef(undefined);
-  const [shouldPrependMessages, setShouldPrependMessages] = useState(false);
-  const [isPreparing, setIsPreparing] = useState(false);
-  const virtuaRef = useRef(null);
+  const itemsCountRef = React.useRef(0);
+  const keyRef = React.useRef(undefined);
+  const [shouldPrependMessages, setShouldPrependMessages] = React.useState(false);
+  const [isPreparing, setIsPreparing] = React.useState(false);
+  const virtuaRef = React.useRef(null);
   const prepareNextVirtualizer = () => {
     queueMicrotask(() => {
       setIsPreparing(true);
@@ -66,7 +66,7 @@ function ChatListBase(
       onScrollEndReached();
     }
   };
-  const scrollToBottom = useCallback(
+  const scrollToBottom = React.useCallback(
     (force = false) => {
       if (!virtuaRef.current) return;
 
@@ -81,7 +81,7 @@ function ChatListBase(
     [itemsCount]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (key !== keyRef.current) {
       prepareNextVirtualizer();
       onListReset?.(keyRef.current, key);
@@ -90,7 +90,7 @@ function ChatListBase(
     }
   }, [key, onListReset]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (itemsCountRef.current === 0 && itemsCount > 0) {
       prepareNextVirtualizer();
       onListCreate?.();
@@ -110,11 +110,11 @@ function ChatListBase(
     }
   }, [itemsCount, shouldPrependMessages, onListCreate, onListGrow, scrollToBottom]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     virtuaRef.current?.scrollBy(textareaMeasurement.shift);
   }, [textareaMeasurement]);
 
-  useImperativeHandle(
+  React.useImperativeHandle(
     ref,
     () => ({
       ...(virtuaRef.current || {}),
@@ -127,7 +127,7 @@ function ChatListBase(
     return null;
   }
 
-  if (minItemsCount >= itemsCount) {
+  if (minItemsCount > itemsCount) {
     return quickActionsVisible ? <QuickActions {...quickActionsProps} /> : <Spinner loading layout="centered" />;
   }
 
@@ -144,7 +144,7 @@ function ChatListBase(
   );
 }
 
-const ChatList = forwardRef(ChatListBase);
+const ChatList = React.forwardRef(ChatListBase);
 
 ChatList.displayName = 'ChatList';
 

package/gen/components/checkbox.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 import { cn } from './utils';
@@ -23,7 +23,7 @@ function CheckboxBase({ iconElement, iconProps, indicatorProps, ...props }, ref)
   );
 }
 
-const Checkbox = forwardRef(CheckboxBase);
+const Checkbox = React.forwardRef(CheckboxBase);
 
 Checkbox.displayName = 'Checkbox';
 

package/gen/components/dialog-item.jsx

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { Avatar } from './avatar';
 import { Users } from 'lucide-react';
-import { forwardRef, memo } from 'react';
 import { FormattedDate } from './formatted-date';
 import { StatusSent } from './status-sent';
 import { cn } from './utils';
@@ -145,7 +145,7 @@ function DialogItemBase(
   );
 }
 
-const DialogItem = memo(forwardRef(DialogItemBase));
+const DialogItem = React.memo(React.forwardRef(DialogItemBase));
 
 DialogItem.displayName = 'DialogItem';
 

package/gen/components/dialogs-list.jsx

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

package/gen/components/dismiss-layer.jsx

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 
 function DismissLayerBase(
   { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, ...props },
   ref
 ) {
-  const innerRef = useRef(null);
+  const innerRef = React.useRef(null);
 
-  useImperativeHandle(ref, () => innerRef.current || {}, []);
+  React.useImperativeHandle(ref, () => innerRef.current || {}, []);
 
-  const handleClickOrTouch = useCallback(
+  const handleClickOrTouch = React.useCallback(
     (e) => {
       if (!disableClickOutside && active && e.target === innerRef.current) {
         onDismiss();
@@ -17,7 +17,7 @@ function DismissLayerBase(
     },
     [disableClickOutside, active, onDismiss]
   );
-  const handleKeyEvent = useCallback(
+  const handleKeyEvent = React.useCallback(
     (ev) => {
       if (!disableEscKeyPress && active && ev.key === 'Escape') {
         onDismiss();
@@ -26,7 +26,7 @@ function DismissLayerBase(
     [disableEscKeyPress, active, onDismiss]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!disableEscKeyPress && active) {
       document.addEventListener('keydown', handleKeyEvent);
 
@@ -50,7 +50,7 @@ function DismissLayerBase(
   );
 }
 
-const DismissLayer = forwardRef(DismissLayerBase);
+const DismissLayer = React.forwardRef(DismissLayerBase);
 
 DismissLayer.displayName = 'DismissLayer';
 

package/gen/components/file-picker.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useState } from 'react';
+import * as React from 'react';
 import { FilePlusCorner, Paperclip } from 'lucide-react';
 import { Label } from './label';
 import { cn } from './utils';
@@ -100,7 +100,7 @@ function FilePickerInputBase(
   );
 }
 
-const FilePickerInput = forwardRef(FilePickerInputBase);
+const FilePickerInput = React.forwardRef(FilePickerInputBase);
 
 FilePickerInput.displayName = 'FilePickerInput';
 
@@ -121,7 +121,7 @@ function FilePickerDropzoneBase(
   },
   ref
 ) {
-  const [isDragging, setIsDragging] = useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
   const handleDragEvent = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -193,7 +193,7 @@ function FilePickerDropzoneBase(
   );
 }
 
-const FilePickerDropzone = forwardRef(FilePickerDropzoneBase);
+const FilePickerDropzone = React.forwardRef(FilePickerDropzoneBase);
 
 FilePickerDropzone.displayName = 'FilePickerDropzone';
 

package/gen/components/formatted-date.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo } from 'react';
+import * as React from 'react';
 import { differenceInCalendarDays, format, formatDistanceToNow, isToday } from 'date-fns';
 import { el, enUS, uk } from 'date-fns/locale';
 import { cn } from './utils';
@@ -50,7 +50,7 @@ function FormattedDateBase({ date, language, distanceToNow, ...props }, ref) {
   );
 }
 
-const FormattedDate = memo(forwardRef(FormattedDateBase));
+const FormattedDate = React.memo(React.forwardRef(FormattedDateBase));
 
 FormattedDate.displayName = 'FormattedDate';
 

package/gen/components/input.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 
 function InputBase(props, ref) {
@@ -16,7 +16,7 @@ function InputBase(props, ref) {
   );
 }
 
-const Input = forwardRef(InputBase);
+const Input = React.forwardRef(InputBase);
 
 Input.displayName = 'Input';
 

package/gen/components/label.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { Root as LabelRoot } from '@radix-ui/react-label';
 import { cn } from './utils';
 
@@ -15,7 +15,7 @@ function LabelBase({ ...props }, ref) {
   );
 }
 
-const Label = forwardRef(LabelBase);
+const Label = React.forwardRef(LabelBase);
 
 Label.displayName = 'Label';
 

package/gen/components/link-preview.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useCallback, useState } from 'react';
+import * as React from 'react';
 import { Globe } from 'lucide-react';
 import { cn } from './utils';
 
@@ -34,23 +34,23 @@ function LinkPreviewBase(
   },
   ref
 ) {
-  const [iconSrc, setIconSrc] = useState(icon);
-  const [imageSrc, setImageSrc] = useState(image);
-  const handleOnLoad = useCallback(
+  const [iconSrc, setIconSrc] = React.useState(icon);
+  const [imageSrc, setImageSrc] = React.useState(image);
+  const handleOnLoad = React.useCallback(
     (event) => {
       imageProps?.onLoad?.(event);
       onReady();
     },
     [onReady, imageProps]
   );
-  const handleIconOnError = useCallback(
+  const handleIconOnError = React.useCallback(
     (event) => {
       iconProps?.onError?.(event);
       setIconSrc(undefined);
     },
     [iconProps]
   );
-  const handleImageOnError = useCallback(
+  const handleImageOnError = React.useCallback(
     (event) => {
       imageProps?.onError?.(event);
       setImageSrc(undefined);
@@ -124,7 +124,7 @@ function LinkPreviewBase(
   );
 }
 
-const LinkPreview = memo(forwardRef(LinkPreviewBase));
+const LinkPreview = React.memo(React.forwardRef(LinkPreviewBase));
 
 LinkPreview.displayName = 'LinkPreview';
 

package/gen/components/linkify-text.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import * as React from 'react';
 import Linkify from 'linkify-react';
 import { cn } from './utils';
 
@@ -21,8 +21,8 @@ function LinkifyTextBase(
   },
   ref
 ) {
-  const pendingRef = useRef(pending);
-  const options = useMemo(
+  const pendingRef = React.useRef(pending);
+  const options = React.useMemo(
     () => ({
       ...DEFAULT_LINKIFY_OPTIONS,
       ...linkifyProps,
@@ -31,7 +31,7 @@ function LinkifyTextBase(
     [linkifyProps]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (pendingRef.current && !pending) {
       onReady();
     }
@@ -63,7 +63,7 @@ function LinkifyTextBase(
   );
 }
 
-const LinkifyText = memo(forwardRef(LinkifyTextBase));
+const LinkifyText = React.memo(React.forwardRef(LinkifyTextBase));
 
 LinkifyText.displayName = 'LinkifyText';
 

package/gen/components/placeholder-text.jsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { forwardRef } from 'react';
 import { cn } from './utils';
 
 function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
@@ -24,7 +23,7 @@ function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
   );
 }
 
-const PlaceholderText = forwardRef(PlaceholderTextBase);
+const PlaceholderText = React.forwardRef(PlaceholderTextBase);
 
 PlaceholderText.displayName = 'PlaceholderText';
 

package/gen/components/presence.jsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { capitalize, cn } from './utils';
 
 function PresenceBadge({ status, ...props }) {

package/gen/components/quick-actions.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 
 function QuickActionsBase(
@@ -55,7 +55,7 @@ function QuickActionsBase(
   );
 }
 
-const QuickActions = forwardRef(QuickActionsBase);
+const QuickActions = React.forwardRef(QuickActionsBase);
 
 QuickActions.displayName = 'QuickActions';