Skip to content

Commit a771b28

Browse files
josepmartinsjosepmartins
committed
fix: Warnings + typescript exports
1 parent 8971d67 commit a771b28

File tree

8 files changed

+97
-77
lines changed

8 files changed

+97
-77
lines changed

‎index.d.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
declare module "boring-avatars" {
2-
export interface AvatarProps {
1+
declare module 'boring-avatars' {
2+
import * as React from 'react';
3+
4+
export interface AvatarProps extends React.SVGAttributes<SVGElement> {
35
size?: number | string;
46
name?: string;
57
square?: boolean;
6-
variant?: "marble" | "beam" | "pixel" | "sunset" | "ring" | "bauhaus";
8+
variant?: 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus';
79
colors?: string[];
10+
[key: string]: any; // Allows any additional prop
811
}
912

1013
interface AvatarComponent {
1114
(props: AvatarProps, context?: any): React.ReactElement | null;
1215
}
1316

14-
const Avatar: AvatarComponent
17+
const Avatar: AvatarComponent;
1518

1619
export default Avatar;
1720
}

‎src/lib/components/avatar-bauhaus.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ function generateColors(name, colors) {
2020
}
2121

2222
const AvatarBauhaus = (props) => {
23-
const properties = generateColors(props.name, props.colors);
23+
const { name, colors, title, square, size, ...otherProps } = props;
24+
const properties = generateColors(name, colors);
2425
const maskID = React.useId();
2526

2627
return (
@@ -29,13 +30,13 @@ const AvatarBauhaus = (props) => {
2930
fill="none"
3031
role="img"
3132
xmlns="http://www.w3.org/2000/svg"
32-
width={props.size}
33-
height={props.size}
34-
{...props}
33+
width={size}
34+
height={size}
35+
{...otherProps}
3536
>
36-
{props.title && <title>{props.name}</title>}
37+
{title && <title>{name}</title>}
3738
<mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
38-
<rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
39+
<rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
3940
</mask>
4041
<g mask={`url(#${maskID})`}>
4142
<rect width={SIZE} height={SIZE} fill={properties[0].color} />

‎src/lib/components/avatar-beam.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ function generateData(name, colors) {
3535
}
3636

3737
const AvatarBeam = (props) => {
38-
const data = generateData(props.name, props.colors);
38+
const { name, colors, title, square, size, ...otherProps } = props;
39+
const data = generateData(name, colors);
3940
const maskID = React.useId();
4041

4142
return (
@@ -44,13 +45,13 @@ const AvatarBeam = (props) => {
4445
fill="none"
4546
role="img"
4647
xmlns="http://www.w3.org/2000/svg"
47-
width={props.size}
48-
height={props.size}
49-
{...props}
48+
width={size}
49+
height={size}
50+
{...otherProps}
5051
>
51-
{props.title && <title>{props.name}</title>}
52+
{title && <title>{name}</title>}
5253
<mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
53-
<rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
54+
<rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
5455
</mask>
5556
<g mask={`url(#${maskID})`}>
5657
<rect width={SIZE} height={SIZE} fill={data.backgroundColor} />

‎src/lib/components/avatar-marble.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ function generateColors(name, colors) {
2020
}
2121

2222
const AvatarMarble = (props) => {
23-
const properties = generateColors(props.name, props.colors);
23+
const { name, colors, title, square, size, ...otherProps } = props;
24+
const properties = generateColors(name, colors);
2425
const maskID = React.useId();
2526

2627
return (
@@ -29,13 +30,13 @@ const AvatarMarble = (props) => {
2930
fill="none"
3031
role="img"
3132
xmlns="http://www.w3.org/2000/svg"
32-
width={props.size}
33-
height={props.size}
34-
{...props}
33+
width={size}
34+
height={size}
35+
{...otherProps}
3536
>
36-
{props.title && <title>{props.name}</title>}
37+
{title && <title>{name}</title>}
3738
<mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
38-
<rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
39+
<rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
3940
</mask>
4041
<g mask={`url(#${maskID})`}>
4142
<rect width={SIZE} height={SIZE} fill={properties[0].color} />

‎src/lib/components/avatar-pixel.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ function generateColors(name, colors) {
1616
}
1717

1818
const AvatarPixel = (props) => {
19-
const pixelColors = generateColors(props.name, props.colors);
19+
const { name, colors, title, square, size, ...otherProps } = props;
20+
const pixelColors = generateColors(name, colors);
2021
const maskID = React.useId();
2122

2223
return (
@@ -25,11 +26,11 @@ const AvatarPixel = (props) => {
2526
fill="none"
2627
role="img"
2728
xmlns="http://www.w3.org/2000/svg"
28-
width={props.size}
29-
height={props.size}
30-
{...props}
29+
width={size}
30+
height={size}
31+
{...otherProps}
3132
>
32-
{props.title && <title>{props.name}</title>}
33+
{title && <title>{name}</title>}
3334
<mask
3435
id={maskID}
3536
mask-type="alpha"
@@ -39,7 +40,7 @@ const AvatarPixel = (props) => {
3940
width={SIZE}
4041
height={SIZE}
4142
>
42-
<rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
43+
<rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
4344
</mask>
4445
<g mask={`url(#${maskID})`}>
4546
<rect width={10} height={10} fill={pixelColors[0]} />

‎src/lib/components/avatar-ring.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ function generateColors(colors, name) {
2525
}
2626

2727
const AvatarRing = (props) => {
28-
const ringColors = generateColors(props.colors, props.name);
28+
const { name, colors, title, square, size, ...otherProps } = props;
29+
const ringColors = generateColors(colors, name);
2930
const maskID = React.useId();
3031

3132
return (
@@ -34,13 +35,13 @@ const AvatarRing = (props) => {
3435
fill="none"
3536
role="img"
3637
xmlns="http://www.w3.org/2000/svg"
37-
width={props.size}
38-
height={props.size}
39-
{...props}
38+
width={size}
39+
height={size}
40+
{...otherProps}
4041
>
41-
{props.title && <title>{props.name}</title>}
42+
{title && <title>{name}</title>}
4243
<mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
43-
<rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
44+
<rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
4445
</mask>
4546
<g mask={`url(#${maskID})`}>
4647
<path d="M0 0h90v45H0z" fill={ringColors[0]} />

‎src/lib/components/avatar-sunset.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ function generateColors(name, colors) {
1616
}
1717

1818
const AvatarSunset = (props) => {
19-
const sunsetColors = generateColors(props.name, props.colors);
20-
const name = props.name.replace(/\s/g, '');
19+
const { name, colors, title, square, size, ...otherProps } = props;
20+
const sunsetColors = generateColors(name, colors);
21+
const nameWithoutSpace = name.replace(/\s/g, '');
2122
const maskID = React.useId();
2223

2324
return (
@@ -26,21 +27,21 @@ const AvatarSunset = (props) => {
2627
fill="none"
2728
role="img"
2829
xmlns="http://www.w3.org/2000/svg"
29-
width={props.size}
30-
height={props.size}
31-
{...props}
30+
width={size}
31+
height={size}
32+
{...otherProps}
3233
>
33-
{props.title && <title>{props.name}</title>}
34+
{title && <title>{name}</title>}
3435
<mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
35-
<rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
36+
<rect width={SIZE} height={SIZE} rx={square ? undefined : SIZE * 2} fill="#FFFFFF" />
3637
</mask>
3738
<g mask={`url(#${maskID})`}>
38-
<path fill={'url(#gradient_paint0_linear_' + name + ')'} d="M0 0h80v40H0z" />
39-
<path fill={'url(#gradient_paint1_linear_' + name + ')'} d="M0 40h80v40H0z" />
39+
<path fill={'url(#gradient_paint0_linear_' + nameWithoutSpace + ')'} d="M0 0h80v40H0z" />
40+
<path fill={'url(#gradient_paint1_linear_' + nameWithoutSpace + ')'} d="M0 40h80v40H0z" />
4041
</g>
4142
<defs>
4243
<linearGradient
43-
id={'gradient_paint0_linear_' + name}
44+
id={'gradient_paint0_linear_' + nameWithoutSpace}
4445
x1={SIZE / 2}
4546
y1={0}
4647
x2={SIZE / 2}
@@ -51,7 +52,7 @@ const AvatarSunset = (props) => {
5152
<stop offset={1} stopColor={sunsetColors[1]} />
5253
</linearGradient>
5354
<linearGradient
54-
id={'gradient_paint1_linear_' + name}
55+
id={'gradient_paint1_linear_' + nameWithoutSpace}
5556
x1={SIZE / 2}
5657
y1={SIZE / 2}
5758
x2={SIZE / 2}

‎src/lib/components/avatar.js‎

Lines changed: 43 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,52 @@ import AvatarBeam from './avatar-beam';
77
import AvatarSunset from './avatar-sunset';
88
import AvatarMarble from './avatar-marble';
99

10-
const variants = ['pixel', 'bauhaus', 'ring', 'beam', 'sunset', 'marble'];
11-
const deprecatedVariants = { geometric: 'beam', abstract: 'bauhaus' };
12-
13-
const Avatar = ({
14-
variant = 'marble',
15-
colors = ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90'],
16-
name = 'Clara Barton',
17-
square = false,
18-
title = false,
19-
size = 40,
20-
...props
21-
}) => {
22-
const avatarProps = { colors, name, title, size, square, ...props };
23-
const checkedVariant = () => {
24-
if (Object.keys(deprecatedVariants).includes(variant)) {
25-
return deprecatedVariants[variant];
26-
}
27-
if (variants.includes(variant)) {
28-
return variant;
29-
}
30-
return 'marble';
31-
};
32-
const avatars = {
33-
pixel: <AvatarPixel {...avatarProps} />,
34-
bauhaus: <AvatarBauhaus {...avatarProps} />,
35-
ring: <AvatarRing {...avatarProps} />,
36-
beam: <AvatarBeam {...avatarProps} />,
37-
sunset: <AvatarSunset {...avatarProps} />,
38-
marble: <AvatarMarble {...avatarProps} />,
39-
};
40-
return avatars[checkedVariant()];
10+
const AVATAR_VARIANTS = {
11+
pixel: AvatarPixel,
12+
bauhaus: AvatarBauhaus,
13+
ring: AvatarRing,
14+
beam: AvatarBeam,
15+
sunset: AvatarSunset,
16+
marble: AvatarMarble,
17+
};
18+
19+
const DEPRECATED_VARIANTS = {
20+
geometric: 'beam',
21+
abstract: 'bauhaus',
22+
};
23+
24+
const Avatar = (props) => {
25+
const { variant = 'marble', colors, name, title, size, square, ...otherProps } = props;
26+
27+
const resolvedVariant = DEPRECATED_VARIANTS[variant] || variant;
28+
const AvatarComponent = AVATAR_VARIANTS[resolvedVariant] || AvatarMarble;
29+
30+
return (
31+
<AvatarComponent
32+
colors={colors}
33+
name={name}
34+
title={title}
35+
size={size}
36+
square={square}
37+
{...otherProps}
38+
/>
39+
);
4140
};
4241

4342
Avatar.propTypes = {
44-
variant: PropTypes.oneOf(variants),
43+
variant: PropTypes.oneOf(Object.keys(AVATAR_VARIANTS).concat(Object.keys(DEPRECATED_VARIANTS))),
44+
colors: PropTypes.arrayOf(PropTypes.string),
45+
name: PropTypes.string,
46+
square: PropTypes.bool,
47+
title: PropTypes.bool,
48+
};
49+
50+
Avatar.defaultProps = {
51+
variant: 'marble',
52+
colors: ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90'],
53+
name: 'Clara Barton',
54+
square: false,
55+
title: false,
4556
};
4657

4758
export default Avatar;

0 commit comments

Comments
 (0)