@logora/debate 0.1.0 → 0.2.0

package/src/components/text/read_more/index.js

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

package/src/components/tools/hash_scroll/HashScroll.docs.mdx

@@ -1,27 +0,0 @@
----
-description: A component to enable scroll based on page hash.
-labels: ['scroll', 'hash-scroll']
----
-
-A component to enable scroll based on page hash.
-Wrap your component with HashScroll and pass an element ID.
-If hash matches the elementId passed in props, this component will automatically trigger a scroll to the element.
-
-It must be inside a router from react-router.
-
-### Component usage
-
-```js
-    import { HashScroll } from '@logora/debate.tools.hash_scroll';
-```
-
-```js
-    <BrowserRouter>
-        <HashScroll 
-            elementId={"myId"}
-            onScroll={() => console.log("Starting scroll !")}
-        >
-            <div id="myId">Scroll to element</div>
-        </HashScroll>
-    </BrowserRouter>
-```

package/src/components/tools/hash_scroll/HashScroll.jsx

@@ -1,36 +0,0 @@
-import React, { useEffect } from "react";
-import PropTypes from 'prop-types';
-import { useLocation } from "react-router";
-
-export const HashScroll = ({ elementId, onScroll, children }) => {
-    const location = useLocation();
-
-	useEffect(() => {
-		if (!elementId) return;
-
-		if (typeof window !== "undefined") {
-			let pageAnchor = location.hash.slice(1);
-			const anchorRegex = new RegExp(elementId);
-			if(pageAnchor.match(anchorRegex)) {
-				const element = document.getElementById(elementId);
-				if (element) {
-					if(onScroll) {
-						onScroll();
-					}
-					element.scrollIntoView({ behavior: "smooth" });
-				}
-			}
-		}
-	}, [location.hash])
-
-	return <>{ children }</>;
-}
-
-HashScroll.propTypes = {
-	/** ID of the element to scroll to */
-	elementId: PropTypes.string,
-	/** Callback when element is scrolled to */
-	onScroll: PropTypes.func,
-	/** Children to render */
-	children: PropTypes.node
-};

package/src/components/tools/hash_scroll/HashScroll.test.jsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { HashScroll } from "./HashScroll";
-import { render } from '@testing-library/react';
-import { MemoryRouter } from "react-router-dom";
-
-const hash = "my-element";
-
-let scrollIntoViewMock = vi.fn();
-
-describe('HashScroll', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
-  });
-
-  it("should return children and call scrollIntoView", async () => {
-    const dom = render(
-      <MemoryRouter initialEntries={[`/#${hash}`]}>
-        <HashScroll elementId={hash}><div id={hash}>Hello World!</div></HashScroll>
-      </MemoryRouter>
-    );
-
-    const el = dom.baseElement.firstChild?.firstChild;
-
-    expect(el).toHaveTextContent("Hello World!");
-    expect(el).toHaveAttribute("id", hash);
-
-    expect(scrollIntoViewMock).toHaveBeenCalled();
-    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not call scrollIntoView if element not present", async () => {
-    const dom = render(
-      <MemoryRouter initialEntries={[`/#${hash}`]}>
-        <HashScroll elementId={hash}><div id="random-id">Hello World!</div></HashScroll>
-      </MemoryRouter>
-    );
-
-    const el = dom.baseElement.firstChild?.firstChild;
-
-    expect(el).toHaveTextContent("Hello World!");
-
-    expect(scrollIntoViewMock).not.toHaveBeenCalled();
-  });
-  
-  it("should call onScroll when passed", async () => {
-    const onScroll = vi.fn();
-    
-    const dom = render(
-      <MemoryRouter initialEntries={[`/#${hash}`]}>
-        <HashScroll elementId={hash} onScroll={onScroll}><div id={hash}>Hello World!</div></HashScroll>
-      </MemoryRouter>
-    );
-
-    const el = dom.baseElement.firstChild?.firstChild;
-
-    expect(el).toHaveTextContent("Hello World!");
-    expect(el).toHaveAttribute("id", hash);
-
-    expect(scrollIntoViewMock).toHaveBeenCalled();
-    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
-
-    expect(onScroll).toHaveBeenCalled();
-    expect(onScroll).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/tools/hash_scroll/index.js

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

package/src/components/tools/scroll_to_top/ScrollToTop.docs.mdx

@@ -1,28 +0,0 @@
----
-description: A component to scroll to the top of an element.
-labels: ['scroll', 'top-scroll']
----
-
-import { ScrollToTop } from './ScrollToTop';
-import { BrowserRouter } from "react-router-dom";
-
-A component to scroll to the top of an element.
-
-It must be inside a router from react-router.
-
-### Component usage
-```js
-    import { ScrollToTop } from '@logora/debate.tools.scroll_to_top';
-```
-```js
-<BrowserRouter>
-    <ScrollToTop elementId="toTheTop">
-        <div id="toTheTop">You will be at the top of this element.</div>
-    </ScrollToTop>
-</BrowserRouter>
-```
-
-### Properties
-| **Name**      | **Type** | **Required** | **Default** | **Description** |
-| ----------- | ----------- | :-----------: | ----------- | ----------- |
-| <font color='#4646c6'>elementId</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*scroll to this element id*</font> |

package/src/components/tools/scroll_to_top/ScrollToTop.jsx

@@ -1,22 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useLocation } from 'react-router';
-
-export const ScrollToTop = ({ elementId }) => {
-    const { pathname, search } = useLocation();
-    const firstRender = useRef(true);
-
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            if (!firstRender.current) {
-                const element = document.getElementById(elementId);
-                if (element) {
-                    element.scrollIntoView({ behavior: 'smooth' });
-                }
-            } else {
-                firstRender.current = false;
-            }
-        }
-    }, [pathname, search]);
-
-    return null;
-}

