@logora/debate 0.1.0

package/src/components/report/report_box/ReportBox.test.jsx

@@ -0,0 +1,232 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import { MemoryRouter } from "react-router-dom";
+import { ConfigProvider } from "@logora/debate/data/config_provider";
+import { dataProvider, DataProviderContext } from "@logora/debate/data/data_provider";
+import { AuthContext } from "@logora/debate/auth/use_auth";
+import { ModalProvider } from "@logora/debate/dialog/modal";
+import { ListProvider } from "@logora/debate/list/list_provider";
+import { ToastProvider } from "@logora/debate/dialog/toast_provider";
+import { VoteProvider } from "@logora/debate/vote/vote_provider";
+import { IconProvider } from "@logora/debate/icons/icon_provider";
+import { ResponsiveProvider } from "@logora/debate/hooks/use_responsive";
+import * as regularIcons from "@logora/debate/icons/regular_icons";
+import ReportBox from "./ReportBox";
+import { faker } from "@faker-js/faker";
+
+vi.mock('@lexical/react/LexicalErrorBoundary', () => ({
+  LexicalErrorBoundary: ({ children }) => children,
+}));
+
+const generateReport = (overrides) => ({
+  id: faker.number.int(),
+  classification: "Spam",
+  description: faker.lorem.sentence(),
+  is_processed: true,
+  reportable_type: "Message",
+  created_at: faker.date.recent().toISOString(),
+  reportable: {
+    id: faker.number.int(),
+    content: faker.lorem.sentence(),
+    author: { full_name: faker.person.fullName() },
+    created_at: faker.date.recent().toISOString(),
+    upvotes: faker.number.int(),
+    language: "en",
+    status: "pending",
+  },
+  author: {
+    full_name: faker.person.fullName(),
+  },
+  moderation_entry: {
+    status: "pending"
+  },
+  position: {
+    id: faker.number.int(),
+    name: "Yes",
+    language: "en",
+    translation_entries: []
+  },
+  ...overrides
+});
+
+const generateReportPending = (overrides) => ({
+  id: faker.number.int(),
+  classification: "Spam",
+  description: faker.lorem.sentence(),
+  is_processed: false,
+  reportable_type: "Message",
+  created_at: faker.date.recent().toISOString(),
+  reportable: {
+    id: faker.number.int(),
+    content: faker.lorem.sentence(),
+    author: { full_name: faker.person.fullName() },
+    created_at: faker.date.recent().toISOString(),
+    upvotes: faker.number.int(),
+    language: "en",
+    status: "pending",
+  },
+  moderation_entry: {
+    status: "pending"
+  },
+  author: {
+    full_name: faker.person.fullName(),
+  },
+  position: {
+    id: faker.number.int(),
+    name: "Yes",
+    language: "en",
+    translation_entries: []
+  },
+  ...overrides
+});
+
+const reportArgument = generateReport({ reportable_type: "Message" });
+const reportArgumentPending = generateReportPending({ reportable_type: "Message" });
+const reportProposal = generateReport({
+  reportable_type: "Proposal",
+  reportable: {
+    ...generateReport().reportable,
+    title: faker.lorem.words(),
+    tag: {
+      display_name: faker.lorem.word(),
+      color: faker.color.rgb()
+    }
+  }
+});
+const reportSuggestion = generateReport({
+  reportable_type: "Group",
+  reportable: {
+    ...generateReport().reportable,
+    name: faker.lorem.words(),
+    slug: faker.lorem.slug(),
+    debate_suggestion: {
+      id: faker.number.int(),
+      name: faker.lorem.words(),
+      total_upvotes: faker.number.int(),
+      total_downvotes: faker.number.int(),
+      author: {
+        id: faker.number.int(),
+        full_name: faker.person.fullName(),
+        image_url: faker.image.avatarGitHub()
+      }
+    }
+  }
+});
+
+const httpClient = {
+  get: vi.fn(() => Promise.resolve({ data: { success: true, data: [] } })),
+  post: vi.fn(() => Promise.resolve({ data: { success: true, data: {} } })),
+  patch: vi.fn(),
+  delete: vi.fn(() => Promise.resolve({ data: { success: true, data: {} } }))
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const currentUser = {
+  id: faker.number.int(),
+  full_name: faker.person.fullName(),
+  image_url: faker.image.avatarGitHub()
+};
+
+const config = {
+  moderation: {
+    showFeedback: true,
+  },
+  modules: {
+    suggestions: {
+      vote_goal: 30
+    }
+  }
+};
+
+const Providers = ({ children }) => (
+  <MemoryRouter>
+    <ConfigProvider config={config}>
+      <DataProviderContext.Provider value={{ dataProvider: data }}>
+        <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+          <ResponsiveProvider>
+            <ModalProvider>
+              <ListProvider>
+                <ToastProvider>
+                  <VoteProvider>
+                    <IconProvider library={regularIcons}>
+                      <IntlProvider locale="en">
+                        {children}
+                      </IntlProvider>
+                    </IconProvider>
+                  </VoteProvider>
+                </ToastProvider>
+              </ListProvider>
+            </ModalProvider>
+          </ResponsiveProvider>
+        </AuthContext.Provider>
+      </DataProviderContext.Provider>
+    </ConfigProvider>
+  </MemoryRouter>
+);
+
+const renderReportBox = (props) => render(
+  <Providers>
+    <ReportBox {...props} />
+  </Providers>
+);
+
+describe("ReportBox", () => {
+  it("should render without crashing", () => {
+    renderReportBox({ report: reportArgument });
+    expect(screen.getByText(/Report reason:/i)).toBeInTheDocument();
+  });
+
+  it("should render Argument component for Message type with correct props", () => {
+    renderReportBox({ report: reportArgument });
+    expect(screen.getByText(reportArgument.reportable.content)).toBeInTheDocument();
+    expect(screen.getByText(reportArgument.reportable.author.full_name)).toBeInTheDocument();
+  });
+
+  it("should render ProposalBox component for Proposal type with correct props", () => {
+    renderReportBox({ report: reportProposal });
+    expect(screen.getByText(reportProposal.reportable.content)).toBeInTheDocument();
+    expect(screen.getByText(reportProposal.reportable.title)).toBeInTheDocument();
+  });
+
+  it("should render SuggestionBox component for Group type with correct props", () => {
+    renderReportBox({ report: reportSuggestion });
+    expect(screen.getByText(reportSuggestion.reportable.name)).toBeInTheDocument();
+    expect(screen.getByText(reportSuggestion.reportable.debate_suggestion.author.full_name)).toBeInTheDocument();
+  });
+
+  it("should display status message for pending status", () => {
+    renderReportBox({ report: reportArgumentPending });
+    expect(screen.getByText(/The report is currently in process/i)).toBeInTheDocument();
+  });
+
+  it("should display status message for accepted status", () => {
+    const acceptedReport = generateReport({
+      reportable: { ...reportArgument.reportable, status: "accepted", moderation_entry: {
+        status: "accepted"
+      }, }
+    });
+    renderReportBox({ report: acceptedReport });
+    expect(screen.getByText(/not removed the content/i)).toBeInTheDocument();
+  });
+
+  it("should display status message for rejected status", () => {
+    const rejectedReport = generateReport({
+      is_processed: true,
+      reportable: {
+        ...reportArgument.reportable,
+        status: "rejected",
+      },
+    });
+  
+    renderReportBox({ report: rejectedReport });
+  
+    expect(
+      screen.getByTestId("report-status-message")
+    ).toHaveTextContent(/content has been removed/i);
+  });
+  
+  
+
+});

package/src/components/report/report_box/index.js

@@ -0,0 +1 @@
+export { ReportBox } from "./ReportBox"

package/src/components/section/section_box/SectionBox.docs.mdx

@@ -0,0 +1,19 @@
+---
+description: A Section component.
+labels: ['section']
+---
+
+import { SectionBox } from './SectionBox';
+
+A component that renders a box with a styled title and optional collapsible behavior. Content has been passed as a child.
+
+### Component usage
+```js
+<SectionBox 
+    title="Section Title"
+    subtitle="Section sub title"
+    isCollapsedByDefault={true}
+>
+    Content
+</SectionBox>
+```

package/src/components/section/section_box/SectionBox.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import styles from './SectionBox.module.scss';
+import { Icon } from '@logora/debate/icons/icon';
+import cx from "classnames";
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+
+export const SectionBox = ({ isCollapsible = false, isCollapsedByDefault = false, title, subtitle = "", className, titleClassName, children }) => {
+  const [isCollapsed, setIsCollapsed] = useState(isCollapsedByDefault);
+  const { isMobile } = useResponsive();
+
+  const toggleExpand = () => {
+    if (isCollapsible) {
+      setIsCollapsed(isCollapsed => !isCollapsed);
+    }
+  }
+
+  return (
+    <div className={cx(styles.sectionBoxContainer, { [styles.isMobile]: isMobile })}>
+      <div className={cx(styles.header, { [styles.collapsible]: isCollapsible })} onClick={isCollapsible ? toggleExpand : null}>
+        <div className={styles.titleContainer}>
+          <div className={cx(titleClassName, styles.title)}>{title}</div>
+          {subtitle && <div className={cx(className, styles.subtitle)}>{subtitle}</div>}
+        </div>
+        {isCollapsible && (
+          <Icon name="lightArrow" className={cx(styles.iconLightArrow, { [styles.iconRotated]: !isCollapsed })} height={15} width={15} />
+        )}
+      </div>
+
+      {(!isCollapsed || !isCollapsible) && <div className={cx(styles.body, className)}>{children}</div>}
+    </div>
+  );
+}

package/src/components/section/section_box/SectionBox.module.scss

@@ -0,0 +1,57 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.sectionBoxContainer {
+    background-color: theme.$background-color-primary;
+    box-shadow: theme.$box-shadow-main-container;
+    border: theme.$box-border-main-container;
+    border-radius: theme.$box-border-radius;
+    color: theme.$text-primary;
+    @include spacing.p(4, sm);
+
+    &.isMobile {
+        @include spacing.p(3, xs);
+    }
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.collapsible {
+    cursor: pointer;
+}
+
+.iconLightArrow {
+    transition: transform 0.3s;
+}
+
+.iconRotated {
+    transform: rotate(180deg);
+}
+
+.titleContainer {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5em;
+}
+
+.title {
+    font-size: theme.$font-size-large;
+    line-height: theme.$line-height-tight;
+    font-weight: theme.$font-weight-bold;
+    font-family: theme.$title-font-family;
+    color: theme.$text-primary;
+}
+
+.subtitle {
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+}
+
+.body {
+    @include spacing.pt(3, xs)
+}

package/src/components/section/section_box/SectionBox.stories.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { SectionBox } from './SectionBox';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+  title: 'Section/Section Box',
+  component: SectionBox,
+  args: {
+    title: 'Section Title',
+    subtitle: 'Ceci est une section',
+    isCollapsible: true,
+    isCollapsedByDefault: false,
+    content: 'Voici le contenu de la section.'
+  },
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    isCollapsible: { control: 'boolean' },
+    isCollapsedByDefault: { control: 'boolean' },
+    content: { control: 'text' }
+  },
+  render: ({ content, ...args }) => (
+    <IconProvider library={regularIcons}>
+      <SectionBox {...args}>
+        <div>{content}</div>
+      </SectionBox>
+    </IconProvider>
+  )
+};
+
+export const DefaultSectionBox = {};
+
+export const NoCollapsibleSectionBox = {
+  args: {
+    isCollapsible: false,
+    title: 'Section Non Repliable'
+  }
+};

