@logora/debate 0.1.0

package/src/components/progress/progress_bar/ProgressBar.module.scss

@@ -0,0 +1,87 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/flex' as flex;
+
+.progressContainer {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100%;
+}
+
+.titleContainer {
+    display: flex !important;
+    @include flex.flex-direction(column, xs);
+    @include flex.flex-direction(row, sm);
+}
+
+.title {
+    width: 100%;
+    font-weight: theme.$font-weight-bold;
+}
+
+.subtitleContainer {
+    width: 100%;
+    text-align: right;
+}
+
+.progressSubtitle {
+    @include spacing.mr(1, xs);
+    color: theme.$text-secondary;
+    font-size: theme.$font-size-small;
+}
+
+.progressBarContainer { 
+    position: relative;
+    background: theme.$background-color-secondary;
+    border-radius: theme.$box-border-radius !important;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.currentProgressBar {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+    white-space: nowrap;
+    color: theme.$text-light;
+    -webkit-transition: width 1.2s ease !important;
+    transition: width 1.2s ease !important;
+}
+
+.progressBar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
+    background-color: theme.$call-primary;
+    border-radius: theme.$box-border-radius !important;
+    height: 100%;
+    color: theme.$text-light;
+    animation: progressBarAnimation 1.2s ease;
+    animation-fill-mode:both; 
+    -webkit-animation: progressBarAnimation 1.2s ease;
+    -webkit-animation-fill-mode:both; 
+    -moz-animation: progressBarAnimation 1.2s ease;
+    -moz-animation-fill-mode:both; 
+}
+
+.progressBarContent {
+    text-align: left;
+    @include spacing.pl(2, xs);
+    color: theme.$text-light;
+    font-size: theme.$font-size-normal;
+    font-weight: theme.$font-weight-normal;
+    min-height: 0.5em;
+}
+
+@keyframes progressBarAnimation {
+    0% { width: 0; }
+    100% { width: 100%; }
+}

package/src/components/progress/progress_bar/ProgressBar.stories.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { ProgressBar } from './ProgressBar';
+
+export default {
+  title: 'Progress/Progress Bar',
+  component: ProgressBar,
+  args: {
+    progress: 25,
+    goal: 100,
+    title: '',
+    showPercentageSubtitle: false,
+    showProgressSubtitle: false,
+    barFull: false,
+    progressUnit: 'votes',
+    content: 'Nice progress !'
+  },
+  argTypes: {
+    progress: { control: 'number' },
+    goal: { control: 'number' },
+    title: { control: 'text' },
+    showPercentageSubtitle: { control: 'boolean' },
+    showProgressSubtitle: { control: 'boolean' },
+    barFull: { control: 'boolean' },
+    progressUnit: { control: 'text' },
+    content: { control: 'text' }
+  },
+  render: ({ content, ...args }) => (
+    <IntlProvider locale='en'>
+      <ProgressBar {...args}>{content || null}</ProgressBar>
+    </IntlProvider>
+  )
+};
+
+export const DefaultProgressBar = {};
+
+export const FullBar = {
+  args: {
+    progress: 100,
+    barFull: true,
+    showProgressSubtitle: true
+  }
+};

