@logora/debate 0.1.0 → 0.2.0

package/src/components/share/share_box/ShareBox.test.jsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ShareBox } from './ShareBox';
-import { IntlProvider } from 'react-intl';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-describe('ShareBox', () => {
-    it('should render box with share option', () => {
-        const { queryAllByRole } = render(
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ShareBox 
-                        shareUrl="https://example.com/share-link"
-                        shareTitle="Here is an interesting link"
-                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                    />
-                </IconProvider>
-            </IntlProvider>
-        );
-        expect(queryAllByRole("button")).toHaveLength(4)
-    });
-
-    it('should copy to clipboard when sharing link', async () => {
-        const user = userEvent.setup();
-        const shareUrl = "https://example.com/share-link";
-
-        Object.defineProperty(window.navigator, 'clipboard', {
-            configurable: true,
-            value: {
-                writeText: vi.fn(),
-            },
-        });
-
-        const { queryAllByRole, getByText } = render(
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ShareBox 
-                        shareUrl={shareUrl}
-                        shareTitle="Here is an interesting link"
-                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                    />
-                </IconProvider>
-            </IntlProvider>
-        );
-        const icons = (queryAllByRole("button"));
-        const linkIcon = icons[0];
-
-        await user.hover(linkIcon);
-        expect(getByText(/Copy to clipboard/i)).toBeTruthy();
-
-        await user.click(linkIcon);
-        // TODO : add copy to clipboard test
-    });
-
-    it('should open Facebook share link on click', async () => {
-        const user = userEvent.setup();
-        const { queryAllByRole, getByText} = render(
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ShareBox 
-                        shareUrl="https://example.com/share-link"
-                        shareTitle="Here is an interesting link"
-                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                    />
-                </IconProvider>
-            </IntlProvider>
-        );
-        const icons = (queryAllByRole("button"));
-        const facebookIcon = icons[1];
-
-        await user.hover(facebookIcon);
-        expect(getByText(/Share on Facebook/i)).toBeTruthy();
-    });
-
-    it('should open twitter share link on click', async () => {
-        const user = userEvent.setup();
-        const { queryAllByRole, getByText} = render(
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ShareBox 
-                        shareUrl="https://example.com/share-link"
-                        shareTitle="Here is an interesting link"
-                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                    />
-                </IconProvider>
-            </IntlProvider>
-        );
-        const icons = (queryAllByRole("button"));
-        const twitterIcon = icons[2];
-
-        await user.hover(twitterIcon);
-        expect(getByText(/Share on Twitter/i)).toBeTruthy();
-    });
-
-    it('should open email share on click', async () => {
-        const user = userEvent.setup();
-        const { queryAllByRole, getByText} = render(
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ShareBox 
-                        shareUrl="https://example.com/share-link"
-                        shareTitle="Here is an interesting link"
-                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                    />
-                </IconProvider>
-            </IntlProvider>
-        );
-        const icons = (queryAllByRole("button"));
-        const mailIcon = icons[3];
-
-        await user.hover(mailIcon);
-        expect(getByText(/Share by email/i)).toBeTruthy();
-    });
-
-    it('should render box with code share option and copy to clipboard on click', async () => {
-        const user = userEvent.setup();
-        const { queryAllByRole, getByText } = render(
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ShareBox 
-                        shareUrl="https://example.com/share-link"
-                        shareTitle="Here is an interesting link"
-                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                        showShareCode
-                    />
-                </IconProvider>
-            </IntlProvider>
-        );
-        expect(queryAllByRole("button")).toHaveLength(5);
-
-        const icons = (queryAllByRole("button"));
-        const codeIcon = icons[4];
-
-        await user.hover(codeIcon);
-        expect(getByText(/Copy embed code/i)).toBeTruthy();
-
-        await user.click(codeIcon);
-        // TODO : add copy to clipboard test
-    });
-});

package/src/components/share/share_box/index.js

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

package/src/components/share/share_button/ShareButton.docs.mdx

