@logora/debate 0.1.0

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

@@ -0,0 +1,76 @@
+import React from "react";
+import { Tooltip } from "./Tooltip";
+
+export default {
+    title: 'Dialog/Tooltip',
+    component: Tooltip,
+    args: {
+        text: 'Tooltip text',
+        onClickText: null,
+        position: 'bottom',
+        variant: 'info',
+        children: 'Default tooltip'
+    },
+    argTypes: {
+        text: {
+            control: 'text'
+        },
+        onClickText: {
+            control: 'text'
+        },
+        position: {
+            control: 'select',
+            options: ['top', 'right', 'bottom', 'left']
+        },
+        variant: {
+            control: 'select',
+            options: ['info', 'success', 'error']
+        },
+        children: {
+            control: 'text'
+        }
+    },
+    render: ({ children, ...args }) => (
+        <Tooltip {...args}>
+            <h3>{children}</h3>
+        </Tooltip>
+    )
+};
+
+export const DefaultTooltip = {};
+
+export const TooltipWithoutText = {
+    args: {
+        text: null
+    }
+};
+
+export const HoverAndClickTooltip = {
+    args: {
+        text: 'Hover tooltip',
+        onClickText: 'Clicked!',
+        children: 'Hover and click tooltip'
+    },
+    render: ({ children, ...args }) => (
+        <Tooltip {...args}>
+            <h4>{children}</h4>
+        </Tooltip>
+    )
+};
+
+export const SuccessTooltip = {
+    args: {
+        text: 'Success Tooltip!',
+        variant: 'success',
+        children: 'Success tooltip'
+    }
+};
+
+export const ErrorTooltip = {
+    args: {
+        text: 'Error Tooltip!',
+        variant: 'error',
+        children: 'Error tooltip'
+    }
+};
+

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+import { Tooltip } from "./Tooltip";
+
+describe('Tooltip', () => {
+    it('should render with the correct text', async () => {
+        const tooltip = render(<Tooltip text={"hover tooltip"} onClickText={"click"}>Child</Tooltip>);
+        expect(tooltip.getByText(/child/i)).toBeTruthy();
+
+        fireEvent.mouseOver(tooltip.getByText(/child/i));
+        expect(tooltip.getByText(/hover tooltip/i)).toBeTruthy();
+    });
+
+    it('should render children only if no text is passed', () => {
+        const tooltip = render(<Tooltip>Child</Tooltip>);
+        expect(tooltip.getByText(/child/i)).toBeTruthy();
+
+        fireEvent.mouseOver(tooltip.getByText(/child/i));
+        expect(tooltip.queryByText(/hover tooltip/i)).toBeNull();
+    });
+
+    it('calls onClickText props when clicked', () => {
+        const tooltip = render(<Tooltip text={"hover tooltip"} onClickText={"click"}>Child</Tooltip>);
+        fireEvent.click(document.querySelector('.tooltipChild'));
+        expect(tooltip.getByText(/click/i)).toBeTruthy();
+    });
+
+    it('should be at the props position', () => {
+        render(<Tooltip text={"hover tooltip"} onClickText={"click"} position={"top"}>Child</Tooltip>);
+        const renderedTooltip = document.querySelector('.tooltipText.tooltipTextTop');
+        expect(renderedTooltip).toBeTruthy();
+    });
+
+    it("should apply the custom className correctly", () => {
+        const { container } = render(
+            <Tooltip text="Hover tooltip" className="custom-tooltip">
+                <span>Child</span>
+            </Tooltip>
+        );
+        const tooltipContainer = container.querySelector(".custom-tooltip");
+        expect(tooltipContainer).toBeTruthy();
+        expect(tooltipContainer).toHaveClass("custom-tooltip");
+    });
+    
+    it('should render with info variant', () => {
+        const { getByText } = render(<Tooltip text="Info tooltip" className="info">Child</Tooltip>);
+        fireEvent.mouseOver(getByText(/child/i));
+        expect(getByText(/info tooltip/i)).toBeTruthy();
+        expect(document.querySelector('.tooltipText.info')).toBeTruthy();
+    });
+
+    it('should render with success variant', () => {
+        const { getByText } = render(<Tooltip text="Success tooltip" variant="success">Child</Tooltip>);
+        fireEvent.mouseOver(getByText(/child/i));
+        expect(getByText(/success tooltip/i)).toBeTruthy();
+        expect(document.querySelector('.tooltipText.success')).toBeTruthy();
+    });
+
+    it('should render with error variant', () => {
+        const { getByText } = render(<Tooltip text="Error tooltip" variant="error">Child</Tooltip>);
+        fireEvent.mouseOver(getByText(/child/i));
+        expect(getByText(/error tooltip/i)).toBeTruthy();
+        expect(document.querySelector('.tooltipText.error')).toBeTruthy();
+    });
+
+});
+

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