package/src/components/tools/scroll_to_top/ScrollToTop.stories.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { BrowserRouter, useNavigate } from 'react-router-dom';
-import { ScrollToTop } from './ScrollToTop';
-
-const meta = {
-    title: 'Tools/Scroll To Top',
-    component: ScrollToTop,
-    args: {
-        elementId: 'test'
-    },
-    argTypes: {
-        elementId: {
-            control: 'text'
-        }
-    },
-    render: ({ elementId }) => (
-        <BrowserRouter>
-            <InnerComponent elementId={elementId} />
-        </BrowserRouter>
-    )
-};
-
-export default meta;
-
-export const InnerComponent = ({ elementId = "test" }) => {
-    const navigate = useNavigate();
-
-    return (
-        <>
-            <div id="button" onClick={() => navigate("?test=kjkj")}>Navigate</div>
-            <div id="test" style={{ backgroundColor: 'red', height: '200px', marginTop: '100vh', marginBottom: '100vh', scrollMarginTop: '10px' }}>
-                Scroll here
-            </div>
-            <ScrollToTop elementId={elementId} />
-        </>
-    )
-}
-
-export const DefaultScrollToTop = {};
-

package/src/components/tools/scroll_to_top/ScrollToTop.test.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { BrowserRouter } from 'react-router-dom';
-import { InnerComponent } from './ScrollToTop.stories';
-
-describe('ScrollToTop', () => {  
-    beforeEach(() => {
-        vi.clearAllMocks();
-    });
-
-    it('should scroll to the element with the specified ID on location change', async () => {
-        const scrollIntoViewMock = vi.fn();
-        const getElementByIdMock = vi.fn(() => ({
-            scrollIntoView: scrollIntoViewMock
-        }));
-        window.document.getElementById = getElementByIdMock;
-        window.scrollTo = vi.fn();
-
-        render(
-            <BrowserRouter>
-                <InnerComponent />
-            </BrowserRouter>
-        );
-
-        expect(getElementByIdMock).not.toHaveBeenCalledWith('test');
-        expect(scrollIntoViewMock).not.toHaveBeenCalled();
-
-        const button = screen.getByText("Navigate")
-        expect(button).toBeTruthy();
-        await userEvent.click(button)
-
-        expect(getElementByIdMock).toHaveBeenCalledWith('test');
-        expect(scrollIntoViewMock).toHaveBeenCalled();
-    });  
-});

