@logora/debate 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+@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);
+}