@connectycube/react-ui-kit 0.0.7 → 0.0.8

package/bin/cli.js

@@ -4,7 +4,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const commandsDir = path.resolve(__dirname, '../cmd');
+const commandsDir = path.resolve(__dirname, '../commands');
 const args = process.argv.slice(2);
 const cmd = args[0] ? args[0] === '--help' ? 'help' : args[0] : 'help';
 

package/{cmd → commands}/add.js

@@ -7,41 +7,47 @@ import { execa } from "execa";
 const cwd = process.cwd();
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-async function promptIsTypeScript() {
+async function confirmInstallDependencies(component, deps) {
   const response = await prompts({
-    type: "select",
-    name: "isTypeScript",
-    message: "What language does your project use?",
-    choices: [
-      { title: "👉 TypeScript (🟦 *.{ts,tsx})", value: true },
-      { title: "👉 JavaScript (🟨 *.{js,jsx})", value: false }
-    ],
-    initial: 0
+    type: "confirm",
+    name: "confirm",
+    message: `📦 Install dependencies for "${component}"?\n🔗 ${deps.join("\n🔗 ")}\n`,
+    initial: true,
   });
 
-  return response.isTypeScript;
+  return response.confirm;
 }
 
 export async function installDependencies(component) {
   const input = path.join(__dirname, "..", "configs", "dependencies.json");
 
-  if (await fs.pathExists(input)) return;
+  if (!(await fs.pathExists(input))) return;
 
   try {
     const allDeps = await fs.readJSON(input);
     const cmpDeps = allDeps && allDeps[component];
 
     if (cmpDeps && typeof cmpDeps === "object") {
-      const deps = Object.entries(cmpDeps).map(([pkg, ver]) => (ver ? `${pkg}@${ver}` : pkg));
+      const deps = Object.entries(cmpDeps).map(([pkg, ver]) =>
+        ver ? `${pkg}@${ver}` : pkg
+      );
 
       if (deps.length) {
-        const pm = fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))
-          ? "pnpm" : fs.existsSync(path.join(cwd, "yarn.lock"))
-            ? "yarn" : "npm";
+        const confirm = await confirmInstallDependencies(component, deps);
 
-        if (!pm || !deps || deps.length === 0) return;
+        if (!confirm) {
+          console.log("⏩ Skipped dependency installation.");
 
-        console.log(`ℹ️ Installing dependencies for ${component}: ${deps.join(", ")}`);
+          return;
+        }
+
+        const pm = fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))
+          ? "pnpm"
+          : fs.existsSync(path.join(cwd, "yarn.lock"))
+            ? "yarn"
+            : "npm";
+
+        console.log(`ℹ️ Installing dependencies using ${pm}...`);
 
         const cmd = pm === "yarn" || pm === "pnpm" ? "add" : "install";
         const flags = pm === "npm" ? ["--save"] : [];
@@ -56,6 +62,21 @@ export async function installDependencies(component) {
   }
 }
 
+async function promptIsTypeScript() {
+  const response = await prompts({
+    type: "select",
+    name: "isTypeScript",
+    message: "What language does your project use?",
+    choices: [
+      { title: "👉 TypeScript (🟦 *.{ts,tsx})", value: true },
+      { title: "👉 JavaScript (🟨 *.{js,jsx})", value: false }
+    ],
+    initial: 0
+  });
+
+  return response.isTypeScript;
+}
+
 export async function add(component) {
   if (!component) {
     console.warn(`⚠️ Usage: npx @connectycube/react-ui-kit add [component-name]`);
@@ -70,6 +91,7 @@ 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);
 
@@ -80,8 +102,8 @@ export async function add(component) {
 
   const dest = path.join(cwd, "src", "components", "connectycube-ui");
   const output = path.join(dest, filename);
-  const utilsInput = path.join(sourceDir, "utils.ts");
-  const utilsOutput = path.join(dest, "utils.ts");
+  const utilsInput = path.join(sourceDir, utilsFilename);
+  const utilsOutput = path.join(dest, utilsFilename);
 
   await fs.ensureDir(dest);
   await fs.copyFile(input, output);
@@ -90,9 +112,9 @@ export async function add(component) {
 
   if (!(await fs.pathExists(utilsOutput))) {
     await fs.copyFile(utilsInput, utilsOutput);
-    console.log(`- utils.ts (${utilsOutput}`);
+    console.log(`- ${utilsFilename} (${utilsOutput})`);
   } else {
-    console.log("- utils.ts (already exists)");
+    console.log(`- ${utilsFilename} (already exists)`);
   }
 
   await installDependencies(component);

package/{cmd → commands}/help.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'url';
 
 export function help() {
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
-  const commands = path.resolve(__dirname, '../cmd');
+  const commands = path.resolve(__dirname, '../commands');
   const names = fs.readdirSync(commands).filter(f => f.endsWith('.js'));
 
   console.info('ℹ️ Usage: npx @connectycube/react-ui-kit@latest <command> [args]');

package/configs/dependencies.json

@@ -0,0 +1,5 @@
+{
+  "stream-view": {
+    "webrtc-adapter": ""
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -33,8 +33,9 @@
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "files": [
+    "configs",
+    "commands",
     "bin",
-    "cmd",
     "dist",
     "src",
     "gen"
@@ -61,7 +62,8 @@
   "dependencies": {
     "execa": "^9.6.0",
     "fs-extra": "^11.3.2",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "webrtc-adapter": "^9.0.3"
   },
   "peerDependencies": {
     "clsx": "*",

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

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

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 getRandomString(length = 8) {
+  return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
+}