@connectycube/react-ui-kit 0.0.17 → 0.0.18

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,42 @@
+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/dialog-item.jsx

@@ -0,0 +1,149 @@
+import { forwardRef, memo } from 'react';
+import { Users } from 'lucide-react';
+import { cn } from './utils';
+import { Avatar } from './avatar';
+import { StatusSent } from './status-sent';
+import { FormattedDate } from './formatted-date';
+import { Badge } from './badge';
+
+function DialogItemBase(
+  {
+    index = -1,
+    isPrivateDialog,
+    selected,
+    onSelect = () => {},
+    name,
+    photo,
+    userOnline,
+    userPresence,
+    hasGroupIcon,
+    lastSentStatus,
+    lastSentDate,
+    lastSenderName,
+    lastMessage,
+    typingStatusText,
+    draft,
+    draftLabel = 'Draft',
+    unreadCount = 0,
+    language = 'en',
+    divider = 'bottom',
+    avatarProps,
+    contentProps,
+    headerProps,
+    headerLeftProps,
+    groupIconProps,
+    nameProps,
+    headerRightProps,
+    statusSentIconProps,
+    formattedDateProps,
+    footerProps,
+    lastMessageProps,
+    draftLabelProps,
+    lastSenderNameProps,
+    unreadBadgeProps,
+    dividerProps,
+    ...props
+  },
+  ref
+) {
+  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';
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      onClick={onSelect}
+      className={cn(
+        'flex items-start gap-2 px-2 flex-1 cursor-pointer',
+        'transition-colors duration-200 ease-linear',
+        `${selected ? 'border-l-[0.25em] pl-1 border-l-ring bg-ring/20' : 'hover:bg-ring/5'}`,
+        props?.className
+      )}
+    >
+      <Avatar
+        src={avatarSource}
+        name={avatarFallback}
+        online={avatarOnline}
+        presence={avatarPresence}
+        {...avatarProps}
+        className={cn(`size-13 my-2 ${photo ? 'bg-ring/10' : 'bg-ring/30'}`, avatarProps?.className)}
+      />
+
+      <div
+        {...contentProps}
+        className={cn('relative self-stretch flex-1 flex-col text-foreground', contentProps?.className)}
+      >
+        <div {...headerProps} className={cn('flex items-center justify-between gap-1', headerProps?.className)}>
+          <div {...headerLeftProps} className={cn('flex items-center gap-1', headerLeftProps?.className)}>
+            {!isPrivateDialog && hasGroupIcon && (
+              <Users
+                {...groupIconProps}
+                className={cn('text-muted-foreground size-4 min-w-4', groupIconProps?.className)}
+              />
+            )}
+            <span {...nameProps} className={cn('font-medium text-left line-clamp-1', nameProps?.className)}>
+              {name}
+            </span>
+          </div>
+          <div {...headerRightProps} className={cn('flex items-center gap-1', headerRightProps?.className)}>
+            <StatusSent status={lastSentStatus} {...statusSentIconProps} />
+            <FormattedDate date={lastSentDate} language={language} {...formattedDateProps} />
+          </div>
+        </div>
+        <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)}
+          >
+            {typingStatusText ||
+              (draft ? (
+                <span>
+                  <span
+                    {...draftLabelProps}
+                    className={cn('text-red-500 font-medium', draftLabelProps?.className)}
+                  >{`${draftLabel}: `}</span>
+                  {draft}
+                </span>
+              ) : (
+                <span>
+                  {lastSenderName && (
+                    <span
+                      {...lastSenderNameProps}
+                      className={cn('font-semibold', lastSenderNameProps?.className)}
+                    >{`${lastSenderName}: `}</span>
+                  )}
+                  {lastMessage}
+                </span>
+              ))}
+          </span>
+          {unreadCount > 0 && (
+            <Badge
+              {...unreadBadgeProps}
+              className={cn(
+                'bg-ring text-background text-xs rounded-full p-1 h-6 min-w-6 mt-0.5',
+                unreadBadgeProps?.className
+              )}
+            >
+              {unreadCount}
+            </Badge>
+          )}
+        </div>
+        {showTopDivider && (
+          <div {...dividerProps} className={cn('absolute -top-px left-0 right-0 border-t', dividerProps?.className)} />
+        )}
+        {showBottomDivider && <div className="absolute bottom-0 left-0 right-0 border-b" />}
+      </div>
+    </div>
+  );
+}
+
+const DialogItem = memo(forwardRef(DialogItemBase));
+
+DialogItem.displayName = 'DialogItem';
+
+export { DialogItem };

package/src/components/connectycube-ui/dialog-item.tsx

