@logora/debate 0.1.0

package/src/components/dialog/modal/ModalProvider.jsx

@@ -0,0 +1,26 @@
+import React, { createContext, useState } from "react";
+
+export const ModalContext = createContext();
+
+export const ModalProvider = ({ children }) => {
+    const [modalComponent, setModalComponent] = useState(null);
+
+    const showModal = (modal) => {
+        setModalComponent(modal);
+    }
+
+    const hideModal = () => {
+        setModalComponent(null);
+    }
+
+    const isModalPresent = modalComponent !== null;
+
+    return (
+        <ModalContext.Provider value={{ showModal, hideModal, isModalPresent }}>
+            {children}
+            { modalComponent ?
+                <>{ modalComponent }</>
+            : null }
+        </ModalContext.Provider>
+    );
+}

package/src/components/dialog/modal/ModalProvider.test.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ModalProvider } from './ModalProvider';
+import { useModal } from './useModal';
+
+const Modal = () => {
+	const { hideModal } = useModal();
+
+	return <div data-testid="modal" id="closeModal" onClick={hideModal}>close modal</div>
+}
+
+const UseModalComponent = () => {
+	const { showModal } = useModal();
+
+	return <div data-testid="modal-consumer" onClick={() => showModal(<Modal />)}>open modal</div>;
+}
+
+describe('ModalProvider', () => {
+	it('should show and hide modal when consumed', async () => {
+		const modalApp = render(
+			<ModalProvider>
+				<UseModalComponent />
+			</ModalProvider>
+		);
+
+		expect(modalApp.getByText(/open modal/i)).toBeTruthy()
+		expect(modalApp.queryByTestId("modal")).toBeNull()
+
+		await userEvent.click(modalApp.getByText('open modal'))
+
+		expect(modalApp.queryByTestId("modal")).toBeTruthy()
+		expect(modalApp.getByText(/close modal/i)).toBeTruthy()
+
+		await userEvent.click(modalApp.getByText('close modal'))
+
+		expect(modalApp.queryByText(/my modal/i)).toBeNull()
+	});
+});

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

@@ -0,0 +1,3 @@
+export { Modal } from './Modal';
+export { ModalContext, ModalProvider } from './ModalProvider';
+export { useModal } from './useModal';

package/src/components/dialog/modal/useModal.jsx

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ModalContext } from "./ModalProvider";
+
+export const useModal = () => {
+    return useContext(ModalContext);
+}

package/src/components/dialog/toast/Toast.docs.mdx

@@ -0,0 +1,21 @@
+---
+description: A component to display a toast dialog.
+tags: ['toast', 'alert']
+---
+
+This component must be used with react-hot-toast and AlertProvider.
+
+It displays a message, and optionally points earned by the user.
+
+### Component usage
+```js
+import { Toast } from '@logora/debate.dialog.toast';
+```
+
+```js
+<Toast 
+    text={"Your text"}
+    points={34}
+    variant={"success"}
+/>
+```

package/src/components/dialog/toast/Toast.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import cx from 'classnames';
+import styles from './Toast.module.scss';
+
+export const Toast = ({ text, points, variant = "info", handleClose }) => {
+    const intl = useIntl();
+    return (
+        <div className={cx(styles.container, styles[variant])} role={variant === "error" ? "alert" : "status"}>
+            <div className={styles.body}>
+                <div className={styles.message}>
+                    {text}
+                </div>
+                {points &&
+                    <div className={styles.points}>
+                        <span className={styles.textPoints}>{points}</span>
+                    </div>
+                }
+            </div>
+            <div className={styles.closeContainer}>
+                <button
+                    type="button"
+                    className={styles.closeButton}
+                    onClick={handleClose}
+                    aria-label={intl.formatMessage({ id: "modal.toast.aria_label", defaultMessage: "Close toast" })}
+                >
+                    ✕
+                </button>
+            </div>
+        </div>
+    );
+}
+
+Toast.propTypes = {
+    /** Text of the toast */
+    text: PropTypes.string.isRequired,
+    /** Points earned displayed below the text */
+    points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Type of the toast, can be 'info', 'success' or 'error' */
+    variant: PropTypes.string,
+    /** Callback triggered on close */
+    handleClose: PropTypes.func
+};

