@connectycube/react-ui-kit 0.0.14 → 0.0.16

package/src/components/connectycube-ui/dismiss-layer.tsx

@@ -1,74 +0,0 @@
-import type React from 'react';
-import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
-import { cn } from './utils';
-
-interface DismissLayerProps extends React.ComponentProps<'div'> {
-  active: boolean;
-  onDismiss: () => void;
-  disableClickOutside?: boolean;
-  disableEscKeyPress?: boolean;
-  disabled?: boolean;
-}
-
-function DismissLayerBase(
-  {
-    active,
-    onDismiss,
-    disableClickOutside = false,
-    disableEscKeyPress = false,
-    disabled,
-    className,
-    ...props
-  }: DismissLayerProps,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const innerRef = useRef<HTMLDivElement>(null);
-
-  useImperativeHandle(ref, () => innerRef.current!);
-
-  const handleClickOrTouch = useCallback(
-    (e: React.MouseEvent | React.TouchEvent) => {
-      if (!disableClickOutside && active && e.target === innerRef.current) {
-        onDismiss();
-      }
-    },
-    [disableClickOutside, active, onDismiss]
-  );
-  const handleKeyEvent = useCallback(
-    (ev: KeyboardEvent) => {
-      if (!disableEscKeyPress && active && ev.key === 'Escape') {
-        onDismiss();
-      }
-    },
-    [disableEscKeyPress, active, onDismiss]
-  );
-
-  useEffect(() => {
-    if (!disableEscKeyPress && active) {
-      document.addEventListener('keydown', handleKeyEvent);
-
-      return () => document.removeEventListener('keydown', handleKeyEvent);
-    }
-
-    return;
-  }, [disableEscKeyPress, active, handleKeyEvent]);
-
-  if (disabled || !active) return null;
-
-  return (
-    <div
-      ref={innerRef}
-      onClick={handleClickOrTouch}
-      onTouchStart={handleClickOrTouch}
-      className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', className)}
-      aria-hidden
-      {...props}
-    />
-  );
-}
-
-const DismissLayer = memo(forwardRef<HTMLDivElement, DismissLayerProps>(DismissLayerBase));
-
-DismissLayer.displayName = 'DismissLayer';
-
-export { DismissLayer, type DismissLayerProps };

package/src/components/connectycube-ui/placeholder-text.jsx

