@logora/debate 0.1.0 → 0.1.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/argument/argument/Argument.docs.mdx

@@ -1,60 +0,0 @@
----
-description: A box component to show argument.
-labels: ['argument']
----
-
-A box component to show argument.  
-It has a different style for answers and deleted message.
-
-### Component usage
-```js
-    import { Argument } from '@logora/debate.argument.argument';
-```
-```js
-const argument = {
-    id: 414,
-    content: "My super argument",
-    upvotes: 0,
-    group_id: 417,
-    is_reply: false,
-    created_at: "2024-02-07T10:34:16.888Z",
-    score: 50,
-    author: {
-        image_url: "user.image_url",
-        full_name: "Full Name",
-        slug: "full-name",
-        points: 1320,
-        last_activity: "2024-02-07T10:34:16.888Z",
-        description: "Super job"
-    },
-    position: {
-        id: 1,
-        name: "Yes",
-        language: "en",
-        translation_entries: []
-    }
-};
-
-const positions = [
-    {
-        id: 1,
-        name: "Yes",
-        language: "en",
-        translation_entries: []
-    },
-    {
-        id: 2,
-        name: "No",
-        language: "en",
-        translation_entries: []
-    },
-];
-
-<Argument
-    argument={argument}
-    positions={positions}
-    groupName={"Debate name"}
-    nestingLevel={0}
-    disabled={false}
-/>
-```