@logora/debate 0.1.0

package/src/components/list/paginated_list/action_bar/ActionBar.jsx

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import { Select } from '@logora/debate/input/select';
+import { SearchInput } from "@logora/debate/input/search_input";
+import { Tag } from '@logora/debate/tag/tag';
+import { Icon } from '@logora/debate/icons/icon';
+import { useIntl } from "react-intl";
+import { useLocation } from 'react-router';
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import cx from "classnames";
+import styles from "./ActionBar.module.scss";
+import PropTypes from "prop-types";
+
+export const ActionBar = ({ title, sortOptions, defaultSelectOption, searchBar = false, tagList, activeTagId, withUrlParams = false, onSearch, onSortChange, onTagChange }) => {
+    const intl = useIntl();
+    const location = useLocation();
+    const { isMobile } = useResponsive();
+    const [searchActive, setSearchActive] = useState(false);
+    const urlParams = new URLSearchParams(typeof window !== "undefined" ? window.location.search : location.search);
+
+    const handleSortChange = (selectOption) => {
+        if (withUrlParams) {
+            for (const key of urlParams.keys()) {
+                sortOptions.map((o) => {
+                    if (o.name === key) {
+                        urlParams.delete(key);
+                    }
+                })
+            }
+            urlParams.delete("sort");
+            urlParams.set(selectOption.type === "filter" ? selectOption.name : "sort", selectOption.value);
+        }
+        onSortChange(selectOption)
+    };
+
+    const handleActiveTag = (tag) => {
+        if (withUrlParams) {
+            if (tag.id === activeTagId) {
+                urlParams.delete("tagId");
+            } else {
+                urlParams.set("tagId", tag.id);
+            }
+        }
+        onTagChange(tag.id === activeTagId ? null : tag.id)
+    }
+
+    const handleSearch = (query) => {
+        if (withUrlParams) {
+            if (!query) {
+                urlParams.delete("search");
+            } else {
+                urlParams.set("search", query);
+            }
+        }
+        onSearch(query);
+        setSearchActive(query !== "");
+    }
+
+    const displayTags = (tag) => {
+        const tagIsActive = activeTagId === tag.id;
+        
+        return (
+            <div className={styles.tagItem} key={tag.id} onClick={() => handleActiveTag(tag)}>
+                <Tag text={tag.display_name} active={tagIsActive} rightIcon={tagIsActive && <Icon name="close" height={10} width={10} />} />
+            </div>
+        );
+    }
+
+    return (
+        <>
+            {(title || sortOptions || searchBar) && (
+                <>
+                    <div className={cx(styles.listHeader, { [styles.listHeaderOneItem]: (!searchBar || !sortOptions) })}>
+                        {title &&
+                            <div className={styles.listTitle}>{title}</div>
+                        }
+                        {(sortOptions || searchBar) &&
+                            <div className={cx(styles.rightBar, { [styles.rightBarOneItem]: (!searchBar || !sortOptions) })}>
+                                {searchBar ? (
+                                    <div className={styles.search}>
+                                        <SearchInput
+                                            onSearchSubmit={handleSearch}
+                                            placeholder={intl.formatMessage({ id: "info.search_mobile", defaultMessage: "Search" })}
+                                            reducedByDefault={false}
+                                        />
+                                    </div>
+                                ) : null}
+                                {sortOptions ? (
+                                    <Select
+                                        onChange={handleSortChange}
+                                        options={sortOptions}
+                                        defaultOption={defaultSelectOption}
+                                        horizontalPosition={"right"}
+                                        disabled={searchActive}
+                                        className={styles.select}
+                                    />
+                                ) : null}
+                            </div>
+                        }
+                    </div>
+                    {tagList && tagList.length > 0 &&
+                        <div className={styles.tagList}>
+                            {tagList.map(displayTags)}
+                        </div>
+                    }
+                </>
+            )}
+        </>
+    )
+}
+
+ActionBar.propTypes = {
+    /** The title of the list */
+    title: PropTypes.node,
+    /** An array of sort options to be displayed in a dropdown */
+    sortOptions: PropTypes.any,
+    /** Current selected option in filters */
+    defaultSelectOption: PropTypes.string,
+    /** If true, activate the search bar */
+    searchBar: PropTypes.bool,
+    /** A list of tags to filter the list */
+    tagList: PropTypes.array,
+    /** Current active tag id */
+    activeTagId: PropTypes.number,
+    /** Activate url params */
+    withUrlParams: PropTypes.bool,
+    /** Search callback */
+    onSearch: PropTypes.func,
+    /** Sort change callback */
+    onSortChange: PropTypes.func,
+    /** Tag change callback */
+    onTagChange: PropTypes.func
+};

