@logora/debate 0.1.0 → 0.1.1

package/src/components/proposal/proposal_box/ProposalBox.test.jsx

@@ -1,137 +0,0 @@
-import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-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 { ProposalBox } from "./ProposalBox";
-import { faker } from "@faker-js/faker";
-
-vi.mock('@lexical/react/LexicalErrorBoundary', () => ({
-    LexicalErrorBoundary: ({ children }) => children,
-  }));
-
-// Mock data
-const vote = {
-    id: faker.number.int(),
-    voteable_type: faker.lorem.word(),
-    voteable_id: faker.number.int(),
-    user_id: faker.number.int()
-};
-
-const currentUser = {
-    id: vote.user_id,
-    full_name: faker.person.fullName(),
-    image_url: faker.image.avatarGitHub(),
-    points: faker.number.int()
-};
-
-const generateProposal = (overrides) => ({
-    id: faker.number.int(),
-    title: faker.lorem.sentence(),
-    content: faker.lorem.paragraph(),
-    created_at: faker.date.recent().toISOString(),
-    edited_at: null,
-    total_upvotes: faker.number.int(100),
-    total_downvotes: faker.number.int(50),
-    language: "en",
-    translation_entries: [],
-    author: {
-        id: faker.number.int(),
-        image_url: faker.image.avatarGitHub(),
-        full_name: faker.person.fullName(),
-        hash_id: faker.lorem.slug(),
-        slug: faker.lorem.slug(),
-        points: faker.number.int(5000),
-        last_activity: new Date(),
-        description: faker.person.jobTitle()
-    },
-    tag: {
-        display_name: faker.lorem.word(),
-        color: faker.color.rgb()
-    },
-    ...overrides
-});
-
-const proposal = generateProposal();
-const editedProposal = generateProposal({ edited_at: faker.date.recent().toISOString(), is_edited: true });
-
-const httpClient = {
-    post: vi.fn(() => Promise.resolve({ data: { success: true, data: { resource: vote } } })),
-    delete: vi.fn(() => Promise.resolve({ data: { success: true, data: {} } }))
-};
-
-const data = dataProvider(httpClient, "https://mock.example.api");
-
-const routes = {
-    userShowLocation: {
-        toUrl: ({ userSlug }) => `/espace-debat/user/${userSlug}`,
-    },
-};
-
-const Providers = ({ children }) => (
-    <MemoryRouter>
-        <ConfigProvider config={{ translation: { enable: false } }} routes={{ ...routes }}>
-            <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 renderProposal = (props) => render(
-    <Providers>
-        <ProposalBox {...props} />
-    </Providers>
-);
-
-describe("ProposalBox", () => {
-    it("should render ProposalBox correctly", () => {
-        const { getByText } = renderProposal({ proposal, disabled: false });
-
-        expect(getByText(proposal.title)).toBeInTheDocument();
-        expect(getByText(proposal.author.full_name)).toBeInTheDocument();
-        expect(getByText(proposal.tag.display_name)).toBeInTheDocument();
-    });
-
-    it("should show edited status when proposal was edited", () => {
-        const { getByText } = renderProposal({ proposal: editedProposal });
-        expect(getByText("Updated proposal")).toBeInTheDocument();
-    });
-
-    it("should disable voting when current user is author", () => {
-        const authorProposal = generateProposal({ author: currentUser });
-        renderProposal({ proposal: authorProposal });
-        
-        const upvoteButton = screen.getByTestId('upvote-button');
-        const downvoteButton = screen.getByTestId('downvote-button');
-        
-        expect(upvoteButton).toHaveClass('disabled');
-        expect(downvoteButton).toHaveClass('disabled');
-    });
-});

package/src/components/proposal/proposal_box/index.js

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

package/src/components/report/report_box/ReportBox.docs.mdx

@@ -1,35 +0,0 @@
---- 
-description: A component to display a report with its classification, status.
----
-
-import { ReportBox } from './ReportBox';
-
-The ReportBox component is used to display a single report, including its classification, status (accepted, pending, or rejected).
-
-
-### Component usage
-
-```js
-import { ReportBox } from '@logora/debate.report.report_box';
-```
-
-```js
-const report = {
-  id: 1,
-  classification: 'Spam',
-  is_processed: true,
-  reportable_type: 'Message',
-  reportable: {
-    id: 84,
-    content: 'This is a reported message.',
-    author: { full_name: 'John Doe' },
-    created_at: '2025-05-06T15:43:17.545Z',
-    status: 'pending',
-  },
-  author: {
-    full_name: 'Jane Smith',
-  },
-};
-
-<ReportBox report={report} />
-```

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

@@ -1,120 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Argument } from "@logora/debate/argument/argument";
-import { SuggestionBox } from "@logora/debate/suggestion/suggestion_box";
-import { ProposalBox } from "@logora/debate/proposal/proposal_box";
-import { useIntl } from "react-intl";
-import { Icon } from '@logora/debate/icons/icon';
-import cx from "classnames";
-import styles from './ReportBox.module.scss';
-
-
-export const ReportBox = ({ report, flash }) => {
-  const intl = useIntl();
-  const [isFlashing, setIsFlashing] = useState(false);
-
-  useEffect(() => {
-    if (flash === report.id) {
-      const reportElement = document.getElementById(`reports_${report.id}`);
-      if (reportElement) {
-        reportElement.scrollIntoView({ behavior: "smooth", block: "center" });
-      }
-      setIsFlashing(true);
-    } else {
-      setIsFlashing(false);
-    }
-  }, [flash, report.id]);
-
-  const renderReportContent = () => {
-    const { reportable_type, reportable } = report;
-    switch (reportable_type) {
-      case "Message": {
-        const shouldHideContent =
-          report.is_processed === true && report.reportable?.status === "rejected";
-      
-        return (
-          <Argument
-            argument={reportable}
-            positions={reportable.group?.group_context?.positions?.slice(0, 2) || []}
-            hideReplies={true}
-            hideFooter={true}
-            showModerationFeedback={false}
-            hideContent={shouldHideContent}
-          />
-        );
-      }
-      
-      case "Proposal":
-        return <ProposalBox proposal={reportable} hideFooter={true} />;
-      case "Group":
-        return <SuggestionBox suggestion={reportable} hideFooter={true} />;
-      default:
-        return <div>{intl.formatMessage({
-          id: "report.unknown_type",
-          defaultMessage: " Unknown content type"
-        })}</div>;
-    }
-  };
-
-  const renderStatusMessage = (isProcessed, contentStatus) => {
-    if (!isProcessed) {
-      return (
-        <div className={styles.statusMessage}>
-          {intl.formatMessage({
-            id: "report.content_header.status_pending",
-            defaultMessage: "The report is currently in process"
-          })}
-        </div>
-      );
-    } else {
-      if (contentStatus === "rejected") {
-        return (
-          <div className={styles.statusMessage} data-testid="report-status-message">
-            {intl.formatMessage({
-              id: "report.content_header.status_rejected",
-              defaultMessage: "Thank you for your report. After verification, the content has been removed."
-            })}
-          </div>
-        );
-      } else {
-        return (
-          <div className={styles.statusMessage}>
-            {intl.formatMessage({
-              id: "report.content_header.status_accepted",
-              defaultMessage: "Thank you for your report. After verification, we have not removed the content."
-            })}
-          </div>
-        );
-      }
-    }
-  };
-
-  return (
-    <div id={`reports_${report.id}`} className={cx(styles.reportBox, { [styles.reportHighlighted]: isFlashing })}>
-      {report && (
-        <div className={styles.reportItem}>
-          <div className={styles.reportHeader}>
-            {report.classification && (
-              <div className={styles.reportReason}>
-                <Icon name="announcement" width={18} height={18} className={styles.warningIcon} />
-                {intl.formatMessage({
-                  id: "report.content_header.moderation_reason",
-                  defaultMessage: "Report reason:"
-                })}{" "}
-                {intl.messages[`report.content_header.moderation_reason.${report.classification.toLowerCase()}`]
-                  ? intl.formatMessage({
-                    id: `report.content_header.moderation_reason.${report.classification.toLowerCase()}`,
-                    defaultMessage: report.classification
-                  })
-                  : report.classification}
-              </div>
-            )}
-            {renderStatusMessage(report.is_processed, report.reportable?.status)}
-          </div>
-          {renderReportContent()}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ReportBox;

package/src/components/report/report_box/ReportBox.module.scss

@@ -1,54 +0,0 @@
-@use 'styles/spacing' as spacing;
-@use 'styles/theme' as theme;
-
-
-.reportBox {
-  width: 100%;
-}
-
-.reportItem {
-  border: theme.$box-border;
-  border-radius: theme.$box-border-radius;
-  box-shadow: theme.$box-shadow;
-  transition: margin-top 2s;
-  background-color: theme.$background-color-primary;
-}
-
-.reportHeader {
-  padding: spacing.$spacer-md spacing.$spacer-md;
-}
-
-.reportReason {
-  display: flex;
-  color: theme.$against-primary;
-  gap: spacing.$spacer-xs;
-  margin-bottom: spacing.$spacer-md;
-  font-size: theme.$font-size-small;
-  align-items: center;
-}
-
-svg.warningIcon {
-  circle {
-    stroke: theme.$against-primary;
-    stroke-width: 1.5px;
-  }
-
-  path {
-    fill: theme.$against-primary;
-  }
-}
-
-.statusMessage {
-  margin-top: spacing.$spacer-xs;
-  font-size: theme.$font-size-small;
-}
-
-.reportHighlighted {
-  border:1px solid theme.$call-primary !important;
-  -webkit-transition: box-shadow 0.8s ease-in-out;
-	-moz-transition: box-shadow 0.8s ease-in-out;
-	-o-transition: box-shadow 0.8s ease-in-out;
-	transition: box-shadow 0.8s ease-in-out;
-	box-shadow: -4px 4px 15px 3px rgba(0, 0, 0, 0.15);
-  border-radius: theme.$box-border-radius;
-}

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

@@ -1,247 +0,0 @@
-import React from 'react';
-import { IntlProvider } from 'react-intl';
-import { BrowserRouter } 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 { InputProvider } from '@logora/debate/input/input_provider';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
-import { faker } from '@faker-js/faker';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-import ReportBox from './ReportBox';
-
-const vote = {
-  id: faker.number.int(),
-  voteable_type: faker.lorem.word(),
-  voteable_id: faker.number.int(),
-  user_id: faker.number.int()
-};
-
-const currentUser = { id: vote.user_id };
-
-const httpClient = {
-  get: () => Promise.resolve({ data: { success: true, data: [] } }),
-  post: () => Promise.resolve({ data: { success: true, data: { resource: vote } } }),
-  patch: () => null,
-  delete: () => Promise.resolve({ data: { success: true, data: {} } })
-};
-
-const data = dataProvider(httpClient, 'https://mock.example.api');
-
-const config = {
-  modules: {
-    suggestions: {
-      vote_goal: 30
-    }
-  }
-};
-
-const reportArgumentPending = {
-  id: 1,
-  classification: 'INCOHERENT',
-  description: faker.lorem.sentence(),
-  is_processed: false,
-  reportable_type: 'Message',
-  created_at: faker.date.recent().toISOString(),
-  reportable: {
-    id: 84,
-    content: faker.lorem.sentence(),
-    author: { full_name: faker.person.fullName() },
-    created_at: faker.date.recent().toISOString(),
-    upvotes: 10,
-    language: 'en',
-    status: 'pending'
-  },
-  author: {
-    full_name: faker.person.fullName()
-  },
-  position: {
-    id: 1,
-    name: 'Yes',
-    language: 'en',
-    translation_entries: []
-  }
-};
-
-const reportArgumentAccepted = {
-  ...reportArgumentPending,
-  is_processed: true,
-  reportable: {
-    ...reportArgumentPending.reportable,
-    status: 'rejected',
-    moderation_entry: {
-      status: 'rejected'
-    }
-  }
-};
-
-const reportArgumentRejected = {
-  ...reportArgumentPending,
-  is_processed: true,
-  reportable: {
-    ...reportArgumentPending.reportable,
-    author: { full_name: 'Jean Dupont' },
-    status: 'accepted',
-    moderation_entry: {
-      status: 'accepted'
-    }
-  }
-};
-
-const reportProposal = {
-  ...reportArgumentPending,
-  is_processed: true,
-  reportable_type: 'Proposal',
-  reportable: {
-    ...reportArgumentPending.reportable,
-    status: 'accepted'
-  }
-};
-
-const reportSuggestion = {
-  ...reportArgumentPending,
-  is_processed: true,
-  reportable_type: 'Group',
-  reportable: {
-    ...reportArgumentPending.reportable,
-    status: 'accepted',
-    name: faker.lorem.words(),
-    slug: faker.lorem.slug(),
-    score: faker.number.int(),
-    is_active: true,
-    messages_count: faker.number.int(),
-    is_published: false,
-    published_at: faker.date.recent().toISOString(),
-    debate_suggestion: {
-      id: faker.number.int(),
-      created_at: faker.date.recent().toISOString(),
-      expires_at: faker.date.future().toISOString(),
-      total_upvotes: 20,
-      total_downvotes: faker.number.int({ min: 0, max: 100 }),
-      is_accepted: false,
-      is_expired: false,
-      author: {
-        id: faker.number.int(),
-        full_name: faker.person.fullName(),
-        image_url: faker.image.avatarGitHub()
-      },
-      language: faker.helpers.arrayElement(['en', 'fr', 'es']),
-      translation_entries: [],
-      name: faker.lorem.words()
-    }
-  }
-};
-
-const reportWithPositions = {
-  id: 999,
-  classification: 'INCOHERENT',
-  description: faker.lorem.sentence(),
-  is_processed: true,
-  reportable_type: 'Message',
-  created_at: new Date().toISOString(),
-  reportable: {
-    id: 123,
-    content: faker.lorem.sentence(),
-    author: { full_name: 'Jean Jean' },
-    created_at: new Date().toISOString(),
-    upvotes: 5,
-    language: 'fr',
-    status: 'accepted',
-    position: {
-      id: 919,
-      name: 'Oui',
-      language: 'fr',
-      translation_entries: []
-    },
-    group: {
-      group_context: {
-        positions: [
-          { id: 919, name: 'Oui', language: 'fr', translation_entries: [] },
-          { id: 920, name: 'Non', language: 'fr', translation_entries: [] }
-        ]
-      }
-    }
-  }
-};
-
-const Providers = ({ children }) => (
-  <BrowserRouter>
-    <ConfigProvider config={config}>
-      <DataProviderContext.Provider value={{ dataProvider: data }}>
-        <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
-          <ResponsiveProvider>
-            <ModalProvider>
-              <ListProvider>
-                <ToastProvider>
-                  <VoteProvider>
-                    <InputProvider>
-                      <IconProvider library={regularIcons}>
-                        <IntlProvider locale='en'>{children}</IntlProvider>
-                      </IconProvider>
-                    </InputProvider>
-                  </VoteProvider>
-                </ToastProvider>
-              </ListProvider>
-            </ModalProvider>
-          </ResponsiveProvider>
-        </AuthContext.Provider>
-      </DataProviderContext.Provider>
-    </ConfigProvider>
-  </BrowserRouter>
-);
-
-export default {
-  title: 'Report/Report Box',
-  component: ReportBox,
-  argTypes: {
-    report: { control: 'object' }
-  },
-  render: (args) => (
-    <div style={{ width: '400px', height: '240px' }}>
-      <Providers>
-        <ReportBox {...args} />
-      </Providers>
-    </div>
-  )
-};
-
-export const ReportArgumentPending = {
-  args: {
-    report: reportArgumentPending
-  }
-};
-
-export const ReportArgumentRejected = {
-  args: {
-    report: reportArgumentRejected
-  }
-};
-
-export const ReportArgumentAccepted = {
-  args: {
-    report: reportArgumentAccepted
-  }
-};
-
-export const ReportProposal = {
-  args: {
-    report: reportProposal
-  }
-};
-
-export const ReportSuggestion = {
-  args: {
-    report: reportSuggestion
-  }
-};
-
-export const ReportWithPositions = {
-  args: {
-    report: reportWithPositions
-  }
-};