@connectycube/react-ui-kit 0.1.0 → 0.1.2

package/src/components/connectycube-ui/attachment.tsx

@@ -1,269 +0,0 @@
-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;
-  pending?: 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, pending = 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-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
-      )}
-    >
-      {children}
-      <Spinner loading={pending} layout="overlay" />
-    </a>
-  );
-}
-
-const AttachmentLink = forwardRef<HTMLAnchorElement, AttachmentLinkProps>(AttachmentLinkBase);
-
-AttachmentLink.displayName = 'AttachmentLink';
-
-function AttachmentAudioBase(
-  { uid, url, pending = false, containerProps, ...props }: AttachmentAudioProps,
-  ref: React.ForwardedRef<HTMLAudioElement>
-) {
-  const audioId = `attachment_audio_${uid || getRandomString()}`;
-
-  return (
-    <div
-      {...containerProps}
-      className={cn('relative min-h-8 min-w-8 w-full rounded-md overflow-hidden', containerProps?.className)}
-    >
-      <audio ref={ref} src={url} id={audioId} controls {...props} />
-      <Spinner loading={pending} layout="overlay" />
-    </div>
-  );
-}
-
-const AttachmentAudio = forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
-
-function AttachmentVideoBase(
-  { uid, url, maxSize = 360, pending = 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={pending} layout="overlay" />
-    </div>
-  );
-}
-
-const AttachmentVideo = forwardRef<HTMLVideoElement, AttachmentVideoProps>(AttachmentVideoBase);
-
-AttachmentVideo.displayName = 'AttachmentVideo';
-
-function AttachmentImageBase(
-  { uid, url, pending = 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} pending={pending} {...linkProps}>
-      <img
-        ref={ref}
-        src={url}
-        id={imageId}
-        alt="attachment"
-        {...props}
-        className={cn(
-          'rounded-md object-cover min-h-8 min-w-8 max-h-[360px] group-hover:scale-102 transition-transform duration-300 ease-out',
-          props?.className
-        )}
-        onLoad={handleLoad}
-      />
-    </AttachmentLink>
-  );
-}
-
-const AttachmentImage = forwardRef<HTMLImageElement, AttachmentImageProps>(AttachmentImageBase);
-
-AttachmentImage.displayName = 'AttachmentImage';
-
-function AttachmentFile({ url, name, pending = false, iconElement, linkProps, ...props }: AttachmentFileProps) {
-  const fileId = `attachment_file_${props.id || getRandomString()}`;
-
-  return (
-    <AttachmentLink
-      href={url}
-      pending={pending}
-      {...linkProps}
-      className={cn('flex-row gap-1.5 p-2 hover:shadow', linkProps?.className)}
-    >
-      {iconElement || (
-        <File
-          id={fileId}
-          {...props}
-          className={cn(
-            'size-5 shrink-0 text-foreground/80 group-hover:text-foreground duration-300 ease-out',
-            props?.className
-          )}
-        />
-      )}
-      {name && (
-        <span className="font-medium line-clamp-1 break-all text-foreground/80 group-hover:text-foreground duration-300 ease-out">
-          {name}
-        </span>
-      )}
-    </AttachmentLink>
-  );
-}
-
-AttachmentFile.displayName = 'AttachmentFile';
-
-function AttachmentFailed({
-  name = 'Unknown file',
-  pending = false,
-  iconElement,
-  containerProps,
-  ...props
-}: AttachmentFailedProps) {
-  const failedId = `attachment_failed_${props.id || getRandomString()}`;
-
-  return (
-    <div
-      {...containerProps}
-      className={cn(
-        'relative min-h-8 min-w-8 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={pending} 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);
-
-Attachment.displayName = 'Attachment';
-
-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/connectycube-ui/avatar.jsx

@@ -1,54 +0,0 @@
-import { memo, forwardRef } from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { PresenceBadge } from './presence';
-import { cn } from './utils';
-
-function getInitialsFromName(name) {
-  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
-  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
-
-  return result.toUpperCase();
-}
-
-function AvatarBase(
-  { src, name = 'NA', online, presence, className, onlineProps, presenceProps, imageProps, fallbackProps, ...props },
-  ref
-) {
-  const initials = getInitialsFromName(name);
-
-  return (
-    <AvatarPrimitive.Root ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
-      <AvatarPrimitive.Image
-        {...imageProps}
-        src={src}
-        className={cn('aspect-square size-full rounded-full overflow-hidden object-cover', imageProps?.className)}
-      />
-      <AvatarPrimitive.Fallback
-        {...fallbackProps}
-        className={cn('bg-muted size-full rounded-full flex items-center justify-center', fallbackProps?.className)}
-      >
-        {initials}
-      </AvatarPrimitive.Fallback>
-      {online && (
-        <div
-          {...onlineProps}
-          className={cn(
-            'absolute top-0 right-0 rounded-full border-2 bg-green-600 border-green-200 size-3.5',
-            onlineProps?.className
-          )}
-        />
-      )}
-      <PresenceBadge
-        status={presence}
-        {...presenceProps}
-        className={cn('absolute bottom-0 right-0', presenceProps?.className)}
-      />
-    </AvatarPrimitive.Root>
-  );
-}
-
-const Avatar = memo(forwardRef(AvatarBase));
-
-Avatar.displayName = 'Avatar';
-
-export { Avatar };

package/src/components/connectycube-ui/avatar.tsx

@@ -1,77 +0,0 @@
-import type React from 'react';
-import { memo, forwardRef } from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { PresenceBadge, type PresenceStatus, type PresenceBadgeProps } from './presence';
-import { cn } from './utils';
-
-interface AvatarProps extends AvatarPrimitive.AvatarProps {
-  src?: string;
-  name?: string;
-  online?: boolean;
-  presence?: PresenceStatus;
-  onlineProps?: React.ComponentProps<'div'>;
-  presenceProps?: PresenceBadgeProps;
-  imageProps?: AvatarPrimitive.AvatarImageProps;
-  fallbackProps?: AvatarPrimitive.AvatarFallbackProps;
-}
-
-function getInitialsFromName(name?: string): string {
-  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
-  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
-
-  return result.toUpperCase();
-}
-
-function AvatarBase(
-  {
-    src,
-    name = 'NA',
-    online,
-    presence,
-    className,
-    onlineProps,
-    presenceProps,
-    imageProps,
-    fallbackProps,
-    ...props
-  }: AvatarProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const initials = getInitialsFromName(name);
-
-  return (
-    <AvatarPrimitive.Root ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
-      <AvatarPrimitive.Image
-        {...imageProps}
-        src={src}
-        className={cn('aspect-square size-full rounded-full overflow-hidden object-cover', imageProps?.className)}
-      />
-      <AvatarPrimitive.Fallback
-        {...fallbackProps}
-        className={cn('bg-muted size-full rounded-full flex items-center justify-center', fallbackProps?.className)}
-      >
-        {initials}
-      </AvatarPrimitive.Fallback>
-      {online && (
-        <div
-          {...onlineProps}
-          className={cn(
-            'absolute top-0 right-0 rounded-full border-2 bg-green-600 border-green-200 size-3.5',
-            onlineProps?.className
-          )}
-        />
-      )}
-      <PresenceBadge
-        status={presence}
-        {...presenceProps}
-        className={cn('absolute bottom-0 right-0', presenceProps?.className)}
-      />
-    </AvatarPrimitive.Root>
-  );
-}
-
-const Avatar = memo(forwardRef<HTMLDivElement, AvatarProps>(AvatarBase));
-
-Avatar.displayName = 'Avatar';
-
-export { Avatar, type AvatarProps };

package/src/components/connectycube-ui/badge.jsx

@@ -1,45 +0,0 @@
-import { forwardRef } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { cn } from './utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none 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 transition-[color,box-shadow] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-function BadgeBase({ className, variant, asChild = false, ...props }, ref) {
-  const Comp = asChild ? Slot : 'span';
-
-  return (
-    <Comp
-      ref={ref}
-      {...props}
-      className={cn(
-        badgeVariants({
-          variant,
-        }),
-        className
-      )}
-    />
-  );
-}
-
-const Badge = forwardRef(BadgeBase);
-
-Badge.displayName = 'Badge';
-
-export { Badge };

package/src/components/connectycube-ui/badge.tsx

@@ -1,42 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from './utils';
-
-interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof badgeVariants> {
-  asChild?: boolean;
-}
-
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none 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 transition-[color,box-shadow] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-function BadgeBase(
-  { className, variant, asChild = false, ...props }: BadgeProps,
-  ref?: React.ForwardedRef<HTMLElement>
-) {
-  const Comp = asChild ? Slot : 'span';
-
-  return <Comp ref={ref} {...props} className={cn(badgeVariants({ variant }), className)} />;
-}
-
-const Badge = forwardRef<HTMLElement, BadgeProps>(BadgeBase);
-
-Badge.displayName = 'Badge';
-
-export { Badge, type BadgeProps };

package/src/components/connectycube-ui/chat-input.tsx

@@ -1,174 +0,0 @@
-import type React from 'react';
-import { ChangeEvent, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import TextareaAutosize, { type TextareaAutosizeProps, type TextareaHeightChangeMeta } from 'react-textarea-autosize';
-import { SendHorizontal, type LucideProps } from 'lucide-react';
-import { Label, type LabelProps } from './label';
-import { cn } from './utils';
-
-interface ChatInputSendProps extends LabelProps {
-  onSend: () => void;
-  iconElement?: React.ReactNode;
-  iconProps?: LucideProps;
-}
-
-interface ChatInputProps extends TextareaAutosizeProps, React.ComponentProps<'textarea'> {
-  key?: string;
-  children?: React.ReactNode;
-  pending?: boolean;
-  draft?: string;
-  onSend?: (value?: string) => void;
-  onDraft?: (value?: string) => void;
-  onTyping?: (typing?: boolean) => void;
-  onHeightGrow?: (data: { height: number; shift: number }) => void;
-  hideChatInputSend?: boolean;
-  chatInputSendProps?: ChatInputSendProps;
-  containerProps?: React.ComponentProps<'div'>;
-}
-
-function ChatInputSendBase(
-  { onSend = () => {}, iconElement, iconProps, ...props }: ChatInputSendProps,
-  ref: React.ForwardedRef<HTMLLabelElement>
-) {
-  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(
-            'size-7 text-background group-hover:scale-110 transition-all duration-200 ease-out',
-            iconProps?.className
-          )}
-        />
-      )}
-    </Label>
-  );
-}
-
-const ChatInputSend = forwardRef<HTMLLabelElement, ChatInputSendProps>(ChatInputSendBase);
-
-ChatInputSend.displayName = 'ChatInputSend';
-
-function ChatInputBase(
-  {
-    key,
-    pending = false,
-    draft,
-    onSend = () => {},
-    onDraft = () => {},
-    onTyping = () => {},
-    onHeightGrow = () => {},
-    hideChatInputSend = false,
-    chatInputSendProps,
-    containerProps,
-    children,
-    ...props
-  }: ChatInputProps,
-  ref: React.ForwardedRef<HTMLTextAreaElement>
-) {
-  const [value, setValue] = useState<string>();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const textareaHeightRef = useRef<number>(0);
-  const typingRef = useRef<boolean>(false);
-  const typingTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-  const handleStopTyping = () => {
-    typingRef.current = false;
-    onTyping(false);
-
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-      typingTimeoutRef.current = undefined;
-    }
-  };
-  const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    const { data } = event.nativeEvent as InputEvent;
-
-    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: number, meta: TextareaHeightChangeMeta) => {
-    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: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    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);
-    };
-  }, [key]);
-
-  useImperativeHandle(ref, () => textareaRef.current!, [textareaRef]);
-
-  return (
-    <div {...containerProps} className={cn('flex items-end gap-2', containerProps?.className)}>
-      <TextareaAutosize
-        key={key}
-        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<HTMLTextAreaElement, ChatInputProps>(ChatInputBase);
-
-ChatInput.displayName = 'ChatInput';
-
-export { ChatInput };