@logora/debate 0.1.0

package/src/components/user/author_box/AuthorBox.test.jsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IntlProvider } from 'react-intl';
+import { AuthorBox } from './AuthorBox';
+import { Location } from '@logora/debate/util/location';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const author = {
+    image_url: faker.image.avatarGitHub(),
+    full_name: faker.person.fullName(),
+    hash_id: faker.lorem.slug(),
+    points: 52,
+    eloquence_title: faker.science.chemicalElement().symbol,
+    occupation: faker.vehicle.bicycle(),
+    last_activity: faker.date.recent(),
+    description: faker.person.jobTitle(),
+  };
+  
+
+let UserShowLocation = new Location('espace-debat/user/:userSlug', { userSlug: "" })
+
+const routes = {
+    userShowLocation: UserShowLocation,
+}
+
+describe('AuthorBox', () => {
+    it('should render with author data', () => {
+        const { getByText, getByAltText, getAllByRole } = render(
+            <BrowserRouter>
+                <ConfigProvider config={{}} routes={{ ...routes }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <AuthorBox
+                                fullName={author.full_name}
+                                avatarUrl={author.image_url}
+                                slug={author.hash_id}
+                                points={author.points}
+                                eloquenceTitle={author.eloquence_title}
+                                lastActivity={author.last_activity}
+                                showBadge={false}
+                            />
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        const avatarImg = getByAltText(author.full_name + "'s profile picture");
+        expect(avatarImg).toBeInTheDocument();
+        expect(avatarImg).toHaveAttribute('src', author.image_url);
+        expect(getByText(author.full_name)).toBeTruthy();
+        //expect(getByText("1.5K points")).toBeTruthy();
+        expect(getByText("Eloquence title")).toBeTruthy();
+
+        const authorLinkElements = getAllByRole('link');
+        expect(authorLinkElements.length).toBe(2);
+        expect(authorLinkElements[0]).toHaveAttribute(
+            'href',
+            `/espace-debat/user/${author.hash_id}`
+        );
+    });
+
+    it('should render without links', () => {
+        const { getByText, queryByRole } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <AuthorBox 
+                                fullName={author.full_name}
+                                avatarUrl={author.image_url}
+                                slug={author.hash_id}
+                                points={author.points}
+                                eloquenceTitle={author.eloquence_title}
+                                lastActivity={author.last_activity} 
+                                showBadge={false}
+                                disableLinks={true} 
+                            />
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(getByText(author.full_name)).toBeTruthy();
+        //expect(getByText("1.5K points")).toBeTruthy();
+        expect(getByText("Eloquence title")).toBeTruthy();
+        expect(queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('should render occupation if author has one', () => {
+        const { getByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{...routes}}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <AuthorBox 
+                                fullName={author.full_name}
+                                avatarUrl={author.image_url}
+                                slug={author.hash_id}
+                                points={author.points}
+                                eloquenceTitle={author.eloquence_title}
+                                lastActivity={author.last_activity} 
+                                occupation={author.occupation}
+                                showBadge={false}
+                                disableLinks={true}
+                            />
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(getByText(author.occupation)).toBeInTheDocument();
+    });
+
+    it('should show is expert', () => {
+        const { getByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <AuthorBox 
+                                fullName={author.full_name}
+                                avatarUrl={author.image_url}
+                                slug={author.hash_id}
+                                points={author.points}
+                                eloquenceTitle={author.eloquence_title}
+                                lastActivity={author.last_activity} 
+                                occupation={author.occupation}
+                                showBadge={true}
+                            />
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(getByText('Journalist')).toBeInTheDocument();
+    });
+
+    it('should show deleted user', () => {
+        const { queryByText, getByText } = render(
+            <BrowserRouter>
+                <ConfigProvider routes={{ ...routes }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <AuthorBox 
+                                fullName={author.full_name}
+                                avatarUrl={author.image_url}
+                                slug={author.hash_id}
+                                points={author.points}
+                                eloquenceTitle={author.eloquence_title}
+                                lastActivity={author.last_activity} 
+                                occupation={author.occupation}
+                                isDeleted={true}
+                            />
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(queryByText(author.full_name)).toBeNull();
+        expect(getByText("Deleted")).toBeTruthy();
+    });
+});

package/src/components/user/author_box/index.js

@@ -0,0 +1 @@
+export { AuthorBox } from './AuthorBox';

package/src/components/user/avatar/Avatar.docs.mdx

@@ -0,0 +1,31 @@
+---
+description: A user avatar component with online pin.
+tags: ['avatar', 'user', 'image']
+---
+
+import { Avatar } from './Avatar';
+
+The `Avatar` component is used to display a user's avatar image, along with an optional online status indicator. 
+It is built using React and `react-intl` for internationalization support.
+If no image URL image is passed, a default icon is shown.
+
+### Component usage
+```js
+import { Avatar } from '@logora/debate.user.avatar';
+```
+```jsx
+import { Avatar } from './Avatar';
+import { IntlProvider } from 'react-intl';
+
+const userAvatar = {
+  avatarUrl: 'https://example.com/avatar.jpg',
+  userName: 'John',
+  isOnline: true,
+  className: 'custom-class',
+  size: 60
+};
+
+<IntlProvider>
+    <Avatar {...userAvatar} />
+</IntlProvider>
+```

package/src/components/user/avatar/Avatar.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { useIntl } from 'react-intl';
+import { Tooltip } from '@logora/debate/dialog/tooltip';
+import { DefaultAvatarIcon } from "./DefaultAvatar";
+import cx from 'classnames';
+import styles from './Avatar.module.scss';
+import PropTypes from 'prop-types';
+
+export const Avatar = ({ avatarUrl, userName, isOnline = false, showTooltip = false, size = 40, className, ...rest }) => {
+    const [fallback, setFallback] = useState(false);
+    const intl = useIntl();
+
+    const commonProps = {
+        loading: "lazy",
+        className: cx(styles.avatarImage, className),
+        height: size,
+        width: size,
+        ...rest
+    };
+
+    const commonStyles = {
+        width: `${size}px`,
+        height: `${size}px`
+    }
+
+    const displayImage = () => {
+        if (avatarUrl && !fallback) {
+            return <img {...commonProps} style={commonStyles} src={avatarUrl} alt={intl.formatMessage({ id:"user.avatar.alt", defaultMessage: "{name}'s profile picture" }, { name: userName })} onError={() => { setFallback(true) }} />
+        } else {
+            return <DefaultAvatarIcon {...commonProps} style={commonStyles} data-testid={"avatar-icon"} />
+        }
+    }
+
+    return (
+        <div className={styles.avatarContainer}>
+            { showTooltip || isOnline ?
+                <Tooltip text={ isOnline ? intl.formatMessage({ id:"user.avatar.online", defaultMessage: "{name} is online" }, { name: userName }) : userName}>
+                    <div 
+                        className={styles.avatarBox}
+                    >
+                        { displayImage() }
+                        { isOnline ? <span data-testid={"online-pin"} className={styles.onlinePin}></span> : null }
+                    </div>
+                </Tooltip>
+            :
+                displayImage()
+            }
+        </div>
+    )
+};
+
+Avatar.propTypes = {
+    /** User's image url */
+    avatarUrl: PropTypes.string,
+    /** User's full name */
+    userName: PropTypes.string,
+    /** Whether the user is online or not, displays online pin */
+    isOnline: PropTypes.bool,
+    /** Adjust the size of avatar */
+    size: PropTypes.number,
+    /** Additional classname passed to image */
+    className: PropTypes.string,
+}

package/src/components/user/avatar/Avatar.module.scss

@@ -0,0 +1,30 @@
+@use 'styles/theme' as theme;
+
+.avatarContainer {
+    display: flex !important;
+}
+
+.avatarBox {
+    position: relative;
+}
+
+.onlinePin {
+    content: "";
+    position: absolute;
+    background: theme.$connected-green;
+    border: 2px solid theme.$background-color-primary;
+    border-radius: 50%;
+    bottom: 0;
+    right: 0;
+    height: 30%;
+    width: 30%;
+}
+
+.avatarImage {
+    object-fit: cover;
+    max-width: none;
+    border-radius: 50%;
+    overflow: hidden;
+    color: transparent;
+    text-indent: 10000px; 
+}

package/src/components/user/avatar/Avatar.stories.jsx

@@ -0,0 +1,79 @@
+export default {
+    title: 'User/Avatar',
+    component: Avatar,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { Avatar } from './Avatar';
+import { IntlProvider } from 'react-intl';
+import { faker } from '@faker-js/faker';
+
+const avatarUrl = faker.image.avatarGitHub();
+const userName = faker.person.fullName();
+
+export const DefaultAvatar = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar avatarUrl={avatarUrl} userName={userName} />
+        </IntlProvider>
+    );
+};
+
+export const AvatarWithDefaultImage = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar userName={userName} />
+        </IntlProvider>
+    );
+};
+
+export const AvatarSmall = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar avatarUrl={avatarUrl} userName={userName} size={20} />
+        </IntlProvider>
+    );
+};
+
+export const AvatarLarge = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar avatarUrl={avatarUrl} userName={userName} size={60} />
+        </IntlProvider>
+    );
+};
+
+export const AvatarOnline = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar avatarUrl={avatarUrl} userName={userName} isOnline />
+        </IntlProvider>
+    );
+};
+
+
+export const AvatarSmallOnline = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar avatarUrl={avatarUrl} userName={userName} size={20} isOnline />
+        </IntlProvider>
+    );
+};
+
+export const AvatarLargeOnline = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar avatarUrl={avatarUrl} userName={userName} size={60} isOnline />
+        </IntlProvider>
+    );
+};
+
+export const FallbackAvatar = () => {
+    return (
+        <IntlProvider locale="en">
+            <Avatar avatarUrl={"https://example.com/does-not-exist.png"} userName={userName} />
+        </IntlProvider>
+    );
+};