package/src/components/list/paginated_list/action_bar/ActionBar.module.scss

@@ -0,0 +1,81 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+
+.listHeader {
+	display: flex;
+    justify-content: space-between;
+    align-items: center;
+	position: relative;
+    flex-wrap: wrap;
+    gap: spacing.$spacer;
+
+    @include display.media-breakpoint-down(xs) {
+        flex-direction: column;
+		align-items: flex-start;
+		&.listHeaderOneItem {
+			flex-direction: row;
+			align-items: center;
+            flex-wrap: nowrap !important; 
+		}
+    }
+}
+
+.listTitle {
+    font-size: theme.$font-size-extra-large;
+    line-height: theme.$line-height-tight;
+    font-weight: theme.$font-weight-bold;
+	font-family: theme.$title-font-family;
+}
+
+.rightBar {
+    display: flex;
+    gap: spacing.$spacer;
+    flex-wrap: wrap;
+    @include display.media-breakpoint-down(xs) {
+        width: 100%;
+        justify-content: space-between;
+		&.rightBarOneItem {
+			justify-content: flex-end;
+		}
+    }
+    flex: 1 1 auto; 
+    justify-content: flex-end;
+    align-items: center;
+    flex-direction: row;
+}
+
+.search {
+    flex: 1;
+    max-width: 35%;
+    @include display.media-breakpoint-down(xs) {
+        max-width: 80%;
+    }
+}
+
+.tagList {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	overflow-x: auto;
+    overflow-y: hidden;
+    gap: spacing.$spacer-md;
+    padding-bottom: spacing.$spacer-md;
+	@include display.media-breakpoint-down(xs) {
+		gap: spacing.$spacer-sm;
+    }
+}
+
+.tagItem {
+    display: flex !important;
+    color: theme.$text-secondary;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.select {
+	max-width: 300px;
+	@include display.media-breakpoint-down(xs) {
+		max-width: 300px;
+	}
+}

package/src/components/list/paginated_list/index.js

@@ -0,0 +1,3 @@
+export { PaginatedList } from './PaginatedList';
+export { ActionBar } from './action_bar/ActionBar';
+export { VotePaginatedList } from './VotePaginatedList';

package/src/components/list/pagination/Pagination.docs.mdx

@@ -0,0 +1,32 @@
+---
+description: A simple pagination component.
+labels: ['pagination', 'list']
+---
+
+A component that renders a button used to handle pagination of lists. 
+
+### Component usage
+
+```js
+    import { Pagination } from "@logora/debate.list.pagination";
+```
+```js
+    <Pagination
+        buttonText={"Next page"}
+        currentPage={1}
+        perPage={10}
+        totalElements={20}
+        onLoad={loadMoreElementsCallback}
+        isLoading={isLoadingVar}
+        hideLoader={false}
+    />
+```
+
+#### Props
+- `currentPage`: Number of the current page.
+- `perPage`: Number of elements per page.
+- `totalElements`: Number of elements in total.
+- `buttonText`: Text displayed on the button.
+- `onLoad`: Callback function triggered when clicking on the pagination button.
+- `isLoading`: Boolean to control the loading state.
+- `hideLoader`: If `true`, will not show the loader on load.

package/src/components/list/pagination/Pagination.jsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import { Loader } from '@logora/debate/progress/loader';
+import { Button } from '@logora/debate/action/button';
+import styles from './Pagination.module.scss';
+import PropTypes from "prop-types";
+import { Icon } from "@logora/debate/icons/icon";
+
+export const Pagination = ({ currentPage, perPage, totalElements, buttonText, onLoad, isLoading, hideLoader, ...rest }) => {
+    const [hasNextPage, setHasNextPage] = useState((currentPage * perPage) < totalElements)
+
+    useEffect(() => {
+        if (totalElements > 0) {
+            setHasNextPage((currentPage * perPage) < totalElements);
+        }
+    }, [totalElements, currentPage])
+    
+    return (
+        <>
+            { hasNextPage ? (
+                <div className={styles.paginationBox}>
+                    { !isLoading ? (
+                        <Button
+                            handleClick={onLoad} 
+                            {...rest}
+                            rightIcon={<Icon name="lightArrow" height={10} width={10} />}
+                        >
+                            { buttonText }
+                        </Button>
+                    ) : (
+                        hideLoader ?
+                            null
+                        :
+                            <Loader />
+                    )}
+                </div>
+            ) : null}
+        </>
+    );
+}
+
+Pagination.propTypes = {
+    /** Number of the current page */
+    currentPage: PropTypes.number,
+    /** Number of elements per page */
+    perPage: PropTypes.number,
+    /** Number of elements in total */
+    totalElements: PropTypes.number,
+    /** Text displayed on the button */
+    buttonText: PropTypes.string.isRequired,
+    /** Callback function triggered when clicking on the pagination button */
+    onLoad: PropTypes.func,
+    /** Boolean to control the loading state */
+    isLoading: PropTypes.bool,
+    /** If `true`, will not show the loader on load */
+    hideLoader: PropTypes.bool,
+    /** Extra props passed to the button */
+    rest: PropTypes.object
+};

package/src/components/list/pagination/Pagination.module.scss

@@ -0,0 +1,10 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+
+
+.paginationBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/list/pagination/Pagination.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Pagination } from './Pagination';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const noop = () => {};
+
+const meta = {
+    title: 'List/Pagination',
+    component: Pagination,
+    args: {
+        buttonText: 'Next page',
+        currentPage: 1,
+        perPage: 10,
+        totalElements: 20,
+        hideLoader: false,
+        isLoading: false,
+        onLoad: noop
+    },
+    argTypes: {
+        buttonText: { control: 'text' },
+        currentPage: { control: 'number' },
+        perPage: { control: 'number' },
+        totalElements: { control: 'number' },
+        hideLoader: { control: 'boolean' },
+        isLoading: { control: 'boolean' },
+        onLoad: { control: false }
+    },
+    render: (args) => (
+        <IconProvider library={regularIcons}>
+            <Pagination {...args} />
+        </IconProvider>
+    )
+};
+
+export default meta;
+
+export const DefaultPagination = {};
+
+export const LoadingElementsPagination = {
+  args: {
+    isLoading: true
+  }
+};

