@connectycube/react-ui-kit 0.0.8 → 0.0.11

package/commands/add.js

@@ -7,58 +7,92 @@ import { execa } from "execa";
 const cwd = process.cwd();
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-async function confirmInstallDependencies(component, deps) {
+async function copyImports(component, srcDir, destDir, isTypeScript) {
+  const imports = path.join(__dirname, "..", "configs", "imports.json");
+
+  if (!(await fs.pathExists(imports))) return;
+
+  try {
+    const config = await fs.readJSON(imports);
+    const items = config ? config[component] || [] : [];
+    const promises = items?.map(async (item) => {
+      const ext = item === 'utils' ? isTypeScript ? ".ts" : ".js" : isTypeScript ? ".tsx" : ".jsx";
+      const filename = `${item}${ext}`;
+      const input = path.join(srcDir, filename);
+      const output = path.join(destDir, filename);
+
+      if (!(await fs.pathExists(output))) {
+        await fs.copyFile(input, output);
+        console.log(`- ${filename} (${output})`);
+      } else {
+        console.log(`- ${filename} (already exists)`);
+      }
+    });
+
+    await Promise.all(promises);
+
+    return items;
+  } catch (err) {
+    console.warn(`⚠️ Failed to copy imports for '${component}':`, err.message);
+  }
+}
+
+async function confirmInstallDependencies(components, deps) {
   const response = await prompts({
     type: "confirm",
     name: "confirm",
-    message: `📦 Install dependencies for "${component}"?\n🔗 ${deps.join("\n🔗 ")}\n`,
+    message: `📦 Install dependencies for <${components.join(', ')}>?\n🔗 ${deps.join("\n🔗 ")}\n`,
     initial: true,
   });
 
   return response.confirm;
 }
 
-export async function installDependencies(component) {
-  const input = path.join(__dirname, "..", "configs", "dependencies.json");
+export async function installDependencies(components) {
+  const dependencies = path.join(__dirname, "..", "configs", "dependencies.json");
 
-  if (!(await fs.pathExists(input))) return;
+  if (!(await fs.pathExists(dependencies))) return;
 
   try {
-    const allDeps = await fs.readJSON(input);
-    const cmpDeps = allDeps && allDeps[component];
+    const config = await fs.readJSON(dependencies);
+    const deps = Array.from(
+      components.reduce((set, component) => {
+        const cmpDeps = config ? config[component] || {} : {};
 
-    if (cmpDeps && typeof cmpDeps === "object") {
-      const deps = Object.entries(cmpDeps).map(([pkg, ver]) =>
-        ver ? `${pkg}@${ver}` : pkg
-      );
+        for (const [pkg, version] of Object.entries(cmpDeps)) {
+          set.add(`${pkg}@${version}`);
+        }
 
-      if (deps.length) {
-        const confirm = await confirmInstallDependencies(component, deps);
+        return set;
+      }, new Set())
+    );
 
-        if (!confirm) {
-          console.log("⏩ Skipped dependency installation.");
+    if (deps.length) {
+      const confirm = await confirmInstallDependencies(components, deps);
 
-          return;
-        }
+      if (!confirm) {
+        console.log("⏩ Skipped dependency installation.");
 
-        const pm = fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))
-          ? "pnpm"
-          : fs.existsSync(path.join(cwd, "yarn.lock"))
-            ? "yarn"
-            : "npm";
+        return;
+      }
 
-        console.log(`ℹ️ Installing dependencies using ${pm}...`);
+      const pm = fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))
+        ? "pnpm"
+        : fs.existsSync(path.join(cwd, "yarn.lock"))
+          ? "yarn"
+          : "npm";
 
-        const cmd = pm === "yarn" || pm === "pnpm" ? "add" : "install";
-        const flags = pm === "npm" ? ["--save"] : [];
-        const opts = { cwd, stdio: "inherit" };
+      console.log(`ℹ️ Installing dependencies using ${pm}...`);
 
-        await execa(pm, [cmd, ...flags, ...deps], opts);
-        console.log("✅ Dependencies installed.");
-      }
+      const cmd = pm === "yarn" || pm === "pnpm" ? "add" : "install";
+      const flags = pm === "npm" ? ["--save"] : [];
+      const opts = { cwd, stdio: "inherit" };
+
+      await execa(pm, [cmd, ...flags, ...deps], opts);
+      console.log("✅ Dependencies installed.");
     }
   } catch (err) {
-    console.warn(`⚠️ Failed to read '${input}':`, err.message);
+    console.warn(`⚠️ Failed to read '${dependencies}':`, err.message);
   }
 }
 