package/src/components/user/avatar/Avatar.test.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { Avatar } from './Avatar';
+import { faker } from '@faker-js/faker';
+
+const messages = {
+    'user.avatar.alt': "{name}'s avatar picture",
+    'user.avatar.online': '{name} is here',
+};
+
+const defaultUrls = {
+    avatarUrl: faker.image.avatarGitHub()
+}
+
+describe('Avatar', () => {
+    const defaultProps = {
+        avatarUrl: defaultUrls.avatarUrl,
+        userName: 'John',
+        isOnline: true,
+        className: 'custom-class',
+    };
+
+    it('renders user profile picture with alt text and default size', () => {
+        render(
+            <IntlProvider locale="en" messages={messages}>
+                <Avatar {...defaultProps} />
+            </IntlProvider>
+        );
+        const avatarImg = screen.getByAltText("John's avatar picture");
+        expect(avatarImg).toBeInTheDocument();
+        expect(avatarImg).toHaveAttribute('src', defaultUrls.avatarUrl);
+        expect(avatarImg).toHaveAttribute('height', '40');
+        expect(avatarImg).toHaveAttribute('width', '40');
+        expect(avatarImg).toHaveStyle('height: 40px');
+        expect(avatarImg).toHaveStyle('width: 40px');
+        expect(avatarImg).toHaveClass('custom-class');
+    });
+
+    it('renders default avatar picture if avatarUrl is empty', () => {
+        const props = { userName: "John", className: "avatar-class", avatarUrl: null };
+        render(
+          <IntlProvider locale="en" messages={messages}>
+            <Avatar {...props} />
+          </IntlProvider>
+        );
+        const defaultIcon = screen.getByTestId("avatar-icon");
+        expect(defaultIcon).toBeInTheDocument();
+        expect(defaultIcon).toHaveAttribute('height', '40');
+        expect(defaultIcon).toHaveAttribute('width', '40');
+        expect(defaultIcon).toHaveStyle('height: 40px');
+        expect(defaultIcon).toHaveStyle('width: 40px');
+        expect(defaultIcon).toHaveClass('avatar-class');
+    });
+
+    it('renders user online status when isOnline prop is true', () => {
+        render(
+            <IntlProvider locale="en" messages={messages}>
+                <Avatar {...defaultProps} />
+            </IntlProvider>
+        );
+        const onlinePin = screen.getByTestId('online-pin');
+        expect(onlinePin).toBeInTheDocument();
+        expect(onlinePin).toHaveClass('onlinePin');
+    });
+
+    it('renders user offline status when isOnline prop is false', () => {
+        const props = { ...defaultProps, isOnline: false };
+        render(
+            <IntlProvider locale="en" messages={messages}>
+                <Avatar {...props} />
+            </IntlProvider>
+        );
+        const onlinePin = screen.queryByTestId('online-pin');
+        expect(onlinePin).not.toBeInTheDocument();
+    });
+
+    it('renders tooltip with online status message when isOnline prop is true', () => {
+        render(
+            <IntlProvider locale="en" messages={messages}>
+                <Avatar {...defaultProps} />
+            </IntlProvider>
+        );
+        const onlineTooltip = screen.getByText('John is here');
+        expect(onlineTooltip).toBeInTheDocument();
+        expect(onlineTooltip).toHaveClass('tooltipText');
+    });
+
+    it('does not render tooltip when isOnline prop is false', () => {
+        const props = { ...defaultProps, isOnline: false };
+        render(
+            <IntlProvider locale="en" messages={messages}>
+                <Avatar {...props} />
+            </IntlProvider>
+        );
+        const onlineTooltip = screen.queryByText('John is here');
+        expect(onlineTooltip).not.toBeInTheDocument();
+    });
+
+    it('renders user profile picture with alt text and custom size', () => {
+        const props = { ...defaultProps, size: 25 };
+        render(
+          <IntlProvider locale="en" messages={messages}>
+            <Avatar {...props} />
+          </IntlProvider>
+        );
+        const avatarImg = screen.getByAltText("John's avatar picture");
+        expect(avatarImg).toBeInTheDocument();
+        expect(avatarImg).toHaveAttribute('src', defaultUrls.avatarUrl);
+        expect(avatarImg).toHaveAttribute('height', '25');
+        expect(avatarImg).toHaveAttribute('width', '25');
+        expect(avatarImg).toHaveClass('custom-class');
+    });
+});

