@logora/debate 0.1.0 → 0.2.0

package/src/components/dialog/confirm_modal/ConfirmModal.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Modal, useModal } from '@logora/debate/dialog/modal';
-import { Button } from '@logora/debate/action/button';
-import styles from './ConfirmModal.module.scss';
-import cx from 'classnames';
-import PropTypes from "prop-types";
-
-export const ConfirmModal = ({ title, question, confirmLabel, cancelLabel, onConfirmCallback, onCancelCallback, confirmButtonClass, cancelButtonClass }) => {
-    const { hideModal } = useModal();
-
-    const onConfirm = () => {
-        hideModal();
-        onConfirmCallback && onConfirmCallback();
-    }
-    
-    const onCancel = () => {
-        hideModal();
-        onCancelCallback && onCancelCallback();
-    }
-
-    return (
-        <Modal title={title}>
-            <div>
-                <div className={styles.modalContent}>
-                    { question }
-                </div>
-                <div className={styles.modalActions}>
-                    <Button type="button" className={cx(styles.modalActionLeft, confirmButtonClass)} handleClick={() => onConfirm()}>{ confirmLabel }</Button>
-                    <Button type="button" className={cx(styles.modalActionRight, cancelButtonClass)} handleClick={() => onCancel()}>{ cancelLabel }</Button>
-                </div>
-            </div>
-        </Modal>
-    );
-}
-
-ConfirmModal.propTypes = {
-    /** Modal title */
-    title: PropTypes.string,
-    /** Question displayed to the user */
-    question: PropTypes.string.isRequired,
-    /** Confirm button label */
-    confirmLabel: PropTypes.string.isRequired,
-    /** Cancel button label */
-    cancelLabel: PropTypes.string.isRequired,
-    /** Callback triggered if user confirms */
-    onConfirmCallback: PropTypes.func,
-    /** Callback triggered if user cancels */
-    onCancelCallback: PropTypes.func,
-    /** Class name passed to the confirm button */
-    confirmButtonClass: PropTypes.string,
-    /** Class name passed to the cancel button */
-    cancelButtonClass: PropTypes.string
-};

package/src/components/dialog/confirm_modal/ConfirmModal.module.scss

@@ -1,30 +0,0 @@
-@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;
-  @include spacing.mt(3, xs);
-  @include spacing.p(0, xs);
-}
-
-.modalActionLeft {
-  @include spacing.px(5, xs);
-  @include spacing.mr(4, xs);
-}
-
-.modalActionRight {
-  @include spacing.px(5, xs);
-  @include spacing.ml(4, xs);
-}

package/src/components/dialog/confirm_modal/ConfirmModal.stories.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { ConfirmModal } from './ConfirmModal';
-import { ModalProvider } from '@logora/debate/dialog/modal';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import { IntlProvider } from "react-intl";
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export default {
-    title: 'Dialog/Confirm Modal',
-    component: ConfirmModal,
-    args: {
-        title: 'Modal Title',
-        question: 'Are you sure you want to start this debate ?',
-        confirmLabel: 'Yes',
-        cancelLabel: 'No'
-    },
-    argTypes: {
-        title: { control: 'text' },
-        question: { control: 'text' },
-        confirmLabel: { control: 'text' },
-        cancelLabel: { control: 'text' }
-    },
-    render: (args) => (
-        <div style={{ width: '350px', height: '100px' }}>
-            <IconProvider library={regularIcons}>
-                <IntlProvider locale="en">
-                    <ModalProvider>
-                        <ConfirmModal {...args} />
-                    </ModalProvider>
-                </IntlProvider>
-            </IconProvider>
-        </div>
-    )
-};
-
-export const DefaultConfirmModal = {};