@@ -0,0 +1,3 @@
+export { Tooltip } from "./Tooltip";
+
+

package/src/components/embed/embed_header/EmbedHeader.docs.mdx

@@ -0,0 +1,25 @@
+---
+description: A component to display a header with some informations.
+labels: ['header']
+---
+
+import { EmbedHeader } from './EmbedHeader';
+
+A component to display a header with some informations.
+
+This component must be wrapped by IntlProvider.
+
+### Component usage
+```js
+    import { EmbedHeader } from '@logora/debate.information.embed_header';
+```
+```js
+<IntlProvider locale="en">
+    <EmbedHeader
+        title={"How to prevent COVID-19 spread ?"} 
+        titleRedirectUrl={"https://test.fr/"} 
+        onlineUsersCount={273} 
+        headerLabel={"Medicine"}
+    />
+</IntlProvider>
+```

package/src/components/embed/embed_header/EmbedHeader.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import { FormattedMessage } from 'react-intl';
+import { Link } from '@logora/debate/action/link';
+import cx from 'classnames';
+import styles from './EmbedHeader.module.scss';
+
+export const EmbedHeader = ({ title, titleRedirectUrl, headerLabel, onlineUsersCount, textLeft, className, logoUrl, logoAlt }) => {
+    return (
+		<div className={cx(styles.headerBox, className)}>
+			{ headerLabel &&
+				<div className={styles.headerBoxLabel}>
+					<Link to={titleRedirectUrl} target="_top" external data-tid="link_debate_index_embed" rel="nofollow">
+						{ logoUrl ?
+							<img loading={"lazy"} className={styles.headerLogo} src={logoUrl} width={100} height={40} alt={logoAlt} />
+						:
+							<div className={styles.headerLabelText}>
+								{ headerLabel }
+							</div>
+						}
+					</Link>
+					{ onlineUsersCount ?
+						<div className={styles.headerLiveStat}>
+							<div className={styles.headerLiveNow}></div>
+							<span className={styles.headerLivePin} data-testid={"online-users-count"}>
+								<FormattedMessage id={"embed.embed_header.online_users"} values={{ count: onlineUsersCount }} defaultMessage="{count} online users" />
+							</span>
+							<span className={styles.headerLivePinMobile} data-testid={"online-users-count-mobile"}>
+								<FormattedMessage id={"embed.embed_header.online"} values={{ count: onlineUsersCount }} defaultMessage="{count} online" />
+							</span>
+						</div>
+					: null}
+				</div>
+			}
+			<div className={cx(styles.debateName, { [styles.left]: textLeft, [styles.debateNameWithLogo]: logoUrl})} data-testid={"debate-name"}>
+				<Link className={styles.debateLink} to={titleRedirectUrl} target="_top" external data-tid="link_debate_title_embed" rel="nofollow">
+					{ title }
+				</Link>
+			</div>
+		</div>
+    );
+}
+
+EmbedHeader.propTypes = {
+    /** EmbedHeader title */
+    title: PropTypes.string,
+    /**  EmbedHeader url redirect */
+    titleRedirectUrl: PropTypes.string,
+    /** HeaderLabel text */
+    headerLabel: PropTypes.string,
+    /** Number of online users */
+    onlineUsersCount: PropTypes.number,
+    /** If true, title will be align with headerLabel text */
+    textLeft: PropTypes.bool,
+	/** Custom EmbedHeader styles */
+    className: PropTypes.object,
+	/** Link of the image to display */
+    logoUrl: PropTypes.string,
+	/** Alt of the logo */
+    logoAlt: PropTypes.string,
+};

package/src/components/embed/embed_header/EmbedHeader.module.scss