package/src/components/user/avatar/DefaultAvatar.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const DefaultAvatarIcon = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+        <g>
+            <path d="M-36.103 292.103V-36.103h328.206v328.206z" fill="#ececec" />
+            <g fill="#cecece">
+            <path d="m102.812 166.253.168.1a48.702 48.702 0 0 0 3.938 2.15l.315.146c.537.255 1.08.503 1.628.739.171.074.343.151.517.223a47.8 47.8 0 0 0 1.905.755c.1.036.2.068.3.108.56.204 1.13.395 1.7.577.25.082.498.156.747.232.454.137.91.265 1.37.389.232.062.463.13.7.192.63.157 1.267.305 1.908.443a62.288 62.288 0 0 0 2.155.4c.251.041.5.083.752.121.673.1 1.348.19 2.031.26.156.018.312.028.467.042.585.054 1.172.102 1.764.133.21.012.417.026.627.034.73.034 1.463.056 2.202.056s1.472-.024 2.2-.056c.21-.008.418-.022.63-.034a51.24 51.24 0 0 0 1.759-.133c.155-.014.313-.024.467-.042a45.391 45.391 0 0 0 2.785-.382c.47-.08.937-.161 1.402-.25l.757-.149a53.906 53.906 0 0 0 1.905-.443c.238-.06.471-.13.709-.194.455-.124.906-.25 1.354-.387a41.645 41.645 0 0 0 2.434-.803c.112-.042.225-.08.337-.12a52.548 52.548 0 0 0 1.88-.749c.175-.072.353-.15.528-.225a43.299 43.299 0 0 0 1.94-.887 46.787 46.787 0 0 0 4.105-2.254c13.941-8.55 23.266-23.966 23.266-41.532.004-26.813-21.737-48.63-48.46-48.63S79.538 97.9 79.538 124.715c0 17.566 9.329 32.985 23.274 41.538z"/>
+            <path d="M212.71 220.194c-8.917-25.882-27.953-42.126-56.587-48.292a58.546 58.546 0 0 1-1.977 1.126l-.126.066a51.997 51.997 0 0 1-2.072 1.064l-.332.164a58.28 58.28 0 0 1-2.22 1.01l-.336.138a57.89 57.89 0 0 1-1.86.735l-.68.251a52.735 52.735 0 0 1-2.094.711c-.184.058-.37.11-.555.166a68.15 68.15 0 0 1-1.75.501c-.283.074-.569.15-.854.22-.605.15-1.212.291-1.825.423-.258.056-.52.108-.78.162-.636.126-1.275.24-1.916.343-.274.044-.545.088-.82.126-.684.098-1.369.188-2.055.262-.132.016-.264.034-.394.044a59.644 59.644 0 0 1-2.328.181l-.659.032a54.2 54.2 0 0 1-2.486.064c-.83 0-1.657-.028-2.486-.064l-.659-.032a56.258 56.258 0 0 1-2.328-.181c-.13-.012-.262-.03-.394-.044a58.918 58.918 0 0 1-2.875-.388 55.75 55.75 0 0 1-1.917-.343c-.26-.054-.52-.106-.777-.162a56.36 56.36 0 0 1-1.827-.423c-.285-.07-.569-.146-.852-.22a65.176 65.176 0 0 1-1.754-.501l-.55-.164a55.176 55.176 0 0 1-4.641-1.703l-.33-.134a54.24 54.24 0 0 1-2.224-1.01l-.328-.162c-.7-.34-1.391-.697-2.08-1.068-.04-.024-.08-.042-.12-.064a58.812 58.812 0 0 1-1.983-1.126c-28.714 6.182-47.773 22.498-56.66 48.5-5.205 15.241-5.255 29.52-4.991 35.393h179.546c.262-5.912.202-20.33-5.064-35.6z"/>
+            </g>
+        </g>
+    </svg>
+)