@@ -1,22 +0,0 @@
-import { forwardRef, memo } from 'react';
-import { cn } from './utils';
-
-function PlaceholderTextBase({ title, titles = [], className }, ref) {
-  const rows = typeof title === 'string' ? [title, ...titles] : titles;
-
-  return (
-    <div ref={ref} className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', className)}>
-      {rows.map((row, index) => (
-        <div key={`placeholder-text-${index}`} className="text-center">
-          {row}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const PlaceholderText = memo(forwardRef(PlaceholderTextBase));
-
-PlaceholderText.displayName = 'PlaceholderText';
-
-export { PlaceholderText };

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

@@ -1,28 +0,0 @@
-import type React from 'react';
-import { forwardRef, memo } from 'react';
-import { cn } from './utils';
-
-interface PlaceholderTextProps extends React.ComponentProps<'div'> {
-  title?: string;
-  titles?: string[];
-}
-
-function PlaceholderTextBase({ title, titles = [], className }: PlaceholderTextProps, ref: React.Ref<HTMLDivElement>) {
-  const rows = typeof title === 'string' ? [title, ...titles] : titles;
-
-  return (
-    <div ref={ref} className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', className)}>
-      {rows.map((row, index) => (
-        <div key={`placeholder-text-${index}`} className="text-center">
-          {row}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const PlaceholderText = memo(forwardRef(PlaceholderTextBase));
-
-PlaceholderText.displayName = 'PlaceholderText';
-
-export { PlaceholderText, type PlaceholderTextProps };

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

@@ -1,41 +0,0 @@
-import { memo } from 'react';
-import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
-import { capitalize, cn, UserPresence } from './utils';
-
-function PresenceBadgeBase({ presence, className, ...props }) {
-  switch (presence) {
-    case UserPresence.AVAILABLE || 'available':
-      return <CircleCheck className={cn('rounded-full text-white bg-green-600 size-4.5', className)} {...props} />;
-    case UserPresence.BUSY || 'busy':
-      return <CircleMinus className={cn('rounded-full text-white bg-red-600 size-4.5', className)} {...props} />;
-    case UserPresence.AWAY || 'away':
-      return <Clock className={cn('rounded-full text-white bg-yellow-500 size-4.5', className)} {...props} />;
-    case UserPresence.UNKNOWN || 'unknown':
-      return (
-        <CircleQuestionMark className={cn('rounded-full text-white bg-gray-500 size-4.5', className)} {...props} />
-      );
-    default:
-      return null;
-  }
-}
-
-const PresenceBadge = memo(PresenceBadgeBase);
-
-PresenceBadge.displayName = 'PresenceBadge';
-
-function PresenceBase({ badge = true, className, presence, label, ...props }) {
-  const status = capitalize(label || presence);
-
-  return (
-    <div className={cn('flex items-center gap-2', className)} {...props}>
-      {badge && <PresenceBadge presence={presence} />}
-      <span>{status}</span>
-    </div>
-  );
-}
-
-const Presence = memo(PresenceBase);
-
-Presence.displayName = 'Presence';
-
-export { Presence, PresenceBadge };

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

@@ -1,55 +0,0 @@
-import type React from 'react';
-import type { LucideProps } from 'lucide-react';
-import { memo } from 'react';
-import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
-import { capitalize, cn, UserPresence } from './utils';
-
-type PresenceStatus = UserPresence | 'available' | 'busy' | 'away' | 'unknown' | undefined;
-
-interface PresenceBadgeProps extends LucideProps {
-  presence: PresenceStatus;
-}
-
-interface PresenceProps extends React.ComponentProps<'div'> {
-  badge?: boolean;
-  presence: PresenceStatus;
-  label: string;
-}
-
-function PresenceBadgeBase({ presence, className, ...props }: PresenceBadgeProps) {
-  switch (presence) {
-    case UserPresence.AVAILABLE || 'available':
-      return <CircleCheck className={cn('rounded-full text-white bg-green-600 size-4.5', className)} {...props} />;
-    case UserPresence.BUSY || 'busy':
-      return <CircleMinus className={cn('rounded-full text-white bg-red-600 size-4.5', className)} {...props} />;
-    case UserPresence.AWAY || 'away':
-      return <Clock className={cn('rounded-full text-white bg-yellow-500 size-4.5', className)} {...props} />;
-    case UserPresence.UNKNOWN || 'unknown':
-      return (
-        <CircleQuestionMark className={cn('rounded-full text-white bg-gray-500 size-4.5', className)} {...props} />
-      );
-    default:
-      return null;
-  }
-}
-
-const PresenceBadge = memo(PresenceBadgeBase);
-
-PresenceBadge.displayName = 'PresenceBadge';
-
-function PresenceBase({ badge = true, className, presence, label, ...props }: PresenceProps) {
-  const status = capitalize(label || presence);
-
-  return (
-    <div className={cn('flex items-center gap-2', className)} {...props}>
-      {badge && <PresenceBadge presence={presence} />}
-      <span>{status}</span>
-    </div>
-  );
-}
-
-const Presence = memo(PresenceBase);
-
-Presence.displayName = 'Presence';
-
-export { Presence, PresenceBadge, type PresenceStatus, type PresenceProps, type PresenceBadgeProps };

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

@@ -1,100 +0,0 @@
-import type React from 'react';
-import type {
-  TooltipProviderProps,
-  TooltipProps,
-  TooltipTriggerProps,
-  TooltipPortalProps,
-  TooltipContentProps,
-  TooltipArrowProps,
-} from '@radix-ui/react-tooltip';
-import { forwardRef, memo } from 'react';
-import {
-  Provider as TooltipProvider,
-  Root as TooltipRoot,
-  Trigger as TooltipTrigger,
-  Portal as TooltipPortal,
-  Content as TooltipContent,
-  Arrow as TooltipArrow,
-} from '@radix-ui/react-tooltip';
-import { cn } from './utils';
-
-type StatusName = string | 'unknown';
-
-interface StatusIndicatorProps extends React.ComponentProps<'div'> {
-  status?: StatusName;
-  statusColorConfig?: Record<StatusName, string>;
-  statusProps?: React.ComponentProps<'div'>;
-  tooltipProviderProps?: TooltipProviderProps;
-  tooltipProps?: TooltipProps;
-  tooltipTriggerProps?: TooltipTriggerProps;
-  tooltipPortalProps?: TooltipPortalProps;
-  tooltipContentProps?: TooltipContentProps;
-  tooltipArrowProps?: TooltipArrowProps;
-  tooltip?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-function StatusIndicatorBase(
-  {
-    status = 'unknown',
-    statusColorConfig = { unknown: 'bg-gray-500 border-gray-600' },
-    statusProps,
-    tooltipProviderProps,
-    tooltipProps,
-    tooltipTriggerProps,
-    tooltipPortalProps,
-    tooltipContentProps,
-    tooltipArrowProps,
-    tooltip,
-    disabled,
-    className,
-    ...props
-  }: StatusIndicatorProps,
-  ref: React.Ref<HTMLDivElement>
-) {
-  if (disabled) return null;
-
-  return (
-    <div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
-      <TooltipProvider {...tooltipProviderProps}>
-        <TooltipRoot {...tooltipProps}>
-          <TooltipTrigger asChild {...tooltipTriggerProps}>
-            <div
-              {...statusProps}
-              className={cn(
-                'rounded-full size-4 border border-primary-foreground',
-                statusColorConfig[status],
-                statusProps?.className
-              )}
-            />
-          </TooltipTrigger>
-          <TooltipPortal {...tooltipPortalProps}>
-            <TooltipContent
-              {...tooltipContentProps}
-              className={cn(
-                'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
-                tooltipContentProps?.className
-              )}
-            >
-              <span>{tooltip || status || 'unknown'}</span>
-              <TooltipArrow
-                {...tooltipArrowProps}
-                className={cn(
-                  'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
-                  tooltipArrowProps?.className
-                )}
-              />
-            </TooltipContent>
-          </TooltipPortal>
-        </TooltipRoot>
-      </TooltipProvider>
-    </div>
-  );
-}
-
-const StatusIndicator = memo(forwardRef(StatusIndicatorBase));
-
-StatusIndicator.displayName = 'StatusIndicator';
-
-export { StatusIndicator };

package/src/components/connectycube-ui/stream-view.jsx

@@ -1,201 +0,0 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
-import { cn, getRandomString } from './utils';
-
-function StreamViewBase({ id, stream, mirror, className, muted, ...props }, ref) {
-  const innerRef = useRef(null);
-  const elementId = useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
-  const isMuted = typeof muted === 'boolean' ? muted : false;
-  const defaultClassName = 'size-full object-contain';
-  const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
-
-  useImperativeHandle(ref, () => innerRef.current);
-
-  useEffect(() => {
-    if (innerRef.current && stream) {
-      innerRef.current.srcObject = stream;
-
-      const playVideo = () => {
-        try {
-          innerRef.current?.play();
-        } catch (error) {
-          console.error('Error playing video:', error);
-        }
-      };
-
-      innerRef.current.onloadedmetadata = () => {
-        queueMicrotask(playVideo);
-      };
-    }
-  }, [stream]);
-
-  if (!stream) return null;
-
-  return (
-    <video
-      ref={innerRef}
-      id={elementId}
-      autoPlay
-      playsInline
-      muted={isMuted}
-      className={cn(defaultClassName, mirrorClassName, className)}
-      {...props}
-    />
-  );
-}
-
-const StreamView = forwardRef(StreamViewBase);
-
-StreamView.displayName = 'StreamView';
-
-function LocalStreamViewBase({ muted, mirror, ...props }, ref) {
-  const isMuted = typeof muted === 'boolean' ? muted : true;
-  const isMirror = typeof mirror === 'boolean' ? mirror : true;
-
-  return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
-}
-
-const LocalStreamView = forwardRef(LocalStreamViewBase);
-
-LocalStreamView.displayName = 'LocalStreamView';
-
-function RemoteStreamViewBase({ muted, mirror, ...props }, ref) {
-  const isMuted = typeof muted === 'boolean' ? muted : false;
-  const isMirror = typeof mirror === 'boolean' ? mirror : false;
-
-  return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
-}
-
-const RemoteStreamView = forwardRef(RemoteStreamViewBase);
-
-RemoteStreamView.displayName = 'RemoteStreamView';
-
-function FullscreenStreamViewBase(
-  {
-    element,
-    pipElement,
-    navElement,
-    hideIconElement,
-    showIconElement,
-    containerClassName,
-    fullscreenButtonClassName,
-    fullscreenButtonIconClassName,
-    pipContainerClassName,
-    pipButtonClassName,
-    pipButtonIconClassName,
-    containerProps,
-    fullscreenButtonProps,
-    fullscreenButtonIconProps,
-    pipContainerProps,
-    pipButtonProps,
-    pipButtonIconProps,
-  },
-  ref
-) {
-  const innerRef = useRef(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [isPictureInPicture, setIsPictureInPicture] = useState(false);
-  const toggleFullscreen = useCallback(async () => {
-    const container = innerRef.current;
-
-    if (!container) return;
-
-    try {
-      if (!document.fullscreenElement) {
-        await container.requestFullscreen();
-        setIsFullscreen(true);
-        setIsPictureInPicture(true);
-      } else {
-        await document.exitFullscreen();
-        setIsFullscreen(false);
-        setIsPictureInPicture(false);
-      }
-    } catch (err) {
-      console.error('Fullscreen error:', err);
-    }
-  }, []);
-  const togglePictureInPicture = useCallback(() => {
-    if (pipElement) {
-      setIsPictureInPicture((prevState) => !prevState);
-    }
-  }, [pipElement]);
-
-  useImperativeHandle(
-    ref,
-    () =>
-      Object.assign(innerRef.current, {
-        isFullscreen,
-        isPictureInPicture,
-        toggleFullscreen,
-        togglePictureInPicture,
-      }),
-    [isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture]
-  );
-
-  useEffect(() => {
-    const onFullscreenChange = () => {
-      setIsFullscreen(!!document.fullscreenElement);
-      setIsPictureInPicture(!!document.fullscreenElement);
-    };
-
-    document.addEventListener('fullscreenchange', onFullscreenChange);
-
-    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
-  }, []);
-
-  return (
-    <div
-      ref={innerRef}
-      className={cn('relative flex items-center justify-center size-full', containerClassName)}
-      {...containerProps}
-    >
-      {element}
-      <button
-        onClick={toggleFullscreen}
-        className={cn(
-          'absolute top-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
-          fullscreenButtonClassName
-        )}
-        {...fullscreenButtonProps}
-      >
-        {isFullscreen
-          ? hideIconElement || <Minimize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />
-          : showIconElement || <Maximize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />}
-      </button>
-      <div className="absolute size-full p-2 flex flex-col justify-end items-center">
-        {isFullscreen && pipElement && (
-          <div className="relative size-full flex items-end justify-end">
-            {isPictureInPicture && (
-              <div
-                className={cn(
-                  'max-w-1/4 max-h-1/4 aspect-4/3 overflow-hidden rounded-md shadow-md shadow-white/25',
-                  pipContainerClassName
-                )}
-                {...pipContainerProps}
-              >
-                {pipElement}
-              </div>
-            )}
-            <button
-              onClick={togglePictureInPicture}
-              className={cn(
-                'absolute bottom-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
-                pipButtonClassName
-              )}
-              {...pipButtonProps}
-            >
-              <PictureInPicture2 className={pipButtonIconClassName} {...pipButtonIconProps} />
-            </button>
-          </div>
-        )}
-        {isFullscreen && navElement}
-      </div>
-    </div>
-  );
-}
-
-const FullscreenStreamView = forwardRef(FullscreenStreamViewBase);
-
-FullscreenStreamView.displayName = 'FullscreenStreamView';
-
-export { StreamView, LocalStreamView, RemoteStreamView, FullscreenStreamView };