package/src/components/progress/progress_bar/ProgressBar.test.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { ProgressBar } from './ProgressBar';
+
+describe('ProgressBar', () => {
+    it('should render progressBar with children', () => {
+        const progressBar = render(
+            <IntlProvider locale="en">
+                <ProgressBar
+                    progress={25}
+                    goal={100}
+                    className={"myClass"}
+                    innerClassName={"myInnerClass"}
+                    subtitleClassName={"subtitleClassName"}
+                >
+                    My progress bar
+                </ProgressBar>
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("My progress bar")).toBeTruthy();
+        expect(screen.getByRole("progressbar")).toBeTruthy();
+    });
+
+    it('should render progressBar with title', () => {
+        const progressBar = render(
+            <IntlProvider locale="en">
+                <ProgressBar
+                    progress={25}
+                    goal={100}
+                    title={"Title"}
+                >
+                    My progress bar
+                </ProgressBar>
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("Title")).toBeTruthy();
+        expect(screen.getByText("My progress bar")).toBeTruthy();
+        expect(screen.getByRole("progressbar")).toBeTruthy();
+    });
+
+    it('should render progressBar with progress subtitle', () => {
+        const progressBar = render(
+            <IntlProvider locale="en">
+                <ProgressBar
+                    progress={25}
+                    goal={100}
+                    showProgressSubtitle={true}
+                    progressUnit={"votes"}
+                />
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("25 / 100 votes (25%)")).toBeTruthy();
+        expect(screen.getByRole("progressbar")).toBeTruthy();
+    });
+
+    it('should render progressBar with progress subtitle without unit', () => {
+        const progressBar = render(
+            <IntlProvider locale="en">
+                <ProgressBar
+                    progress={25}
+                    goal={100}
+                    showProgressSubtitle={true}
+                />
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("25 / 100 (25%)")).toBeTruthy();
+        expect(screen.getByRole("progressbar")).toBeTruthy();
+    });
+
+    it('should render progressBar with full progress subtitle', () => {
+        const progressBar = render(
+            <IntlProvider locale="en">
+                <ProgressBar
+                    progress={25}
+                    goal={100}
+                    showProgressSubtitle={true}
+                    barFull={true}
+                    progressUnit={"votes"}
+                />
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("25 votes")).toBeTruthy();
+        expect(screen.getByRole("progressbar")).toBeTruthy();
+    });
+
+    it('should render progressBar with percentage subtitle', () => {
+        const progressBar = render(
+            <IntlProvider locale="en">
+                <ProgressBar
+                    progress={25}
+                    goal={100}
+                    showPercentageSubtitle={true}
+                />
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("25%")).toBeTruthy();
+        expect(screen.getByRole("progressbar")).toBeTruthy();
+    });
+
+    it('should render progressBar even if goal is 0', () => {
+        const progressBar = render(
+            <IntlProvider locale="en">
+                <ProgressBar
+                    progress={25}
+                    goal={0}
+                    title={"Title"}
+                    showPercentageSubtitle={true}
+                >
+                    My progress bar
+                </ProgressBar>
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("Title")).toBeTruthy();
+        expect(screen.getByText("My progress bar")).toBeTruthy();
+        expect(screen.getByRole("progressbar")).toBeTruthy();
+        expect(screen.getByText("0%")).toBeTruthy();
+    });
+});

package/src/components/progress/progress_bar/index.js

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

package/src/components/proposal/proposal_box/ProposalBox.docs.mdx

