@logora/debate 0.1.0

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

@@ -0,0 +1,221 @@
+export default {
+    title: 'User Content/Content Header',
+    component: ContentHeader,
+    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 { Location } from '@logora/debate/util/location';
+import { ContentHeader } from './ContentHeader';
+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(),
+    slug: faker.lorem.slug(),
+    points: 52,
+    role: "contributor",
+    last_activity: new Date(),
+    description: faker.person.jobTitle(),
+    hash_id: faker.lorem.slug(),
+    occupation: faker.person.jobTitle(),
+}
+
+const moderationPolicyUrl = "https://example.com/debate-rules";
+
+const moderationEntry = {
+    id: faker.number.int({ min: 1000000, max: 9999999 }),
+    status: "rejected",
+    moderation_score: faker.number.float({ min: 0, max: 1, precision: 0.001 }),
+    moderation_reason: "INCOHERENT",
+    moderator_notes: faker.datatype.boolean() ? faker.lorem.sentence() : null,
+    is_moderated: true,
+    moderation_mode: "mistral",
+    moderated_at: faker.date.recent().toISOString(),
+    is_reported: false,
+};
+
+const expertAuthor = { ...author, role: "editor" }
+
+const date = faker.date.recent();
+
+const routes = {
+    userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+
+const tag = faker.word.noun(5);
+const config = {
+    moderation: {
+        showFeedback: true,
+    },
+};
+
+export const DefaultContentHeader = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || author}
+                            tag={props.tag || tag}
+                            date={props.date || date}
+                            positionIndex={1}
+                            oneLine={false}
+                            disableLinks={false}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export const ContentHeaderWithoutTag = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || author}
+                            date={props.date || date}
+                            positionIndex={1}
+                            oneLine={false}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export const ContentHeaderWithoutDate = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || author}
+                            tag={props.tag || tag}
+                            positionIndex={1}
+                            oneLine={false}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export const ContentHeaderWithOneLine = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || author}
+                            tag={props.tag || tag}
+                            positionIndex={1}
+                            date={props.date || date}
+                            oneLine={true}
+                            disableLinks={false}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export const ContentHeaderWithoutLinks = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || author}
+                            tag={props.tag || tag}
+                            date={props.date || date}
+                            oneLine={false}
+                            disableLinks={true}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export const ContentHeaderSelected = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || author}
+                            tag={props.tag || tag}
+                            date={props.date || date}
+                            selectedContent
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export const ContentHeaderWithBadge = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || expertAuthor}
+                            tag={props.tag || tag}
+                            date={props.date || date}
+                            positionIndex={1}
+                            oneLine={false}
+                            disableLinks={false}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+
+export const ContentHeaderWithModeration = (props) => {
+    return (
+        <BrowserRouter>
+            <ConfigProvider routes={{ ...routes }} config={config}>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ContentHeader
+                            author={props.author || author}
+                            tag={props.tag || tag}
+                            date={props.date || date}
+                            showModerationFeedback={config.moderation?.showFeedback}
+                            moderationReason={moderationEntry.moderation_reason}
+                            moderationNotes={moderationEntry.moderator_notes}
+                            moderationPolicyUrl={moderationPolicyUrl}
+                            isModerationRejected={moderationEntry.status}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ConfigProvider>
+        </BrowserRouter>
+    );
+};
+

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+import { DefaultContentHeader, ContentHeaderWithoutTag, ContentHeaderWithoutDate, ContentHeaderWithOneLine, ContentHeaderWithoutLinks, ContentHeaderSelected } from './ContentHeader.stories';
+
+const author = {
+    image_url: 'https://via.placeholder.com/150',
+    full_name: faker.person.fullName(),
+    slug: faker.lorem.slug(),
+    hash_id: faker.lorem.slug(),
+    last_activity: faker.date.recent(),
+    points: 1234,
+    role:"contributor",
+    eloquence_title: 'gold',
+    occupation: faker.person.jobTitle(),
+}
+
+const date = faker.date.past(2);
+const tag = faker.person.jobType();
+
+describe('ContentHeader component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+    });
+
+    it('should render with correct data', () => {
+        const { getByText, getByAltText, getAllByRole } = render(
+            <DefaultContentHeader author={author} tag={tag} date={date} />
+        );
+
+        const avatarImg = getByAltText(author.full_name + "'s profile picture");
+        expect(avatarImg).toBeInTheDocument();
+        expect(avatarImg).toHaveAttribute('src', author.image_url);
+        expect(getByText(author.full_name)).toBeInTheDocument();
+        expect(getByText('1.2K points')).toBeInTheDocument();
+        expect(getByText('Eloquence title')).toBeInTheDocument();
+        expect(getByText(author.occupation)).toBeInTheDocument();
+        
+        const authorLinkElements = getAllByRole('link');
+        expect(authorLinkElements.length).toBe(2);
+        expect(authorLinkElements[0]).toHaveAttribute(
+            'href',
+            `/espace-debat/user/${author.hash_id}`
+        );
+
+        const tagElement = getByText(tag);
+        expect(tagElement).toBeInTheDocument();
+
+        const relativeTimeElement = getByText('1 month ago');
+        expect(relativeTimeElement).toBeInTheDocument();
+    });
+
+    it('should not render tag if not present', () => {
+        const { getByText, queryByText } = render(
+            <ContentHeaderWithoutTag author={author} date={date} />
+        );
+
+        expect(getByText(author.full_name)).toBeInTheDocument();
+        expect(queryByText(tag)).not.toBeInTheDocument();
+    });
+
+    it('should not render date if not present', () => {
+        const { getByText, queryByTestId } = render(
+            <ContentHeaderWithoutDate author={author} tag={tag} />
+        );
+
+        expect(getByText(author.full_name)).toBeInTheDocument();
+        expect(queryByTestId('content-header-date')).toBeNull();
+    });
+  
+    it('should render without links if disabledLinks is true', () => {
+        const { getByText, queryByRole } = render(
+            <ContentHeaderWithoutLinks author={author} tag={tag} date={date} disableLinks />
+        );
+
+        expect(getByText(author.full_name)).toBeInTheDocument();
+        expect(queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('should render with selected div if selectedContent is true', () => {
+        const { getByText } = render(
+            <ContentHeaderSelected author={author} tag={tag} date={date} selectedContent />
+        );
+
+        expect(getByText('Selected by editor')).toBeInTheDocument();
+    });
+
+    it('should render on one line if oneLine is true', () => {
+        const { queryByText, getByText, queryByTestId } = render(
+            <ContentHeaderWithOneLine author={author} tag={tag} date={date} oneLine />
+        );
+
+        expect(getByText(author.full_name)).toBeInTheDocument();
+        expect(getByText(tag)).toBeInTheDocument();
+        expect(queryByTestId('content-header-date')).not.toBeInTheDocument();
+        expect(queryByText('1.2K points')).toBeNull();
+    });
+});

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

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

package/src/components/user_content/summary_content_box/SummaryContentBox.docs.mdx

@@ -0,0 +1,25 @@
+---
+description: A box component to show a summary of content.
+labels: ['user_content', 'box']
+---
+A box component to show a summary of content.  
+
+It must be wrapped by react-intl's IntlProvider, by ConfigProvider and by a router from react-router.
+
+### Component usage
+```js
+    import { SummaryContentBox } from '@logora/debate.user_content.summary_content_box';
+```
+```js
+<SummaryContentBox
+    author={author}
+    tag={"Politics"}
+    date={new Date()}
+    content={"Argument content"}
+    link={"https://example.com"}
+    contentCount={12}
+    tagClassName="argument-position"
+    headerOneLine
+    showFooter
+/>
+```

package/src/components/user_content/summary_content_box/SummaryContentBox.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import { ContentHeader } from '@logora/debate/user_content/content_header';
+import { Link } from '@logora/debate/action/link';
+import { Icon } from "@logora/debate/icons/icon";
+import { ReadMore } from '@logora/debate/text/read_more';
+import { FormattedMessage } from 'react-intl';
+import { useTranslatedContent } from '@logora/debate/translation/translated_content';
+import cx from 'classnames';
+import styles from './SummaryContentBox.module.scss';
+
+export const SummaryContentBox = ({ author, tag, date, title = '', content, link, contentCount = 0, tagClassName, headerOneLine = false, showFooter = false, language, lineCount, translationEntries = [] }) => {
+    const translatedTitle = useTranslatedContent(title, language, "title", translationEntries);
+    const translatedContent = useTranslatedContent(content, language, "content", translationEntries);
+    return (
+        <div className={styles.contentBox}>
+            <>
+                <ContentHeader 
+                    author={author} 
+                    tag={tag}
+                    tagClassName={tagClassName}
+                    date={date}
+                    oneLine={headerOneLine}
+                />
+                <div className={styles.contentBody}>
+                    { title &&
+                        <div className={styles.title}>
+                            { translatedTitle.translatedContent }
+                        </div>
+                    }
+                    <ReadMore 
+                        content={translatedContent.translatedContent}
+                        charCount={lineCount ? undefined : 200}
+                        lineCount={lineCount ?? undefined}
+                        to={link} 
+                        data-tid={"link_argument_read_more"}
+                        target="_top"
+                        external
+                        expandable={true}
+                        readMoreText={
+                            <div className={styles.readMore}>
+                                <FormattedMessage id="user_content.summary_content_box.read_more" defaultMessage={"Read more"} />
+                                <Icon name="arrow" height={20} width={20} className={styles.arrow} />
+                            </div>
+                        }
+                    />
+                </div>
+                { showFooter &&
+                    <Link 
+                        className={cx(styles.contentBoxFooter, tagClassName)} 
+                        to={link}
+                        data-tid={"link_arguments_read_more"}
+                        target="_top"
+                        external
+                    >
+                        <FormattedMessage 
+                            id="user_content.summary_content_box.read_more_arguments" 
+                            values={{ count: contentCount, position: tag }}
+                            defaultMessage={'Read {count} arguments "{position}"'}
+                        />
+                    </Link>
+                }
+            </>
+        </div>
+    );
+}
+
+SummaryContentBox.propTypes = {
+    /** Object containing the author name */
+    author: PropTypes.object.isRequired,
+    /** Tag displayed in the header */
+    tag: PropTypes.string,
+    /** Date displayed in the header */
+    date: PropTypes.instanceOf(Date),
+    /** Title of the argument */
+    title: PropTypes.string,
+    /** Content of the argument */
+    content: PropTypes.string.isRequired,
+    /** Call-to-action URL */
+    link: PropTypes.string.isRequired,
+    /** Number of arguments in the debate */
+    contentCount: PropTypes.number,
+    /** CSS class name of the argument's tag  */
+    tagClassName: PropTypes.string,
+    /** Show author, position and date in one line */
+    headerOneLine: PropTypes.bool,
+    /** Show footer link to read more arguments */
+    showFooter: PropTypes.bool,
+};

package/src/components/user_content/summary_content_box/SummaryContentBox.module.scss

@@ -0,0 +1,65 @@
+@use 'styles/theme' as theme;
+@use "styles/spacing" as spacing;
+
+.contentBox {
+	display: flex !important;
+	flex-direction: column !important;
+	gap: spacing.$box-spacing;
+	padding: spacing.$box-spacing !important;
+	border-radius: theme.$box-border-radius;
+	box-shadow: theme.$box-shadow;
+	border: theme.$box-border;
+	min-width: 0;
+}
+
+.contentBody {
+	display: flex !important;
+	flex-direction: column !important;
+	font-size: theme.$font-size-small;
+	white-space: pre-line;
+	line-height: theme.$line-height-loose;
+}
+
+.title {
+	font-size: theme.$font-size-small;
+	font-weight: theme.$font-weight-bold;
+	&::first-letter {
+		text-transform: uppercase;
+	}
+	@include spacing.pb(2, xs);
+}
+
+.contentBoxFooter {
+	display: block !important;
+	background-color: theme.$call-primary;
+	color: theme.$text-light;
+	text-align: center;
+	border-radius: 0 0 theme.$box-border-radius theme.$box-border-radius;
+	padding: 0.75em !important;
+	font-weight: theme.$font-weight-bold;
+	font-size: theme.$font-size-small !important;
+	text-decoration: none !important;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	&:hover {
+		opacity: 0.9;
+		text-decoration: none !important;
+		color: theme.$text-light !important;
+		cursor: pointer;
+	}
+	&:active, &:focus {
+		color: theme.$text-light;
+	}
+}
+
+.readMore {
+	display: inline-flex !important;
+	align-items: center !important;
+	justify-content: center !important;
+}
+
+.arrow {
+	transform: scaleX(-1);
+	display: inline-block;
+}

package/src/components/user_content/summary_content_box/SummaryContentBox.stories.jsx

@@ -0,0 +1,130 @@
+export default {
+  title: 'User Content/Summary Content Box',
+  component: SummaryContentBox,
+  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 { Location } from '@logora/debate/util/location';
+import { SummaryContentBox } from './SummaryContentBox';
+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(),
+  slug: faker.lorem.slug(),
+  points: 52,
+  role:"contributor",
+  last_activity: new Date(),
+  description: faker.person.jobTitle()
+}
+
+const argument = {
+  id: 43,
+  author: author,
+  created_at: faker.date.recent(),
+  content: faker.lorem.sentences(8),
+  position: {
+    name: faker.lorem.word()
+  }
+}
+
+const debateUrl = faker.internet.url();
+
+const routes = {
+  userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+
+export const DefaultSummaryContentBox = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale="en">
+            <SummaryContentBox
+              author={author} 
+              tag={argument.position?.name}
+              date={argument.created_at}
+              content={argument.content}
+              link={debateUrl}
+            />
+          </IntlProvider>
+        </IconProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+
+export const SummaryContentBoxWithTitle = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale="en">
+            <SummaryContentBox
+              author={author} 
+              tag={argument.position?.name}
+              title={"My argument title"}
+              date={argument.created_at}
+              content={argument.content}
+              link={debateUrl}
+              showFooter
+            />
+          </IntlProvider>
+        </IconProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+
+export const SummaryContentBoxWithFooter = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale="en">
+            <SummaryContentBox
+              author={author} 
+              tag={argument.position?.name}
+              date={argument.created_at}
+              content={argument.content}
+              link={debateUrl}
+              showFooter
+            />
+          </IntlProvider>
+        </IconProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+
+export const SummaryContentBoxHeaderOneLine = () => {
+  return (
+    <BrowserRouter>
+      <ConfigProvider routes={{ ...routes }}>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale="en">
+            <SummaryContentBox
+              author={author} 
+              tag={argument.position?.name}
+              date={argument.created_at}
+              content={argument.content}
+              link={debateUrl}
+              headerOneLine={true}
+            />
+          </IntlProvider>
+        </IconProvider>
+      </ConfigProvider>
+    </BrowserRouter>
+  );
+};
+