@connectycube/react-ui-kit 0.0.17 → 0.0.18

package/src/components/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 | undefined;
+  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/input.tsx

@@ -19,7 +19,7 @@ function InputBase(props: InputProps, ref?: React.ForwardedRef<HTMLInputElement>
   );
 }
 
-const Input = forwardRef(InputBase);
+const Input = forwardRef<HTMLInputElement, InputProps>(InputBase);
 
 Input.displayName = 'Input';
 

package/src/components/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<HTMLLabelElement, LabelProps>(LabelBase);
+
+Label.displayName = 'Label';
+
+export { Label, type LabelProps };

package/src/components/link-preview.tsx

@@ -0,0 +1,149 @@
+import type React from 'react';
+import { forwardRef, memo, useCallback, useState } from 'react';
+import { Globe, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+const decodeHtmlEntities = (text: string) => {
+  if (text.length === 0) {
+    return text;
+  }
+
+  const element = document.createElement('div');
+
+  element.innerHTML = text;
+
+  return element.textContent.trim();
+};
+
+interface LinkPreviewProps extends React.ComponentProps<'a'> {
+  thin?: boolean;
+  title?: string;
+  description?: string;
+  icon?: React.ComponentProps<'img'>['src'];
+  image?: React.ComponentProps<'img'>['src'];
+  onReady?: () => void;
+  iconFallbackElement?: React.ReactElement;
+  titleContainerProps?: React.ComponentProps<'div'>;
+  iconProps?: React.ComponentProps<'img'>;
+  iconFallbackProps?: LucideProps;
+  titleProps?: React.ComponentProps<'span'>;
+  descriptionProps?: React.ComponentProps<'div'>;
+  imageContainerProps?: React.ComponentProps<'div'>;
+  imageProps?: React.ComponentProps<'img'>;
+}
+
+function LinkPreviewBase(
+  {
+    thin = false,
+    title = '',
+    description = '',
+    icon,
+    iconFallbackElement,
+    image,
+    onReady = () => {},
+    titleContainerProps,
+    iconProps,
+    iconFallbackProps,
+    titleProps,
+    descriptionProps,
+    imageContainerProps,
+    imageProps,
+    ...props
+  }: LinkPreviewProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  const [iconSrc, setIconSrc] = useState<React.ComponentProps<'img'>['src']>(icon);
+  const [imageSrc, setImageSrc] = useState<React.ComponentProps<'img'>['src']>(image);
+  const handleOnLoad = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      imageProps?.onLoad?.(event);
+      onReady();
+    },
+    [onReady, imageProps]
+  );
+  const handleIconOnError = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      iconProps?.onError?.(event);
+      setIconSrc(undefined);
+    },
+    [iconProps]
+  );
+  const handleImageOnError = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      imageProps?.onError?.(event);
+      setImageSrc(undefined);
+    },
+    [imageProps]
+  );
+
+  return (
+    <a
+      ref={ref}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      className={cn(
+        'transition-color duration-300 ease-out',
+        'grid items-start gap-2 p-2 mt-1 overflow-hidden rounded border-l-4 border-l-ring bg-white hover:bg-ring/20',
+        thin ? 'grid-cols-3' : 'grid-cols-1',
+        props?.className
+      )}
+    >
+      <div
+        {...titleContainerProps}
+        className={cn('flex items-start gap-2', thin ? 'col-span-3' : 'col-span-1', titleContainerProps?.className)}
+      >
+        {iconSrc ? (
+          <img
+            alt="icon"
+            src={iconSrc}
+            {...iconProps}
+            onError={handleIconOnError}
+            className={cn('size-5', iconProps?.className)}
+          />
+        ) : (
+          iconFallbackElement || <Globe {...iconFallbackProps} className={cn('size-5', iconFallbackProps?.className)} />
+        )}
+        <span
+          {...titleProps}
+          className={cn('text-sm font-bold', thin ? 'line-clamp-1' : 'line-clamp-2', titleProps?.className)}
+        >
+          {decodeHtmlEntities(title)}
+        </span>
+      </div>
+      {description && (
+        <span
+          {...descriptionProps}
+          className={cn(
+            'text-sm line-clamp-5',
+            thin ? (imageSrc ? 'col-span-2' : 'col-span-3') : 'col-span-1',
+            descriptionProps?.className
+          )}
+        >
+          {decodeHtmlEntities(description)}
+        </span>
+      )}
+      {imageSrc && (
+        <div
+          {...imageContainerProps}
+          className={cn('flex items-center justify-center', imageContainerProps?.className)}
+        >
+          <img
+            alt="banner"
+            src={imageSrc}
+            {...imageProps}
+            onLoad={handleOnLoad}
+            onError={handleImageOnError}
+            className={cn('rounded max-w-full object-contain', thin ? 'max-h-25' : 'max-h-60', imageProps?.className)}
+          />
+        </div>
+      )}
+    </a>
+  );
+}
+
+const LinkPreview = memo(forwardRef<HTMLAnchorElement, LinkPreviewProps>(LinkPreviewBase));
+
+LinkPreview.displayName = 'LinkPreview';
+
+export { LinkPreview, type LinkPreviewProps };