@@ -0,0 +1,39 @@
+---
+description: A component that renders a proposal box.
+---
+
+import { ProposalBox } from './ProposalBox';
+
+A component that renders a proposal box. 
+
+### Component usage
+```js
+import { ProposalBox } from '@logora/debate.proposal.proposal_box';
+```
+```js
+ <BrowserRouter>
+        <ConfigProvider routes={{ ...routes }} config={{ translation: { enable: true } }}>
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+                    <ResponsiveProvider>
+                        <ModalProvider>
+                            <ListProvider>
+                                <ToastProvider>
+                                    <VoteProvider>
+                                        <InputProvider>
+                                            <IconProvider library={regularIcons}>
+                                                <IntlProvider locale="en">
+                                                       <Proposal proposal={taggedProposal}/>
+                                                </IntlProvider>
+                                            </IconProvider>
+                                        </InputProvider>
+                                    </VoteProvider>
+                                </ToastProvider>
+                            </ListProvider>
+                        </ModalProvider>
+                    </ResponsiveProvider>
+                </AuthContext.Provider>
+            </DataProviderContext.Provider>
+        </ConfigProvider>
+    </BrowserRouter>
+```

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

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
+import { useTranslatedContent } from '@logora/debate/translation/translated_content';
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { ContentHeader } from '@logora/debate/user_content/content_header';
+import { ReadMore } from "@logora/debate/text/read_more";
+import { lexicalToHtml } from "@logora/debate/input/text_editor";
+import { HashScroll } from '@logora/debate/tools/hash_scroll';
+import { TranslationButton } from "@logora/debate/translation/translation_button";
+import { ContentFooter } from '@logora/debate/user_content/content_footer';
+import { useConfig } from '@logora/debate/data/config_provider';
+import { UpDownVoteBox } from "@logora/debate/vote/up_down_vote_box";
+import cx from "classnames";
+import styles from './ProposalBox.module.scss';
+
+export const ProposalBox = ({ proposal, disabled = false, fixedContentHeight, contentMaxHeight = 156, enableEdition = true, hideFooter = false }) => {
+    const [richContent, setRichContent] = useState(null);
+    const [flash, setFlash] = useState(false);
+    const intl = useIntl();
+    const config = useConfig();
+    const { currentUser } = useAuth();
+    const userIsBanned = currentUser?.moderation_status === "banned";
+    const proposalId = `proposal_${proposal.id}`;
+    const title = useTranslatedContent(proposal.title, proposal.language, "title", proposal.translation_entries);
+    const content = useTranslatedContent(proposal.content, proposal.language, "content", proposal.translation_entries);
+
+    useEffect(() => {
+        if (proposal.rich_content) {
+            const rawContent = JSON.parse(proposal.rich_content);
+            if (rawContent.hasOwnProperty("root")) {
+                const html = lexicalToHtml(rawContent);
+                setRichContent(html);
+            }
+        }
+    }, [proposal.rich_content]);
+
+    const resetTranslations = () => {
+        title.toggleContent();
+        content.toggleContent();
+    }
+
+    return (
+        <HashScroll elementId={proposalId} onScroll={() => setFlash(true)}>
+            <div className={cx(styles.proposalBoxContainer, { [styles.flash]: flash })} id={proposalId}>
+                <ContentHeader
+                    author={proposal.author}
+                    tag={proposal.tag?.display_name}
+                    date={proposal.created_at}
+                    oneLine={false}
+                />
+                <div className={cx(styles.proposalBoxContent, { [styles.fixedHeight]: fixedContentHeight })}>
+                    <div>
+                        <ReadMore
+                            content={
+                                <>
+                                    {proposal.is_edited && <div className={styles.edited}>{intl.formatMessage({ id: "proposal.updated", defaultMessage: "Updated proposal" })}</div>}
+                                    <div className={styles.proposalTitle}>
+                                        {title.translatedContent}
+                                    </div>
+                                    {richContent && !content.isTranslated ? (
+                                        <div className={styles.proposalContent}
+                                            // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+                                            dangerouslySetInnerHTML={{ __html: richContent }}
+                                        />
+                                    ) : (
+                                        <div className={styles.proposalContent}>{content.translatedContent}</div>
+                                    )}
+                                    {(content.isTranslated || title.isTranslated) &&
+                                        <TranslationButton language={proposal.language} callback={() => resetTranslations()} />
+                                    }
+                                </>
+                            }
+                            lineCount={7}
+                            readMoreText={intl.formatMessage({ id: "action.read_more", defaultMessage: "Read more" })}
+                            readLessText={intl.formatMessage({ id: "action.read_less", defaultMessage: "Read less" })}
+                        />
+                    </div>
+                </div>
+                {!hideFooter &&
+                    <ContentFooter
+                        resource={proposal}
+                        disabled={disabled || userIsBanned}
+                        reportType={"Proposal"}
+                        deleteType={"proposals"}
+                        deleteListId={"proposalsList"}
+                        shareModal
+                        shareModalTitle={intl.formatMessage({ id: "share.proposal" })}
+                        shareUrl={`https://app.logora.fr/share/p/${proposal.id}`}
+                        shareTitle={intl.formatMessage({ id: "share.proposal.title" })}
+                        shareText={intl.formatMessage({ id: "share.proposal.text" })}
+                        shareCode={`<iframe src="https://cdn.logora.com/embed.html?shortname=${config.shortname}&id=${proposal.id}&resource=proposal" frameborder="0" width="100%" height="335px" scrolling="no"></iframe>`}
+                        showShareCode={config?.actions?.hideCodeShare !== true}
+                        showActions={!proposal.author.consultation_id}
+                        enableEdition={enableEdition}
+                    >
+                        <UpDownVoteBox
+                            voteableType={"Proposal"}
+                            voteableId={proposal.id}
+                            totalUpvote={proposal.total_upvotes}
+                            totalDownvote={proposal.total_downvotes}
+                            disabled={disabled || (currentUser?.id === proposal?.author?.id) || userIsBanned}
+                        />
+                    </ContentFooter>
+                }
+            </div>
+        </HashScroll>
+    )
+}