package/src/components/dialog/confirm_modal/ConfirmModal.test.jsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ConfirmModal } from './ConfirmModal';
-import { ModalProvider } from '@logora/debate/dialog/modal';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import { IntlProvider } from "react-intl";
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-beforeAll(() => {
-    HTMLDialogElement.prototype.showModal = function () {
-      this.setAttribute("open", "");
-    };
-    HTMLDialogElement.prototype.close = function () {
-      this.removeAttribute("open");
-    };
-  });
-
-describe('ConfirmModal', () => {
-	it('should render modal with content and title', () => {
-		const modal = render(
-			<IconProvider library={regularIcons}>
-				<IntlProvider locale="en">
-				<ModalProvider>
-					<ConfirmModal 
-						title="confirm modal title" 
-						question="are you sure ?"
-						confirmLabel="yes"
-						cancelLabel="no"
-					/>
-				</ModalProvider>
-				</IntlProvider>
-			</IconProvider>
-		);
-
-		expect(screen.getByText("confirm modal title")).toBeTruthy()
-		expect(screen.getByText("are you sure ?")).toBeTruthy()
-		expect(screen.getByText("yes")).toBeTruthy()
-		expect(screen.getByText("no")).toBeTruthy()
-		expect(screen.getByRole("dialog")).toHaveAttribute("open");
-	});
-
-	it('should close on click outside', async () => {
-		const modal = render(
-			<IconProvider library={regularIcons}>
-				<IntlProvider locale="en">
-				<ModalProvider>
-					<ConfirmModal 
-						title="confirm modal title" 
-						question="are you sure ?"
-						confirmLabel="yes"
-						cancelLabel="no"
-					/>
-				</ModalProvider>
-				</IntlProvider>
-			</IconProvider>
-		);
-
-		expect(screen.getByRole("dialog")).toBeTruthy()
-		expect(screen.getByText("are you sure ?")).toBeTruthy()
-		expect(screen.getByRole("dialog")).toHaveAttribute("open");
-		await userEvent.click(document.body)
-
-		waitForElementToBeRemoved(screen.getByText("are you sure ?")).then(() =>
-			expect(screen.queryByRole("dialog")).toBeNull()
-		)
-	});
-
-	/*
-	it('should close when clicking on confirm button', async () => {
-		const modal = render(
-			<IconProvider library={regularIcons}>
-				<ModalProvider>
-					<ConfirmModal 
-						title="confirm modal title" 
-						question="are you sure ?"
-						confirmLabel="yes"
-						cancelLabel="no"
-					/>
-				</ModalProvider>
-			</IconProvider>
-		);
-
-		expect(screen.getByRole("dialog")).toBeTruthy()
-		expect(screen.getByText("are you sure ?")).toBeTruthy()
-		expect(document.body.style.overflowY).toEqual("hidden")
-		await userEvent.click(screen.getByText("yes"))
-
-		waitForElementToBeRemoved(screen.getByText("are you sure ?")).then(() =>
-			expect(screen.queryByRole("dialog")).toBeNull()
-		)
-	});
-	*/
-
-	/*
-	it('should close when clicking on cancel button', async () => {
-		const modal = render(
-			<IconProvider library={regularIcons}>
-				<ModalProvider>
-					<ConfirmModal 
-						title="confirm modal title" 
-						question="are you sure ?"
-						confirmLabel="yes"
-						cancelLabel="no"
-					/>
-				</ModalProvider>
-			</IconProvider>
-		);
-
-		expect(screen.getByRole("dialog")).toBeTruthy()
-		expect(screen.getByText("are you sure ?")).toBeTruthy()
-		expect(document.body.style.overflowY).toEqual("hidden")
-		await userEvent.click(screen.getByText("no"))
-
-		waitForElementToBeRemoved(screen.getByText("are you sure ?")).then(() =>
-			expect(screen.queryByRole("dialog")).toBeNull()
-		)
-	});
-	*/
-
-	it('should trigger confirm callback when clicking confirm', async () => {
-		const confirmCallback = vi.fn();
-
-		const modal = render(
-			<IconProvider library={regularIcons}>
-				<IntlProvider locale="en">
-				<ModalProvider>
-					<ConfirmModal 
-						title="confirm modal title" 
-						question="are you sure ?"
-						confirmLabel="yes"
-						cancelLabel="no"
-						onConfirmCallback={confirmCallback}
-					/>
-				</ModalProvider>
-				</IntlProvider>
-			</IconProvider>
-		);
-
-		expect(screen.getByRole("dialog")).toBeTruthy()
-		expect(screen.getByText("are you sure ?")).toBeTruthy()
-		expect(screen.getByRole("dialog")).toHaveAttribute("open");
-		const confirmButton = modal.getByText(/yes/i);
-		fireEvent.click(confirmButton)
-
-		await expect(confirmCallback).toHaveBeenCalled();
-	});
-
-	it('should trigger cancel callback when clicking cancel', async () => {
-		const cancelCallback = vi.fn();
-
-		const modal = render(
-			<IconProvider library={regularIcons}>
-				<IntlProvider locale="en">
-				<ModalProvider>
-					<ConfirmModal 
-						title="confirm modal title" 
-						question="are you sure ?"
-						confirmLabel="yes"
-						cancelLabel="no"
-						onCancelCallback={cancelCallback}
-					/>
-				</ModalProvider>
-				</IntlProvider>
-			</IconProvider>
-		);
-
-		expect(screen.getByRole("dialog")).toBeTruthy()
-		expect(screen.getByText("are you sure ?")).toBeTruthy()
-		expect(screen.getByRole("dialog")).toHaveAttribute("open");
-		const confirmButton = modal.getByText(/no/i);
-		fireEvent.click(confirmButton)
-
-		await expect(cancelCallback).toHaveBeenCalled();
-	});
-});

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

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

