@logora/debate 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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