@@ -91,31 +125,24 @@ export async function add(component) {
   }
 
   const filename = `${component}${isTypeScript ? ".tsx" : ".jsx"}`;
-  const utilsFilename = `utils${isTypeScript ? ".ts" : ".js"}`;
-  const sourceDir = path.join(__dirname, "..", isTypeScript ? "src" : "gen", "components");
-  const input = path.join(sourceDir, filename);
+  const srcDir = path.join(__dirname, "..", isTypeScript ? "src" : "gen", "components");
+  const input = path.join(srcDir, filename);
 
   if (!(await fs.pathExists(input))) {
     console.warn(`⚠️ Component "${component}" does not exist.`);
     process.exit(1);
   }
 
-  const dest = path.join(cwd, "src", "components", "connectycube-ui");
-  const output = path.join(dest, filename);
-  const utilsInput = path.join(sourceDir, utilsFilename);
-  const utilsOutput = path.join(dest, utilsFilename);
+  const destDir = path.join(cwd, "src", "components", "connectycube-ui");
+  const output = path.join(destDir, filename);
 
-  await fs.ensureDir(dest);
+  await fs.ensureDir(destDir);
   await fs.copyFile(input, output);
   console.log("✅ Added:");
   console.log(`- ${filename} (${output})`);
 
-  if (!(await fs.pathExists(utilsOutput))) {
-    await fs.copyFile(utilsInput, utilsOutput);
-    console.log(`- ${utilsFilename} (${utilsOutput})`);
-  } else {
-    console.log(`- ${utilsFilename} (already exists)`);
-  }
+  const imports = await copyImports(component, srcDir, destDir, isTypeScript);
+  const components = [component, ...imports];
 
-  await installDependencies(component);
+  await installDependencies(components);
 }

package/configs/dependencies.json

@@ -1,5 +1,20 @@
 {
+  "animated-loader": {
+    "lucide-react": "latest"
+  },
+  "avatar": {
+    "@radix-ui/react-avatar": "latest"
+  },
+  "dismiss-layer": {},
+  "placeholder-text": {},
+  "presence": {
+    "lucide-react": "latest"
+  },
   "stream-view": {
-    "webrtc-adapter": ""
+    "lucide-react": "latest"
+  },
+  "utils": {
+    "clsx": "latest",
+    "tailwind-merge": "latest"
   }
 }

package/configs/imports.json

@@ -0,0 +1,8 @@
+{
+  "animated-loader": ["utils"],
+  "avatar": ["utils", "presence"],
+  "dismiss-layer": ["utils"],
+  "placeholder-text": ["utils"],
+  "presence": ["utils"],
+  "stream-view": ["utils"]
+}

package/gen/components/animated-loader.jsx

@@ -0,0 +1,10 @@
+import { LoaderCircle } from 'lucide-react';
+import { cn } from './utils';
+
+function AnimatedLoader({ loading = true, className }) {
+  return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
+}
+
+AnimatedLoader.displayName = 'AnimatedLoader';
+
+export { AnimatedLoader };

package/gen/components/avatar.jsx

@@ -0,0 +1,34 @@
+import { forwardRef, memo } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { PresenceBadge } from './presence';
+import { cn, getInitialsFromName } from './utils';
+
+function AvatarBase(
+  { src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props },
+  ref
+) {
+  const initials = getInitialsFromName(name);
+
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+      {...props}
+    >
+      <AvatarPrimitive.Image src={src} className={cn('aspect-square size-full object-cover')} />
+      <AvatarPrimitive.Fallback className={cn('bg-muted flex size-full items-center justify-center')}>
+        {initials}
+      </AvatarPrimitive.Fallback>
+      {online && (
+        <div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
+      )}
+      <PresenceBadge status={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
+    </AvatarPrimitive.Root>
+  );
+}
+
+const Avatar = memo(forwardRef(AvatarBase));
+
+Avatar.displayName = 'Avatar';
+
+export { Avatar };