package/src/components/dialog/countdown/Countdown.docs.mdx

@@ -1,23 +0,0 @@
-
-# Countdown Component
-
-A simple React countdown component that displays the time left until a given expiration date, using localized relative time phrases (e.g., "in 5 minutes").
-
-## Usage
-
-```jsx
-import { Countdown } from '@logora/debate.dialog.countdown';
-
-<Countdown expiresAt="2025-10-02T12:00:00Z" />
-<Countdown expiresAt="2025-10-02T12:00:00Z" locale="fr" />
-```
-
-## Props
-- `expiresAt` (string): ISO date string representing the expiration time.
-- `locale` (string, optional): BCP 47 language tag for localization (defaults to browser language).
-
-## Behavior
-- Displays the time left as a localized relative time phrase in minutes (e.g., "in 5 minutes").
-- Never shows seconds or hours, only minutes.
-- Updates every 10 seconds.
-- Shows "now" or equivalent when expired.

package/src/components/dialog/countdown/Countdown.jsx

@@ -1,36 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-
-const getLargestUnitLeftString = (expiresAt, locale = navigator.language) => {
-    const now = new Date();
-    const expires = new Date(expiresAt);
-    const diffMs = expires - now;
-    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-    if (diffMs <= 0) {
-        return rtf.format(0, "minute");
-    }
-    const minutes = Math.floor(diffMs / (1000 * 60));
-    const hours = Math.floor(diffMs / (1000 * 60 * 60));
-    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-    if (days >= 1) {
-        return rtf.format(days, "day");
-    } else if (hours >= 1) {
-        return rtf.format(hours, "hour");
-    } else {
-        return rtf.format(minutes, "minute");
-    }
-};
-
-export const Countdown = ({ expiresAt, locale }) => {
-    const [timeLeft, setTimeLeft] = useState(() => getLargestUnitLeftString(expiresAt, locale));
-
-    useEffect(() => {
-        setTimeLeft(getLargestUnitLeftString(expiresAt, locale));
-        const interval = setInterval(() => {
-            setTimeLeft(getLargestUnitLeftString(expiresAt, locale));
-        }, 10000);
-        return () => clearInterval(interval);
-    }, [expiresAt, locale]);
-
-    return <span style={{paddingLeft: "5px"}}>{timeLeft}</span>;
-};

package/src/components/dialog/countdown/Countdown.stories.jsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { Countdown } from "./Countdown";
-
-export default {
-  title: 'Dialog/Countdown',
-  component: Countdown,
-  args: {
-    offsetMs: 3600 * 1000,
-  },
-  argTypes: {
-    offsetMs: {
-      control: 'number',
-    },
-  },
-  render: ({ offsetMs }) => (
-    <Countdown expiresAt={new Date(Date.now() + offsetMs).toISOString()} />
-  ),
-};
-
-export const Default = {};
-
-export const Expired = {
-  args: {
-    offsetMs: -1000,
-  },
-};
-
-export const ShortCountdown = {
-  args: {
-    offsetMs: 10000,
-  },
-};
-

package/src/components/dialog/countdown/Countdown.test.jsx