package/src/components/tools/scroll_to_top/index.js

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

package/src/components/translation/translated_content/TranslatedContent.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { useTranslatedContent } from './useTranslatedContent';
-import PropTypes from "prop-types";
-
-export const TranslatedContent = ({ originalContent, originalLanguage, targetField, translations }) => {
-    const translatedContent = useTranslatedContent(originalContent, originalLanguage, targetField, translations);
-
-    return (
-        <>
-            { translatedContent.translatedContent }
-        </>
-    )
-}
-
-TranslatedContent.propTypes = {
-    /** The content in its original language */
-    originalContent: PropTypes.string,
-    /** The original language */
-    originalLanguage: PropTypes.string,
-    /** Type of the target field  */
-    targetField: PropTypes.string,
-    /** An array containing the other translations  */
-    translations: PropTypes.array,
-  };

package/src/components/translation/translated_content/TranslatedContent.test.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { TranslatedContent } from './TranslatedContent';
-import { IntlProvider } from 'react-intl';
-
-describe('useTranslatedContent', () => {
-    it('should render translated content', () => {
-        const translation_entries = [
-            {
-                target_language: "fr",
-                is_approved: true,
-                origin_field: "title",
-                translated_content: "Un titre"
-            }
-        ];
-    
-        const component = render(
-            <IntlProvider locale="fr">
-                <TranslatedContent  
-                    originalContent={"A title"}
-                    originalLanguage={"en"}
-                    targetField={"title"}
-                    translations={translation_entries}
-                />
-            </IntlProvider>
-        );
-    
-        expect(screen.getByText("Un titre"));
-    });
-});

package/src/components/translation/translated_content/index.js

@@ -1,3 +0,0 @@
-export { useTranslatedContent } from "./useTranslatedContent";
-export { getTranslatedContent } from "./useTranslatedContent";
-export { TranslatedContent } from "./TranslatedContent";

package/src/components/translation/translated_content/useTranslatedContent.docs.mdx

@@ -1,80 +0,0 @@
----
-description: A hook and a component to display content in correct language.
-labels: ['translated-content']
----
-
-A hook and a component to display the current content with the correct choosen language.  
-The `useTranslatedContent` hook displays the original content if the user language is the same as the global language.
-It can also display the original content anyway if needed with the resetContent function.
-It also returns a `isTranslated` boolean to check on whether the content returned is a translated content or not.
-It receive `originalContent`, `originalLanguage`, `targetField` and a `translations` array params.  
-The `TranslatedContent` component uses the hook, so it can be used instead to display translated content.
-
-### Usage
-```js
-import { useTranslatedContent } from '@logora/debate.translation.translated_content';
-```
-or
-```js
-import { TranslatedContent } from '@logora/debate.translation.translated_content';
-```
-
-### Hook integration
-```js
-const Component = () => {
-    const myContent = { title: "Bonjour monde !", language: "en" }
-    const translations = [
-        {   id: 438,                               
-            translatable_id: 710,                  
-            translatable_type: "Message",          
-            target_language: "en",
-            origin_language: "fr",
-            origin_field: "title",
-            translation_method: "deepl",
-            origin_content: "Bonjour monde !",
-            translated_content: "Hello world!",
-            is_approved: true,
-            translated_at: Fri, 30 Jun 2023 15:03:49.688198000 UTC +00:00,
-            approved_at: Fri, 30 Jun 2023 15:03:49.746854000 UTC +00:00,
-            created_at: Fri, 30 Jun 2023 15:03:49.746854000 UTC +00:00,
-            updated_at: Fri, 30 Jun 2023 15:03:49.746854000 UTC +00:00,
-            application_id: 1
-        }
-    ]
-    const { titleTranslated, resetContent } = useTranslatedContent(myContent.content, myContent.language, "title", translations);
-
-
-	return (
-        <div>
-            { titleTranslated }
-        </div>
-    )
-}
-```
-
-### Component integration
-```js
-<TranslatedContent
-    originalContent={"A title"}
-    originalLanguage={"en"}
-    targetField={"title"}
-    translations={[
-        {   id: 438,                               
-            translatable_id: 710,                  
-            translatable_type: "Message",          
-            target_language: "en",
-            origin_language: "fr",
-            origin_field: "title",
-            translation_method: "deepl",
-            origin_content: "Bonjour monde !",
-            translated_content: "Hello world!",
-            is_approved: true,
-            translated_at: Fri, 30 Jun 2023 15:03:49.688198000 UTC +00:00,
-            approved_at: Fri, 30 Jun 2023 15:03:49.746854000 UTC +00:00,
-            created_at: Fri, 30 Jun 2023 15:03:49.746854000 UTC +00:00,
-            updated_at: Fri, 30 Jun 2023 15:03:49.746854000 UTC +00:00,
-            application_id: 1
-        }
-    ]}
-/>
-```