package/src/components/dialog/toast/Toast.module.scss

@@ -0,0 +1,66 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+    display: flex !important;
+    flex-direction: row !important;
+    border: theme.$box-border;
+    border-radius: theme.$box-border-radius;
+    box-shadow: theme.$box-shadow;
+    visibility: visible;
+    transition: visibility 0s 2s;
+    @include spacing.p(3, xs);
+
+    &.info {
+        background-color: theme.$call-primary;
+    }
+
+    &.success {
+        background-color: theme.$success-primary;
+    }
+
+    &.error {
+        background-color: theme.$cancel-primary;
+    }
+}
+
+.body {
+    @include spacing.mr(5, xs);
+}
+
+.closeContainer {
+    margin-left: auto !important;
+}
+
+.closeButton {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    background-color: none !important;
+    border: none !important;
+    color: theme.$text-light !important;
+    cursor: pointer;
+    font-size: theme.$font-size-extra-small;
+}
+
+.message {
+    font-size: theme.$font-size-normal;
+    color: theme.$text-light;
+    font-weight: theme.$font-weight-bold;
+}
+
+.points {
+    display: flex !important;
+    align-items: center;
+    gap: spacing.$spacer-xxs;
+    @include spacing.mt(3, xs);
+    width: fit-content;
+    font-size: theme.$font-size-small;
+    color: theme.$text-light;
+
+    .textPoints {
+        width: fit-content;
+    }
+}