@@ -0,0 +1,188 @@
+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 { FormattedDate, type FormattedDateProps } from './formatted-date';
+import { Badge, type BadgeProps } from './badge';
+
+interface DialogItemProps extends React.ComponentProps<'div'> {
+  index?: number;
+  isPrivateDialog?: boolean;
+  selected?: boolean;
+  onSelect?: () => void;
+  name: string;
+  photo?: string;
+  userOnline?: boolean;
+  userPresence?: PresenceStatus;
+  hasGroupIcon?: boolean;
+  lastSentStatus?: StatusSentProps['status'];
+  lastSentDate?: FormattedDateProps['date'];
+  lastSenderName?: string;
+  lastMessage?: string;
+  typingStatusText?: string;
+  draft?: string;
+  draftLabel?: string;
+  unreadCount?: number;
+  language?: string;
+  divider?: 'top' | 'bottom' | 'both' | 'none';
+  avatarProps?: AvatarProps;
+  contentProps?: React.ComponentProps<'div'>;
+  headerProps?: React.ComponentProps<'div'>;
+  headerLeftProps?: React.ComponentProps<'div'>;
+  groupIconProps?: LucideProps;
+  nameProps?: React.ComponentProps<'span'>;
+  headerRightProps?: React.ComponentProps<'div'>;
+  statusSentIconProps?: StatusSentProps;
+  formattedDateProps?: FormattedDateProps;
+  footerProps?: React.ComponentProps<'div'>;
+  lastMessageProps?: React.ComponentProps<'span'>;
+  draftLabelProps?: React.ComponentProps<'span'>;
+  lastSenderNameProps?: React.ComponentProps<'span'>;
+  unreadBadgeProps?: BadgeProps;
+  dividerProps?: React.ComponentProps<'div'>;
+}
+
+function DialogItemBase(
+  {
+    index = -1,
+    isPrivateDialog,
+    selected,
+    onSelect = () => {},
+    name,
+    photo,
+    userOnline,
+    userPresence,
+    hasGroupIcon,
+    lastSentStatus,
+    lastSentDate,
+    lastSenderName,
+    lastMessage,
+    typingStatusText,
+    draft,
+    draftLabel = 'Draft',
+    unreadCount = 0,
+    language = 'en',
+    divider = 'bottom',
+    avatarProps,
+    contentProps,
+    headerProps,
+    headerLeftProps,
+    groupIconProps,
+    nameProps,
+    headerRightProps,
+    statusSentIconProps,
+    formattedDateProps,
+    footerProps,
+    lastMessageProps,
+    draftLabelProps,
+    lastSenderNameProps,
+    unreadBadgeProps,
+    dividerProps,
+    ...props
+  }: DialogItemProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  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';
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      onClick={onSelect}
+      className={cn(
+        'flex items-start gap-2 px-2 flex-1 cursor-pointer',
+        'transition-colors duration-200 ease-linear',
+        `${selected ? 'border-l-[0.25em] pl-1 border-l-ring bg-ring/20' : 'hover:bg-ring/5'}`,
+        props?.className
+      )}
+    >
+      <Avatar
+        src={avatarSource}
+        name={avatarFallback}
+        online={avatarOnline}
+        presence={avatarPresence}
+        {...avatarProps}
+        className={cn(`size-13 my-2 ${photo ? 'bg-ring/10' : 'bg-ring/30'}`, avatarProps?.className)}
+      />
+
+      <div
+        {...contentProps}
+        className={cn('relative self-stretch flex-1 flex-col text-foreground', contentProps?.className)}
+      >
+        <div {...headerProps} className={cn('flex items-center justify-between gap-1', headerProps?.className)}>
+          <div {...headerLeftProps} className={cn('flex items-center gap-1', headerLeftProps?.className)}>
+            {!isPrivateDialog && hasGroupIcon && (
+              <Users
+                {...groupIconProps}
+                className={cn('text-muted-foreground size-4 min-w-4', groupIconProps?.className)}
+              />
+            )}
+            <span {...nameProps} className={cn('font-medium text-left line-clamp-1', nameProps?.className)}>
+              {name}
+            </span>
+          </div>
+          <div {...headerRightProps} className={cn('flex items-center gap-1', headerRightProps?.className)}>
+            <StatusSent status={lastSentStatus} {...statusSentIconProps} />
+            <FormattedDate date={lastSentDate} language={language} {...formattedDateProps} />
+          </div>
+        </div>
+        <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)}
+          >
+            {typingStatusText ||
+              (draft ? (
+                <span>
+                  <span
+                    {...draftLabelProps}
+                    className={cn('text-red-500 font-medium', draftLabelProps?.className)}
+                  >{`${draftLabel}: `}</span>
+                  {draft}
+                </span>
+              ) : (
+                <span>
+                  {lastSenderName && (
+                    <span
+                      {...lastSenderNameProps}
+                      className={cn('font-semibold', lastSenderNameProps?.className)}
+                    >{`${lastSenderName}: `}</span>
+                  )}
+                  {lastMessage}
+                </span>
+              ))}
+          </span>
+          {unreadCount > 0 && (
+            <Badge
+              {...unreadBadgeProps}
+              className={cn(
+                'bg-ring text-background text-xs rounded-full p-1 h-6 min-w-6 mt-0.5',
+                unreadBadgeProps?.className
+              )}
+            >
+              {unreadCount}
+            </Badge>
+          )}
+        </div>
+        {showTopDivider && (
+          <div {...dividerProps} className={cn('absolute -top-px left-0 right-0 border-t', dividerProps?.className)} />
+        )}
+        {showBottomDivider && <div className="absolute bottom-0 left-0 right-0 border-b" />}
+      </div>
+    </div>
+  );
+}
+
+const DialogItem = memo(forwardRef<HTMLDivElement, DialogItemProps>(DialogItemBase));
+
+DialogItem.displayName = 'DialogItem';
+
+export { DialogItem };