@stackshift-ui/avatar 6.0.2 → 6.0.3
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/package.json +6 -5
- package/src/avatar.test.tsx +24 -0
- package/src/avatar.tsx +98 -0
- package/src/index.ts +4 -0
package/package.json
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackshift-ui/avatar",
|
|
3
3
|
"description": "",
|
|
4
|
-
"version": "6.0.
|
|
4
|
+
"version": "6.0.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"main": "./dist/index.js",
|
|
8
8
|
"module": "./dist/index.mjs",
|
|
9
9
|
"types": "./dist/index.d.ts",
|
|
10
10
|
"files": [
|
|
11
|
-
"dist/**"
|
|
11
|
+
"dist/**",
|
|
12
|
+
"src"
|
|
12
13
|
],
|
|
13
14
|
"author": "WebriQ <info@webriq.com>",
|
|
14
15
|
"devDependencies": {
|
|
@@ -33,10 +34,10 @@
|
|
|
33
34
|
},
|
|
34
35
|
"dependencies": {
|
|
35
36
|
"classnames": "^2.5.1",
|
|
36
|
-
"@stackshift-ui/flex": "6.0.2",
|
|
37
|
-
"@stackshift-ui/image": "6.0.2",
|
|
38
37
|
"@stackshift-ui/scripts": "6.0.2",
|
|
39
|
-
"@stackshift-ui/
|
|
38
|
+
"@stackshift-ui/image": "6.0.3",
|
|
39
|
+
"@stackshift-ui/system": "6.0.3",
|
|
40
|
+
"@stackshift-ui/flex": "6.0.3"
|
|
40
41
|
},
|
|
41
42
|
"peerDependencies": {
|
|
42
43
|
"@types/react": "16.8 - 19",
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { cleanup, render, screen } from "@testing-library/react";
|
|
2
|
+
import { afterEach, describe, test } from "vitest";
|
|
3
|
+
import { Avatar } from "./avatar";
|
|
4
|
+
|
|
5
|
+
describe.concurrent("avatar", () => {
|
|
6
|
+
afterEach(cleanup);
|
|
7
|
+
|
|
8
|
+
test("Common: Avatar - test if renders without errors", ({ expect }) => {
|
|
9
|
+
const clx = "avatar-class";
|
|
10
|
+
|
|
11
|
+
render(
|
|
12
|
+
<Avatar
|
|
13
|
+
className={clx}
|
|
14
|
+
src="https://via.placeholder.com/150"
|
|
15
|
+
alt="Sample Avatar"
|
|
16
|
+
text="StackShift"
|
|
17
|
+
/>,
|
|
18
|
+
);
|
|
19
|
+
const elements = screen.getAllByTestId("div");
|
|
20
|
+
elements.forEach(element => {
|
|
21
|
+
expect(element.classList).toBeDefined();
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
});
|
package/src/avatar.tsx
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { Flex } from "@stackshift-ui/flex";
|
|
2
|
+
import { Image } from "@stackshift-ui/image";
|
|
3
|
+
import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
|
|
4
|
+
import cn from "classnames";
|
|
5
|
+
import type { ElementType, HTMLProps, ReactNode } from "react";
|
|
6
|
+
import { useState } from "react";
|
|
7
|
+
|
|
8
|
+
type ImageSize = "sm" | "md" | "lg" | "xl";
|
|
9
|
+
|
|
10
|
+
export interface AvatarProps extends Omit<HTMLProps<HTMLElement>, "as" | "size"> {
|
|
11
|
+
src: string;
|
|
12
|
+
alt: string;
|
|
13
|
+
size?: ImageSize | number;
|
|
14
|
+
text?: string;
|
|
15
|
+
children?: ReactNode;
|
|
16
|
+
className?: string;
|
|
17
|
+
as?: ElementType;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const displayName = "Avatar";
|
|
21
|
+
|
|
22
|
+
export const Avatar: React.FC<AvatarProps> = ({
|
|
23
|
+
src,
|
|
24
|
+
alt = "image",
|
|
25
|
+
size = "sm",
|
|
26
|
+
text,
|
|
27
|
+
children,
|
|
28
|
+
className,
|
|
29
|
+
as,
|
|
30
|
+
...props
|
|
31
|
+
}) => {
|
|
32
|
+
const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
33
|
+
|
|
34
|
+
const [loaded, setLoaded] = useState(false);
|
|
35
|
+
const sizeMap = {
|
|
36
|
+
sm: 40,
|
|
37
|
+
md: 80,
|
|
38
|
+
lg: 120,
|
|
39
|
+
xl: 160,
|
|
40
|
+
};
|
|
41
|
+
const avatarSize = typeof size === "number" ? `${size}px` : `${sizeMap[size]}px`;
|
|
42
|
+
const initials = text ? text?.split(" ")?.reduce((acc, curr) => acc + curr[0], "") : "AB";
|
|
43
|
+
const baseClass = `relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary-foreground`;
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<Component
|
|
47
|
+
as={as}
|
|
48
|
+
className={cn(baseClass, className)}
|
|
49
|
+
style={{ maxWidth: avatarSize }}
|
|
50
|
+
{...props}
|
|
51
|
+
data-testid={displayName}>
|
|
52
|
+
{(!loaded || !src) && (
|
|
53
|
+
<Flex align="center" justify="center" className="w-full h-full bg-primary-foreground">
|
|
54
|
+
<p
|
|
55
|
+
style={{
|
|
56
|
+
fontSize: `calc(${avatarSize}/2)`,
|
|
57
|
+
}}
|
|
58
|
+
className="text-white">
|
|
59
|
+
{initials}
|
|
60
|
+
</p>
|
|
61
|
+
</Flex>
|
|
62
|
+
)}
|
|
63
|
+
{src && (
|
|
64
|
+
<Image
|
|
65
|
+
className="object-cover object-center w-[100%] h-[100%]"
|
|
66
|
+
src={src}
|
|
67
|
+
alt={alt}
|
|
68
|
+
width={100}
|
|
69
|
+
height={100}
|
|
70
|
+
onLoad={() => setLoaded(true)}
|
|
71
|
+
/>
|
|
72
|
+
)}
|
|
73
|
+
{(!loaded || !src) && (
|
|
74
|
+
<Flex align="center" justify="center" className="w-full h-full bg-primary-foreground">
|
|
75
|
+
<p
|
|
76
|
+
style={{
|
|
77
|
+
fontSize: `calc(${avatarSize}/2)`,
|
|
78
|
+
}}
|
|
79
|
+
className="text-white">
|
|
80
|
+
{initials}
|
|
81
|
+
</p>
|
|
82
|
+
</Flex>
|
|
83
|
+
)}
|
|
84
|
+
{src && (
|
|
85
|
+
<Image
|
|
86
|
+
className="object-cover object-center w-[100%] h-[100%]"
|
|
87
|
+
src={src}
|
|
88
|
+
alt={alt}
|
|
89
|
+
width={100}
|
|
90
|
+
height={100}
|
|
91
|
+
onLoad={() => setLoaded(true)}
|
|
92
|
+
/>
|
|
93
|
+
)}
|
|
94
|
+
</Component>
|
|
95
|
+
);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
Avatar.displayName = displayName;
|
package/src/index.ts
ADDED