package/gen/components/dismiss-layer.jsx

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
+import { cn } from './utils';
+
+function DismissLayerBase(
+  { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, className, ...props },
+  ref
+) {
+  const innerRef = useRef(null);
+
+  useImperativeHandle(ref, () => innerRef.current);
+
+  const handleClickOrTouch = useCallback(
+    (e) => {
+      if (!disableClickOutside && active && e.target === innerRef.current) {
+        onDismiss();
+      }
+    },
+    [disableClickOutside, active, onDismiss]
+  );
+  const handleKeyEvent = useCallback(
+    (ev) => {
+      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(DismissLayerBase));
+
+DismissLayer.displayName = 'DismissLayer';
+
+export { DismissLayer };

package/gen/components/placeholder-text.jsx

@@ -0,0 +1,22 @@
+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/gen/components/presence.jsx

@@ -0,0 +1,41 @@
+import { memo } from 'react';
+import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
+import { capitalize, cn, UserPresence } from './utils';
+
+function PresenceBadgeBase({ status, className, ...props }) {
+  switch (status) {
+    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, status, label, className, ...props }) {
+  const presence = capitalize(label || status);
+
+  return (
+    <div className={cn('flex items-center gap-2', className)} {...props}>
+      {badge && <PresenceBadge status={status} />}
+      <span>{presence}</span>
+    </div>
+  );
+}
+
+const Presence = memo(PresenceBase);
+
+Presence.displayName = 'Presence';
+
+export { Presence, PresenceBadge };

package/gen/components/stream-view.jsx

@@ -1,63 +1,201 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
 import { cn, getRandomString } from './utils';
 
-export const StreamView = forwardRef(({ id, stream, mirror, className, muted, ...props }, ref) => {
-  const videoRef = useRef(null);
+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 : true;
+  const isMuted = typeof muted === 'boolean' ? muted : false;
   const defaultClassName = 'size-full object-contain';
   const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      id: elementId,
-      element: videoRef.current,
-    }),
-    [elementId]
-  );
+  useImperativeHandle(ref, () => innerRef.current);
 
   useEffect(() => {
-    if (videoRef.current && stream) {
-      videoRef.current.srcObject = stream;
+    if (innerRef.current && stream) {
+      innerRef.current.srcObject = stream;
 
       const playVideo = () => {
         try {
-          videoRef.current?.play();
+          innerRef.current?.play();
         } catch (error) {
-          console.error('<StreamView/> play():', error);
+          console.error('Error playing video:', error);
         }
       };
 
-      videoRef.current.onloadedmetadata = () => {
-        setTimeout(playVideo, 100);
+      innerRef.current.onloadedmetadata = () => {
+        queueMicrotask(playVideo);
       };
     }
   }, [stream]);
 
-  return stream ? (
+  if (!stream) return null;
+
+  return (
     <video
-      ref={videoRef}
+      ref={innerRef}
       id={elementId}
-      className={cn(defaultClassName, mirrorClassName, className)}
-      muted={isMuted}
       autoPlay
       playsInline
+      muted={isMuted}
+      className={cn(defaultClassName, mirrorClassName, className)}
       {...props}
     />
-  ) : null;
-});
+  );
+}
+
+const StreamView = forwardRef(StreamViewBase);
 
-export const LocalStreamView = forwardRef(({ muted, mirror, ...props }, ref) => {
+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);
 
-export const RemoteStreamView = forwardRef(({ muted, mirror, ...props }, ref) => {
+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 };

package/gen/components/utils.js

@@ -8,3 +8,23 @@ export function cn(...inputs) {
 export function getRandomString(length = 8) {
   return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
 }
+
+export 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();
+}
+
+export function capitalize(str) {
+  return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
+}
+
+export let UserPresence = /*#__PURE__*/ (function (UserPresence) {
+  UserPresence['AVAILABLE'] = 'available';
+  UserPresence['BUSY'] = 'busy';
+  UserPresence['AWAY'] = 'away';
+  UserPresence['UNKNOWN'] = 'unknown';
+
+  return UserPresence;
+})({});

package/gen/index.js

@@ -1 +1,3 @@
-export { StreamView, LocalStreamView, RemoteStreamView } from './components/stream-view';
+export { DismissLayer } from './components/dismiss-layer';
+
+export { StreamView, LocalStreamView, RemoteStreamView, FullscreenStreamView } from './components/stream-view';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -60,16 +60,17 @@
     "jsx"
   ],
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "clsx": "^2.1.1",
     "execa": "^9.6.0",
     "fs-extra": "^11.3.2",
+    "lucide-react": "^0.554.0",
     "prompts": "^2.4.2",
-    "webrtc-adapter": "^9.0.3"
+    "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
-    "clsx": "*",
     "react": ">=18",
-    "react-dom": ">=18",
-    "tailwind-merge": "*"
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",

package/src/components/animated-loader.tsx

@@ -0,0 +1,15 @@
+import type { LucideProps } from 'lucide-react';
+import { LoaderCircle } from 'lucide-react';
+import { cn } from './utils';
+
+interface AnimatedLoaderProps extends LucideProps {
+  loading?: boolean;
+}
+
+function AnimatedLoader({ loading = true, className }: AnimatedLoaderProps) {
+  return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
+}
+
+AnimatedLoader.displayName = 'AnimatedLoader';
+
+export { AnimatedLoader, type AnimatedLoaderProps };