@@ -1,51 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { Countdown } from "./Countdown";
-
-describe("Countdown", () => {
-    it('shows "tomorrow" or "in 2 days" if expiresAt is about 1 day from now', () => {
-        const now = new Date();
-        const expiresAt = new Date(now.getTime() + 24 * 60 * 60 * 1000 + 5 * 60 * 1000).toISOString();
-        render(<Countdown expiresAt={expiresAt} />);
-        expect(
-            screen.getByText((content) => /tomorrow|in 2 days/i.test(content))
-        ).toBeInTheDocument();
-    });
-
-    it("shows time left in days for a large minute value (regression test)", () => {
-        const now = new Date();
-        const expiresAt = new Date(now.getTime() + 1805 * 60 * 1000).toISOString();
-        render(<Countdown expiresAt={expiresAt} />);
-        expect(
-            screen.getByText((content) => /in 1 day|tomorrow/i.test(content))
-        ).toBeInTheDocument();
-    });
-    it("shows time left in hours if more than 1 hour but less than a day", () => {
-        const now = new Date();
-        const expiresAt = new Date(now.getTime() + 2 * 60 * 60 * 1000 - 1000).toISOString(); // just under 2 hours from now
-        render(<Countdown expiresAt={expiresAt} />);
-        expect(screen.getByText((content) => /in [12] hours?/i.test(content))).toBeInTheDocument();
-    });
-
-    it("shows time left in minutes if less than 1 hour", () => {
-        const now = new Date();
-        const expiresAt = new Date(now.getTime() + 15 * 60 * 1000).toISOString(); // 15 minutes from now
-        render(<Countdown expiresAt={expiresAt} />);
-        expect(screen.getByText(/in 14 minutes?/i)).toBeInTheDocument();
-    });
-
-    it("shows 'now' or localized equivalent when expired", () => {
-        const now = new Date();
-        const expiresAt = new Date(now.getTime() - 1000).toISOString();
-        render(<Countdown expiresAt={expiresAt} />);
-        expect(screen.getByText(/now|this minute?/i)).toBeInTheDocument();
-    });
-
-    it("renders in a different locale (French)", () => {
-        const now = new Date();
-        const expiresAt = new Date(now.getTime() + 2 * 60 * 60 * 1000).toISOString(); // 2 hours from now
-           render(<Countdown expiresAt={expiresAt} locale="fr" />);
-           const text = screen.getByText((content) => /dans [12] heure/i.test(content));
-           expect(text).toBeInTheDocument();
-    });
-});

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

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

package/src/components/dialog/dialog_box/DialogBox.docs.mdx

@@ -1,25 +0,0 @@
----
-description: A component to display a dialog containing a title, a content and a button to close it.
----
-
-import { DialogBox } from './DialogBox';
-
-This component must be wrapped by IntlProvider. The component position is provided by props around it's children.
-
-It displays a title, a content and a button to close it.
-
-### Component usage
-```js
-import { DialogBox } from '@logora/debate.dialog.dialog_box';
-```
-```js
-<IntlProvider locale='en'>
-    <DialogBox 
-        position="top"
-        title={"title"} 
-        content={"content"}
-    >
-        <span>React child</span>
-    </DialogBox>
-</IntlProvider>
-```

package/src/components/dialog/dialog_box/DialogBox.jsx

@@ -1,53 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import cx from 'classnames';
-import styles from './DialogBox.module.scss';
-import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
-
-export const DialogBox = ({ position = "bottom", title, content, isHidden = false, children, className }) => {
-    const storedChoice = JSON.parse(typeof window !== "undefined" && window.localStorage && window.localStorage.getItem(content)) || false;
-    const [show, setShow] = useState(true);
-
-    useEffect(() => {
-    }, [isHidden]);
-
-    const closeBox = () => {
-        setShow(false);
-        if(typeof window !== "undefined") {
-            window.localStorage.setItem(content, true);
-        }
-    }
-
-    return (
-        <div className={styles.childContainer}>
-            {children}
-            {!storedChoice && !isHidden &&
-                <div className={cx(styles.textContainer, className, {[styles.hidden]: !show, [styles.left]: position === "left", [styles.right]: position === "right", [styles.top]: position === "top", [styles.bottom]: position === "bottom"})}>
-                    <div className={styles.close} onClick={closeBox}>x</div>
-                    <div className={styles.title}>
-                        <span>{title}</span>
-                    </div>
-                    <div className={styles.textContent}>
-                        <span>{content}</span>
-                    </div>
-                    <div className={styles.closeText} onClick={closeBox}>
-                        <span><FormattedMessage id="dialog.dialog_box.got_it" defaultMessage="Got it" /></span>
-                    </div>
-                </div>
-            }
-        </div>
-    )
-}
-
-DialogBox.propTypes = {
-    /** DialogBox position, can be `top`, `bottom`, `left` or `right` */
-    position: PropTypes.string,
-    /** Title to display */
-    title: PropTypes.string,
-    /** Content to display */
-    content: PropTypes.string,
-    /** Controls the dialog display */
-    isHidden: PropTypes.bool,
-    /** Custom css to pass */
-    className: PropTypes.string,
-};

