@logora/debate 0.1.0

package/src/components/user/user_box/UserBox.module.scss

@@ -0,0 +1,86 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.userBox {
+	border: theme.$box-border;
+	box-shadow: theme.$box-shadow;
+	border-radius: theme.$box-border-radius;
+	display: flex !important;
+	flex-direction: row !important;
+	align-items: center !important;
+	justify-content: flex-start !important;
+	gap: spacing.$spacer;
+	@include spacing.p(3, xs);
+	background-color: theme.$background-color-primary;
+	a {
+		text-decoration: none;
+		color: theme.$text-primary;
+	}
+}
+
+.userBoxHeader {
+	display: flex !important;
+	position: relative;
+	.userBoxConnectedPin{
+		position: absolute;
+		content: "";
+		width: 14px;
+		height: 14px;
+		background: theme.$connected-green;
+		border-radius: 50%;
+		right: 3px;
+		bottom: 0;
+		border: 2px solid white;
+	}
+}
+
+.userBoxImage {
+	cursor: pointer;
+	object-fit: cover;
+	border-radius: 50%;
+	width: 60px;
+	height: 60px;
+}
+
+.userBoxDescription {
+	@include display.text-truncate();
+	display: flex !important;
+	flex-direction: column !important;
+	gap: spacing.$spacer-xxs;
+}
+
+.userBoxName {
+	text-align: left;
+	font-weight: theme.$font-weight-bold;
+	@include display.text-truncate();
+	color: theme.$text-primary !important;
+	cursor: pointer;
+	font-size: theme.$font-size-normal;
+	border: 0;
+}
+
+.userBoxName:hover {
+	color: theme.$text-primary;
+	text-decoration: underline;
+}
+
+.userBoxPoints {
+	@include display.text-truncate();
+	display: flex !important;
+	align-items: center !important;
+	font-size: theme.$font-size-extra-small;
+	width: fit-content;
+	color: theme.$text-secondary;
+}
+
+.userBoxStats {
+	display: flex !important;
+	flex-wrap: wrap !important;
+	gap: spacing.$spacer-md;
+	font-weight: theme.$font-weight-normal;
+	font-size: theme.$font-size-small;
+	.userCount {
+		@include spacing.mr(1, xs);
+	}
+}

package/src/components/user/user_box/UserBox.stories.jsx