package/src/components/linkify-text.tsx

@@ -0,0 +1,41 @@
+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',
+};
+
+interface LinkifyTextProps extends React.ComponentProps<'p'> {
+  text: string;
+  linkifyProps?: Opts;
+}
+
+function LinkifyTextBase(
+  { text, linkifyProps, ...props }: LinkifyTextProps,
+  ref: React.ForwardedRef<HTMLParagraphElement>
+) {
+  const options = useMemo(
+    () => ({
+      ...DEFAULT_LINKIFY_OPTIONS,
+      ...linkifyProps,
+      className: cn('text-blue-500 hover:text-blue-600 hover:underline', linkifyProps?.className),
+    }),
+    [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/spinner.tsx

@@ -1,14 +1,40 @@
-import { LoaderCircle, type LucideProps } from 'lucide-react';
+import { Loader, LoaderCircle, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
 
 interface SpinnerProps extends LucideProps {
   loading?: boolean;
+  type?: 'default' | 'circle';
+  layout?: 'absolute' | 'centered' | 'overlay' | 'flow';
 }
 
-function Spinner({ loading = true, ...props }: SpinnerProps) {
-  return loading ? (
-    <LoaderCircle strokeWidth={2.5} {...props} className={cn('animate-spin mx-auto text-ring', props?.className)} />
-  ) : null;
+function Spinner({ loading = false, layout = 'flow', type = 'default', ...props }: SpinnerProps) {
+  const LoaderIcon = type === 'circle' ? LoaderCircle : Loader;
+
+  if (!loading) {
+    return null;
+  }
+
+  const spinnerElement = (
+    <LoaderIcon
+      strokeWidth={2.5}
+      {...props}
+      className={cn('animate-spin text-ring', layout === 'flow' && 'mx-auto', props?.className)}
+    />
+  );
+
+  switch (layout) {
+    case 'absolute':
+      return (
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">{spinnerElement}</div>
+      );
+    case 'centered':
+      return <div className="flex items-center justify-center size-full">{spinnerElement}</div>;
+    case 'overlay':
+      return <div className="flex items-center justify-center size-full absolute bg-muted/50">{spinnerElement}</div>;
+    case 'flow':
+    default:
+      return spinnerElement;
+  }
 }
 
 Spinner.displayName = 'Spinner';

package/src/components/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 | undefined;
+}
+
+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/stream-view.tsx

@@ -1,13 +1,17 @@
 import type React from 'react';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Maximize, Minimize, PictureInPicture2, type LucideProps } from 'lucide-react';
-import { cn, getRandomString } from './utils';
+import { cn } from './utils';
 
 interface StreamViewProps extends React.ComponentProps<'video'> {
   stream?: MediaStream | null;
   mirror?: boolean;
 }
 
+function getRandomString(length = 8): string {
+  return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
+}
+
 function StreamViewBase(
   { id, stream, mirror, className, muted, ...props }: StreamViewProps,
   ref: React.ForwardedRef<HTMLVideoElement>

package/src/components/utils.ts

@@ -5,17 +5,6 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-export function getRandomString(length = 8): string {
-  return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
-}
-
-export 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();
-}
-
 export function capitalize(str?: string): string {
   return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
 }