@logora/debate 0.1.0 → 0.2.0

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

@@ -1,132 +0,0 @@
-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

@@ -1,81 +0,0 @@
-@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

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

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

@@ -1,32 +0,0 @@
----
-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

@@ -1,58 +0,0 @@
-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

@@ -1,10 +0,0 @@
-@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

@@ -1,44 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

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

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

@@ -1,31 +0,0 @@
----
-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

@@ -1,85 +0,0 @@
-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

@@ -1,83 +0,0 @@
-@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;
-  }
-}