@logora/debate 0.1.0

package/src/components/user_content/content_footer/ContentFooter.test.jsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ContentFooter } from './ContentFooter';
+import { IntlProvider } from 'react-intl';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { faker } from '@faker-js/faker';
+import { DefaultContentFooter, ContentFooterShareModal, ContentFooterUpDownVoteBox, ContentFooterDisabled, ContentFooterWithoutReply, ContentFooterProgressBar, ContentFooterWithoutEdition, ContentFooterWithoutDeletion } from './ContentFooter.stories';
+import { VoteButton } from '@logora/debate/vote/vote_button';
+
+beforeAll(() => {
+    class ResizeObserver {
+      constructor(callback) {
+        this.callback = callback;
+      }
+      observe() {
+        this.callback([{ contentRect: { width: 1200, height: 800 } }]);
+      }
+      unobserve() {}
+    }
+    global.ResizeObserver = ResizeObserver;
+  
+    HTMLDialogElement.prototype.showModal = function () {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+      this.removeAttribute("open");
+    };
+  });
+  
+const vote = { 
+    id: faker.number.int(),
+    voteable_type: faker.lorem.word(),
+    voteable_id: faker.number.int(), 
+    user_id: faker.number.int()
+};
+
+const httpClient = {
+    get: () => null,
+    post: (url, data, config) => {
+        return new Promise(function(resolve, reject) {
+            resolve({ data: { success: true, data: { resource: vote } }});
+        });
+    },
+    patch: () => null,
+    delete: (url, data, config) => {
+        return new Promise(function(resolve, reject) {
+            resolve({ data: { success: true, data: {} }});
+        });
+    }
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const resource = {
+    id: faker.number.int(),
+    author: {
+        id: faker.number.int(),
+    },
+    created_at: faker.date.recent(),
+}
+
+describe('ContentFooter', () => {
+    it('should render correctly', async () => {
+        const { queryByText, queryByTestId } = render(
+            <DefaultContentFooter />
+        );
+
+        expect(queryByText(10)).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeInTheDocument();
+        expect(queryByText("Share")).toBeInTheDocument();
+
+        const dropdown = queryByTestId("dropdown");
+        await act(async () => { await userEvent.click(dropdown) });
+
+        expect(queryByText("Update")).toBeInTheDocument();
+        expect(queryByText("Delete")).toBeInTheDocument();
+        expect(queryByText("Report")).toBeInTheDocument();
+
+        const deleteModal = queryByText("Delete");
+        await act(async () => { await userEvent.click(deleteModal) });
+
+        expect(queryByText("Delete content")).toBeInTheDocument();
+    });
+
+    it('should render correctly with a disconnected user', async () => {
+        const { queryByText, queryByTestId } = render(
+            <IntlProvider locale="en">
+                <ConfigProvider config={{ auth: { disableLoginModal: true } }}>
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthContext.Provider value={{currentUser: { id: 1 }, isLoggedIn: false}}>
+                            <ListProvider>
+                                <IconProvider library={regularIcons}>
+                                    <ModalProvider>
+                                        <ToastProvider>
+                                            <VoteProvider>
+                                                <ContentFooter 
+                                                    resource={resource}
+                                                    showActions
+                                                    enableReply
+                                                    shareUrl={"https://test.com"}
+                                                    shareTitle={"Share title"}
+                                                    shareText={"Share text"}
+                                                    showShareText
+                                                    showShareCode
+                                                    shareCode={"</>"}
+                                                >
+                                                    <VoteButton
+                                                        voteableType={"Message"}
+                                                        voteableId={45}
+                                                        totalUpvote={10}
+                                                        totalDownvote={0}
+                                                        disabled={false}
+                                                    />
+                                                </ContentFooter>
+                                            </VoteProvider>
+                                        </ToastProvider>
+                                    </ModalProvider>
+                                </IconProvider>
+                            </ListProvider>
+                        </AuthContext.Provider>
+                    </DataProviderContext.Provider>
+                </ConfigProvider>
+            </IntlProvider>
+        );
+
+        expect(queryByText(10)).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeInTheDocument();
+        expect(queryByText("Share")).toBeInTheDocument();
+
+        const dropdown = queryByTestId("dropdown");
+        await act(async () => { await userEvent.click(dropdown) });
+
+        expect(queryByText("Update")).toBeNull();
+        expect(queryByText("Delete")).toBeNull();
+        expect(queryByText("Report")).toBeInTheDocument();
+    });
+
+    it('should render without edition', async () => {
+        const { queryByText, queryByTestId } = render(
+            <ContentFooterWithoutEdition />
+        );
+
+        expect(queryByText(10)).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeInTheDocument();
+        expect(queryByText("Share")).toBeInTheDocument();
+
+        const dropdown = queryByTestId("dropdown");
+        await act(async () => { await userEvent.click(dropdown) });
+
+        expect(queryByText("Update")).toBeNull();
+        expect(queryByText("Delete")).toBeInTheDocument();
+        expect(queryByText("Report")).toBeInTheDocument();
+    });
+
+    it('should render without edition', async () => {
+        const { queryByText, queryByTestId } = render(
+            <ContentFooterWithoutDeletion />
+        );
+
+        expect(queryByText(10)).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeInTheDocument();
+        expect(queryByText("Share")).toBeInTheDocument();
+
+        const dropdown = queryByTestId("dropdown");
+        await act(async () => { await userEvent.click(dropdown) });
+
+        expect(queryByText("Update")).toBeInTheDocument();
+        expect(queryByText("Delete")).toBeNull();
+        expect(queryByText("Report")).toBeInTheDocument();
+    });
+
+    it('should render with share modal', async () => {
+        const { queryByText, queryByTestId } = render(
+            <ContentFooterShareModal />
+        );
+
+        expect(queryByText(10)).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeInTheDocument();
+        expect(queryByText("Share")).toBeNull();
+
+        const dropdown = queryByTestId("dropdown");
+        await act(async () => { await userEvent.click(dropdown) });
+
+        expect(queryByText("Update")).toBeInTheDocument();
+        expect(queryByText("Delete")).toBeInTheDocument();
+        expect(queryByText("Report")).toBeInTheDocument();
+        expect(queryByText("Share")).toBeInTheDocument();
+    });
+
+    it('should render with up down vote box', async () => {
+        const { queryByText } = render(
+            <ContentFooterUpDownVoteBox />
+        );
+
+        expect(queryByText('10')).toBeInTheDocument();
+        expect(queryByText('5')).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeNull();
+        expect(queryByText("Share")).toBeInTheDocument();
+    });
+
+    it('should be disabled', async () => {
+        const { queryByText } = render(
+            <ContentFooterDisabled />
+        );
+
+        expect(queryByText(10)).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeNull();
+
+        const voteButton = queryByText(10);
+        await userEvent.click(voteButton);
+
+        expect(queryByText(10)).toBeInTheDocument();
+    });
+
+    it('should render without reply', async () => {
+        const { queryByText } = render(
+            <ContentFooterWithoutReply />
+        );
+
+        expect(queryByText(10)).toBeInTheDocument();
+        expect(queryByText("Reply")).toBeNull();
+        expect(queryByText("Share")).toBeInTheDocument();
+    });
+
+    it('should render with progress bar', async () => {
+        const { queryByText, queryByTestId } = render(
+            <ContentFooterProgressBar />
+        );
+
+        expect(queryByText(10)).toBeNull();
+        expect(queryByText("Reply")).toBeNull();
+        expect(queryByTestId("reply-button")).toBeNull();
+        expect(queryByText("Share")).toBeNull();
+        expect(queryByText("Nice progress !")).toBeInTheDocument();
+        expect(queryByText("25/30 supports")).toBeInTheDocument();
+    });
+});

package/src/components/user_content/content_footer/index.js

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

package/src/components/user_content/content_header/ContentHeader.docs.mdx

@@ -0,0 +1,27 @@
+---
+description: A component to display a user content's header with author, category and date.
+tags: ['header', 'user-content']
+---
+
+The ContentHeader component is used to display the header of a user content, including the author's avatar, name, points, and the content's category and date.
+It uses [ConfigProvider](https://bit.cloud/logora/debate/context/config_provider) for routing.
+
+It should be wrapped with react-intl's IntlProvider, ConfigProvider and be inside a Router.
+
+### Component usage
+
+```js
+import { ContentHeader } from '@logora/debate.user_content.content_header';
+```
+
+```js
+const author = {
+  slug: 'john-doe',
+  full_name: 'John Doe',
+  image_url: 'https://example.com/avatar.jpg',
+  points: 53
+};
+
+<ContentHeader author={author} tag={"my-tag"} date={new Date()} />
+```
+

package/src/components/user_content/content_header/ContentHeader.jsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { useRelativeTime } from "@logora/debate/hooks/use_relative_time";
+import { AuthorBox } from '@logora/debate/user/author_box';
+import { UserBoxSmall } from '@logora/debate/user/user_box_small';
+import { Icon } from '@logora/debate/icons/icon';
+import { useIntl } from "react-intl";
+import { useConfig } from '@logora/debate/data/config_provider';
+import cx from "classnames";
+import styles from "./ContentHeader.module.scss";
+import PropTypes from "prop-types";
+
+export const ContentHeader = ({ author, tag, tagClassName, date, oneLine = false, disableLinks = false, selectedContent = false, isDeleted = false, moderationReason,
+	moderationNotes, moderationPolicyUrl, showModerationFeedback = false }) => {
+	const relativeTime = useRelativeTime(new Date(date).getTime());
+	const intl = useIntl();
+	const config = useConfig();
+
+	return (
+		<div className={styles.contentHeaderContainer}>
+			{showModerationFeedback && (
+				<div className={styles.moderationInfo}>
+					<div className={styles.moderationReason}>
+						<Icon name="announcement" width={18} height={18} className={styles.warningIcon} />
+						{intl.formatMessage({
+							id: "user_content.content_header.moderation_reason",
+							defaultMessage: "Content rejected by moderation."
+						})}
+						{" "}
+						{moderationReason && intl.messages[`user_content.content_header.moderation_reason.${moderationReason.toLowerCase()}`]
+							? intl.formatMessage({
+								id: `user_content.content_header.moderation_reason.${moderationReason.toLowerCase()}`,
+								defaultMessage: ""
+							})
+							: null
+						}
+					</div>
+					{moderationNotes && (
+						<div>
+							{intl.formatMessage(
+								{
+									id: "user_content.content_header.moderation_notes",
+									defaultMessage: "Moderation Notes: {notes}",
+								},
+								{ notes: moderationNotes }
+							)}
+						</div>
+					)}
+					{moderationPolicyUrl && (
+						<div>
+							{intl.formatMessage(
+								{
+									id: "user_content.content_header.moderationPolicyUrl",
+									defaultMessage: "Please keep contributions respectful. See rules:"
+								}
+							)} <a href={moderationPolicyUrl} target="_blank" rel="noopener noreferrer" className={styles.moderationLink} >
+								{intl.formatMessage({ id: "user_content.content_header.moderation_policy_link", defaultMessage: "moderation policy" })}
+							</a>
+						</div>
+					)}
+				</div>
+			)}
+			{selectedContent && !isDeleted &&
+				<div className={styles.selectedContent}>
+					<Icon name="expertBadge" width={18} height={18} />
+					{intl.formatMessage({ id: "user_content.content_header.selected", defaultMessage: "Selected by editor" })}
+				</div>
+			}
+			<div className={styles.contentHeader}>
+				<div className={styles.contentHeaderAuthorBox}>
+					{oneLine === true ?
+						<UserBoxSmall userName={author.full_name} avatarUrl={author.image_url} userSlug={author.hash_id} />
+						:
+						<AuthorBox
+							fullName={author.full_name}
+							avatarUrl={author.image_url}
+							points={author.role === "contributor" ? author.points : null}
+							slug={author.hash_id}
+							lastActivity={author.last_activity}
+							occupation={author.occupation}
+							eloquenceTitle={author.eloquence_title}
+							showBadge={author.role === "editor" || author.role === "moderator"}
+							disableLinks={disableLinks}
+							isDeleted={isDeleted}
+							language={config?.translation?.enable === true ? `${author.language}` : null}
+							languageDialect={config?.translation?.dialect || null}
+						/>
+					}
+				</div>
+				<div className={styles.contentHeaderRight}>
+					{tag &&
+						<div className={cx(styles.contentHeaderTagBox, tagClassName)}>
+							<div className={styles.contentHeaderTag} title={tag}>
+								{tag}
+							</div>
+						</div>
+					}
+					{!date || oneLine ? null :
+						<div data-testid={"content-header-date"} className={cx(styles.contentHeaderDate)} aria-label={intl.formatMessage({ id: "user_content.content_header.date", defaultMessage: "Publication date"})}>
+							{relativeTime}
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+ContentHeader.propTypes = {
+	/** An object containing the `full_name`, `image_url`, `slug` and `points` of the author */
+	author: PropTypes.object.isRequired,
+	/** The tag associated with the argument */
+	tag: PropTypes.string,
+	/** A custom class name for the tag container */
+	tagClassName: PropTypes.string,
+	/** The date the argument was posted */
+	date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+	/** If `true`, will render the author box in a single line  */
+	oneLine: PropTypes.bool,
+	/** If `true`, will disable the links to the author profile */
+	disableLinks: PropTypes.bool,
+	/** If `true`, will add selected argument div to header */
+	selectedContent: PropTypes.bool,
+	/** If `true`, will display the deleted content style */
+	isDeleted: PropTypes.bool,
+	/** Reason for moderation */
+	moderationReason: PropTypes.string,
+	/** Notes related to moderation */
+	moderationNotes: PropTypes.string,
+	/** Charte of moderation */
+	moderationPolicyUrl: PropTypes.string,
+};

package/src/components/user_content/content_header/ContentHeader.module.scss

@@ -0,0 +1,111 @@
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+@use 'styles/spacing' as spacing;
+
+.contentHeaderContainer {
+	display: flex !important;
+	flex-direction: column !important;
+	gap: spacing.$spacer;
+}
+
+.contentHeader {
+	display: flex !important;
+	flex-direction: row !important;
+	align-items: flex-start !important;
+	font-size: theme.$font-size-normal;
+}
+
+.contentHeaderAuthorBox {
+	display: flex !important;
+	flex-direction: row !important;
+	align-items: center !important;
+	padding: 0 !important;
+	overflow: hidden;
+	flex: 1;
+}
+
+.contentHeaderDate {
+	color: theme.$text-secondary;
+	font-size: theme.$font-size-small;
+	font-weight: theme.$font-weight-normal;
+	text-align: right;
+	@include spacing.pt(2, xs);
+}
+
+.contentHeaderRight {
+	display: flex !important;
+	flex-direction: column !important;
+	align-items: flex-end !important;
+	justify-content: center !important;
+	padding: 0 !important;
+	width: auto; 
+	margin-left: auto;
+	min-width: 0;     
+	width: auto; 
+}
+
+.contentHeaderTagBox {
+	font-weight: theme.$font-weight-bold;
+	display: flex !important;
+	align-items: center !important;
+	justify-content: flex-end !important;
+	border-radius: theme.$box-border-radius;
+	background-color: theme.$call-primary;
+	max-width: 190px;
+	min-width: 0;
+}
+
+.contentHeaderTag {
+	font-size: theme.$font-size-small;
+	color: theme.$text-light;
+	@include spacing.px(2.5, xs);
+	@include spacing.py(2, xs);
+	flex: 1 1 auto;       
+	min-width: 0;  
+	display: block;  
+	overflow: hidden;
+    text-overflow: ellipsis;
+	white-space: nowrap; 
+}
+
+.selectedContent {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	color: theme.$text-primary;
+	font-size: theme.$font-size-small;
+	gap: spacing.$spacer-xs;
+	flex-wrap: wrap;
+
+	@include display.media-breakpoint-down(xs) {
+		font-size: theme.$font-size-small;
+	}
+}
+
+.moderationInfo {
+	display: flex;
+	flex-direction: column;
+	gap: spacing.$spacer-xs;
+}
+
+.moderationReason {
+	display: flex;
+	color: theme.$info-primary;
+	gap: spacing.$spacer-xs;
+}
+
+.moderationLink {
+	color: theme.$call-primary;
+	font-weight: bold;
+	text-decoration: underline !important;
+}
+
+svg.warningIcon {
+	circle {
+		stroke: theme.$info-primary;
+		stroke-width: 1.5px;
+	}
+	path {
+		fill: theme.$info-primary;
+	}
+}