package/src/components/list/pagination/Pagination.test.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Pagination } from './Pagination';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const callback = vi.fn();
+
+describe('Pagination', () => {
+    it('should render with the correct text', () => {
+        const pagination = render(
+            <IconProvider library={regularIcons}>
+                <Pagination 
+                    buttonText={"Voir plus"} 
+                    currentPage={1}
+                    perPage={10}
+                    totalElements={20}
+                    hideLoader={false}
+                    isLoading={false}
+                    onLoad={callback}
+                />
+            </IconProvider>
+        );
+        const renderedPagination = pagination.getByText(/Voir plus/i);
+        expect(renderedPagination).toBeTruthy();
+    });
+    
+    it('should render loader when isLoading is true', () => {
+        render(
+            <IconProvider library={regularIcons}>
+                <Pagination 
+                    buttonText={"Voir plus"} 
+                    currentPage={1}
+                    perPage={10}
+                    totalElements={30}
+                    hideLoader={false}
+                    isLoading={true}
+                    onLoad={callback}
+                />
+            </IconProvider>
+        );
+        expect(screen.getByRole("status")).toBeTruthy()
+    });
+    
+    it('should call onLoad when clicked', () => {
+        const pagination = render(
+            <IconProvider library={regularIcons}>
+                <Pagination 
+                    buttonText={"Voir plus"} 
+                    currentPage={1}
+                    perPage={10}
+                    totalElements={20}
+                    hideLoader={false}
+                    isLoading={false}
+                    onLoad={callback}
+                />
+            </IconProvider>
+        );
+        const renderedPagination = pagination.getByText(/Voir plus/i);
+        fireEvent.click(renderedPagination);
+        expect(callback).toHaveBeenCalled();
+    });
+
+    it('should not show button if there is no next page', () => {
+        const pagination = render(
+            <IconProvider library={regularIcons}>
+                <Pagination 
+                    buttonText={"Voir plus"} 
+                    currentPage={2}
+                    perPage={10}
+                    totalElements={20}
+                    hideLoader={false}
+                    isLoading={false}
+                    onLoad={callback}
+                />
+            </IconProvider>
+        );
+        expect(screen.queryByText(/Voir plus/i)).toBeNull();
+    });
+});