@@ -1,26 +0,0 @@
----
-description: A share button component.
----
-
-import { ShareButton } from './ShareButton';
-import { IntlProvider } from 'react-intl';
-
-A button that opens ShareBox on click on desktop, and the navigator's native share dialog on mobile.
-
-Share URL and text will be passed to the different share options.
-
-It must be wrapped around [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
-
-It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
-
-### Component usage
-```js
-<IntlProvider locale="fr">
-    <ShareButton
-        showText 
-        shareUrl="https://example.com/share-link"
-        shareTitle="Here is an interesting link"
-        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-    />
-</IntlProvider>
-```

package/src/components/share/share_button/ShareButton.jsx

@@ -1,102 +0,0 @@
-import React, { useState, useRef } from "react";
-import { Icon } from "@logora/debate/icons/icon";
-import { ShareBox } from "@logora/debate/share/share_box";
-import { useIntl } from "react-intl";
-import useOnClickOutside from 'use-onclickoutside';
-import styles from "./ShareButton.module.scss";
-import cx from "classnames";
-import PropTypes from "prop-types";
-
-export const ShareButton = ({ showText, shareUrl, shareTitle, shareText = false, shareCode, showShareCode = false, iconSize = 22, className, tooltipPosition = 'bottom' }) => {
-	const popoverContentRef = useRef();
-	const intl = useIntl();
-	const [popoverActive, setPopoverActive] = useState(false);
-
-	const buildShareLink = () => {
-		let shareUrlBuild = shareUrl;
-		if (typeof window !== 'undefined') {
-			shareUrlBuild += "?redirect_url=" + window.location.protocol + "//" + window.location.hostname;
-		}
-		return shareUrlBuild;
-	}
-
-	const shareUrlBuild = buildShareLink();
-
-	const handleClickOutsidePopover = (event) => {
-		if (popoverContentRef && !popoverContentRef.current.contains(event.target)) {
-			setPopoverActive(false);
-		}
-	};
-
-	const handleShare = () => {
-		if (typeof window !== 'undefined') {
-			let mql = window.matchMedia("(max-width: 600px)");
-			if ((typeof window !== 'undefined') && window.navigator.share && window.navigator.maxTouchPoints && window.navigator?.maxTouchPoints > 0 && mql.matches) {
-				handleMobileShare();
-			} else {
-				setPopoverActive(true);
-			}
-		}
-	};
-
-	const handleMobileShare = () => {
-		if (typeof window !== 'undefined') {
-			window.navigator.share({
-				text: shareText,
-				title: shareTitle,
-				url: shareUrlBuild
-			}).catch(error => {
-				// DO NOTHING
-			});
-		}
-	}
-
-	useOnClickOutside(popoverContentRef, handleClickOutsidePopover);
-
-	return (
-		<div
-			tabIndex='0'
-			onKeyDown={(e) => {
-				if (e.key === "Enter" || e.key === " ") {
-				  e.preventDefault();
-				  handleShare();
-				}
-			  }}
-			title={intl.formatMessage({ id: "share.share_button.text", defaultMessage: "Share" })}
-			className={cx(styles.shareButtonContainer, className)}
-			onClick={handleShare}
-			data-tid="action_share_button"
-		>
-			<div
-				className={cx(styles.popoverWrapper, { [styles.popoverActive]: popoverActive })}
-			>
-				<Icon name="share" height={iconSize} width={iconSize} />
-				{showText && <div className={styles.shareButtonText}>{intl.formatMessage({ id: "share.share_button.text", defaultMessage: "Share" })}</div>}
-				<div ref={popoverContentRef} className={cx(styles.popoverContent, { [styles.popoverContentWithCode]: showShareCode })}>
-					{popoverActive && <ShareBox shareUrl={shareUrlBuild} shareTitle={shareTitle} shareText={shareText} showShareCode={showShareCode} shareCode={shareCode} tooltipPosition={tooltipPosition} />}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-ShareButton.propTypes = {
-	/** If `true`, show "Share" text next to icon */
-	showText: PropTypes.bool,
-	/** Url to share */
-	shareUrl: PropTypes.string.isRequired,
-	/** Title of the content that will be shared */
-	shareTitle: PropTypes.string.isRequired,
-	/** Description of the shared content */
-	shareText: PropTypes.string,
-	/** Code to share */
-	shareCode: PropTypes.string,
-	/** If `true`, show copy code icon */
-	showShareCode: PropTypes.bool,
-	/** Size of icons */
-	iconSize: PropTypes.number,
-	/** Style to pass */
-	className: PropTypes.string,
-	/** Position of the tooltip */
-	tooltipPosition: PropTypes.string,
-};

package/src/components/share/share_button/ShareButton.module.scss

@@ -1,68 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.shareButtonContainer {
-  display: flex !important;
-  align-content: center !important;
-  justify-content: center !important;
-  padding: 0 !important;
-  cursor: pointer;
-}
-
-.popoverWrapper {
-  position: relative;
-  display: flex !important;
-  align-items: center !important;
-  color: theme.$text-primary;
-}
-
-.popoverWrapper.popoverActive .popoverContent {
-  z-index: 2;
-  opacity: 1;
-  visibility: visible;
-  transform: translate(-50%, 0%);
-}
-
-.popoverContent {
-  opacity: 0;
-  visibility: hidden;
-  position: absolute;
-  left: 25%;
-  top: 35px;
-  padding: spacing.$spacer;
-  border: 1px solid theme.$text-secondary;
-  border-radius: theme.$box-border-radius;
-  box-shadow: theme.$box-shadow;
-  background: theme.$background-color-primary;
-  color: theme.$text-primary;
-  line-height: spacing.$spacer-lg;
-  width: auto;
-  &:before {
-    position: absolute;
-    z-index: -1;
-    content: "";
-    right: calc(50% - 10px);
-    top: -10px;
-    border-style: solid;
-    border-width: 0 10px 10px 10px;
-    border-color: transparent transparent theme.$text-secondary transparent;
-    transition-duration: 0.3s;
-    transition-property: transform;
-  }
-  &:after {
-    position: absolute;
-    z-index: -1;
-    content: "";
-    right: calc(50% - 10px);
-    top: -9px;
-    border-style: solid;
-    border-width: 0 10px 10px 10px;
-    border-color: transparent transparent theme.$background-color-primary transparent;
-    transition-duration: 0.3s;
-    transition-property: transform;
-  }
-}
-
-.shareButtonText {
-  @include spacing.pl(1, xs);
-}

package/src/components/share/share_button/ShareButton.stories.jsx

@@ -1,51 +0,0 @@
-export default {
-    title: 'Share/Share Button',
-    component: ShareButton,
-    args: {
-        shareUrl: 'https://example.fr/test/',
-        shareTitle: 'Share this !',
-        shareText: 'You should check this interesting link',
-        showText: false
-    },
-    argTypes: {
-        shareUrl: { control: 'text' },
-        shareTitle: { control: 'text' },
-        shareText: { control: 'text' },
-        showText: { control: 'boolean' }
-    }
-};
-
-import React from 'react';
-import { ShareButton } from './ShareButton';
-import { IntlProvider } from 'react-intl';
-import { ConfigProvider } from '@logora/debate/data/config_provider';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export const DefaultShareButton = () => {
-    return (
-        <div style={{width: "200px"}}>
-            <IntlProvider locale="en">
-                <ConfigProvider config={{theme:{}}}>
-                    <IconProvider library={regularIcons}>
-                        <ShareButton shareUrl={"https://example.fr/test/"} shareTitle="Share this !" shareText={"You should check this interesting link"} />
-                    </IconProvider>
-                </ConfigProvider>
-            </IntlProvider>
-        </div>
-    );
-};
-
-export const ShareButtonWithText = () => {
-    return (
-        <div style={{width: "200px"}}>
-            <IntlProvider locale="en">
-                <ConfigProvider config={{theme:{}}}>
-                    <IconProvider library={regularIcons}>
-                        <ShareButton showText shareUrl={"https://example.fr/test/"} shareTitle="Share this !" shareText={"You should check this interesting link"} />
-                    </IconProvider>
-                </ConfigProvider>
-            </IntlProvider>
-        </div>
-    );
-};

package/src/components/share/share_button/ShareButton.test.jsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ShareButton } from './ShareButton';
-import { IntlProvider } from 'react-intl';
-import { ConfigProvider } from '@logora/debate/data/config_provider';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-describe('ShareButton', () => {
-    beforeAll(() => {
-        Object.defineProperty(window, 'matchMedia', {
-            writable: true,
-            value: vi.fn().mockImplementation((query) => ({
-                matches: false,
-                media: query,
-                onchange: null,
-                addListener: vi.fn(),
-                removeListener: vi.fn(),
-                addEventListener: vi.fn(),
-                removeEventListener: vi.fn(),
-                dispatchEvent: vi.fn(),
-            })),
-        });
-    });
-    
-    it('should render button with share text', () => {
-        const { getByText, queryAllByRole } = render(
-            <IntlProvider locale="en">
-                <ConfigProvider config={{theme:{}}}>
-                    <IconProvider library={regularIcons}>
-                        <ShareButton 
-                            showText
-                            shareUrl="https://example.com/share-link"
-                            shareTitle="Here is an interesting link"
-                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                        />
-                    </IconProvider>
-                </ConfigProvider>
-            </IntlProvider>
-        );
-        expect(getByText("Share")).toBeTruthy();
-        expect(queryAllByRole("button")).toHaveLength(0);
-    });
-
-    it('should not show text if props false', () => {
-        const { queryByText, queryAllByRole } = render(
-            <IntlProvider locale="en">
-                <ConfigProvider config={{theme:{}}}>
-                    <IconProvider library={regularIcons}>
-                        <ShareButton 
-                            shareUrl="https://example.com/share-link"
-                            shareTitle="Here is an interesting link"
-                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                        />
-                    </IconProvider>
-                </ConfigProvider>
-            </IntlProvider>
-        );
-        expect(queryByText("Share")).toBeNull();
-        expect(queryAllByRole("button")).toHaveLength(0);
-    });
-
-    it('should show share box when clicking on button', async () => {
-        const { getByText, queryAllByRole } = render(
-            <IntlProvider locale="en">
-                <ConfigProvider config={{theme:{}}}>
-                    <IconProvider library={regularIcons}>
-                        <ShareButton 
-                            showText
-                            shareUrl="https://example.com/share-link"
-                            shareTitle="Here is an interesting link"
-                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                        />
-                    </IconProvider>
-                </ConfigProvider>
-            </IntlProvider>
-        );
-        expect(getByText("Share")).toBeTruthy();
-
-        userEvent.click(getByText("Share"));
-
-        await waitFor(() => {
-            expect(queryAllByRole("button")).toHaveLength(4);
-        });
-    });
-
-    it('should close box when click outside', async () => {
-        const { getByText, queryAllByRole } = render(
-            <IntlProvider locale="en">
-                <ConfigProvider config={{theme:{}}}>
-                    <IconProvider library={regularIcons}>
-                        <ShareButton 
-                            showText
-                            shareUrl="https://example.com/share-link"
-                            shareTitle="Here is an interesting link"
-                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
-                        />
-                    </IconProvider>
-                </ConfigProvider>
-            </IntlProvider>
-        );
-        expect(getByText("Share")).toBeTruthy();
-
-        userEvent.click(getByText("Share"));
-
-        await waitFor(() => {
-            expect(queryAllByRole("button")).toHaveLength(4);
-        });
-
-        userEvent.click(document.body);
-
-        await waitFor(() => {
-            expect(queryAllByRole("button")).toHaveLength(0);
-        });
-    });
-});

package/src/components/share/share_button/index.js

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

package/src/components/share/share_modal/ShareModal.docs.mdx

@@ -1,29 +0,0 @@
----
-description: A modal to display ShareBox component.
-labels: ['modal']
----
-
-A modal component that displays the ShareBox component.
-
-It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
-
-### Component usage
-
-```js
-    import { ShareModal } from "@logora/debate.share.share_modal";
-```
-
-```js
-    <IntlProvider locale="en">
-        <ModalProvider>
-            <ShareModal 
-                shareUrl="https://app.logora.fr/share/p/48656"
-                shareText="Text"
-                shareTitle="Title"
-                title="Modal Title"
-                shareCode='<iframe src="https://api.logora.fr/embed.html?shortname="[...]'
-                showShareCode={true}
-            />
-        </ModalProvider>
-    </IntlProvider>
-```

package/src/components/share/share_modal/ShareModal.jsx

@@ -1,49 +0,0 @@
-import React from "react";
-import { Modal } from '@logora/debate/dialog/modal';
-import { ShareBox } from "@logora/debate/share/share_box";
-import styles from "./ShareModal.module.scss";
-import PropTypes from "prop-types";
-
-export const ShareModal = ({ shareUrl, title, shareTitle, shareText, showShareCode = false, shareCode }) => {
-    const buildShareLink = () => {
-        let shareUrlBuild = shareUrl;
-        if(typeof window !== 'undefined') {
-            shareUrl += "?redirect_url=" + window.location.protocol + "//" + window.location.hostname;
-        }
-        return shareUrlBuild;
-    }
-
-    const shareUrlBuild = buildShareLink();
-
-    return (
-        <div>
-            <Modal title={title}>
-                <div className={styles.modalContainer}>
-                    <ShareBox 
-                        shareUrl={shareUrlBuild} 
-                        shareTitle={shareTitle} 
-                        shareText={shareText} 
-                        tooltipPosition={"top"} 
-                        showShareCode={showShareCode}
-                        shareCode={shareCode}
-                    />
-                </div>
-            </Modal>
-        </div>
-    )
-}
-
-ShareModal.propTypes = {
-	/** Url to share */
-	shareUrl: PropTypes.string.isRequired,
-	/** Description of the shared content */
-	shareText: PropTypes.string,
-	/** Title of the content that will be shared */
-	shareTitle: PropTypes.string.isRequired,
-	/** Title passed to the modal */
-	title: PropTypes.string.isRequired,
-	/** Code to share */
-	shareCode: PropTypes.string,
-	/** If `true`, show copy code icon */
-	showShareCode: PropTypes.bool,
-};

package/src/components/share/share_modal/ShareModal.module.scss

@@ -1,21 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-@use 'styles/display' as display;
-
-.modalContainer {
-    display: flex;
-    justify-content: center;
-    border-radius: theme.$box-border-radius;
-    box-shadow: theme.$box-shadow;
-    border: theme.$box-border;
-    @include spacing.py(3, xs);
-    @include display.media-breakpoint-down(xs) {
-        @include spacing.mb(3, xs);
-        @include spacing.mt(1, xs);
-    }
-    svg {
-        cursor: pointer;
-        width: 25px;
-        height: 25px;
-    }
-}

package/src/components/share/share_modal/ShareModal.stories.jsx

@@ -1,48 +0,0 @@
-export default {
-    title: 'Share/Share Modal',
-    component: ShareModal,
-    args: {
-        title: 'Modal title',
-        shareUrl: 'https://app.logora.fr/share/p/48656',
-        shareText: 'Text',
-        shareTitle: 'Title',
-        shareCode: '<iframe src="https://api.logora.fr/embed.html?shortname="[...]',
-        showShareCode: true
-    },
-    argTypes: {
-        title: { control: 'text' },
-        shareUrl: { control: 'text' },
-        shareText: { control: 'text' },
-        shareTitle: { control: 'text' },
-        shareCode: { control: 'text' },
-        showShareCode: { control: 'boolean' }
-    }
-};
-
-import React from 'react';
-import { ShareModal } from './ShareModal';
-import { ModalProvider } from '@logora/debate/dialog/modal';
-import { IntlProvider } from 'react-intl';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export const DefaultShareModal = () => {
-    return (
-        <div style={{width:"300px", height: "300px"}}>
-            <IntlProvider locale="en">
-                <IconProvider library={regularIcons}>
-                    <ModalProvider>
-                        <ShareModal
-                            title="Modal title"
-                            shareUrl="https://app.logora.fr/share/p/48656"
-                            shareText="Text"
-                            shareTitle="Title"
-                            shareCode='<iframe src="https://api.logora.fr/embed.html?shortname="[...]'
-                            showShareCode={true}
-                        />
-                    </ModalProvider>
-                </IconProvider>
-            </IntlProvider>
-        </div>
-    );
-};