package/src/components/translation/translated_content/useTranslatedContent.jsx

@@ -1,57 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useIntl } from 'react-intl';
-
-export const getTranslatedContent = (originalContent, originalLanguage, targetField, translations, locale) => {
-    const isValidTranslation = (translationEntry) => {
-        return translationEntry.target_language?.substring(0, 2) === locale?.substring(0, 2) && 
-               translationEntry.is_approved && 
-               translationEntry.origin_field === targetField;
-    }
-    
-    if (locale?.substring(0, 2) !== originalLanguage?.substring(0, 2) && translations?.length > 0) {
-        let currentTranslatedContent = translations.filter(t => isValidTranslation(t))[0];
-        if (currentTranslatedContent) {
-            return currentTranslatedContent.translated_content;
-        }
-    }
-    return originalContent;
-};
-
-export const useTranslatedContent = (originalContent, originalLanguage, targetField, translations) => {
-    const intl = useIntl();
-    const [isTranslated, setIsTranslated] = useState(false);
-
-    const [translatedContent, setTranslatedContent] = useState(
-        getTranslatedContent(originalContent, originalLanguage, targetField, translations, intl.locale)
-    );
-
-    useEffect(() => {
-        if(originalContent) {
-            setTranslatedContent(
-                getTranslatedContent(originalContent, originalLanguage, targetField, translations, intl.locale)
-            );
-        }
-    }, [originalContent]);
-
-    useEffect(() => {
-        if(translatedContent !== originalContent) {
-            setIsTranslated(true);
-        }
-    }, [translatedContent]);
-
-    const toggleContent = () => {
-        if (translatedContent === originalContent) {
-            setTranslatedContent(
-                getTranslatedContent(originalContent, originalLanguage, targetField, translations, intl.locale)
-            );
-        } else {
-            setTranslatedContent(originalContent);
-        }
-    }
-
-    return {
-        translatedContent,
-        toggleContent,
-        isTranslated
-    };
-};