package/src/components/dialog/toast/Toast.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IntlProvider } from "react-intl";
+import { Toast } from './Toast';
+
+const meta = {
+    title: 'Dialog/Toast',
+    component: Toast,
+    args: {
+        text: 'A message !',
+        variant: 'info',
+        points: null
+    },
+    argTypes: {
+        text: {
+            control: 'text'
+        },
+        variant: {
+            control: 'select',
+            options: ['info', 'success', 'error']
+        },
+        points: {
+            control: 'number'
+        }
+    },
+    render: (args) => (
+        <IntlProvider locale="en">
+            <Toast {...args} />
+        </IntlProvider>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultToast = (props) => renderStory(props);
+
+export const ToastSuccess = (props) => renderStory({ variant: 'success', ...props });
+
+export const ToastError = (props) => renderStory({ variant: 'error', ...props });
+
+export const ToastWithPoints = (props) => renderStory({ points: 34, ...props });

package/src/components/dialog/toast/Toast.test.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToastWithPoints, DefaultToast } from './Toast.stories';
+
+describe('Toast', () => {
+	it('should render with the correct text', () => {
+		const dialog = render(
+			<DefaultToast />
+		);
+		expect(screen.getByText("A message !")).toBeTruthy();
+	});
+
+	it('should render with points', () => {
+		const dialog = render(
+			<ToastWithPoints />
+		);
+
+		expect(screen.getByText("A message !")).toBeTruthy();
+		expect(screen.getByText(34)).toBeTruthy();
+	});
+})

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

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

package/src/components/dialog/toast_provider/ToastContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ToastContext = createContext();

package/src/components/dialog/toast_provider/ToastProvider.docs.mdx

@@ -0,0 +1,36 @@
+---
+description: A container for displaying toasts (alerts). 
+tags: ['alert', 'toast', 'container', 'react-hot-toast']
+---
+
+This component provides a toaster container which enables to display alerts at the bottom center of the screen.
+It is using [react-hot-toast](https://react-hot-toast.com/).
+
+Wrap your app with `ToastProvider` to enable toasts.
+Use the `toast` function from the `useToast` hook to display a toast.
+
+### Component usage
+
+```js
+import { ToastProvider, useToast } from '@logora/debate.dialog.toast_provider';
+```
+
+```js
+
+const ComponentWithToast = () => {
+    const { toast, toasts } = useToast();
+
+    return (
+        <>
+            <div data-testid="toast-button" onClick={() => toast("First toast")}>My toaster</div>
+            <div data-testid="toast-counter">{ toasts.length } toasts</div>
+        </>
+    )
+}
+
+const App = () => {
+    <ToastProvider>
+        <ComponentWithToast />
+    </ToastProvider>
+}
+```

package/src/components/dialog/toast_provider/ToastProvider.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import toast, { Toaster, resolveValue, useToasterStore } from 'react-hot-toast';
+import { ToastContext } from './ToastContext';
+import { Toast } from '@logora/debate/dialog/toast';
+import styles from './ToastProvider.module.scss';
+
+export const ToastProvider = ({ children }) => {
+    const { toasts } = useToasterStore();
+    
+    return (
+        <ToastContext.Provider value={{ toast, toasts }}>
+            <>
+                { children }
+                <Toaster
+                    position="bottom-center"
+                    containerClassName={styles.toaster}
+                    toastOptions={{
+                        duration: 4000
+                    }}
+                >
+                    {(t) => {
+                        return(
+                            <Toast 
+                                text={resolveValue(t.message, t)} 
+                                points={t.points} 
+                                variant={t.type} 
+                                handleClose={() => toast.remove(t.id)}
+                            />
+                        )
+                    }}
+                </Toaster>
+            </>
+        </ToastContext.Provider>
+    );
+};

package/src/components/dialog/toast_provider/ToastProvider.module.scss

@@ -0,0 +1,14 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.toaster {
+    font-family: theme.$font-family;
+    z-index: 1000002 !important;
+
+    @include display.media-breakpoint-down(sm) {
+        margin-top: theme.$modal-margin-top;
+        margin-bottom: theme.$modal-margin-bottom ;
+        @include spacing.mx(2, xs);
+    }
+}

package/src/components/dialog/toast_provider/ToastProvider.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from "react-intl";
+import { ToastProvider } from './ToastProvider';
+import { useToast } from './useToast';
+
+describe('ToastProvider', () => {
+    it('should render container without toast by default', () => {
+        render(
+            <IntlProvider locale="en">
+                <ToastProvider>
+                    <span>Hello world</span>
+                </ToastProvider>
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("Hello world")).toBeTruthy();
+    });
+
+    it('should render toast when called', async () => {
+        let mock = () => { }
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: (query) => {
+                return {
+                    matches: false,
+                    media: query,
+                    onchange: null,
+                    addEventListener: mock,
+                    removeEventListener: mock,
+                    dispatchEvent: mock,
+                }
+            }
+        });
+
+        const ComponentWithToast = () => {
+            const { toast, toasts } = useToast();
+
+            return (
+                <>
+                    <div data-testid="toast-button" onClick={() => toast("First toast")}>My toaster</div>
+                    <div data-testid="toast-counter">{toasts.length} toasts</div>
+                </>
+            )
+        }
+
+        render(
+            <IntlProvider locale="en">
+                <ToastProvider>
+                    <ComponentWithToast />
+                </ToastProvider>
+            </IntlProvider>
+        );
+
+        const toastButton = screen.getByTestId("toast-button");
+        expect(screen.queryByText("0 toasts")).toBeTruthy();
+        expect(screen.queryByText("My toaster")).toBeInTheDocument();
+
+        await fireEvent.click(toastButton);
+
+        expect(screen.queryByText("First toast")).toBeTruthy();
+        expect(screen.getByText("1 toasts")).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './useToast';

package/src/components/dialog/toast_provider/useToast.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ToastContext } from "./ToastContext";
+
+export const useToast = () => {
+    const { toast, toasts } = useContext(ToastContext);
+
+    return { toast, toasts };
+}

package/src/components/dialog/tooltip/Tooltip.docs.mdx

@@ -0,0 +1,20 @@
+---
+description: A Tooltip component.
+labels: ['tooltip']
+---
+
+A component that renders a tooltip.
+The text can be changed when the tooltip is clicked.
+
+If no text is passed, then the component will only render the children.
+
+### Component usage
+```js
+<Tooltip 
+    text={"Information text"}
+    onClickText={"Other information"}
+    position={"top"}
+>
+    Hover and Click !
+</Tooltip>
+```

package/src/components/dialog/tooltip/Tooltip.jsx

@@ -0,0 +1,53 @@
+import React, { useId, useState } from "react";
+import styles from "./Tooltip.module.scss";
+import cx from "classnames";
+import PropTypes from "prop-types";
+
+export const Tooltip = ({ position = "bottom", text, onClickText, children, className, variant = "info" }) => {
+  const [clicked, setClicked] = useState(false);
+  const tooltipId = useId();
+
+  const switchText = () => {
+    setClicked(true);
+    setTimeout(() => {
+      setClicked(false);
+    }, 5000);
+  };
+
+  if (text) {
+    return (
+      <div
+        className={styles.tooltipChild}
+        onClick={onClickText ? switchText : null}>
+        <span aria-describedby={tooltipId}>
+          {children}
+        </span>
+        <span id={tooltipId} role="tooltip" className={cx(className, styles.tooltipText, styles[variant], { [styles.tooltipTextTop]: position === "top", [styles.tooltipTextLeft]: position === "left", [styles.tooltipTextRight]: position === "right" })}>
+          {clicked ? onClickText : text}
+        </span>
+      </div>
+    );
+  } else {
+    return (
+      <>
+        {children}
+      </>
+    )
+  }
+
+};
+
+Tooltip.propTypes = {
+  /** Tooltip text */
+  text: PropTypes.string,
+  /** Text displayed when tooltip is clicked */
+  onClickText: PropTypes.string,
+  /** Tooltip position, can be `top`, `bottom`, `left` or `right` */
+  position: PropTypes.string,
+  /** Component on which the tooltip is displayed */
+  children: PropTypes.node,
+  /** Class name to style the tooltip */
+  className: PropTypes.string,
+  /** Type of the tooltip, can be 'info', 'success' or 'error' */
+  variant: PropTypes.string,
+};

package/src/components/dialog/tooltip/Tooltip.module.scss

@@ -0,0 +1,92 @@
+@use 'styles/theme' as theme;
+
+.tooltipChild {
+    position: relative;
+}
+
+.tooltipText {
+    width: 120px;
+    visibility:hidden;
+    color: theme.$background-color-primary;
+    text-align: center;
+    border-radius: theme.$box-border-radius;
+    padding: 5px;
+    position: absolute;
+    z-index: 3;
+    top: 150%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-weight: theme.$font-weight-normal !important;
+    font-size: theme.$font-size-small !important;
+    
+    &.info {
+        background-color: theme.$text-secondary !important; 
+    }
+    &.success {
+        background-color: theme.$success-primary !important; 
+    }
+    &.error {
+        background-color: theme.$cancel-primary !important;
+    }
+}
+
+//Arrow
+.tooltipChild .tooltipText::after {
+    content: "";
+    position: absolute;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    top: -10px;
+    left: 50%;
+    transform: rotate(180deg);
+}
+.tooltipText.info::after {
+    border-color: theme.$text-secondary transparent transparent transparent; 
+}
+.tooltipText.success::after {
+    border-color: theme.$success-primary transparent transparent transparent; 
+}
+.tooltipText.error::after {
+    border-color: theme.$cancel-primary transparent transparent transparent;
+}
+.tooltipChild:hover .tooltipText {
+    visibility: visible;
+    opacity: 1;    
+}
+
+// Tooltip and arrow position
+.tooltipChild .tooltipTextTop {
+    width: 180px;
+    top: -160%;
+    left: -45%;
+    &::after {
+        top: 100%;
+        left: 50%;
+        transform: none;
+    }
+}
+
+.tooltipChild .tooltipTextLeft {
+    width: 148px;
+    top: 0;
+    left: -95px;
+    &::after {
+        top: 10px;
+        left: 153px;
+        transform: rotate(270deg);
+    }
+}
+
+.tooltipChild .tooltipTextRight {
+    width: 148px;
+    top: 0;
+    left: 93px;
+    &::after {
+        top: 10px;
+        left: -5px;
+        transform: rotate(90deg);
+    }
+}