@connectycube/react-ui-kit 0.0.14 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/configs/dependencies.json +1 -3
- package/dist/index.cjs +27 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +27 -1
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/components/animated-loader.d.ts +10 -0
- package/dist/types/components/animated-loader.d.ts.map +1 -0
- package/dist/types/components/avatar.d.ts +15 -0
- package/dist/types/components/avatar.d.ts.map +1 -0
- package/dist/types/components/dismiss-layer.d.ts +10 -0
- package/dist/types/components/dismiss-layer.d.ts.map +1 -0
- package/dist/types/components/placeholder-text.d.ts +8 -0
- package/dist/types/components/placeholder-text.d.ts.map +1 -0
- package/dist/types/components/presence.d.ts +17 -0
- package/dist/types/components/presence.d.ts.map +1 -0
- package/dist/types/components/status-indicator.d.ts +19 -0
- package/dist/types/components/status-indicator.d.ts.map +1 -0
- package/dist/types/components/stream-view.d.ts +28 -24
- package/dist/types/components/stream-view.d.ts.map +1 -1
- package/dist/types/components/utils.d.ts +2 -0
- package/dist/types/components/utils.d.ts.map +1 -1
- package/dist/types/index.d.ts +4 -2
- package/dist/types/index.d.ts.map +1 -1
- package/gen/components/avatar.jsx +6 -6
- package/gen/components/dismiss-layer.jsx +1 -1
- package/gen/components/presence.jsx +47 -7
- package/gen/components/status-indicator.jsx +12 -19
- package/package.json +18 -16
- package/src/components/animated-loader.tsx +1 -2
- package/src/components/avatar.tsx +10 -14
- package/src/components/dismiss-layer.tsx +1 -2
- package/src/components/placeholder-text.tsx +0 -1
- package/src/components/presence.tsx +48 -10
- package/src/components/status-indicator.tsx +19 -35
- package/src/components/stream-view.tsx +1 -3
- package/dist/types/components/connectycube-ui/stream-view.d.ts +0 -26
- package/dist/types/components/connectycube-ui/stream-view.d.ts.map +0 -1
- package/dist/types/components/connectycube-ui/utils.d.ts +0 -4
- package/dist/types/components/connectycube-ui/utils.d.ts.map +0 -1
- package/dist/types/lib/constants.d.ts +0 -5
- package/dist/types/lib/constants.d.ts.map +0 -1
- package/dist/types/lib/utils.d.ts +0 -4
- package/dist/types/lib/utils.d.ts.map +0 -1
- package/dist/types/templates/local-stream.d.ts +0 -22
- package/dist/types/templates/local-stream.d.ts.map +0 -1
- package/dist/types/templates/remote-stream.d.ts +0 -18
- package/dist/types/templates/remote-stream.d.ts.map +0 -1
- package/src/components/connectycube-ui/animated-loader.jsx +0 -10
- package/src/components/connectycube-ui/animated-loader.tsx +0 -15
- package/src/components/connectycube-ui/avatar.jsx +0 -34
- package/src/components/connectycube-ui/avatar.tsx +0 -45
- package/src/components/connectycube-ui/dismiss-layer.jsx +0 -57
- package/src/components/connectycube-ui/dismiss-layer.tsx +0 -74
- package/src/components/connectycube-ui/placeholder-text.jsx +0 -22
- package/src/components/connectycube-ui/placeholder-text.tsx +0 -28
- package/src/components/connectycube-ui/presence.jsx +0 -41
- package/src/components/connectycube-ui/presence.tsx +0 -55
- package/src/components/connectycube-ui/status-indicator.tsx +0 -100
- package/src/components/connectycube-ui/stream-view.jsx +0 -201
- package/src/components/connectycube-ui/stream-view.tsx +0 -246
- package/src/components/connectycube-ui/utils.js +0 -30
- package/src/components/connectycube-ui/utils.ts +0 -28
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
import { forwardRef, memo } from 'react';
|
|
2
|
-
import
|
|
3
|
-
Provider as TooltipProvider,
|
|
4
|
-
Root as TooltipRoot,
|
|
5
|
-
Trigger as TooltipTrigger,
|
|
6
|
-
Portal as TooltipPortal,
|
|
7
|
-
Content as TooltipContent,
|
|
8
|
-
Arrow as TooltipArrow,
|
|
9
|
-
} from '@radix-ui/react-tooltip';
|
|
2
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
10
3
|
import { cn } from './utils';
|
|
11
4
|
|
|
12
5
|
function StatusIndicatorBase(
|
|
@@ -33,9 +26,9 @@ function StatusIndicatorBase(
|
|
|
33
26
|
|
|
34
27
|
return (
|
|
35
28
|
<div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
|
|
36
|
-
<
|
|
37
|
-
<
|
|
38
|
-
<
|
|
29
|
+
<TooltipPrimitive.Provider {...tooltipProviderProps}>
|
|
30
|
+
<TooltipPrimitive.Root {...tooltipProps}>
|
|
31
|
+
<TooltipPrimitive.Trigger asChild {...tooltipTriggerProps}>
|
|
39
32
|
<div
|
|
40
33
|
{...statusProps}
|
|
41
34
|
className={cn(
|
|
@@ -44,9 +37,9 @@ function StatusIndicatorBase(
|
|
|
44
37
|
statusProps?.className
|
|
45
38
|
)}
|
|
46
39
|
/>
|
|
47
|
-
</
|
|
48
|
-
<
|
|
49
|
-
<
|
|
40
|
+
</TooltipPrimitive.Trigger>
|
|
41
|
+
<TooltipPrimitive.Portal {...tooltipPortalProps}>
|
|
42
|
+
<TooltipPrimitive.Content
|
|
50
43
|
{...tooltipContentProps}
|
|
51
44
|
className={cn(
|
|
52
45
|
'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',
|
|
@@ -54,17 +47,17 @@ function StatusIndicatorBase(
|
|
|
54
47
|
)}
|
|
55
48
|
>
|
|
56
49
|
<span>{tooltip || status || 'unknown'}</span>
|
|
57
|
-
<
|
|
50
|
+
<TooltipPrimitive.Arrow
|
|
58
51
|
{...tooltipArrowProps}
|
|
59
52
|
className={cn(
|
|
60
53
|
'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
|
|
61
54
|
tooltipArrowProps?.className
|
|
62
55
|
)}
|
|
63
56
|
/>
|
|
64
|
-
</
|
|
65
|
-
</
|
|
66
|
-
</
|
|
67
|
-
</
|
|
57
|
+
</TooltipPrimitive.Content>
|
|
58
|
+
</TooltipPrimitive.Portal>
|
|
59
|
+
</TooltipPrimitive.Root>
|
|
60
|
+
</TooltipPrimitive.Provider>
|
|
68
61
|
</div>
|
|
69
62
|
);
|
|
70
63
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@connectycube/react-ui-kit",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"description": "Simple React UI Kit generator with TSX/JSX",
|
|
5
5
|
"homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -41,14 +41,16 @@
|
|
|
41
41
|
"gen"
|
|
42
42
|
],
|
|
43
43
|
"scripts": {
|
|
44
|
-
"build": "rollup -c",
|
|
44
|
+
"build": "npm run clean:dist && rollup -c",
|
|
45
45
|
"format": "node ./scripts/format.js",
|
|
46
46
|
"transform": "node ./scripts/transform.js",
|
|
47
|
+
"generate": "npm run clean:gen && npm run transform && eslint --fix . && npm run format",
|
|
47
48
|
"version": "node ./scripts/bump-version.js",
|
|
48
49
|
"version:patch": "npm run version patch",
|
|
49
50
|
"version:minor": "npm run version minor",
|
|
50
51
|
"version:major": "npm run version major",
|
|
51
|
-
"
|
|
52
|
+
"clean:dist": "rm -rf dist",
|
|
53
|
+
"clean:gen": "rm -rf gen",
|
|
52
54
|
"lint": "eslint ."
|
|
53
55
|
},
|
|
54
56
|
"keywords": [
|
|
@@ -74,27 +76,27 @@
|
|
|
74
76
|
"react-dom": ">=18"
|
|
75
77
|
},
|
|
76
78
|
"devDependencies": {
|
|
77
|
-
"@babel/core": "^7.28.
|
|
78
|
-
"@babel/preset-typescript": "^7.
|
|
79
|
-
"@eslint/js": "^9.
|
|
80
|
-
"@rollup/plugin-commonjs": "^
|
|
79
|
+
"@babel/core": "^7.28.5",
|
|
80
|
+
"@babel/preset-typescript": "^7.28.5",
|
|
81
|
+
"@eslint/js": "^9.39.1",
|
|
82
|
+
"@rollup/plugin-commonjs": "^29.0.0",
|
|
81
83
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
82
84
|
"@rollup/plugin-terser": "^0.4.4",
|
|
83
|
-
"@rollup/plugin-typescript": "^12.
|
|
84
|
-
"@stylistic/eslint-plugin": "^5.
|
|
85
|
-
"@types/node": "^24.
|
|
86
|
-
"@types/react": "^19.2.
|
|
87
|
-
"eslint": "^9.
|
|
88
|
-
"eslint-plugin-react-hooks": "^7.0.
|
|
85
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
86
|
+
"@stylistic/eslint-plugin": "^5.6.1",
|
|
87
|
+
"@types/node": "^24.10.1",
|
|
88
|
+
"@types/react": "^19.2.7",
|
|
89
|
+
"eslint": "^9.39.1",
|
|
90
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
89
91
|
"eslint-plugin-react-refresh": "^0.4.24",
|
|
90
92
|
"fast-glob": "^3.3.3",
|
|
91
|
-
"globals": "^16.
|
|
93
|
+
"globals": "^16.5.0",
|
|
92
94
|
"prettier": "^3.6.2",
|
|
93
|
-
"rollup": "^4.
|
|
95
|
+
"rollup": "^4.53.3",
|
|
94
96
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
95
97
|
"tslib": "^2.8.1",
|
|
96
98
|
"typescript": "^5.9.3",
|
|
97
|
-
"typescript-eslint": "^8.
|
|
99
|
+
"typescript-eslint": "^8.48.0"
|
|
98
100
|
},
|
|
99
101
|
"engines": {
|
|
100
102
|
"node": ">=18"
|
|
@@ -1,21 +1,17 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type { AvatarProps as AvatarRootProps, AvatarFallbackProps, AvatarImageProps } from '@radix-ui/react-avatar';
|
|
3
|
-
import type { PresenceStatus } from './presence';
|
|
4
|
-
import type { PresenceBadgeProps } from './presence';
|
|
5
1
|
import { forwardRef, memo } from 'react';
|
|
6
|
-
import
|
|
7
|
-
import { PresenceBadge } from './presence';
|
|
2
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
3
|
+
import { PresenceBadge, type PresenceStatus, type PresenceBadgeProps } from './presence';
|
|
8
4
|
import { cn, getInitialsFromName } from './utils';
|
|
9
5
|
|
|
10
|
-
interface AvatarProps extends
|
|
6
|
+
interface AvatarProps extends AvatarPrimitive.AvatarProps {
|
|
11
7
|
src?: string;
|
|
12
8
|
name?: string;
|
|
13
9
|
online?: boolean;
|
|
14
10
|
presence?: PresenceStatus;
|
|
15
11
|
onlineProps?: React.ComponentProps<'div'>;
|
|
16
12
|
presenceProps?: PresenceBadgeProps;
|
|
17
|
-
imageProps?: AvatarImageProps;
|
|
18
|
-
fallbackProps?: AvatarFallbackProps;
|
|
13
|
+
imageProps?: AvatarPrimitive.AvatarImageProps;
|
|
14
|
+
fallbackProps?: AvatarPrimitive.AvatarFallbackProps;
|
|
19
15
|
}
|
|
20
16
|
|
|
21
17
|
function AvatarBase(
|
|
@@ -36,18 +32,18 @@ function AvatarBase(
|
|
|
36
32
|
const initials = getInitialsFromName(name);
|
|
37
33
|
|
|
38
34
|
return (
|
|
39
|
-
<
|
|
40
|
-
<
|
|
35
|
+
<AvatarPrimitive.Root ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
|
|
36
|
+
<AvatarPrimitive.Image
|
|
41
37
|
{...imageProps}
|
|
42
38
|
src={src}
|
|
43
39
|
className={cn('aspect-square size-full rounded-full overflow-hidden object-cover', imageProps?.className)}
|
|
44
40
|
/>
|
|
45
|
-
<
|
|
41
|
+
<AvatarPrimitive.Fallback
|
|
46
42
|
{...fallbackProps}
|
|
47
43
|
className={cn('bg-muted flex size-full items-center justify-center', fallbackProps?.className)}
|
|
48
44
|
>
|
|
49
45
|
{initials}
|
|
50
|
-
</
|
|
46
|
+
</AvatarPrimitive.Fallback>
|
|
51
47
|
{online && (
|
|
52
48
|
<div
|
|
53
49
|
{...onlineProps}
|
|
@@ -59,7 +55,7 @@ function AvatarBase(
|
|
|
59
55
|
{...presenceProps}
|
|
60
56
|
className={cn('absolute -bottom-0.5 -right-1', presenceProps?.className)}
|
|
61
57
|
/>
|
|
62
|
-
</
|
|
58
|
+
</AvatarPrimitive.Root>
|
|
63
59
|
);
|
|
64
60
|
}
|
|
65
61
|
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
1
|
import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
|
|
3
2
|
import { cn } from './utils';
|
|
4
3
|
|
|
@@ -54,7 +53,7 @@ function DismissLayerBase(
|
|
|
54
53
|
{...props}
|
|
55
54
|
onClick={handleClickOrTouch}
|
|
56
55
|
onTouchStart={handleClickOrTouch}
|
|
57
|
-
className={cn('fixed top-0 left-0
|
|
56
|
+
className={cn('fixed top-0 left-0 size-full bg-black/20', props?.className)}
|
|
58
57
|
/>
|
|
59
58
|
);
|
|
60
59
|
}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type { LucideProps } from 'lucide-react';
|
|
3
1
|
import { memo } from 'react';
|
|
4
|
-
import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
|
|
5
2
|
import { capitalize, cn } from './utils';
|
|
6
3
|
|
|
7
4
|
type PresenceStatus = 'available' | 'busy' | 'away' | 'unknown' | undefined;
|
|
@@ -14,7 +11,7 @@ interface PresenceProps extends React.ComponentProps<'div'> {
|
|
|
14
11
|
labelProps?: React.ComponentProps<'span'>;
|
|
15
12
|
}
|
|
16
13
|
|
|
17
|
-
interface PresenceBadgeProps extends
|
|
14
|
+
interface PresenceBadgeProps extends React.ComponentProps<'svg'> {
|
|
18
15
|
status?: PresenceStatus;
|
|
19
16
|
}
|
|
20
17
|
|
|
@@ -22,18 +19,59 @@ function PresenceBadgeBase({ status, ...props }: PresenceBadgeProps) {
|
|
|
22
19
|
switch (status) {
|
|
23
20
|
case 'available':
|
|
24
21
|
return (
|
|
25
|
-
<
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
width="16"
|
|
25
|
+
height="16"
|
|
26
|
+
fill="currentColor"
|
|
27
|
+
viewBox="0 0 16 16"
|
|
28
|
+
{...props}
|
|
29
|
+
className={cn('rounded-full size-4.5 text-green-600 bg-white', props?.className)}
|
|
30
|
+
>
|
|
31
|
+
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
|
|
32
|
+
</svg>
|
|
26
33
|
);
|
|
27
34
|
case 'busy':
|
|
28
|
-
return
|
|
35
|
+
return (
|
|
36
|
+
<svg
|
|
37
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
38
|
+
width="16"
|
|
39
|
+
height="16"
|
|
40
|
+
fill="currentColor"
|
|
41
|
+
viewBox="0 0 16 16"
|
|
42
|
+
{...props}
|
|
43
|
+
className={cn('rounded-full size-4.5 text-red-600 bg-white', props?.className)}
|
|
44
|
+
>
|
|
45
|
+
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
|
|
46
|
+
</svg>
|
|
47
|
+
);
|
|
29
48
|
case 'away':
|
|
30
|
-
return
|
|
49
|
+
return (
|
|
50
|
+
<svg
|
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
52
|
+
width="16"
|
|
53
|
+
height="16"
|
|
54
|
+
fill="currentColor"
|
|
55
|
+
viewBox="0 0 16 16"
|
|
56
|
+
{...props}
|
|
57
|
+
className={cn('rounded-full size-4.5 text-yellow-500 bg-white', props?.className)}
|
|
58
|
+
>
|
|
59
|
+
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
|
|
60
|
+
</svg>
|
|
61
|
+
);
|
|
31
62
|
case 'unknown':
|
|
32
63
|
return (
|
|
33
|
-
<
|
|
64
|
+
<svg
|
|
65
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
66
|
+
width="16"
|
|
67
|
+
height="16"
|
|
68
|
+
fill="currentColor"
|
|
69
|
+
viewBox="0 0 16 16"
|
|
34
70
|
{...props}
|
|
35
|
-
className={cn('rounded-full
|
|
36
|
-
|
|
71
|
+
className={cn('rounded-full size-4.5 text-gray-500 bg-white', props?.className)}
|
|
72
|
+
>
|
|
73
|
+
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
|
|
74
|
+
</svg>
|
|
37
75
|
);
|
|
38
76
|
default:
|
|
39
77
|
return null;
|
|
@@ -1,21 +1,5 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
TooltipProviderProps,
|
|
4
|
-
TooltipProps,
|
|
5
|
-
TooltipTriggerProps,
|
|
6
|
-
TooltipPortalProps,
|
|
7
|
-
TooltipContentProps,
|
|
8
|
-
TooltipArrowProps,
|
|
9
|
-
} from '@radix-ui/react-tooltip';
|
|
10
1
|
import { forwardRef, memo } from 'react';
|
|
11
|
-
import
|
|
12
|
-
Provider as TooltipProvider,
|
|
13
|
-
Root as TooltipRoot,
|
|
14
|
-
Trigger as TooltipTrigger,
|
|
15
|
-
Portal as TooltipPortal,
|
|
16
|
-
Content as TooltipContent,
|
|
17
|
-
Arrow as TooltipArrow,
|
|
18
|
-
} from '@radix-ui/react-tooltip';
|
|
2
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
19
3
|
import { cn } from './utils';
|
|
20
4
|
|
|
21
5
|
type StatusName = string | 'unknown';
|
|
@@ -24,12 +8,12 @@ interface StatusIndicatorProps extends React.ComponentProps<'div'> {
|
|
|
24
8
|
status?: StatusName;
|
|
25
9
|
statusColorConfig?: Record<StatusName, string>;
|
|
26
10
|
statusProps?: React.ComponentProps<'div'>;
|
|
27
|
-
tooltipProviderProps?: TooltipProviderProps;
|
|
28
|
-
tooltipProps?: TooltipProps;
|
|
29
|
-
tooltipTriggerProps?: TooltipTriggerProps;
|
|
30
|
-
tooltipPortalProps?: TooltipPortalProps;
|
|
31
|
-
tooltipContentProps?: TooltipContentProps;
|
|
32
|
-
tooltipArrowProps?: TooltipArrowProps;
|
|
11
|
+
tooltipProviderProps?: TooltipPrimitive.TooltipProviderProps;
|
|
12
|
+
tooltipProps?: TooltipPrimitive.TooltipProps;
|
|
13
|
+
tooltipTriggerProps?: TooltipPrimitive.TooltipTriggerProps;
|
|
14
|
+
tooltipPortalProps?: TooltipPrimitive.TooltipPortalProps;
|
|
15
|
+
tooltipContentProps?: TooltipPrimitive.TooltipContentProps;
|
|
16
|
+
tooltipArrowProps?: TooltipPrimitive.TooltipArrowProps;
|
|
33
17
|
tooltip?: string;
|
|
34
18
|
disabled?: boolean;
|
|
35
19
|
className?: string;
|
|
@@ -57,9 +41,9 @@ function StatusIndicatorBase(
|
|
|
57
41
|
|
|
58
42
|
return (
|
|
59
43
|
<div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
|
|
60
|
-
<
|
|
61
|
-
<
|
|
62
|
-
<
|
|
44
|
+
<TooltipPrimitive.Provider {...tooltipProviderProps}>
|
|
45
|
+
<TooltipPrimitive.Root {...tooltipProps}>
|
|
46
|
+
<TooltipPrimitive.Trigger asChild {...tooltipTriggerProps}>
|
|
63
47
|
<div
|
|
64
48
|
{...statusProps}
|
|
65
49
|
className={cn(
|
|
@@ -68,9 +52,9 @@ function StatusIndicatorBase(
|
|
|
68
52
|
statusProps?.className
|
|
69
53
|
)}
|
|
70
54
|
/>
|
|
71
|
-
</
|
|
72
|
-
<
|
|
73
|
-
<
|
|
55
|
+
</TooltipPrimitive.Trigger>
|
|
56
|
+
<TooltipPrimitive.Portal {...tooltipPortalProps}>
|
|
57
|
+
<TooltipPrimitive.Content
|
|
74
58
|
{...tooltipContentProps}
|
|
75
59
|
className={cn(
|
|
76
60
|
'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',
|
|
@@ -78,17 +62,17 @@ function StatusIndicatorBase(
|
|
|
78
62
|
)}
|
|
79
63
|
>
|
|
80
64
|
<span>{tooltip || status || 'unknown'}</span>
|
|
81
|
-
<
|
|
65
|
+
<TooltipPrimitive.Arrow
|
|
82
66
|
{...tooltipArrowProps}
|
|
83
67
|
className={cn(
|
|
84
68
|
'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
|
|
85
69
|
tooltipArrowProps?.className
|
|
86
70
|
)}
|
|
87
71
|
/>
|
|
88
|
-
</
|
|
89
|
-
</
|
|
90
|
-
</
|
|
91
|
-
</
|
|
72
|
+
</TooltipPrimitive.Content>
|
|
73
|
+
</TooltipPrimitive.Portal>
|
|
74
|
+
</TooltipPrimitive.Root>
|
|
75
|
+
</TooltipPrimitive.Provider>
|
|
92
76
|
</div>
|
|
93
77
|
);
|
|
94
78
|
}
|
|
@@ -97,4 +81,4 @@ const StatusIndicator = memo(forwardRef(StatusIndicatorBase));
|
|
|
97
81
|
|
|
98
82
|
StatusIndicator.displayName = 'StatusIndicator';
|
|
99
83
|
|
|
100
|
-
export { StatusIndicator, type StatusIndicatorProps };
|
|
84
|
+
export { StatusIndicator, type StatusName, type StatusIndicatorProps };
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type { LucideProps } from 'lucide-react';
|
|
3
1
|
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
4
|
-
import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
|
|
2
|
+
import { Maximize, Minimize, PictureInPicture2, type LucideProps } from 'lucide-react';
|
|
5
3
|
import { cn, getRandomString } from './utils';
|
|
6
4
|
|
|
7
5
|
interface StreamViewProps extends React.ComponentProps<'video'> {
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
export type StreamViewProps = {
|
|
3
|
-
id?: string;
|
|
4
|
-
stream?: MediaStream;
|
|
5
|
-
mirror?: boolean;
|
|
6
|
-
} & React.VideoHTMLAttributes<HTMLVideoElement>;
|
|
7
|
-
export type StreamViewRef = {
|
|
8
|
-
id: string;
|
|
9
|
-
element: HTMLVideoElement | null;
|
|
10
|
-
};
|
|
11
|
-
export declare const StreamView: React.ForwardRefExoticComponent<{
|
|
12
|
-
id?: string;
|
|
13
|
-
stream?: MediaStream;
|
|
14
|
-
mirror?: boolean;
|
|
15
|
-
} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
|
|
16
|
-
export declare const LocalStreamView: React.ForwardRefExoticComponent<{
|
|
17
|
-
id?: string;
|
|
18
|
-
stream?: MediaStream;
|
|
19
|
-
mirror?: boolean;
|
|
20
|
-
} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
|
|
21
|
-
export declare const RemoteStreamView: React.ForwardRefExoticComponent<{
|
|
22
|
-
id?: string;
|
|
23
|
-
stream?: MediaStream;
|
|
24
|
-
mirror?: boolean;
|
|
25
|
-
} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
|
|
26
|
-
//# sourceMappingURL=stream-view.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stream-view.d.ts","sourceRoot":"","sources":["../../../../src/components/connectycube-ui/stream-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,UAAU;SAVhB,MAAM;aACF,WAAW;aACX,OAAO;qFAuDjB,CAAC;AAEF,eAAO,MAAM,eAAe;SA3DrB,MAAM;aACF,WAAW;aACX,OAAO;qFA8DhB,CAAC;AAEH,eAAO,MAAM,gBAAgB;SAlEtB,MAAM;aACF,WAAW;aACX,OAAO;qFAqEhB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/connectycube-ui/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAI,GAAG,MAAM,CAElD"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,IAAI,IAAI;IACR,OAAO,IAAI;CACZ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAI,GAAG,MAAM,CAElD"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import { type ClassValue } from 'clsx';
|
|
3
|
-
import { ActiveMedia } from '../lib/constants';
|
|
4
|
-
export type LocalStreamProps = {
|
|
5
|
-
id?: string;
|
|
6
|
-
stream?: MediaStream;
|
|
7
|
-
activeMedia?: ActiveMedia | 'user' | 'display';
|
|
8
|
-
mirror?: boolean;
|
|
9
|
-
className?: ClassValue;
|
|
10
|
-
} & React.VideoHTMLAttributes<HTMLVideoElement>;
|
|
11
|
-
export type LocalStreamRef = {
|
|
12
|
-
id: string;
|
|
13
|
-
element: HTMLVideoElement | null;
|
|
14
|
-
};
|
|
15
|
-
export declare const LocalStream: React.ForwardRefExoticComponent<{
|
|
16
|
-
id?: string;
|
|
17
|
-
stream?: MediaStream;
|
|
18
|
-
activeMedia?: ActiveMedia | "user" | "display";
|
|
19
|
-
mirror?: boolean;
|
|
20
|
-
className?: ClassValue;
|
|
21
|
-
} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<LocalStreamRef>>;
|
|
22
|
-
//# sourceMappingURL=local-stream.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"local-stream.d.ts","sourceRoot":"","sources":["../../../src/templates/local-stream.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,WAAW;SAZjB,MAAM;aACF,WAAW;kBACN,WAAW,GAAG,MAAM,GAAG,SAAS;aACrC,OAAO;gBACJ,UAAU;sFAyDvB,CAAC"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { type ClassValue } from 'clsx';
|
|
2
|
-
export type RemoteStreamProps = {
|
|
3
|
-
id?: string;
|
|
4
|
-
stream?: MediaStream;
|
|
5
|
-
mirror?: boolean;
|
|
6
|
-
className?: ClassValue;
|
|
7
|
-
} & React.VideoHTMLAttributes<HTMLVideoElement>;
|
|
8
|
-
export type RemoteStreamRef = {
|
|
9
|
-
id: string;
|
|
10
|
-
element: HTMLVideoElement | null;
|
|
11
|
-
};
|
|
12
|
-
export declare const RemoteStream: import("react").ForwardRefExoticComponent<{
|
|
13
|
-
id?: string;
|
|
14
|
-
stream?: MediaStream;
|
|
15
|
-
mirror?: boolean;
|
|
16
|
-
className?: ClassValue;
|
|
17
|
-
} & import("react").VideoHTMLAttributes<HTMLVideoElement> & import("react").RefAttributes<RemoteStreamRef>>;
|
|
18
|
-
//# sourceMappingURL=remote-stream.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"remote-stream.d.ts","sourceRoot":"","sources":["../../../src/templates/remote-stream.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAGvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,YAAY;SAXlB,MAAM;aACF,WAAW;aACX,OAAO;gBACJ,UAAU;2GAuDvB,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { LoaderCircle } from 'lucide-react';
|
|
2
|
-
import { cn } from './utils';
|
|
3
|
-
|
|
4
|
-
function AnimatedLoader({ loading = true, className }) {
|
|
5
|
-
return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
AnimatedLoader.displayName = 'AnimatedLoader';
|
|
9
|
-
|
|
10
|
-
export { AnimatedLoader };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { LucideProps } from 'lucide-react';
|
|
2
|
-
import { LoaderCircle } from 'lucide-react';
|
|
3
|
-
import { cn } from './utils';
|
|
4
|
-
|
|
5
|
-
interface AnimatedLoaderProps extends LucideProps {
|
|
6
|
-
loading?: boolean;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
function AnimatedLoader({ loading = true, className }: AnimatedLoaderProps) {
|
|
10
|
-
return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
AnimatedLoader.displayName = 'AnimatedLoader';
|
|
14
|
-
|
|
15
|
-
export { AnimatedLoader, type AnimatedLoaderProps };
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { forwardRef, memo } from 'react';
|
|
2
|
-
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
3
|
-
import { PresenceBadge } from './presence';
|
|
4
|
-
import { cn, getInitialsFromName } from './utils';
|
|
5
|
-
|
|
6
|
-
function AvatarBase(
|
|
7
|
-
{ src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props },
|
|
8
|
-
ref
|
|
9
|
-
) {
|
|
10
|
-
const initials = getInitialsFromName(name);
|
|
11
|
-
|
|
12
|
-
return (
|
|
13
|
-
<AvatarPrimitive.Root
|
|
14
|
-
ref={ref}
|
|
15
|
-
className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
|
|
16
|
-
{...props}
|
|
17
|
-
>
|
|
18
|
-
<AvatarPrimitive.Image src={src} className={cn('aspect-square size-full object-cover')} />
|
|
19
|
-
<AvatarPrimitive.Fallback className={cn('bg-muted flex size-full items-center justify-center')}>
|
|
20
|
-
{initials}
|
|
21
|
-
</AvatarPrimitive.Fallback>
|
|
22
|
-
{online && (
|
|
23
|
-
<div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
|
|
24
|
-
)}
|
|
25
|
-
<PresenceBadge presence={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
|
|
26
|
-
</AvatarPrimitive.Root>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
const Avatar = memo(forwardRef(AvatarBase));
|
|
31
|
-
|
|
32
|
-
Avatar.displayName = 'Avatar';
|
|
33
|
-
|
|
34
|
-
export { Avatar };
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type { PresenceStatus } from './presence';
|
|
3
|
-
import { forwardRef, memo } from 'react';
|
|
4
|
-
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
5
|
-
import { PresenceBadge } from './presence';
|
|
6
|
-
import { cn, getInitialsFromName } from './utils';
|
|
7
|
-
|
|
8
|
-
interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root> {
|
|
9
|
-
src?: string;
|
|
10
|
-
name?: string;
|
|
11
|
-
online?: boolean;
|
|
12
|
-
presence?: PresenceStatus;
|
|
13
|
-
onlineClassName?: string;
|
|
14
|
-
presenceClassName?: string;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function AvatarBase(
|
|
18
|
-
{ src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props }: AvatarProps,
|
|
19
|
-
ref: React.Ref<HTMLDivElement>
|
|
20
|
-
) {
|
|
21
|
-
const initials = getInitialsFromName(name);
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<AvatarPrimitive.Root
|
|
25
|
-
ref={ref}
|
|
26
|
-
className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
|
|
27
|
-
{...props}
|
|
28
|
-
>
|
|
29
|
-
<AvatarPrimitive.Image src={src} className={cn('aspect-square size-full object-cover')} />
|
|
30
|
-
<AvatarPrimitive.Fallback className={cn('bg-muted flex size-full items-center justify-center')}>
|
|
31
|
-
{initials}
|
|
32
|
-
</AvatarPrimitive.Fallback>
|
|
33
|
-
{online && (
|
|
34
|
-
<div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
|
|
35
|
-
)}
|
|
36
|
-
<PresenceBadge presence={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
|
|
37
|
-
</AvatarPrimitive.Root>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const Avatar = memo(forwardRef<HTMLDivElement, AvatarProps>(AvatarBase));
|
|
42
|
-
|
|
43
|
-
Avatar.displayName = 'Avatar';
|
|
44
|
-
|
|
45
|
-
export { Avatar, type AvatarProps };
|