package/src/components/translation/translated_content/useTranslatedContent.test.jsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { useTranslatedContent } from './useTranslatedContent';
-import { IntlProvider } from 'react-intl';
-
-describe('useTranslatedContent', () => {
-    it('should render translated content', () => {
-        const TranslatedContent = () => {
-            const translation_entries = [
-                {
-                    target_language: "fr",
-                    is_approved: true,
-                    origin_field: "title",
-                    translated_content: "Un titre"
-                }
-            ];
-            const title = useTranslatedContent("A title", "en", "title", translation_entries);
-        
-            return (
-                <>
-                    { title.translatedContent }
-                </>
-            );
-        }
-    
-        const component = render(
-            <IntlProvider locale="fr">
-                <TranslatedContent />
-            </IntlProvider>
-        );
-    
-        expect(screen.getByText("Un titre"));
-    });
-
-    it('should not render translated content when intl locale and target language are not the same', () => {
-        const TranslatedContent = () => {
-            const translation_entries = [
-                {
-                    target_language: "fr",
-                    is_approved: true,
-                    origin_field: "title",
-                    translated_content: "Un titre"
-                }
-            ];
-            const title = useTranslatedContent("A title", "en", "title", translation_entries);
-        
-            return (
-                <>
-                    { title.translatedContent }
-                </>
-            );
-        }
-    
-        const component = render(
-            <IntlProvider locale="en">
-                <TranslatedContent />
-            </IntlProvider>
-        );
-    
-        expect(screen.getByText("A title"));
-    });
-
-    it('should not render translated content when origin field and target field are not the same', () => {
-        const TranslatedContent = () => {
-            const translation_entries = [
-                {
-                    target_language: "fr",
-                    is_approved: true,
-                    origin_field: "name",
-                    translated_content: "Un titre"
-                }
-            ];
-            const title = useTranslatedContent("A title", "en", "title", translation_entries);
-        
-            return (
-                <>
-                    { title.translatedContent }
-                </>
-            );
-        }
-    
-        const component = render(
-            <IntlProvider locale="fr">
-                <TranslatedContent />
-            </IntlProvider>
-        );
-    
-        expect(screen.getByText("A title"));
-    });
-
-    it('should not render translated content if it is not approved', () => {
-        const TranslatedContent = () => {
-            const translation_entries = [
-                {
-                    target_language: "fr",
-                    is_approved: false,
-                    origin_field: "title",
-                    translated_content: "Un titre"
-                }
-            ];
-            const title = useTranslatedContent("A title", "en", "title", translation_entries);
-        
-            return (
-                <>
-                    { title.translatedContent }
-                </>
-            );
-        }
-    
-        const component = render(
-            <IntlProvider locale="fr">
-                <TranslatedContent />
-            </IntlProvider>
-        );
-    
-        expect(screen.getByText("A title"));
-    });
-});

package/src/components/translation/translation_button/TranslationButton.docs.mdx

@@ -1,18 +0,0 @@
----
-description: A button designed to show the original content from translated contents.
----
-
-import { TranslationButton } from './TranslationButton';
-
-A button that shows the original content from the origin language.
-
-### Component usage
-```js
-import TranslationButton from '@logora/debate.action.translation_button';
-```
-```js
-<TranslationButton
-   language="fr"
-   callback={callback}
-/>
-```

package/src/components/translation/translation_button/TranslationButton.jsx

@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import cx from 'classnames';
-import styles from './TranslationButton.module.scss';
-import PropTypes from "prop-types";
-
-export const TranslationButton = ({ className, language, callback, ...rest }) => {
-    const [isOriginal, setIsOriginal] = useState(false);
-    const intl = useIntl();
-
-    const handleClick = () => {
-        setIsOriginal(!isOriginal);
-        callback();
-    }
-
-    return (
-        <div 
-            onClick={handleClick}
-            className={cx(styles.translationButton, className)}
-            {...rest}
-        >
-            {!isOriginal ?
-                <FormattedMessage 
-                    id="translations.translated_from" 
-                    values={{ variable: intl.formatMessage({ id: "translations." + language, defaultMessage: "French" }) }} 
-                    defaultMessage={`Translated from French - Show original`} 
-                />
-            :
-                <FormattedMessage 
-                    id="translations.translate_to" 
-                    values={{ variable: intl.formatMessage({ id: "translations." + intl.locale, defaultMessage: "English" }) }} 
-                    defaultMessage={`Translate to English`} 
-                />
-            }
-        </div>
-    );
-};
-
-TranslationButton.propTypes = {
-    /** Origin language */
-    language: PropTypes.string.isRequired,
-    /** Function triggered on click */
-    callback: PropTypes.func.isRequired,
-    /** Extra classname */
-    className: PropTypes.string,
-};

package/src/components/translation/translation_button/TranslationButton.module.scss

@@ -1,10 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.translationButton {
-    font-size: theme.$font-size-extra-small;
-    color: theme.$call-primary;
-    cursor: pointer;
-    @include spacing.px(0, xs);
-    @include spacing.py(3, xs);
-}