package/src/components/section/section_box/SectionBox.test.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { SectionBox } from './SectionBox';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const callback = vi.fn();
+
+it('should render with the correct text', () => {
+	const section = render(
+		<IconProvider library={regularIcons}>
+			<SectionBox
+				title="Section Title"
+				subtitle="Sub Title"
+			>
+				<p>Voici le contenu de la section.</p>
+			</SectionBox>
+		</IconProvider>
+	);
+	const renderedSection = section.getByText(/section title/i);
+	expect(renderedSection).toBeTruthy();
+});
+
+it('should toggle content visibility when clicked', () => {
+	const { getByText, queryByText } = render(
+		<IconProvider library={regularIcons}>
+			<SectionBox
+				title="Section Title"
+				subtitle="Sub Title"
+				isCollapsible={true}
+				isCollapsedByDefault={false}
+			>
+				<p>Voici le contenu de la section.</p>
+			</SectionBox>
+		</IconProvider>
+	);
+
+	const expandedContent = getByText(/Voici le contenu de la section/i);
+	expect(expandedContent).toBeTruthy();
+});
+
+
+
+

package/src/components/section/section_box/index.js

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

package/src/components/share/share_box/ShareBox.docs.mdx

@@ -0,0 +1,27 @@
+---
+description: A component to share a link on social networks.
+---
+
+import { ShareBox } from './ShareBox';
+import { IntlProvider } from 'react-intl';
+
+A component that shows icons to share a link or to copy to clipboard.
+
+It must be inside [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+```js
+import { ShareBox } from '@logora/debate.share.share_box';
+```
+
+```js
+<IntlProvider locale="fr">
+    <ShareBox 
+        shareUrl="https://example.com/share-link"
+        shareTitle="Here is an interesting link"
+        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+    />
+</IntlProvider>
+```

package/src/components/share/share_box/ShareBox.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import styles from './ShareBox.module.scss';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Tooltip } from '@logora/debate/dialog/tooltip';
+import { Icon } from '@logora/debate/icons/icon';
+import { useIntl } from 'react-intl';
+import PropTypes from "prop-types";
+
+export const ShareBox = ({ tooltipPosition, shareUrl, shareTitle, shareText, shareCode, showShareCode = false }) => {
+    const intl = useIntl();
+
+    const toggleSharing = (targetUrl) => {
+        if(typeof window !== 'undefined') {
+            let newWindow = window.open();
+            newWindow.opener = null;
+            newWindow.referrer = null;
+            newWindow.location = targetUrl;
+        }
+    }
+
+    return (
+        <div className={styles.shareBox}>
+            <Tooltip text={intl.formatMessage({ id: "share.share_box.copy_to_clipboard", defaultMessage: "Copy to clipboard" })} onClickText={intl.formatMessage({ id: "share.share_box.link_copied", defaultMessage: "Link copied !" })} position={tooltipPosition}>
+                <CopyToClipboard tabIndex="0" className={styles.linkCopyButton} text={shareUrl}>
+                    <div>
+                        <Icon name="link" role="button" className={styles.linkCopyIcon} data-tid={"action_embed_code_clipboard"} width={20} height={20} />
+                    </div>
+                </CopyToClipboard>
+            </Tooltip>
+            <Tooltip text={intl.formatMessage({ id: "share.share_box.facebook_share", defaultMessage: "Share on Facebook" })} position={tooltipPosition}>
+                <div onClick={() => toggleSharing("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(shareUrl))} className={styles.linkCopyButton} tabIndex={0}>
+                    <Icon name="facebook" role="button" data-tid={"action_share_debate_facebook"} width={20} height={20} />
+                </div>
+            </Tooltip>
+            <Tooltip text={intl.formatMessage({ id: "share.share_box.twitter_share", defaultMessage: "Share on Twitter" })} position={tooltipPosition}>
+                <div onClick={() => toggleSharing("https://twitter.com/intent/tweet?text=" + encodeURIComponent(shareTitle) + "&url=" + encodeURIComponent(shareUrl))} className={styles.linkCopyButton} tabIndex={0}>
+                    <Icon name="twitter" className={styles.twitterIcon} role="button" data-tid={"action_share_debate_twitter"} width={20} height={20} />
+                </div>
+            </Tooltip>
+            <Tooltip text={intl.formatMessage({ id: "share.share_box.mail_share", defaultMessage: "Share by email" })} position={tooltipPosition}>
+                <div onClick={() => toggleSharing("mailto:?subject=" + shareTitle + "&body=" + shareText + "%0D%0A" + shareUrl)} className={styles.linkCopyButton} tabIndex={0}>
+                    <Icon name="mail" role="button" data-tid={"action_share_debate_mail"} width={20} height={20} />
+                </div>
+            </Tooltip>
+            { showShareCode &&
+                <Tooltip text={intl.formatMessage({ id:"share.share_box.embed_code_to_clipboard", defaultMessage: "Copy embed code" })} onClickText={intl.formatMessage({ id: "share.share_box.code_copied", defaultMessage: "Code copied !" })} position={tooltipPosition}>
+                    <CopyToClipboard tabIndex="0" className={styles.codeCopyButton} text={shareCode}>
+                        <div className={styles.codeIcon}>
+                            <Icon name="code" className={styles.codeIcon} role="button" data-tid={"action_embed_code_clipboard"} width={20} height={20} />
+                        </div>
+                    </CopyToClipboard>
+                </Tooltip>
+            }
+        </div>
+    );
+};
+
+ShareBox.propTypes = {
+	/** Position of the tooltip */
+	tooltipPosition: PropTypes.string,
+	/** Url to share */
+	shareUrl: PropTypes.string.isRequired,
+	/** Title of the share */
+	shareTitle: PropTypes.string.isRequired,
+	/** Text of the share */
+    shareText: PropTypes.string,
+	/** Code to share */
+	shareCode: PropTypes.string,
+	/** If `true`, show copy code icon */
+	showShareCode: PropTypes.bool,
+};

package/src/components/share/share_box/ShareBox.module.scss

@@ -0,0 +1,38 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+
+.shareBox {
+    text-align: center;
+    width: max-content;
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: space-around !important;
+    gap: spacing.$spacer-md;
+}
+
+.linkCopyButton {
+    cursor: pointer;
+    &:hover{
+        cursor: pointer;
+    }
+}
+
+.linkCopyIcon {
+    height: 100%;
+}
+
+.codeIcon path, .codeIcon rect {
+    stroke: theme.$text-primary;
+}
+
+.twitterIcon path {
+    fill: theme.$text-primary;
+}
+
+.linkCopyButton:focus,
+.linkCopyButton:focus-visible,
+.codeCopyButton:focus,
+.codeCopyButton:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}

package/src/components/share/share_box/ShareBox.stories.jsx

@@ -0,0 +1,42 @@
+export default {
+    title: 'Share/Share Box',
+    component: ShareBox,
+    args: {
+        shareUrl: 'https://example.fr/test/',
+        shareTitle: 'Share this !',
+        shareText: 'You should check this interesting link',
+        showShareCode: false
+    },
+    argTypes: {
+        shareUrl: { control: 'text' },
+        shareTitle: { control: 'text' },
+        shareText: { control: 'text' },
+        showShareCode: { control: 'boolean' }
+    }
+};
+
+import React from 'react';
+import { ShareBox } from './ShareBox';
+import { IntlProvider } from 'react-intl';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export const DefaultShareBox = () => {
+    return (
+        <IntlProvider locale="en">
+            <IconProvider library={regularIcons}>
+                <ShareBox shareUrl={"https://example.fr/test/"} shareTitle="Share this !" shareText={"You should check this interesting link"} />
+            </IconProvider>
+        </IntlProvider>
+    );
+};
+
+export const ShareBoxWithCodeShare = () => {
+    return (
+        <IntlProvider locale="en">
+            <IconProvider library={regularIcons}>
+                <ShareBox showShareCode shareUrl={"https://example.fr/test/"} shareTitle="Share this !" shareText={"You should check this interesting link"} />
+            </IconProvider>
+        </IntlProvider>
+    );
+};