@logora/debate 0.1.0 → 0.1.1

package/src/components/debate/debate_box/DebateBox.module.scss

@@ -1,209 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-@use 'styles/display' as display;
-
-.debateBox {
-  position: relative;
-  font-size: theme.$font-size-normal;
-  border: theme.$box-border;
-  box-shadow: theme.$box-shadow;
-  border-radius: theme.$box-border-radius;
-  background-color: theme.$background-color-primary;
-  @include spacing.m(0, xs);
-  @include spacing.p(0, xs);
-}
-
-.imageLink {
-  display: block !important;
-}
-
-.debateBoxImage {
-  width: 100%;
-  aspect-ratio: theme.$img-aspect-ratio;
-  object-fit: cover;
-  cursor: pointer;
-  border-top-right-radius: theme.$box-border-radius;
-  border-top-left-radius: theme.$box-border-radius;
-}
-
-.debateBoxImageBox {
-  position: relative;
-}
-
-.debateSuggestion {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  position: absolute;
-  gap: spacing.$spacer-xxs;
-  right: spacing.$spacer;
-  top: spacing.$spacer;
-  @include spacing.px(2.5, xs);
-  @include spacing.py(2, xs);
-  background-color: theme.$call-primary;
-  border-radius: theme.$box-border-radius;
-  max-width: 80%;
-  font-size: theme.$font-size-small;
-  span {
-    color: theme.$text-light;
-    font-size: theme.$font-size-extra-small;
-  }
-  .authorSuggestion {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 93%;
-  }
-  .authorName {
-    @include spacing.ml(1, xs);
-  }
-  svg {
-    fill: theme.$text-light;
-  }
-}
-
-.inactiveDebate {
-  @extend .debateSuggestion;
-  top: unset;
-  left: spacing.$spacer;
-  bottom: spacing.$spacer;
-  right: unset;
-  color: theme.$text-light;
-  @include spacing.px(2.5, xs);
-  @include spacing.py(2, xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  max-width: 93%;
-  font-size: theme.$font-size-normal;
-}
-
-.debateBoxBody {
-  display: flex;
-  flex-direction: column;
-  gap: spacing.$box-spacing;
-  padding: spacing.$box-spacing;
-}
-
-.subApplication {
-  > img {
-    height: 20px;
-    @include spacing.mr(2, xs);
-  }
-  @include spacing.mb(3, xs);
-  color: theme.$text-secondary;
-  font-size: theme.$font-size-extra-small;
-  display: flex;
-  align-items: center;
-}
-
-.debateBoxTitle {
-  font-size: theme.$font-size-medium;
-  font-family: theme.$box-title-font-family;
-}
-
-.debateBoxTitle {
-  font-weight: theme.$font-weight-bold;
-  min-height: 2.7em;
-  line-height: theme.$line-height-normal;
-  a {
-    color: theme.$text-primary;
-    &:hover{
-      color: theme.$text-primary;
-      text-decoration: underline;
-    }
-  }
-}
-
-.debateTitle {
-  display: block;
-  @include display.line-clamp(2);
-  font-size: theme.$font-size-medium;
-  line-height: theme.$line-height-normal;
-  &.debateTitleMobile{
-    -webkit-line-clamp: 3;
-  }
-}
-
-.debateBoxFooter {
-  font-size: theme.$font-size-extra-small !important;
-  justify-content: space-between;
-  min-height: 40px;
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: center !important;
-  @include spacing.p(0, xs);
-  width: 100% !important;
-}
-
-.debateBoxFooter svg {
-  fill: theme.$text-primary;
-}
-
-.debateParticipantsBox {
-  display: flex !important;
-  flex-direction: row !important;
-  @include spacing.p(0, xs);
-}
-
-.debateParticipantsEmpty {
-  font-style: italic;
-  font-size: theme.$font-size-extra-small;
-}
-
-.debateParticipantItem {
-  margin-right: -0.5em !important;
-  cursor: pointer;
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  z-index: 1;
-}
-
-.debateBoxNumbers {
-  font-size: theme.$font-size-normal;
-  line-height: theme.$line-height-none;
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: flex-end !important;
-  justify-content: flex-end !important;
-  @include spacing.p(0, xs);
-  min-width: 0;
-  flex: 1;
-}
-
-.debateBoxNumbersText {
-  @include spacing.ml(3, xs);
-  display: flex !important;
-  align-items: baseline !important;
-  line-height: theme.$line-height-loose;
-  min-width: 0;
-  justify-content: flex-end !important;
-}
-
-.debateBoxPercentage {
-  flex-shrink: 0;
-  white-space: nowrap;
-  @include spacing.mr(1, xs);
-}
-
-.debateBoxPositionName {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.participantsCountBox {
-  min-width: 40px;
-  width: 40px;
-  height: 40px;
-  background: theme.$background-color-secondary;
-  border-radius: 50%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  color: theme.$text-primary;
-  font-size: theme.$font-size-extra-small;
-  line-height: theme.$line-height-tight;
-}

package/src/components/debate/debate_box/DebateBox.stories.jsx

@@ -1,157 +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 { IconProvider } from '@logora/debate/icons/icon_provider';
-import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
-import { DebateBox } from './DebateBox';
-import { Location } from '@logora/debate/util/location';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-import { faker } from '@faker-js/faker';
-
-let UserShowLocation = new Location('espace-debat/user/:userSlug', { userSlug: "" });
-let DebateShowLocation = new Location('espace-debat/group/:debateSlug', { debateSlug: "" });
-
-const routes = {
-    userShowLocation: UserShowLocation,
-    debateShowLocation: DebateShowLocation
-};
-
-const createUser = () => {
-    return {
-        id: faker.number.int(10000000),
-        hash_id: faker.lorem.slug(),
-        first_name: faker.person.firstName(),
-        last_name: faker.person.lastName(),
-        slug: faker.lorem.slug(),
-        image_url: faker.image.avatarGitHub(),
-        full_name: faker.person.fullName(),
-        description: null,
-        last_activity: faker.date.recent(),
-        role: 'contributor',
-        is_admin: false,
-        points: 41,
-        eloquence_title: null,
-        occupation: null
-    };
-};
-
-const participants = Array.from([1, 2, 3, 4, 5], () => createUser());
-
-const debate = {
-    id: 243,
-    name: faker.music.songName(),
-    slug: faker.lorem.slug(),
-    description: null,
-    created_at: faker.date.recent(),
-    score: 0,
-    image_url: faker.image.url(),
-    banner_image_url: faker.image.url(),
-    votes_count: {
-        655: '2',
-        656: '6',
-        657: '0'
-    },
-    participants_count: 5,
-    group_context: {
-        id: 273,
-        name: faker.music.songName(),
-        created_at: faker.date.recent(),
-        positions: [
-            {
-                id: 655,
-                name: 'Oui',
-                language: 'en',
-                translation_entries: []
-            },
-            {
-                id: 656,
-                name: 'Non',
-                language: 'en',
-                translation_entries: []
-            },
-            {
-                id: 657,
-                name: 'Sans opinion',
-                language: 'en',
-                translation_entries: []
-            }
-        ],
-        author: createUser()
-    },
-    participants: participants,
-    language: 'en',
-    translation_entries: [],
-    sub_application: {
-        logo: 'https://pbs.twimg.com/profile_images/1608100070754238467/NXpjW55F_400x400.jpg',
-        name: 'Test Ocean'
-    }
-};
-
-const debateWithLongPositionNames = {
-    ...debate,
-    name: 'Should Germany strengthen its defense capabilities given current geopolitical tensions?',
-    group_context: {
-        ...debate.group_context,
-        positions: [
-            {
-                id: 655,
-                name: 'Yes, Germany should significantly increase defense spending and military capabilities',
-                language: 'en',
-                translation_entries: []
-            },
-            {
-                id: 656,
-                name: 'No, Germany should maintain current defense levels and focus on diplomacy',
-                language: 'en',
-                translation_entries: []
-            },
-            {
-                id: 657,
-                name: 'Undecided on this complex geopolitical matter',
-                language: 'en',
-                translation_entries: []
-            }
-        ]
-    }
-};
-
-const meta = {
-    title: 'Debate/Debate Box',
-    component: DebateBox,
-    args: {
-        debate,
-        allowDebateBranding: false
-    },
-    argTypes: {
-        debate: {
-            control: 'object'
-        },
-        allowDebateBranding: {
-            control: 'boolean'
-        }
-    },
-    render: ({ debate, allowDebateBranding }) => (
-        <BrowserRouter>
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ResponsiveProvider>
-                        <ConfigProvider routes={{ ...routes }} config={{ modules: {}, actions: { allowDebateBranding } }}>
-                            <DebateBox debate={debate} />
-                        </ConfigProvider>
-                    </ResponsiveProvider>
-                </IconProvider>
-            </IntlProvider>
-        </BrowserRouter>
-    )
-};
-
-export default meta;
-
-const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
-
-export const DefaultDebateBox = (props) => renderStory(props);
-
-export const BrandedDebateBox = (props) => renderStory({ allowDebateBranding: true, ...props });
-
-export const DebateBoxWithLongAnswers = (props) => renderStory({ debate: debateWithLongPositionNames, ...props });

package/src/components/debate/debate_box/DebateBox.test.jsx

@@ -1,117 +0,0 @@
-import React from "react";
-import { DefaultDebateBox } from './DebateBox.stories';
-import { render } from '@testing-library/react';
-import { faker } from '@faker-js/faker';
-
-const createUser = () => {
-	return {
-		id: faker.number.int(10000000),
-		hash_id: faker.lorem.slug(),
-		first_name: faker.person.firstName(),
-		last_name: faker.person.lastName(),
-		slug: faker.lorem.slug(),
-		image_url: faker.image.avatarGitHub(),
-		full_name: faker.person.fullName(),
-		description: null,
-		last_activity: faker.date.recent(),
-		role: "contributor",
-		is_admin: false,
-		points: 41,
-		eloquence_title: null,
-		occupation: null
-	};
-};
-
-const participants = Array.from([1, 2, 3], s => createUser());
-
-const debate = {
-	id: 243,
-	name: faker.music.songName(),
-	slug: faker.lorem.slug(),
-	description: null,
-	created_at: faker.date.recent(),
-	score: 0,
-	image_url: faker.image.url(),
-	banner_image_url: faker.image.avatarGitHub(),
-	votes_count: {
-		655: "2",
-		656: "6",
-		657: "0"
-	},
-	participants_count: 3,
-	group_context: {
-		id: 273,
-		name: faker.music.songName(),
-		created_at: faker.date.recent(),
-		positions: [
-			{
-				id: 655,
-				name: "Oui",
-				language: "en",
-				translation_entries: []
-			},
-			{
-				id: 656,
-				name: "Non",
-				language: "fr",
-    			translation_entries: []
-			},
-			{
-				id: 657,
-				name: "Sans opinion",
-				language: "es",
-    			translation_entries: []
-			}
-		],
-		author: createUser()
-	},
-	participants: participants,
-	language: "en",
-    translation_entries: []
-}
-
-describe('DebateBox', () => {
-	it ('renders DebateBox component', () => {
-		const { getByText } = render(<DefaultDebateBox debate={debate} />);
-		expect(getByText(debate.name)).toBeInTheDocument();
-		expect(getByText(/75/)).toBeTruthy();
-		expect(getByText(/Non/)).toBeTruthy();
-	});
-
-	it ('renders DebateBox with correct links', () => {
-		const { getByText } = render(<DefaultDebateBox  debate={debate} />);
-		expect(getByText(debate.name).closest('a')).toHaveAttribute('href', '/espace-debat/group/' + debate.slug)
-	});
-
-	it ('renders DebateBox with long position names without breaking layout', () => {
-		const debateWithLongNames = {
-			...debate,
-			group_context: {
-				...debate.group_context,
-				positions: [
-					{
-						id: 655,
-						name: "This is a very long answer option that should be truncated properly with ellipsis",
-						language: "en",
-						translation_entries: []
-					},
-					{
-						id: 656,
-						name: "Another extremely long position name that would normally break the layout of the debate card",
-						language: "fr",
-						translation_entries: []
-					},
-					{
-						id: 657,
-						name: "Short",
-						language: "es",
-						translation_entries: []
-					}
-				]
-			}
-		};
-		const { container } = render(<DefaultDebateBox debate={debateWithLongNames} />);
-		const numberText = container.querySelector('.debateBoxNumbersText');
-		expect(numberText).toBeInTheDocument();
-	});
-});

package/src/components/debate/debate_box/index.js

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

package/src/components/dialog/announcement_dialog/AnnouncementDialog.docs.mdx

@@ -1,24 +0,0 @@
----
-description: A component to display an announcement message.
-labels: ['announcement', 'dialog']
----
-
-A component that shows a message with icon. Icon and content can be customized.
-
-It should be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
-
-### Component usage
-
-```js
-import { AnnouncementDialog } from '@logora/debate.dialog.announcement_dialog';
-```
-
-```js
-<AnnouncementDialog 
-    icon={Icon}
-    message={"Your text"}
-    fullWidth={true}
-    className={classNameToPass}
-    iconClassName={iconClassNameToPass}
-/>
-```

package/src/components/dialog/announcement_dialog/AnnouncementDialog.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Icon } from '@logora/debate/icons/icon';
-import cx from 'classnames';
-import styles from './AnnouncementDialog.module.scss';
-import PropTypes from "prop-types";
-
-export const AnnouncementDialog = ({ message, icon: CustomIcon, fullWidth = false, className, iconClassName, children }) => {
-    return (
-        <div className={cx(styles.container, className, {[styles.fullWidth]: fullWidth})} role="status">
-            <div className={cx(styles.icon, iconClassName)}>
-                { CustomIcon ?
-                    <CustomIcon height={24} width={24} data-testid={"custom-icon"} />
-                :
-                    <Icon name="announcement" height={24} width={24} aria-hidden="true" data-testid={"announcement-icon"} />
-                }
-            </div>
-            <div className={styles.content}>
-                { message ? message : children }
-            </div>
-        </div>
-    )
-}
-
-AnnouncementDialog.propTypes = {
-    /** Icon to display */
-    icon: PropTypes.any,
-    /** Message to display */
-    message: PropTypes.string,
-    /** If `true`, dialog will take 100% width */
-    fullWidth: PropTypes.bool,
-    /** Class name passed to the dialog */
-    className: PropTypes.string,
-    /** Class name passed to the icon */
-    iconClassName: PropTypes.string,
-    /** Content to display if message is empty */
-    children: PropTypes.node,
-};

package/src/components/dialog/announcement_dialog/AnnouncementDialog.module.scss

@@ -1,35 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.container {
-    display: flex !important;
-    width: fit-content;
-    border-radius: theme.$box-border-radius;
-    box-shadow: theme.$box-shadow;
-    border: theme.$box-border;
-    background: theme.$background-color-primary;
-    &.fullWidth {
-        width: 100%;
-    }
-}
-
-.icon {
-    display: flex !important;
-    align-items: center !important;
-    @include spacing.p(3, xs);
-    background-color: theme.$call-primary;
-    border-radius: theme.$box-border-radius 0 0 theme.$box-border-radius;
-    svg {
-        fill: transparent;
-        path {
-            fill: theme.$text-light;
-        }
-        circle {
-            stroke: theme.$text-light;
-        }
-    }
-}
-
-.content {
-    @include spacing.p(3, xs);
-}

package/src/components/dialog/announcement_dialog/AnnouncementDialog.stories.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { AnnouncementDialog } from './AnnouncementDialog';
-import HomeIcon from './HomeIcon.dev';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export default {
-    title: 'Dialog/Announcement Dialog',
-    component: AnnouncementDialog,
-    args: {
-        message: 'An announcement message !',
-        fullWidth: false,
-        useCustomIcon: false
-    },
-    argTypes: {
-        message: { control: 'text' },
-        fullWidth: { control: 'boolean' },
-        useCustomIcon: { control: 'boolean' }
-    },
-    render: ({ useCustomIcon, ...args }) => (
-        <IconProvider library={regularIcons}>
-            <AnnouncementDialog
-                {...args}
-                icon={useCustomIcon ? HomeIcon : undefined}
-            />
-        </IconProvider>
-    )
-};
-
-export const DefaultAnnouncementDialog = {};
-
-export const AnnouncementDialogCustomIcon = {
-    args: {
-        useCustomIcon: true,
-        message: 'An announcement message width custom icon !'
-    }
-};
-
-export const AnnouncementDialogFullWidth = {
-    args: {
-        fullWidth: true,
-        message: 'An announcement message with full width !'
-    }
-};

package/src/components/dialog/announcement_dialog/AnnouncementDialog.test.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { AnnouncementDialog } from './AnnouncementDialog';
-import { Announcement } from '@logora/debate/icons/regular_icons';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-describe('AnnouncementDialog', () => {
-    it('should render with the correct text', () => {
-        const dialog = render(
-            <IconProvider library={regularIcons}>
-                <AnnouncementDialog 
-                    message={"An announcement message !"}
-                />
-            </IconProvider>
-        );
-        expect(screen.getByText("An announcement message !")).toBeTruthy();
-        expect(dialog.getByTestId('announcement-icon')).toBeTruthy();
-        expect(dialog.queryByTestId('custom-icon')).toBeNull();
-    });
-
-    it('should render with the custom icon', () => {
-        const dialog = render(
-            <IconProvider library={regularIcons}>
-                <AnnouncementDialog 
-                    icon={Announcement}
-                    message={"An other announcement message !"}
-                />
-            </IconProvider>
-        );
-        expect(screen.getByText("An other announcement message !")).toBeTruthy();
-        expect(dialog.getByTestId('custom-icon')).toBeTruthy();
-        expect(dialog.queryByTestId('announcement-icon')).toBeNull();
-    });
-});

package/src/components/dialog/announcement_dialog/HomeIcon.dev.jsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-const HomeIcon = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
-    <path d="m23.121 9.069-7.585-7.586a5.008 5.008 0 0 0-7.072 0L.879 9.069A2.978 2.978 0 0 0 0 11.19v9.817a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V11.19a2.978 2.978 0 0 0-.879-2.121ZM15 22.007H9v-3.934a3 3 0 0 1 6 0Zm7-1a1 1 0 0 1-1 1h-4v-3.934a5 5 0 0 0-10 0v3.934H3a1 1 0 0 1-1-1V11.19a1.008 1.008 0 0 1 .293-.707L9.878 2.9a3.008 3.008 0 0 1 4.244 0l7.585 7.586a1.008 1.008 0 0 1 .293.704Z" />
-  </svg>
-)
-
-export default HomeIcon;

package/src/components/dialog/announcement_dialog/index.js

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

package/src/components/dialog/confirm_modal/ConfirmModal.docs.mdx

@@ -1,25 +0,0 @@
----
-description: A modal to ask for confirmation.
-labels: ['modal', 'confirmation', 'confirm-modal']
----
-
-A modal component that asks for user's confirmation. The modal shows two buttons, one to confirm, one to cancel.
-
-### Component usage
-
-```js
-import { ConfirmModal } from '@logora/debate.dialog.confirm_modal';
-```
-
-```js
-    <ModalProvider>
-        <ConfirmModal 
-            title="User confirmation"
-            question="Are you sure you want to start this debate ?"
-            confirmLabel="Yes"
-            cancelLabel="No"
-            onConfirmCallback={() => alert("Debate started !")}
-            onCancelCallback={() => alert("Debate cancelled !")}
-        />
-    </ModalProvider>
-```