@@ -0,0 +1,82 @@
+export default {
+    title: 'User/User Box',
+    component: UserBox,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { UserBox } from './UserBox';
+import { Location } from '@logora/debate/util/location';
+import { faker } from '@faker-js/faker';
+
+const defaultUser = {
+    id: 83,
+    uid: "396deae0-15e3-46dd-bd85-498456809453",
+    hash_id: "396deae0-15e3-46dd",
+    image_url: faker.image.avatarGitHub(),
+    full_name: faker.person.fullName(),
+    slug: faker.lorem.slug(),
+    score: 0,
+    points: 100,
+    description: null,
+    last_activity: faker.date.recent(),
+    groups_count: 2,
+    upvotes: 5,
+    messages_count: 8,
+    eloquence_title: null
+};
+
+const contributorUser = {
+    id: 82,
+    uid: "296deae0-15e3-46dd-bd85-498456809453",
+    hash_id: "296deae0-15e3-46dd",
+    image_url: faker.image.avatarGitHub(),
+    full_name: faker.person.fullName(),
+    slug: faker.lorem.slug(),
+    score: 0,
+    points: 1539,
+    role: "contributor", 
+    description: null,
+    last_activity: faker.date.recent(),
+    groups_count: 5,
+    upvotes: 13,
+    messages_count: 20,
+    eloquence_title: null
+};
+
+let UserShowLocation = new Location('espace-debat/user/:userSlug', { userSlug: "" })
+
+const routes = {
+    userShowLocation: UserShowLocation,
+}
+
+export const DefaultUserBox = () => {
+    return (
+        <BrowserRouter>
+            <IntlProvider locale="en">
+                <ConfigProvider routes={{...routes}}>
+                    <UserBox user={defaultUser} />
+                </ConfigProvider>
+            </IntlProvider>
+        </BrowserRouter>
+    )
+};
+
+
+export const UserBoxWithRoleContributor = () => {
+    return (
+        <BrowserRouter>
+            <IntlProvider locale="en">
+                <ConfigProvider routes={{...routes}}>
+                    <UserBox user={contributorUser} />
+                </ConfigProvider>
+            </IntlProvider>
+        </BrowserRouter>
+    )
+};
+
+

package/src/components/user/user_box/UserBox.test.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { BrowserRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+import { UserBox  } from "./UserBox";
+import { render } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+import { Location } from '@logora/debate/util/location';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+
+const contributorUser = {
+    id: 82,
+    uid: "296deae0-15e3-46dd-bd85-498456809453",
+    hash_id: "296deae0-15e3-46dd",
+    image_url: faker.image.avatarGitHub(),
+    full_name: faker.person.fullName(),
+    slug: faker.lorem.slug(),
+    score: 0,
+    points: 1539,
+    role: "contributor", 
+    description: null,
+    last_activity: faker.date.recent(),
+    groups_count: 5,
+    upvotes: 13,
+    messages_count: 20,
+    eloquence_title: null
+};
+
+const defaultUser = {
+    id: 83,
+    uid: "396deae0-15e3-46dd-bd85-498456809453",
+    hash_id: "396deae0-15e3-46dd",
+    image_url: faker.image.avatarGitHub(),
+    full_name: faker.person.fullName(),
+    slug: faker.lorem.slug(),
+    score: 0,
+    points: 100,
+    description: null,
+    last_activity: faker.date.recent(),
+    groups_count: 2,
+    upvotes: 5,
+    messages_count: 8,
+    eloquence_title: null
+};
+
+
+let UserShowLocation = new Location('espace-debat/user/:userSlug', { userSlug: "" })
+
+const routes = {
+    userShowLocation: UserShowLocation,
+}
+
+describe('UserBox', () => {
+    it ('renders component with correct data', () => {  
+        const { getByText, getByAltText } = render(
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <ConfigProvider routes={{...routes}}>
+                        <UserBox user={contributorUser} />
+                    </ConfigProvider>
+                </IntlProvider>
+            </BrowserRouter>
+        );
+
+        const avatarImg = getByAltText(contributorUser.full_name + "'s profile picture");
+        expect(avatarImg).toBeInTheDocument();
+        expect(avatarImg).toHaveAttribute('src', contributorUser.image_url);
+
+        expect(getByText(contributorUser.full_name)).toBeInTheDocument();
+        expect(getByText(contributorUser.points + " points")).toBeInTheDocument();
+        expect(getByText(contributorUser.messages_count + " arguments")).toBeInTheDocument();
+        expect(getByText(contributorUser.upvotes + " votes")).toBeInTheDocument();
+    });
+
+
+    it ('renders component correctly when user has no contributor role', () => {
+        const { getByText, getByAltText, queryByText } = render(
+            <BrowserRouter>
+                <IntlProvider locale="en">
+                    <ConfigProvider routes={{...routes}}>
+                        <UserBox user={defaultUser} />
+                    </ConfigProvider>
+                </IntlProvider>
+            </BrowserRouter>
+        );
+
+        const avatarImg = getByAltText(defaultUser.full_name + "'s profile picture");
+        expect(avatarImg).toBeInTheDocument();
+        expect(avatarImg).toHaveAttribute('src', defaultUser.image_url);
+
+        expect(getByText(defaultUser.full_name)).toBeInTheDocument();
+        expect(getByText(defaultUser.messages_count + " arguments")).toBeInTheDocument();
+        expect(getByText(defaultUser.upvotes + " votes")).toBeInTheDocument();
+        expect(queryByText(defaultUser.points + " points")).not.toBeInTheDocument();
+    });
+});

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

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

package/src/components/user/user_box_small/UserBoxSmall.docs.mdx

@@ -0,0 +1,20 @@
+---
+description: A small user box component with a user avatar image and name link.
+tags: ['user', 'avatar', 'user-box']
+---
+
+The UserBoxSmall component is used to display a user's avatar image and name link in a small box.
+
+It uses [ConfigProvider](https://bit.cloud/logora/debate/context/config_provider) for routing.
+
+The avatar image is rendered using the [Avatar](https://bit.cloud/logora/debate/user/avatar) component with size "small".
+
+### Component usage
+
+```js
+import { UserBoxSmall } from '@logora/debate.user.user_box_small';
+```
+
+```js
+<UserBoxSmall userName={"John Doe"} userSlug={"john-doe"} avatarUrl={'https://example.com/avatar.jpg'} />
+```

package/src/components/user/user_box_small/UserBoxSmall.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { useIntl } from 'react-intl';
+import { useRoutes } from '@logora/debate/data/config_provider';
+import { Link } from '@logora/debate/action/link';
+import { Avatar } from '@logora/debate/user/avatar';
+import styles from "./UserBoxSmall.module.scss";
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+export const UserBoxSmall = ({ userName, avatarUrl, userSlug }) => {
+    const intl = useIntl();
+    const routes = useRoutes();
+
+    return (
+        <div className={cx(styles.authorContainer, "author-box")}>
+            <Link to={routes.userShowLocation.toUrl({ userSlug: userSlug })} className={styles.authorLink} target="_top" aria-label={intl.formatMessage({ id: "user.user_box_small.author_link.aria_label", defaultMessage: "View profile" })}
+ >
+                <Avatar avatarUrl={avatarUrl} userName={userName} size={25}  />
+            </Link>
+            <div className={styles.authorName}>
+                <Link to={routes.userShowLocation.toUrl({ userSlug: userSlug })} className={styles.authorLink} target="_top" aria-label={intl.formatMessage({ id: "user.user_box_small.author_link.aria_label", defaultMessage: "View profile" })}>
+                    { userName }
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+UserBoxSmall.propTypes = {
+    /** User name */
+    userName: PropTypes.string,
+    /** User avatar URL */
+    avatarUrl: PropTypes.string,
+    /** User slug to be used in the link */
+    userSlug: PropTypes.string
+}

package/src/components/user/user_box_small/UserBoxSmall.module.scss

@@ -0,0 +1,21 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.authorContainer {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+}
+
+.authorName {
+    @include spacing.px(2, xs);
+    a {
+        font-size: theme.$font-size-normal;
+        font-weight: theme.$font-weight-bold;
+        color: theme.$text-primary !important;
+        text-decoration: none;
+    }
+    &:hover {
+        text-decoration: underline;
+    }
+}

package/src/components/user/user_box_small/UserBoxSmall.stories.jsx

@@ -0,0 +1,38 @@
+export default {
+    title: 'User/User Box Small',
+    component: UserBoxSmall,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { UserBoxSmall } from './UserBoxSmall';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { Location } from '@logora/debate/util/location';
+import { faker } from '@faker-js/faker';
+
+const user = {
+    image_url: faker.image.avatarGitHub(),
+    full_name: faker.person.fullName(),
+    slug: faker.lorem.slug(),
+}
+
+let UserShowLocation = new Location('espace-debat/user/:userSlug', { userSlug: "" })
+
+const routes = {
+    userShowLocation: UserShowLocation,
+}
+
+export const DefaultUserBoxSmall = () => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{...routes}}>
+                <IntlProvider locale='en'>
+                    <UserBoxSmall userName={user.full_name} userSlug={user.slug} avatarUrl={user.image_url} />
+                </IntlProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    )
+};

package/src/components/user/user_box_small/UserBoxSmall.test.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { UserBoxSmall } from './UserBoxSmall';
+import { Location } from '@logora/debate/util/location';
+import { faker } from '@faker-js/faker';
+
+const user = {
+  image_url: faker.image.avatarGitHub(),
+  full_name: faker.person.fullName(),
+  slug: faker.lorem.slug(),
+}
+
+let UserShowLocation = new Location('espace-debat/user/:userSlug', { userSlug: "" })
+
+const routes = {
+  userShowLocation: UserShowLocation,
+}
+
+describe('UserBoxSmall', () => {
+  it('renders author name, avatar and correct link', () => {
+    render(
+      <BrowserRouter>
+        <ConfigProvider routes={{ ...routes }}>
+          <IntlProvider locale='en'>
+            <UserBoxSmall userName={user.full_name} avatarUrl={user.image_url} userSlug={user.slug} />
+          </IntlProvider>
+        </ConfigProvider>
+      </BrowserRouter>
+    );
+    const userNameElement = screen.getByText(user.full_name);
+    expect(userNameElement).toBeInTheDocument();
+
+    const avatarImageElement = screen.getByAltText(user.full_name + "'s profile picture");
+    expect(avatarImageElement).toHaveAttribute('height', '25');
+    expect(avatarImageElement).toHaveAttribute('width', '25');
+    expect(avatarImageElement).toBeInTheDocument();
+    expect(avatarImageElement).toHaveAttribute('src', user.image_url);
+
+    const userLink = screen.getAllByRole('link');
+    expect(userLink.length).toBe(2);
+    expect(userLink[0]).toHaveAttribute(
+      'href',
+      `/espace-debat/user/${user.slug}`
+    );
+  });
+});

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

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

package/src/components/user_content/content_footer/ContentFooter.docs.mdx

@@ -0,0 +1,36 @@
+---
+description: A component to display a footer.
+tags: ['footer', 'user_content']
+---
+
+The ContentFooter component is used to display the footer of a user content, including reply, share, report and delete actions.
+
+### Component usage
+
+```js
+import { ContentFooter } from '@logora/debate.user_content.content_footer';
+```
+
+```js
+const resource = {
+    id: 12,
+    author: {
+        id: 22,
+    },
+    created_at: "2023-11-13T15:35:35.323Z"
+}
+
+<ContentFooter 
+    resource={resource}
+    showActions
+    enableReply
+    shareUrl={"https://test.com"}
+    shareTitle={"Share title"}
+    shareText={"Share text"}
+    showShareText
+    showShareCode
+    shareCode={"</>"}
+>
+    Children
+</ContentFooter>
+```