@@ -0,0 +1,148 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.headerBox {
+    display: flex !important;
+    flex-direction: column !important;
+    @include spacing.p(0, xs);
+}
+
+.headerBoxLabel {
+    display: flex !important;
+    justify-content: flex-start !important;
+    > .titleRedirectUrl {
+        background: theme.$background-color-primary !important;
+        &:hover {
+            background: theme.$background-color-primary !important;
+        }
+    }
+}
+
+.headerLiveStat {
+    margin-left: auto !important;
+    @include spacing.mr(2, xs);
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    color: theme.$call-primary;
+    font-size: theme.$font-size-small;
+    margin-left: 30px;
+    span {
+        margin-left: 10px;
+        @include spacing.mb(0, xs);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+  :global(.logoraDarkMode) {
+    .headerLiveStat {
+      color: white !important;
+    }
+    .headerLiveNow {
+        background-color: white !important;
+        &::before{
+            background-color: white !important;
+        }
+    }
+  }
+}
+
+.headerLiveNow {
+    min-width: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: theme.$call-primary;
+    position: relative;
+    &::before{
+        content:"";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: theme.$call-primary;
+        opacity: 0.4;
+        animation-name: livePin;
+        animation-duration: 1.6s;
+        animation-iteration-count: infinite;
+    }
+}
+
+.headerLivePin {
+    @include display.display(block, sm);
+    @include display.display(none, xs);
+}
+
+.headerLivePinMobile {
+    @include display.display(none, sm);
+    @include display.display(block, xs);
+}
+
+@keyframes livePin { 
+    0% { transform: scale(2.3) }
+    50% { transform: scale(0) }
+    100% { transform: scale(2.3) }
+}
+
+.headerLabelText {
+    background-color: theme.$call-primary;
+    color: theme.$text-light;
+    border-bottom: 1px solid;
+    border-color: theme.$call-primary;
+    border-radius: theme.$box-border-radius 0 theme.$box-border-radius 0;
+    font-size: theme.$font-size-normal;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    @include spacing.px(2, xs);
+    @include spacing.py(2, xs);
+}
+
+.debateName {
+    color: theme.$text-primary;
+    font-weight: theme.$font-weight-bold;
+    text-align: center;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    @include spacing.pb(0, xs);
+    @include spacing.pt(3, xs);
+    @include spacing.px(3, xs);
+    @include spacing.px(0, sm);
+    a.debateLink {
+        color: theme.$text-primary !important;
+    }
+}
+
+.debateLink {
+    font-size: theme.$font-size-large;
+    line-height: theme.$line-height-normal;
+    background: theme.$background-color-primary !important;
+    text-decoration: none !important;
+    color: theme.$text-primary;
+    font-weight: theme.$font-weight-bold;
+    &:hover {
+        background: theme.$background-color-primary !important;
+        text-decoration: underline !important;
+    }
+}
+
+.left {
+    justify-content: flex-start !important;
+    @include spacing.px(3, xs);
+    @include spacing.pt(3, xs);
+    @include spacing.pb(0, xs);
+    text-align: left;
+}
+
+.headerLogo {
+	width: 100px !important;
+	height: 40px !important;
+    object-fit: contain;
+	object-position: left;
+}
+
+.debateNameWithLogo {
+    @include spacing.px(0, xs);
+}

package/src/components/embed/embed_header/EmbedHeader.stories.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { IntlProvider } from "react-intl";
+import { EmbedHeader } from "./EmbedHeader";
+import { faker } from '@faker-js/faker';
+
+export default {
+    title: 'Embed/Embed Header',
+    component: EmbedHeader,
+    args: {
+        title: 'How to prevent COVID-19 spread ?',
+        titleRedirectUrl: 'https://test.fr/',
+        onlineUsersCount: 273,
+        headerLabel: 'Medicine',
+        textLeft: false,
+        logoUrl: null,
+        logoAlt: 'Super logo'
+    },
+    argTypes: {
+        title: {
+            control: 'text'
+        },
+        titleRedirectUrl: {
+            control: 'text'
+        },
+        onlineUsersCount: {
+            control: 'number'
+        },
+        headerLabel: {
+            control: 'text'
+        },
+        textLeft: {
+            control: 'boolean'
+        },
+        logoUrl: {
+            control: 'text'
+        },
+        logoAlt: {
+            control: 'text'
+        }
+    },
+    render: (args) => (
+        <IntlProvider locale="en">
+            <EmbedHeader {...args} />
+        </IntlProvider>
+    )
+};
+
+export const DefaultEmbedHeader = {};
+
+export const EmbedHeaderWithLogo = {
+    args: {
+        logoUrl: faker.image.url()
+    }
+};

package/src/components/embed/embed_header/EmbedHeader.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { EmbedHeader } from './EmbedHeader';
+import { IntlProvider } from 'react-intl';
+import { faker } from '@faker-js/faker';
+
+const title = 'Test Title';
+const titleRedirectUrl = '/test-url';
+const headerLabel = 'Test Label';
+const onlineUsersCount = 5;
+const textLeft = true;
+const logo = faker.image.url();
+
+describe('EmbedHeader', () => {
+    it('renders header label, title and link with correct href value', () => {
+        const { getByText } = render(
+            <IntlProvider locale="en">
+                <EmbedHeader title={title} titleRedirectUrl={titleRedirectUrl} headerLabel={headerLabel} />
+            </IntlProvider>
+        );
+        expect(getByText(headerLabel)).toBeInTheDocument();
+        expect(getByText(title)).toBeInTheDocument();
+        expect(screen.getByText(/Test Title/i).closest('a')).toHaveAttribute('href', '/test-url');
+    });
+
+    it('renders online users count if provided', () => {
+        const { getByTestId } = render(
+            <IntlProvider locale="en">
+                <EmbedHeader onlineUsersCount={onlineUsersCount} headerLabel={headerLabel} />
+            </IntlProvider>
+        );
+        expect(getByTestId('online-users-count')).toHaveTextContent(`${onlineUsersCount} online users`);
+        expect(getByTestId('online-users-count-mobile')).toHaveTextContent(`${onlineUsersCount} online`);
+    });
+
+    it('applies textLeft className when prop is provided', () => {
+        const { getByTestId } = render(
+            <IntlProvider locale="en">
+                <EmbedHeader textLeft={textLeft} />
+            </IntlProvider>
+        );
+        expect(getByTestId('debate-name')).toHaveClass('left');
+    });
+
+    it('renders only title', () => {
+        const { queryByText } = render(
+            <IntlProvider locale="en">
+                <EmbedHeader title={title} titleRedirectUrl={titleRedirectUrl} />
+            </IntlProvider>
+        );
+        expect(queryByText('Test Label')).toBeNull();
+        expect(queryByText('online users')).toBeNull();
+        expect(queryByText('Test Title')).toBeInTheDocument();
+    });
+
+    it('renders logo without header label', () => {
+        const { queryByText, getByAltText } = render(
+            <IntlProvider locale="en">
+                <EmbedHeader title={title} titleRedirectUrl={titleRedirectUrl} headerLabel={headerLabel} logoUrl={logo} logoAlt={"My Logo"}/>
+            </IntlProvider>
+        );
+        expect(queryByText('Test Label')).toBeNull();
+        expect(queryByText('online users')).toBeNull();
+        expect(queryByText('Test Title')).toBeInTheDocument();
+
+        const customLogo = getByAltText("My Logo");
+        expect(customLogo).toBeInTheDocument();
+        expect(customLogo).toHaveAttribute("src", logo);
+    });
+});

package/src/components/embed/embed_header/index.js

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

package/src/components/error/standard_error_boundary/StandardErrorBoundary.docs.mdx

@@ -0,0 +1,26 @@
+---
+description: A simple error boundary component.
+labels: ['error', 'error-boundary']
+---
+
+import { StandardErrorBoundary } from './StandardErrorBoundary';
+
+This component can be wrapped around other components to catch errors so as not to crash the whole app.
+
+An _errorMessage_ prop can be passed to customize the error message displayed.
+
+### Component usage
+```js
+import StandardErrorBoundary from '@logora/debate.error.standard_error_boundary';
+```
+```js
+    <StandardErrorBoundary errorMessage={"My custom error message !"}>
+        <div>No error</div>
+    </StandardErrorBoundary>
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>hideMessage</font> | <font color="#397300">boolean</font> | &cross; | false | <font color="grey">*if true, will not show anything on error*</font> |
+| <font color='#4646c6'>errorMessage</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*custom error message displayed when error caught*</font> |

package/src/components/error/standard_error_boundary/StandardErrorBoundary.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import styles from './StandardErrorBoundary.module.scss';
+
+export class StandardErrorBoundary extends Component {
+    state = {
+        error: null 
+    }
+
+    componentDidCatch(error) {
+        this.setState({ error: error });
+    }
+
+    render() {
+        if (this.state.error) {
+            if(this.props.hideMessage) {
+                return null;
+            } else {
+                return (
+                    <div className={styles.errorContainer}>
+                        { this.props.errorMessage || this.state.error.toString().replace("Error: ", "") }
+                    </div>
+                );
+            }
+        }
+        return this.props.children;
+    }
+}

package/src/components/error/standard_error_boundary/StandardErrorBoundary.module.scss

@@ -0,0 +1,8 @@
+@use 'styles/spacing' as spacing;
+
+.errorContainer {
+  width: 100%;
+  height: fit-content;
+  text-align: center;
+  @include spacing.pt(4, xs);
+}

package/src/components/error/standard_error_boundary/StandardErrorBoundary.test.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StandardErrorBoundary } from './StandardErrorBoundary';
+
+beforeAll(() => vi.spyOn(console, 'error').mockImplementation(() => {}));
+
+function Bomb({ shouldThrow }) {
+    if(shouldThrow) {
+        throw new Error("some error I made up");
+    } else {
+        return <div>my content</div>
+    }
+}
+
+it('should render children when no error', () => {
+    const ProblemChild = () => {
+        throw new Error();
+    }
+
+    const component = render(<Bomb />, { wrapper: StandardErrorBoundary });
+
+    expect(screen.getByText("my content")).toBeTruthy();
+    expect(screen.queryByText("Error")).toBeNull();
+});
+
+it('should render error when caught', () => {
+    const component = render(<Bomb shouldThrow={true} />, { wrapper: StandardErrorBoundary });
+
+    expect(screen.getByText("some error I made up")).toBeTruthy();
+    expect(screen.queryByText("my content")).toBeNull();
+});
+
+it('should render error when caught', () => {
+    const component = render(
+        <StandardErrorBoundary errorMessage={"my error"}>
+            <Bomb shouldThrow={true} />
+        </StandardErrorBoundary>
+    );
+
+    expect(screen.getByText("my error")).toBeTruthy();
+    expect(screen.queryByText("some error I made up")).toBeNull();
+    expect(screen.queryByText("my content")).toBeNull();
+});
+
+it('should render nothing if hide message is true', () => {
+    const component = render(
+        <StandardErrorBoundary hideMessage={true}>
+            <Bomb shouldThrow={true} />
+        </StandardErrorBoundary>
+    );
+
+    expect(screen.queryByText("my error")).toBeNull();
+    expect(screen.queryByText("some error I made up")).toBeNull();
+    expect(screen.queryByText("my content")).toBeNull();
+    expect(component.container.innerHTML).toHaveLength(0);
+});

package/src/components/error/standard_error_boundary/index.js

@@ -0,0 +1 @@
+export { StandardErrorBoundary as default } from './StandardErrorBoundary';

package/src/components/follow/follow_button/FollowButton.docs.mdx

@@ -0,0 +1,41 @@
+---
+description: A button component to follow a content.
+labels: ['follow']
+---
+
+import { FollowButton } from './FollowButton';
+
+A button component to follow a content.
+
+It must be wrapped by [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+It must be wrapped by dataProvider.
+
+It must be wrapped by AuthProvider.
+
+It must be wrapped by ContextProvider.
+
+It must be wrapped by ModalProvider.
+
+### Component usage
+```js
+    import { FollowButton } from '@logora/debate.follow.follow_button';
+```
+```js
+<IntlProvider locale='en'>
+    <DataProviderContext.Provider value={{ dataProvider: data }}>
+        <AuthProvider>
+            <ConfigContext.Provider value={{ config }}>
+                <ModalProvider>
+                    <FollowButton 
+                        followableType={"content"}
+                        followableId={12}
+                        tooltipText={"Tooltip content"}
+                        dataTid={"data-tid"}
+                    />
+                </ModalProvider>
+            </ConfigContext.Provider>
+        </AuthProvider>
+    </DataProviderContext.Provider>
+</IntlProvider>
+```