@connectycube/react-ui-kit 0.0.16 → 0.0.18

package/src/components/connectycube-ui/formatted-date.tsx

@@ -0,0 +1,57 @@
+import { forwardRef, memo } from 'react';
+import { differenceInCalendarDays, format, formatDistanceToNow, isToday } from 'date-fns';
+import { el, enUS, uk, type Locale } from 'date-fns/locale';
+import { cn } from './utils';
+
+interface FormattedDateProps extends React.ComponentProps<'span'> {
+  date?: Date | string | number | null;
+  language?: string;
+  distanceToNow?: boolean;
+}
+
+const locales: Record<string, Locale> = {
+  en: enUS,
+  el: el,
+  ua: uk,
+};
+
+function formatDate(date: string | number | Date, language: string = 'en', distanceToNow = false): string {
+  const locale = locales[language] ?? enUS;
+
+  if (distanceToNow) {
+    return formatDistanceToNow(date, { locale, addSuffix: true });
+  }
+
+  const isWithinLast7Days = (date: Date | string | number) => {
+    const diff = differenceInCalendarDays(new Date(), date);
+
+    return diff >= 0 && diff <= 6;
+  };
+
+  return isToday(date)
+    ? format(date, 'p', { locale })
+    : isWithinLast7Days(date)
+      ? format(date, 'eeee', { locale })
+      : format(date, 'P', { locale });
+}
+
+function FormattedDateBase(
+  { date, language, distanceToNow, ...props }: FormattedDateProps,
+  ref: React.ForwardedRef<HTMLSpanElement>
+) {
+  if (!date) {
+    return null;
+  }
+
+  return (
+    <span ref={ref} {...props} className={cn('text-xs text-muted-foreground', props?.className)}>
+      {formatDate(date, language, distanceToNow)}
+    </span>
+  );
+}
+
+const FormattedDate = memo(forwardRef<HTMLSpanElement, FormattedDateProps>(FormattedDateBase));
+
+FormattedDate.displayName = 'FormattedDate';
+
+export { FormattedDate, type FormattedDateProps };

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

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { Root as LabelRoot } from '@radix-ui/react-label';
+import { cn } from './utils';
+
+function LabelBase({ ...props }, ref) {
+  return (
+    <LabelRoot
+      ref={ref}
+      {...props}
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props?.className
+      )}
+    />
+  );
+}
+
+const Label = forwardRef(LabelBase);
+
+Label.displayName = 'Label';
+
+export { Label };

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

@@ -0,0 +1,23 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { Root as LabelRoot, type LabelProps } from '@radix-ui/react-label';
+import { cn } from './utils';
+
+function LabelBase({ ...props }: LabelProps, ref: React.ForwardedRef<HTMLLabelElement>) {
+  return (
+    <LabelRoot
+      ref={ref}
+      {...props}
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props?.className
+      )}
+    />
+  );
+}
+
+const Label = forwardRef(LabelBase);
+
+Label.displayName = 'Label';
+
+export { Label, type LabelProps };

package/src/components/connectycube-ui/linkify-text.tsx

@@ -0,0 +1,40 @@
+import type React from 'react';
+import type { Opts } from 'linkifyjs';
+import { forwardRef, memo, useMemo } from 'react';
+import Linkify from 'linkify-react';
+import { cn } from './utils';
+
+const DEFAULT_LINKIFY_OPTIONS: Opts = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+  className: 'text-blue-500 hover:underline hover:text-blue-600 transition-color duration-300',
+};
+
+type LinkifyTextProps = React.ComponentProps<'p'> & {
+  text: string;
+  linkifyProps?: Opts;
+};
+
+function LinkifyTextBase(
+  { text, linkifyProps, ...props }: LinkifyTextProps,
+  ref: React.ForwardedRef<HTMLParagraphElement>
+) {
+  const options = useMemo(() => {
+    return {
+      ...DEFAULT_LINKIFY_OPTIONS,
+      ...linkifyProps,
+    };
+  }, [linkifyProps]);
+
+  return (
+    <p ref={ref} {...props} className={cn('wrap-break-word text-base', props?.className)}>
+      <Linkify options={options}>{text}</Linkify>
+    </p>
+  );
+}
+
+const LinkifyText = memo(forwardRef<HTMLParagraphElement, LinkifyTextProps>(LinkifyTextBase));
+
+LinkifyText.displayName = 'LinkifyText';
+
+export { LinkifyText, type LinkifyTextProps };

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