package/src/components/proposal/proposal_box/ProposalBox.module.scss

@@ -0,0 +1,80 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.proposalBoxContainer {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    position: relative;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    color: theme.$text-primary;
+    border-radius: theme.$box-border-radius;
+    background-color: theme.$background-color-primary;
+    scroll-margin-top: 150px;
+    padding: spacing.$box-spacing;
+    gap: spacing.$box-spacing;
+
+    &.flash {
+        -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: 0 0 15px theme.$call-primary;
+    }
+}
+
+.edited {
+    font-size: theme.$font-size-extra-small;
+    color: theme.$text-secondary;
+    line-height: theme.$line-height-loose;
+    @include spacing.mb(1.5, xs);
+}
+
+.proposalBoxContent {
+    font-size: theme.$font-size-small;
+    text-align: left;
+    white-space: pre-line;
+    line-height: theme.$line-height-loose;
+    font-size: theme.$font-size-small;
+
+    @include display.media-breakpoint-up(md) {
+        min-height: 185px;
+    }
+
+    .proposalTitle {
+        font-size: theme.$font-size-normal;
+        font-weight: theme.$font-weight-bold;
+        @include spacing.pb(2, xs);
+
+        &::first-letter {
+            text-transform: uppercase;
+        }
+    }
+
+    .proposalContent {
+        & * {
+            font-size: theme.$font-size-small;
+        }
+    }
+}
+
+.fixedHeight {
+    height: 200px;
+    overflow: hidden;
+    position: relative;
+
+    &:after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
+        width: 100%;
+        height: 5em;
+    }
+}

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { BrowserRouter } from 'react-router-dom';
+import { Location } from '@logora/debate/util/location';
+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 * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+import { ProposalBox } from './ProposalBox';
+
+const routes = {
+  userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+
+const vote = {
+  id: faker.number.int(),
+  voteable_type: faker.lorem.word(),
+  voteable_id: faker.number.int(),
+  user_id: faker.number.int()
+};
+
+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 currentUser = { id: vote.user_id };
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+const generateProposal = (overrides = {}) => ({
+  id: faker.number.int(),
+  title: faker.lorem.sentence(),
+  content: faker.lorem.paragraphs(2),
+  created_at: faker.date.recent(),
+  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()
+  },
+  ...overrides
+});
+
+const proposal = generateProposal();
+const longProposal = generateProposal({
+  content: faker.lorem.paragraphs(5),
+  title: faker.lorem.sentences(2)
+});
+const editedProposal = generateProposal({ edited_at: faker.date.recent() });
+const proposalWithTag = generateProposal({
+  tag: {
+    display_name: faker.lorem.word(),
+    color: faker.color.rgb()
+  }
+});
+const authoredProposal = generateProposal({
+  author: {
+    id: currentUser.id,
+    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()
+  }
+});
+
+const Providers = ({ children }) => (
+  <BrowserRouter>
+    <ConfigProvider routes={{ ...routes }} config={{ translation: { enable: true } }}>
+      <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: 'Proposal/Proposal Box',
+  component: ProposalBox,
+  argTypes: {
+    proposal: { control: 'object' },
+    containerWidth: { control: 'text' },
+    containerHeight: { control: 'text' }
+  },
+  args: {
+    proposal,
+    containerWidth: '400px',
+    containerHeight: '240px'
+  },
+  render: ({ containerWidth, containerHeight, ...args }) => (
+    <div style={{ width: containerWidth, height: containerHeight }}>
+      <Providers>
+        <ProposalBox {...args} />
+      </Providers>
+    </div>
+  )
+};
+
+export const DefaultProposal = {};
+
+export const LongProposal = {
+  args: {
+    proposal: longProposal,
+    containerHeight: 'auto'
+  }
+};
+
+export const EditedProposal = {
+  args: {
+    proposal: editedProposal
+  }
+};
+
+export const ProposalWithTag = {
+  args: {
+    proposal: proposalWithTag
+  }
+};
+
+export const OwnProposal = {
+  args: {
+    proposal: authoredProposal
+  }
+};