package/src/components/list/pagination/index.js

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

package/src/components/modal/side_modal/SideModal.docs.mdx

@@ -0,0 +1,31 @@
+---
+description: A modal to select a position in a debate.
+labels: ["modal"]
+---
+
+import { SideModal } from "./SideModal";
+import { ModalProvider } from "@logora/debate.dialog.modal";
+
+A modal component that allows users to select a side in a debate.
+
+### Component usage
+
+```jsx
+import SideModal from '@logora/debate.modal.side_modal';
+
+<ModalProvider>
+  <SideModal
+    debateName="Example Debate"
+    debatePositions={[
+      { id: 1, name: "Position A" },
+      { id: 2, name: "Position B" },
+      { id: 3, name: "Position C" },
+    ]}
+    disabledPositions={[{ id: 1, name: "Position A" }]}
+    onChooseSide={(positionId) =>
+      console.log(`Selected position: ${positionId}`)
+    }
+    isNeutral={false}
+  />
+</ModalProvider>
+```

package/src/components/modal/side_modal/SideModal.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Modal, useModal } from "@logora/debate/dialog/modal";
+import { FormattedMessage } from "react-intl";
+import { Button } from '@logora/debate/action/button';
+import { Icon } from "@logora/debate/icons/icon";
+import { useTranslatedContent } from '@logora/debate/translation/translated_content';
+import PropTypes from "prop-types";
+import styles from "./SideModal.module.scss";
+
+export const SideModal = ({ modalTitle, onChooseSide, title, positions, disabledPositions, isNeutral = false }) => {
+    const { hideModal } = useModal();
+
+    const handleChoosePosition = (position) => {
+        hideModal();
+        onChooseSide(position);
+    };
+
+    return (
+        <Modal
+            data-vid={"side_modal"}
+            title={modalTitle}
+        >
+            <div className={styles.modalContent}>{title}</div>
+            { disabledPositions?.length > 0 && (
+                <div className={styles.argumentInputWarning}>
+                    <FormattedMessage
+                        id={"modal.side_modal.side_limit_short"}
+                        values={{ position: disabledPositions[0].name }}
+                        defaultMessage={"You have already reached the argument limit (10) for position {position}. You can support the other position."}
+                    />
+                </div>
+            )}
+            <div className={styles.modalActions}>
+                { positions.slice(0, 2).map((position) => {
+                    return (
+                        <Button
+                            data-tid={"action_choose_side"}
+                            key={position.id}
+                            className={styles.modalAction}
+                            onClick={() => handleChoosePosition(position.id)}
+                            disabled={disabledPositions && disabledPositions.filter((pos) => pos.id === position.id).length > 0}
+                        >
+                            { useTranslatedContent(position.name, position.language, "name", position.translation_entries).translatedContent }
+                        </Button>
+                    );
+                })}
+            </div>
+            { isNeutral && positions[2] && (
+                <div className={styles.neutralPosition}>
+                    <div className={styles.userChoice}>
+                        <FormattedMessage id={"modal.side_modal.neutral_position"} defaultMessage={"You support the position"} />
+                        <span className={styles.neutralPositionName}>{ useTranslatedContent(positions[2].name, positions[2].language, "name", positions[2].translation_entries).translatedContent }</span>
+                    </div>
+                    <FormattedMessage id={"modal.side_modal.neutral_position_change"} defaultMessage={"It is not possible to write an argument with this one. If you wish to participate in the debate, choose one of the positions displayed above."}/>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+SideModal.propTypes = {
+    /** Title of the modal */
+    modalTitle: PropTypes.string.isRequired,
+    /** Title displayed in the modal */
+    title: PropTypes.string.isRequired,
+    /** An array of objects containing the id and name of each position in the debate. */
+    positions: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            name: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+    /** An array of objects containing the id and name of each position that should be disabled. */
+    disabledPositions: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            name: PropTypes.string.isRequired,
+        })
+    ),
+    /** Whether to show a neutral position option in the modal. */
+    isNeutral: PropTypes.bool,
+    /** A callback function that will be called with the selected position id when a user chooses a side. */
+    onChooseSide: PropTypes.func.isRequired,
+};
+

package/src/components/modal/side_modal/SideModal.module.scss

@@ -0,0 +1,83 @@
+@use "styles/theme" as theme;
+@use "styles/spacing" as spacing;
+
+.modalContent {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-align: center;
+  @include spacing.my(2, xs);
+  @include spacing.p(0, xs);
+}
+
+.modalActions {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-wrap: wrap !important;
+  @include spacing.mt(2, xs);
+  @include spacing.p(0, xs);
+}
+
+.modalAction {
+  @include spacing.px(3, xs);
+  @include spacing.py(2, xs);
+  @include spacing.mx(1, xs);
+  @include spacing.mt(2, xs);
+}
+
+.modalActions .modalAction:first-child {
+  background-color: theme.$for-primary !important;
+  border-color: theme.$for-primary !important;
+
+  &:hover {
+    background-color: theme.$for-primary !important;
+    border-color: theme.$for-primary !important;
+  }
+}
+
+.modalActions .modalAction:nth-child(2) {
+  background-color: theme.$against-primary !important;
+  border-color: theme.$against-primary !important;
+  &:hover {
+    background-color: theme.$against-primary !important;
+    border-color: theme.$against-primary !important;
+  }
+}
+
+.modalActions .modalAction:nth-child(3) {
+  background-color: theme.$third-position-color-primary !important;
+  border-color: theme.$third-position-color-primary !important;
+
+  &:hover {
+    background-color: theme.$third-position-color-primary !important;
+    border-color: theme.$third-position-color-primary !important;
+  }
+}
+
+.argumentInputWarning {
+  font-size: theme.$font-size-small !important;
+  color: theme.$cancel-primary !important;
+  text-align: center;
+  @include spacing.mt(3, xs);
+}
+
+.neutralPosition {
+  @include spacing.mt(5, xs);
+  color: theme.$text-secondary;
+  font-size: theme.$font-size-small;
+  .userChoice {
+    @include spacing.mb(3, xs);
+  }
+  .neutralPositionName {
+    @include spacing.py(1, xs);
+    @include spacing.px(1.5, xs);
+    @include spacing.ml(1, xs);
+    color: theme.$third-position-color-primary;
+    border-color: theme.$third-position-color-primary;
+    border: 1px solid;
+    border-radius: theme.$box-border-radius;
+  }
+}