@@ -0,0 +1,81 @@
+import { capitalize, cn } from './utils';
+
+function PresenceBadge({ status, ...props }) {
+  switch (status) {
+    case 'available':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-green-600 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+        </svg>
+      );
+    case 'busy':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-red-600 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
+        </svg>
+      );
+    case 'away':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-yellow-500 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
+        </svg>
+      );
+    case 'unknown':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-gray-500 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+PresenceBadge.displayName = 'PresenceBadge';
+
+function Presence({ badge = true, status, label, badgeProps, labelProps, ...props }) {
+  const presence = capitalize(label || status);
+
+  return (
+    <div {...props} className={cn('flex items-center gap-2', props?.className)}>
+      {badge && <PresenceBadge status={status} {...badgeProps} />}
+      <span {...labelProps}>{presence}</span>
+    </div>
+  );
+}
+
+Presence.displayName = 'Presence';
+
+export { Presence, PresenceBadge };

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

@@ -0,0 +1,96 @@
+import type React from 'react';
+import { capitalize, cn } from './utils';
+
+type PresenceStatus = 'available' | 'busy' | 'away' | 'unknown' | undefined;
+
+interface PresenceProps extends React.ComponentProps<'div'> {
+  badge?: boolean;
+  status: PresenceStatus;
+  label: string;
+  badgeProps?: PresenceBadgeProps;
+  labelProps?: React.ComponentProps<'span'>;
+}
+
+interface PresenceBadgeProps extends React.ComponentProps<'svg'> {
+  status?: PresenceStatus;
+}
+
+function PresenceBadge({ status, ...props }: PresenceBadgeProps) {
+  switch (status) {
+    case 'available':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-green-600 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+        </svg>
+      );
+    case 'busy':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-red-600 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
+        </svg>
+      );
+    case 'away':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-yellow-500 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
+        </svg>
+      );
+    case 'unknown':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-gray-500 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+PresenceBadge.displayName = 'PresenceBadge';
+
+function Presence({ badge = true, status, label, badgeProps, labelProps, ...props }: PresenceProps) {
+  const presence = capitalize(label || status);
+
+  return (
+    <div {...props} className={cn('flex items-center gap-2', props?.className)}>
+      {badge && <PresenceBadge status={status} {...badgeProps} />}
+      <span {...labelProps}>{presence}</span>
+    </div>
+  );
+}
+
+Presence.displayName = 'Presence';
+
+export { Presence, PresenceBadge, type PresenceStatus, type PresenceProps, type PresenceBadgeProps };

package/src/components/connectycube-ui/status-sent.jsx

@@ -0,0 +1,21 @@
+import { Ban, Check, CheckCheck, Clock } from 'lucide-react';
+import { cn } from './utils';
+
+const StatusSent = ({ status, ...props }) => {
+  switch (status) {
+    case 'wait':
+      return <Clock {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'sent':
+      return <Check {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'read':
+      return <CheckCheck {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'lost':
+      return <Ban {...props} className={cn('text-red-500 size-4', props?.className)} />;
+    default:
+      return null;
+  }
+};
+
+StatusSent.displayName = 'StatusSent';
+
+export { StatusSent };

package/src/components/connectycube-ui/status-sent.tsx

@@ -0,0 +1,25 @@
+import { Ban, Check, CheckCheck, Clock, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+interface StatusSentProps extends LucideProps {
+  status?: 'wait' | 'sent' | 'read' | 'lost' | null;
+}
+
+const StatusSent: React.FC<StatusSentProps> = ({ status, ...props }) => {
+  switch (status) {
+    case 'wait':
+      return <Clock {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'sent':
+      return <Check {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'read':
+      return <CheckCheck {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'lost':
+      return <Ban {...props} className={cn('text-red-500 size-4', props?.className)} />;
+    default:
+      return null;
+  }
+};
+
+StatusSent.displayName = 'StatusSent';
+
+export { StatusSent, type StatusSentProps };

package/src/components/connectycube-ui/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export function capitalize(str) {
+  return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
+}

package/src/components/connectycube-ui/utils.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function capitalize(str?: string): string {
+  return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
+}

package/src/components/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 || undefined;
+  const avatarFallback = name || avatarProps?.name || undefined;
+  const avatarOnline = isPrivateDialog ? userOnline || avatarProps?.online || false : 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 };