@connectycube/react-ui-kit 0.0.3 → 0.0.5

package/README.md

@@ -67,7 +67,7 @@ Coming soon...
 
 ## 🧩 Contributing
 
-See [CONTRIBUTING.md](https://github.com/connectycube/react-ui-kit/blob/main/.github/CONTRIBUTING.md) for guidelines on adding new components or templates.
+See [CONTRIBUTING.md](https://github.com/connectycube/react-ui-kit/blob/main/.github/CONTRIBUTING.md) for guidelines on adding new components.
 
 ---
 

package/cmd/add.js

@@ -70,24 +70,30 @@ export async function add(component) {
   }
 
   const filename = `${component}${isTypeScript ? ".tsx" : ".jsx"}`;
-  const base = path.join(__dirname, "..", isTypeScript ? "src" : "gen");
-  const input = path.join(base, "templates", filename);
-  const utils = path.join(base, "lib");
+  const sourceDir = path.join(__dirname, "..", isTypeScript ? "src" : "gen", "components");
+  const input = path.join(sourceDir, filename);
 
   if (!(await fs.pathExists(input))) {
     console.warn(`⚠️ Component "${component}" does not exist.`);
     process.exit(1);
   }
 
-  const baseDest = path.join(cwd, "src", "components", "connectycube-ui");
-  const libDest = path.join(baseDest, "lib");
-  const output = path.join(baseDest, filename);
+  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");
 
-  await fs.ensureDir(baseDest);
+  await fs.ensureDir(dest);
   await fs.copyFile(input, output);
-  console.log(`✅ Added file "${output}"`);
-  await fs.ensureDir(libDest);
-  await fs.copy(utils, libDest);
-  console.log(`✅ Added "${libDest}/*.${isTypeScript ? "ts" : "js"}" folder.`);
+  console.log("✅ Added:");
+  console.log(`- ${filename} (${output})`);
+
+  if (!(await fs.pathExists(utilsOutput))) {
+    await fs.copyFile(utilsInput, utilsOutput);
+    console.log(`- utils.ts (${utilsOutput}`);
+  } else {
+    console.log("- utils.ts (already exists)");
+  }
+
   await installDependencies(component);
 }

package/gen/{templates/remote-stream.jsx → components/stream-view.jsx}

@@ -1,9 +1,9 @@
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { cn, getRandomString } from '../lib/utils';
+import { cn, getRandomString } from './utils';
 
-export const RemoteStream = forwardRef(({ id, stream, mirror, className, muted, ...props }, ref) => {
+export const StreamView = forwardRef(({ id, stream, mirror, className, muted, ...props }, ref) => {
   const videoRef = useRef(null);
-  const elementId = useMemo(() => id ?? `remote-stream-${getRandomString()}`, [id]);
+  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]' : '';
@@ -25,7 +25,7 @@ export const RemoteStream = forwardRef(({ id, stream, mirror, className, muted,
         try {
           videoRef.current?.play();
         } catch (error) {
-          console.error('<RemoteStream/> play():', error);
+          console.error('<StreamView/> play():', error);
         }
       };
 
@@ -47,3 +47,17 @@ export const RemoteStream = forwardRef(({ id, stream, mirror, className, muted,
     />
   ) : 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/gen/index.js

@@ -1,3 +1 @@
-export { LocalStream } from './templates/local-stream';
-
-export { RemoteStream } from './templates/remote-stream';
+export { StreamView, LocalStreamView, RemoteStreamView } from './components/stream-view';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -43,7 +43,7 @@
     "build": "rollup -c",
     "format": "node ./scripts/format.js",
     "transform": "node ./scripts/transform.js",
-    "version": "node ./scripts/bump-version.cjs",
+    "version": "node ./scripts/bump-version.js",
     "version:patch": "npm run version patch",
     "version:minor": "npm run version minor",
     "version:major": "npm run version major",
@@ -58,6 +58,11 @@
     "tsx",
     "jsx"
   ],
+  "dependencies": {
+    "execa": "^9.6.0",
+    "fs-extra": "^11.3.2",
+    "prompts": "^2.4.2"
+  },
   "peerDependencies": {
     "clsx": "*",
     "react": ">=18",
@@ -78,12 +83,9 @@
     "eslint": "^9.38.0",
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "execa": "^9.6.0",
     "fast-glob": "^3.3.3",
-    "fs-extra": "^11.3.2",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
-    "prompts": "^2.4.2",
     "rollup": "^4.52.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",

package/src/{templates/remote-stream.tsx → components/stream-view.tsx}

@@ -1,23 +1,22 @@
+import type React from 'react';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { type ClassValue } from 'clsx';
-import { cn, getRandomString } from '../lib/utils';
+import { cn, getRandomString } from './utils';
 
-export type RemoteStreamProps = {
+export type StreamViewProps = {
   id?: string;
   stream?: MediaStream;
   mirror?: boolean;
-  className?: ClassValue;
 } & React.VideoHTMLAttributes<HTMLVideoElement>;
 
-export type RemoteStreamRef = {
+export type StreamViewRef = {
   id: string;
   element: HTMLVideoElement | null;
 };
 
-export const RemoteStream = forwardRef<RemoteStreamRef, RemoteStreamProps>(
+export const StreamView = forwardRef<StreamViewRef, StreamViewProps>(
   ({ id, stream, mirror, className, muted, ...props }, ref) => {
     const videoRef = useRef<HTMLVideoElement>(null);
-    const elementId = useMemo(() => id ?? `remote-stream-${getRandomString()}`, [id]);
+    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]' : '';
@@ -39,7 +38,7 @@ export const RemoteStream = forwardRef<RemoteStreamRef, RemoteStreamProps>(
           try {
             videoRef.current?.play();
           } catch (error) {
-            console.error('<RemoteStream/> play():', error);
+            console.error('<StreamView/> play():', error);
           }
         };
 
@@ -62,3 +61,17 @@ export const RemoteStream = forwardRef<RemoteStreamRef, RemoteStreamProps>(
     ) : null;
   }
 );
+
+export const LocalStreamView = forwardRef<StreamViewRef, StreamViewProps>(({ 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<StreamViewRef, StreamViewProps>(({ 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/index.ts

@@ -1,7 +1,3 @@
-export { LocalStream } from './templates/local-stream';
+export { StreamView, LocalStreamView, RemoteStreamView } from './components/stream-view';
 
-export type { LocalStreamProps } from './templates/local-stream';
-
-export { RemoteStream } from './templates/remote-stream';
-
-export type { RemoteStreamProps } from './templates/remote-stream';
+export type { StreamViewProps, StreamViewRef } from './components/stream-view';

package/gen/lib/constants.js

@@ -1,6 +0,0 @@
-export let ActiveMedia = /*#__PURE__*/ (function (ActiveMedia) {
-  ActiveMedia[(ActiveMedia['USER'] = 0)] = 'USER';
-  ActiveMedia[(ActiveMedia['DISPLAY'] = 1)] = 'DISPLAY';
-
-  return ActiveMedia;
-})({});

package/gen/templates/local-stream.jsx

@@ -1,52 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { cn, getRandomString } from '../lib/utils';
-import { ActiveMedia } from '../lib/constants';
-
-export const LocalStream = forwardRef(({ id, stream, activeMedia, mirror, className, muted, ...props }, ref) => {
-  const videoRef = useRef(null);
-  const elementId = useMemo(() => id ?? `local-stream-${getRandomString()}`, [id]);
-  const isCamera = activeMedia === ActiveMedia.USER || activeMedia === 'user';
-  const isMuted = typeof muted === 'boolean' ? muted : true;
-  const isMirror = typeof mirror === 'boolean' ? mirror : isCamera;
-  const defaultClassName = 'size-full object-contain';
-  const mirrorClassName = isMirror ? '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('<LocalStream/> 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;
-});

package/src/components/connectycube-ui/lib/constants.js

@@ -1,6 +0,0 @@
-export let ActiveMedia = /*#__PURE__*/ (function (ActiveMedia) {
-  ActiveMedia[(ActiveMedia['USER'] = 0)] = 'USER';
-  ActiveMedia[(ActiveMedia['DISPLAY'] = 1)] = 'DISPLAY';
-
-  return ActiveMedia;
-})({});

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

@@ -1,10 +0,0 @@
-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);
-}

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

@@ -1,52 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { cn, getRandomString } from '../lib/utils';
-import { ActiveMedia } from '../lib/constants';
-
-export const LocalStream = forwardRef(({ id, stream, activeMedia, mirror, className, muted, ...props }, ref) => {
-  const videoRef = useRef(null);
-  const elementId = useMemo(() => id ?? `local-stream-${getRandomString()}`, [id]);
-  const isCamera = activeMedia === ActiveMedia.USER || activeMedia === 'user';
-  const isMuted = typeof muted === 'boolean' ? muted : true;
-  const isMirror = typeof mirror === 'boolean' ? mirror : isCamera;
-  const defaultClassName = 'size-full object-contain';
-  const mirrorClassName = isMirror ? '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('<LocalStream/> 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;
-});

package/src/lib/constants.ts

@@ -1,4 +0,0 @@
-export enum ActiveMedia {
-  USER = 0,
-  DISPLAY = 1,
-}

package/src/templates/local-stream.tsx

@@ -1,69 +0,0 @@
-import type React from 'react';
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { type ClassValue } from 'clsx';
-import { cn, getRandomString } from '../lib/utils';
-import { ActiveMedia } from '../lib/constants';
-
-export type LocalStreamProps = {
-  id?: string;
-  stream?: MediaStream;
-  activeMedia?: ActiveMedia | 'user' | 'display';
-  mirror?: boolean;
-  className?: ClassValue;
-} & React.VideoHTMLAttributes<HTMLVideoElement>;
-
-export type LocalStreamRef = {
-  id: string;
-  element: HTMLVideoElement | null;
-};
-
-export const LocalStream = forwardRef<LocalStreamRef, LocalStreamProps>(
-  ({ id, stream, activeMedia, mirror, className, muted, ...props }, ref) => {
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const elementId = useMemo(() => id ?? `local-stream-${getRandomString()}`, [id]);
-    const isCamera = activeMedia === ActiveMedia.USER || activeMedia === 'user';
-    const isMuted = typeof muted === 'boolean' ? muted : true;
-    const isMirror = typeof mirror === 'boolean' ? mirror : isCamera;
-    const defaultClassName = 'size-full object-contain';
-    const mirrorClassName = isMirror ? '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('<LocalStream/> 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;
-  }
-);