package/src/components/dialog/dialog_box/DialogBox.module.scss

@@ -1,145 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-@use 'styles/display' as display;
-
-.childContainer {
-    position: relative;
-}
-.textContainer {
-    @include spacing.px(3, xs);
-    @include spacing.py(2.5, xs);
-    z-index: 2;
-    position: absolute;
-    width: 45%;
-    height: fit-content;
-    min-width: 250px;
-    background-color: theme.$success-primary;
-    color: theme.$text-light;
-    border-radius: 3px;
-    text-align: left;
-    visibility: visible;
-    opacity: 1;
-    @include display.media-breakpoint-down(sm) {
-        min-width: 150px;
-    }
-    &.hidden {
-        visibility: hidden;
-        opacity: 0;
-        transition: visibility .3s, opacity .3s linear;
-    }
-    &::after {
-        content: "";
-        position: absolute;
-        border-width: 10px;
-        border-style: solid;
-        border-color: theme.$success-primary transparent transparent transparent;
-    }
-    &.top {
-        left: 25%;
-        bottom: 105%;
-        &::after {
-            bottom: -19px;
-            left: 50%;
-            transform: none;
-        }
-        @include display.media-breakpoint-down(sm) {
-            width: 80%;
-            left: 10%;
-            bottom: 70%;
-        }
-    }
-    &.bottom {
-        left: 25%;
-        top: 105%;
-        &::after {
-            bottom: 100%;
-            left: 50%;
-            transform: rotate(180deg);
-        }
-        @include display.media-breakpoint-down(sm) {
-            width: 80%;
-            left: 10%;
-            top: 76%;
-        }
-    }
-    &.left {
-        top: 10%;
-        left: -40%;
-        width: 45%;
-        &::after {
-            top: 25%;
-            right: -19px;
-            transform: rotate(270deg);
-        }
-        @include display.media-breakpoint-down(lg) {
-            width: 80%;
-            left: -70%;
-        }
-    }
-    &.right {
-        top: 10%;
-        right: -40%;
-        width: 45%;
-        &::after {
-            top: 25%;
-            left: -19px;
-            transform: rotate(90deg);
-        }
-        @include display.media-breakpoint-down(lg) {
-            width: 80%;
-            right: -70%;
-        }
-    }
-}
-.title {
-    display: flex !important;
-    align-items: center !important;
-    @include spacing.mb(1.5, xs);
-    font-weight: theme.$font-weight-bold;
-    text-transform: uppercase;
-    svg {
-        @include spacing.mr(1, xs);
-        fill: theme.$text-light;
-    }
-}
-
-.textContent {
-    font-size: theme.$font-size-small;
-    svg {
-        @include spacing.ml(1, xs);
-        fill: transparent;
-        path {
-            fill: theme.$text-light;
-        }
-        circle {
-            stroke: theme.$text-light;
-        }
-    }
-}
-.close {
-    @include spacing.p(1, xs);
-    position: absolute;
-    top: 4px;
-    right: 8px;
-}
-.closeText {
-    @include spacing.mt(2, xs);
-    width: fit-content;
-    font-size: theme.$font-size-small;
-    text-decoration: underline;
-}
-.close, .closeText {
-    cursor: pointer;
-    &:hover {
-        opacity: .85;
-    }
-}
-
-.pointIcon {
-    circle {
-        stroke: theme.$text-primary;
-    }
-    path {
-        fill: theme.$text-primary;
-    }
-}