package/src/components/user/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/src/components/user/avatar_selector/AvatarSelector.docs.mdx

@@ -0,0 +1,25 @@
+---
+description: A component to select an avatar.
+labels: ["user"]
+---
+
+import { AvatarSelector } from "./AvatarSelector";
+import { IntlProvider } from "react-intl";
+
+A component that allows users to select an avatar picture from a library of available images.
+
+### Component usage
+
+```js
+import { AvatarSelector } from '@logora/debate.user.avatar_selector';
+```
+
+```js
+    <IntlProvider locale="en">
+        <AvatarSelector
+            onChooseAvatar={handleChooseAvatar}
+            avatarUrlList={avatarUrlList}
+            userName={"User Name"}
+        />
+    </IntlProvider>
+```

package/src/components/user/avatar_selector/AvatarSelector.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { useIntl } from "react-intl";
+import { Button } from '@logora/debate/action/button';
+import { Avatar } from '@logora/debate/user/avatar';
+import styles from './AvatarSelector.module.scss';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+
+export const AvatarSelector = ({ avatarUrlList, onChooseAvatar, userName, allowUserImage }) => {
+    const intl = useIntl();
+    const [chosenAvatar, setChosenAvatar] = useState(false);
+    const [uploadedAvatar, setUploadedAvatar] = useState(false);
+    const [uploadedAvatarPreview, setUploadedAvatarPreview] = useState(false);
+
+    const handleChooseAvatar = (chosenAvatar) => {
+        onChooseAvatar(chosenAvatar ? chosenAvatar : uploadedAvatar);
+    }
+
+    const handleUpload = (files) => {
+		const picture = files[0];
+		if(picture && picture.type.includes('image/')) {
+			setUploadedAvatar(picture);
+            const reader = new FileReader();
+            reader.onloadend = () => { setUploadedAvatarPreview(reader.result) }
+            reader.readAsDataURL(picture);
+		}
+	}
+
+    return (
+        <>
+            { allowUserImage &&
+                <>
+                    <div className={styles.title}>{intl.formatMessage({ id: "user.avatar_selector.user_image_title", defaultMessage: "Import image of your choice" })}</div>
+                    <input data-testid="avatar-input" id="user_image" className={styles.imageInput} name="user_image" type="file" accept="image/*"  onChange={(e) => handleUpload(e.target.files)} />
+                    <div className={styles.uploadAvatarContainer}>
+                        {uploadedAvatarPreview && <img data-testid={"upload-avatar"} src={uploadedAvatarPreview} alt={intl.formatMessage({ id: "user.avatar_selector.avatar", defaultMessage: "Selected profile picture" })} className={styles.uploadedAvatar} />}
+                        <label htmlFor="user_image" className={styles.imageInputLabel}>{intl.formatMessage({ id: "user.avatar_selector.upload_input", defaultMessage: "Upload an image" })}</label>
+                    </div>
+                    <div className={cx(styles.title, styles.avatarListTitle)}>{intl.formatMessage({ id: "user.avatar_selector.avatar_list_title", defaultMessage: "Or choose from one of our avatars" })}</div>
+                </>
+            }
+            { (chosenAvatar && allowUserImage) && <div onClick={() => setChosenAvatar(false)} className={styles.cancelSelection}>{intl.formatMessage({ id: "user.avatar_selector.cancel_selection", defaultMessage: "Cancel selection" })}</div>}
+            <div className={cx(styles.avatarList, {[styles.userChoice]: chosenAvatar || uploadedAvatar})}>
+                { avatarUrlList.map((e, index) => <Avatar key={index} size={70} avatarUrl={e} userName={userName} onClick={() => setChosenAvatar(e)} className={cx(styles.avatar, {[styles.selected]: e === chosenAvatar})} data-testid="avatar" />)}
+            </div>
+            { (chosenAvatar || uploadedAvatar) && 
+                <div className={styles.confirm}>
+                    <img src={chosenAvatar || (uploadedAvatarPreview ? uploadedAvatarPreview : undefined)} alt={intl.formatMessage({ id: "user.avatar_selector.avatar", defaultMessage: "Selected profile picture" })} className={styles.chosenAvatar} />
+                    <Button handleClick={() => handleChooseAvatar(chosenAvatar || uploadedAvatar)} className={styles.button}>{intl.formatMessage({ id: "user.avatar_selector.confirm", defaultMessage: "Choose this image" })}</Button>
+                </div>
+            }
+        </>
+    );
+}
+
+AvatarSelector.propTypes = {
+    /** An array containing URLs of available avatar images */
+    avatarUrlList: PropTypes.array,
+    /** A callback function to handle the selection of an avatar image */
+    onChooseAvatar: PropTypes.func,
+    /** User name */
+    userName: PropTypes.string.isRequired,
+    /** Allow a user to upload an image */
+    allowUserImage: PropTypes.bool
+};