@logora/debate 0.1.0

package/src/components/action/link/Link.stories.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { Link } from './Link';
+
+export default {
+    title: 'Action/Link',
+    component: Link,
+    args: {
+        to: '/page',
+        external: false,
+        children: 'Default'
+    },
+    argTypes: {
+        to: {
+            control: 'text'
+        },
+        external: {
+            control: 'boolean'
+        },
+        children: {
+            control: 'text'
+        }
+    },
+    render: ({ children, ...args }) => {
+        if (args.external) {
+            return <Link {...args}>{children}</Link>;
+        }
+        return (
+            <MemoryRouter>
+                <Link {...args}>{children}</Link>
+            </MemoryRouter>
+        );
+    }
+};
+
+export const DefaultLinkButton = {};
+
+export const ExternalLinkButton = {
+    args: {
+        external: true,
+        children: 'External'
+    }
+};

package/src/components/action/link/Link.test.jsx

@@ -0,0 +1,91 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Link } from './Link';
+import { MemoryRouter } from "react-router-dom";
+
+describe('Link', () => {
+    it('should render a link', () => {
+        const { getByRole } = render(
+            <MemoryRouter>
+                <Link to="/" />
+            </MemoryRouter>
+        );
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+
+    it('should render a Link if external is true', () => {
+        const { getByRole } = render(
+            <Link to="/" external={true} />
+        );
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+
+    it('should render a link with children', () => {
+        const { getByText } = render(
+            <MemoryRouter>
+                <Link to="/">
+                    my link
+                </Link>
+            </MemoryRouter>
+        );
+        expect(getByText('my link')).toBeTruthy();
+    });
+
+    it('should render a link with children when external', () => {
+        const { getByText } = render(
+            <Link to="/" external>
+                my external link
+            </Link>
+        );
+        expect(getByText('my external link')).toBeTruthy();
+    });
+
+    it('should render a Link with the correct to prop', () => {
+        const toValue = '/about';
+        const { getByRole } = render(<MemoryRouter><Link to={toValue} /></MemoryRouter>);
+        expect(getByRole('link').getAttribute('href')).toEqual(toValue);
+    });
+
+    it('should render a Link with the correct to prop when external', () => {
+        const toValue = '/about';
+        const { getByRole } = render(<Link to={toValue} external />);
+        expect(getByRole('link').getAttribute('href')).toEqual(toValue);
+    });
+
+    it('should render a Link with the correct className prop', () => {
+        const className = 'link-class';
+        const { getByRole } = render(<MemoryRouter><Link to="/" className={className} /></MemoryRouter>);
+        expect(getByRole('link').getAttribute('class')).toEqual(className);
+    });
+
+    it('should render a Link with the correct className prop when external', () => {
+        const className = 'link-class';
+        const { getByRole } = render(<Link to="/" className={className} external />);
+        expect(getByRole('link').getAttribute('class')).toEqual(className);
+    });
+
+    it('should render an anchor with the correct target prop', () => {
+        const targetValue = '_blank';
+        const { getByRole } = render(<MemoryRouter><Link to="/" target={targetValue} /></MemoryRouter>);
+        expect(getByRole('link').getAttribute('target')).toEqual(targetValue);
+    });
+
+    it('should render an anchor with the correct target prop when external', () => {
+        const targetValue = '_blank';
+        const { getByRole } = render(<Link to="/" target={targetValue} external />);
+        expect(getByRole('link').getAttribute('target')).toEqual(targetValue);
+    });
+
+    it('should render an anchor with the correct rel prop', () => {
+        const relValue = 'noopener';
+        const { getByRole } = render(<MemoryRouter><Link to="/" rel={relValue} /></MemoryRouter>);
+        expect(getByRole('link').getAttribute('rel')).toEqual(relValue);
+    });
+
+    it('should render an anchor with the correct rel prop when external', () => {
+        const relValue = 'noopener';
+        const { getByRole } = render(<Link to="/" external={true} rel={relValue} />);
+        expect(getByRole('link').getAttribute('rel')).toEqual(relValue);
+    });
+});

package/src/components/action/link/index.js

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

package/src/components/ad/ad_unit/AdUnit.docs.mdx

@@ -0,0 +1,23 @@
+---
+description: An ad unit component that displays an ad slot with Google Ad Manager
+labels: ['ad', 'google-ad-manager']
+---
+
+The AdUnit component displays an ad slot from Google Ad Manager.
+
+It also handles the ads refresh rate callback and configuration to respect the user's cookie consent.
+Consent is managed with didomi and is optional.
+
+### Component usage
+
+```js
+    import { AdUnit } from '@logora/debate.ad.ad_unit';
+```
+
+```js
+<AdUnit
+    id='div-id' 
+    adPath='/path'
+    sizes={[300, 250]}
+/>
+```

package/src/components/ad/ad_unit/AdUnit.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import styles from "./AdUnit.module.scss";
+import PropTypes from "prop-types";
+
+export const AdUnit = ({
+	id,
+	adPath,
+	sizes = [],
+	targeting,
+	enableDidomi = false,
+}) => {
+	if (!id || !adPath) {
+		return null;
+	}
+	const divId = `div-gpt-ad-${id}`;
+
+	useEffect(() => {
+		if (typeof window !== "undefined" && divId && adPath) {
+			const googletag = window.googletag || (window.googletag = { cmd: [] });
+			let slot;
+
+			googletag.cmd.push(() => {
+				slot = googletag
+					.defineSlot(adPath, sizes, divId)
+					.setTargeting("origine", ["logora"])
+					.addService(googletag.pubads());
+				for (const [key, value] of Object.entries(targeting || {})) {
+					slot.setTargeting(key, value);
+				}
+
+				googletag.display(divId);
+				googletag.pubads().refresh([slot]);
+			});
+
+			return () => {
+				const googletag = window.googletag || { cmd: [] };
+				googletag.cmd.push(() => {
+					googletag.destroySlots([slot]);
+				});
+			};
+		}
+	}, []);
+
+	if (enableDidomi === true) {
+		return (
+			<script
+				type="didomi/html"
+				data-vendor="didomi:google"
+				data-purposes="cookies"
+			>
+				<div className={styles.adContainer}>
+					<div className={styles.adUnit} id={divId} />
+				</div>
+			</script>
+		);
+	}
+	return (
+		<div className={styles.adContainer}>
+			<div className={styles.adUnit} id={divId} />
+		</div>
+	);
+};
+
+AdUnit.propTypes = {
+	/** A string to be used as container div id */
+	id: PropTypes.string.isRequired,
+	/** Ad slot path */
+	adPath: PropTypes.string.isRequired,
+	/** An optional object which includes ad targeting key-value pairs */
+	targeting: PropTypes.object,
+	/** Sizes of slot */
+	sizes: PropTypes.array,
+	/** Whether to add didomi attributes to manage user consent */
+	enableDidomi: PropTypes.bool,
+};

package/src/components/ad/ad_unit/AdUnit.module.scss

@@ -0,0 +1,9 @@
+@use 'styles/spacing' as spacing;
+
+.adContainer {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: center !important;
+  @include spacing.my(2, xs);
+}

package/src/components/ad/ad_unit/AdUnit.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useGoogleAdManager } from '@logora/debate/ad/use_google_ad_manager';
+import { AdUnit } from './AdUnit';
+
+export default {
+    title: 'Ad/Ad Unit',
+    component: AdUnit,
+    args: {
+        id: 'banner-ad',
+        adPath: '/6355419/Travel',
+        sizes: [[300, 250]]
+    },
+    argTypes: {
+        id: {
+            control: 'text'
+        },
+        adPath: {
+            control: 'text'
+        },
+        sizes: {
+            control: 'object'
+        }
+    },
+    render: (args) => {
+        useGoogleAdManager();
+        return <AdUnit {...args} />;
+    }
+};
+
+export const DefaultAdUnit = {};

package/src/components/ad/ad_unit/AdUnit.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { AdUnit } from './AdUnit';
+
+describe('AdUnit', () => {
+    it('should render nothing if id is empty', () => {
+        const { container } = render(
+            <AdUnit
+                id={""}
+                adPath={"/path"}
+                sizes={[[300, 250]]}
+            />
+        );
+
+        expect(container).toBeEmptyDOMElement()
+    });
+
+    it('should render nothing if adPath is empty', () => {
+        const { container } = render(
+            <AdUnit
+                id={"div-id"}
+                adPath={""}
+                sizes={[[300, 250]]}
+            />
+        );
+
+        expect(container).toBeEmptyDOMElement()
+    });
+
+    it('should render div if correct props are passed', () => {
+        const adPath = "/path";
+        const id = "slot-id";
+
+        const { container } = render(
+            <AdUnit
+                id={id}
+                adPath={adPath}
+                sizes={[[300, 250]]}
+            />
+        );
+
+        expect(container.firstChild?.firstChild.id).toBe(`div-gpt-ad-${id}`);
+    });
+
+    it('should set didomi script if consent is true', () => {
+        const adPath = "/path";
+        const id = "slot-id";
+
+        const { container } = render(
+            <AdUnit
+                id={id}
+                adPath={adPath}
+                sizes={[[300, 250]]}
+                enableDidomi
+            />
+        );
+
+        expect(container.firstChild.tagName).toBe("SCRIPT");
+        expect(container.firstChild.type).toBe("didomi/html");
+        expect(container.firstChild.getAttribute("data-vendor")).toBe("didomi:google");
+        expect(container.firstChild?.firstChild?.firstChild.id).toBe(`div-gpt-ad-${id}`);
+    });
+});

package/src/components/ad/ad_unit/index.js

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

package/src/components/ad/use_google_ad_manager/index.js

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

package/src/components/ad/use_google_ad_manager/useGoogleAdManager.docs.mdx

@@ -0,0 +1,27 @@
+---
+description: A hook to insert the Google Ad Manager (GPT) script.
+labels: ['google-ad-manager', 'gpt', 'didomi']
+---
+
+A hook that inserts the script from Google Ad Manager (GPT).
+
+The hook can also add consent attributes from [didomi](https://www.didomi.io/fr/) to manage user consent.
+
+### Component usage
+
+```js
+import { useGoogleAdManager } from '@logora/debate.ad.use_google_ad_manager';
+
+function MyComponentWithGPT() {
+  useGoogleAdManager();
+
+  return <div id="my-root">Hello World</div>;
+}
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>enable</font> | <font color="#397300">boolean</font> | &cross; | true | <font color="grey">*Whether to insert the script*</font> |
+| <font color='#4646c6'>enableDidomi</font> | <font color="#397300">boolean</font> | &cross; | false | <font color="grey">*Whether to add didomi attributes to manage user consent*</font> |
+| <font color='#4646c6'>refreshRate</font> | <font color="#397300">integer</font> | &cross; | 8000 | <font color="grey">*Ad refresh rate in milliseconds*</font> |

package/src/components/ad/use_google_ad_manager/useGoogleAdManager.jsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+export const useGoogleAdManager = (enable = true, enableDidomi = false, refreshRate = 8000) => {
+    useEffect(() => {
+        if (enable === true && typeof window !== 'undefined') {
+            if (!(window.googletag?.apiReady)) {
+                const libScript = document.createElement("script");
+                libScript.src = "https://securepubads.g.doubleclick.net/tag/js/gpt.js";
+                libScript.async = true;
+                if (enableDidomi === true) {
+                    libScript.type = "didomi/javascript";
+                    libScript.setAttribute("data-vendor-raw", "didomi:google");
+                    libScript.setAttribute("data-purposes", "cookies");
+                }
+                document.body.appendChild(libScript);
+            }
+
+            const googletag = window.googletag || (window.googletag = { cmd: [] });
+
+            googletag.cmd.push(() => {
+                googletag.pubads().enableSingleRequest();
+                googletag.pubads().disableInitialLoad();
+                googletag.enableServices();
+
+                googletag.pubads().addEventListener('impressionViewable', (event) => {
+                    setTimeout(() => {
+                        googletag.cmd.push(() => {
+                            googletag.pubads().refresh([event.slot]);
+                        });
+                    }, refreshRate);
+                });
+            });
+        }
+    }, []);
+
+    return null;
+}

package/src/components/ad/use_google_ad_manager/useGoogleAdManager.test.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import { render } from '@testing-library/react';
+import { useGoogleAdManager } from './useGoogleAdManager';
+
+const gptSrc = "https://securepubads.g.doubleclick.net/tag/js/gpt.js";
+
+describe('useGoogleAdManager', () => {
+    it('should load GPT script correctly', async () => {
+        vi.spyOn(document.body, 'appendChild');
+
+        const ComponentWithGoogleAdManager = () => {
+            useGoogleAdManager(true, false);
+
+            return <div>With GoogleAdManager</div>;
+        }
+
+        const container = render(<ComponentWithGoogleAdManager />);
+        expect(container.getByText('With GoogleAdManager')).toBeTruthy();
+
+        expect(document.body.appendChild).toBeCalledWith(
+            expect.objectContaining({
+                src: gptSrc,
+            })
+        );
+    });
+
+    it('should load GPT script correctly with didomi consent', () => {
+        vi.spyOn(document.body, 'appendChild');
+
+        const ComponentWithGoogleAdManager = () => {
+            useGoogleAdManager(true, true);
+
+            return <div>With GoogleAdManager and consent</div>;
+        }
+
+        const container = render(<ComponentWithGoogleAdManager />);
+
+        expect(container.getByText('With GoogleAdManager and consent')).toBeTruthy();
+
+        expect(document.body.appendChild).toBeCalledWith(
+            expect.objectContaining({
+                type: 'didomi/javascript',
+                src: gptSrc,
+            })
+        );
+    });
+})

package/src/components/ad/with_ad/WithAd.docs.mdx

@@ -0,0 +1,30 @@
+---
+description: A wrapper to display ads below elements
+labels: ['ad', 'google-ad-manager']
+---
+
+The WithAd wrapper allows to display an ad unit below components.
+
+It is useful in lists when the frequency of ads needs to be controlled.
+
+Use the `index` and `frequency` props to displays ads every {frequency} items.
+
+Other props such as ad path, sizes, targeting and consent management are passed to the underlying [AdUnit](bit.cloud/logora/debate/ad/ad_unit) component.
+
+### Component usage
+
+```js
+    import { WithAd } from '@logora/debate.ad.with_ad';
+```
+
+```js
+<WithAd
+    index={2}
+    id={"ad-id"}
+    adPath={"/path"}
+    sizes={[[300, 250]]}
+    frequency={3}
+>
+    <div>Hello world !</div>
+</WithAd>
+```

package/src/components/ad/with_ad/WithAd.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { AdUnit } from "@logora/debate/ad/ad_unit";
+import PropTypes from "prop-types";
+
+export const WithAd = ({
+	id,
+	adPath,
+	targeting,
+	sizes,
+	index,
+	frequency = 3,
+	enableDidomi = false,
+	children,
+	...rest
+}) => {
+	return (
+		<>
+			{React.cloneElement(children, rest)}
+			{id && adPath && (index + 1) % frequency === 1 && (
+				<AdUnit
+					id={index ? `${id}-${index}` : id}
+					adPath={adPath}
+					targeting={targeting}
+					sizes={sizes}
+					enableDidomi={enableDidomi}
+				/>
+			)}
+		</>
+	);
+};
+
+WithAd.propTypes = {
+	/** A string to be used as ad container div id */
+	id: PropTypes.string,
+	/** Ad slot path */
+	adPath: PropTypes.string,
+	/** An optional object which includes ad targeting key-value pairs */
+	targeting: PropTypes.object,
+	/** Sizes of slot */
+	sizes: PropTypes.array,
+	/** Index of the current item */
+	index: PropTypes.number,
+	/** Ads will be shown every N items according to this prop */
+	frequency: PropTypes.number,
+	/** Whether to add didomi attributes to manage user consent */
+	enableDidomi: PropTypes.bool,
+	/** Content below which an ad will be displayed */
+	children: PropTypes.node,
+	/** Extra props passed to children */
+	rest: PropTypes.object,
+};

package/src/components/ad/with_ad/WithAd.test.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { WithAd } from './WithAd';
+
+describe('WithAd', () => {
+    it('should render only children if path is empty', () => {
+        render(
+            <WithAd
+                id={"ad-id"}
+                adPath={""}
+                sizes={[[300, 250]]}
+            >
+                <div>Hello world</div>
+            </WithAd>
+        );
+
+        expect(screen.getByText("Hello world")).toBeTruthy();
+        expect(screen.queryByTestId("div-gpt-ad-ad-unit")).toBeNull();
+    });
+
+    it('should render children only if no index is passed', () => {
+        render(
+            <WithAd
+                id={"ad-id"}
+                adPath={"/6355419/Travel"}
+                sizes={[[300, 250]]}
+            >
+                <div>Hello world</div>
+            </WithAd>
+        );
+
+        expect(screen.getByText("Hello world")).toBeTruthy();
+        expect(screen.queryByTestId("div-gpt-ad-ad-id")).toBeNull();
+    });
+
+    it('should render children and ad unit if index and frequency match', () => {
+        render(
+            <WithAd
+                id={"ad-id"}
+                adPath={"/6355419/Travel"}
+                sizes={[[300, 250]]}
+                index={0}
+                frequency={2}
+            >
+                <div>Hello world</div>
+            </WithAd>
+        );
+
+        expect(screen.getByText("Hello world")).toBeTruthy();
+        expect(document.getElementById('div-gpt-ad-ad-id')).toBeTruthy();
+    });
+
+    it('should render children and ad unit with correct id', () => {
+        render(
+            <WithAd
+                id={"ad-id"}
+                adPath={"/6355419/Travel"}
+                sizes={[[300, 250]]}
+                index={12}
+                frequency={4}
+            >
+                <div>Hello world</div>
+            </WithAd>
+        );
+
+        expect(screen.getByText("Hello world")).toBeTruthy();
+        expect(document.getElementById('div-gpt-ad-ad-id-12')).toBeTruthy();
+    });
+
+    it('should render only children if index and frequency do not match', () => {
+        render(
+            <WithAd
+                id={"ad-id"}
+                adPath={"/path"}
+                sizes={[[300, 250]]}
+                index={1}
+                frequency={2}
+            >
+                <div>Hello world</div>
+            </WithAd>
+        );
+
+        expect(screen.getByText("Hello world")).toBeTruthy();
+        expect(document.getElementById('div-gpt-ad-ad-id')).toBeNull();
+    });
+
+    it('should pass extra props to children', () => {
+        render(
+            <WithAd
+                id={"ad-id"}
+                adPath={"/path"}
+                sizes={[[300, 250]]}
+                index={1}
+                frequency={2}
+                data-testid={"children-testid"}
+            >
+                <div>Hello world</div>
+            </WithAd>
+        );
+
+        expect(screen.getByText("Hello world")).toBeTruthy();
+        expect(screen.getByTestId("children-testid")).toHaveTextContent("Hello world");
+    });
+});

package/src/components/ad/with_ad/index.js

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