@logora/debate 0.1.0 → 0.1.1

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

@@ -1,246 +0,0 @@
-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

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

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

@@ -1,27 +0,0 @@
----
-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

@@ -1,131 +0,0 @@
-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

@@ -1,111 +0,0 @@
-@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;
-	}
-}