@logora/debate 0.1.0

package/src/components/hooks/use_font_loader/useFontLoader.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useFontLoader } from './useFontLoader.js';
+
+const WebFontLoader = require('webfontloader');
+const spy = vi.spyOn(WebFontLoader, 'load');
+
+describe('useFontLoader', () => {
+  it('should load font correctly', () => {
+    const ComponentWithFont = () => {
+      useFontLoader(["Droid Sans:300,400,700:latin"]);
+
+      return <div>With font</div>;
+    }
+
+    const container = render(<ComponentWithFont />);
+    expect(container.getByText('With font')).toBeTruthy();
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    spy.mockClear();
+  });
+
+  it('should not load font if not enabled', () => {
+    const ComponentWithFont = () => {
+      useFontLoader(["Droid Sans:300,400,700:latin"], false);
+
+      return <div>Font loader disabled</div>;
+    }
+
+    const container = render(<ComponentWithFont />);
+    expect(container.getByText('Font loader disabled')).toBeTruthy();
+    expect(spy).toHaveBeenCalledTimes(0);
+
+    spy.mockClear();
+  });
+
+  it('should not load font if fontFamilies is null', () => {
+    const ComponentWithFont = () => {
+      useFontLoader(null);
+
+      return <div>Without font</div>;
+    }
+
+    const container = render(<ComponentWithFont />);
+    expect(container.getByText('Without font')).toBeTruthy();
+    expect(spy).toHaveBeenCalledTimes(0);
+    
+    spy.mockClear();
+  });
+
+  it('should not load font if no font families are passed', () => {
+    const ComponentWithFont = () => {
+      useFontLoader([]);
+
+      return <div>Without font</div>;
+    }
+
+    const container = render(<ComponentWithFont />);
+    expect(container.getByText('Without font')).toBeTruthy();
+    expect(spy).toHaveBeenCalledTimes(0);
+    
+    spy.mockClear();
+  });
+})

package/src/components/hooks/use_matomo/index.js

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

package/src/components/hooks/use_matomo/useMatomo.docs.mdx

@@ -0,0 +1,28 @@
+---
+description: A hook to insert the Matomo Tag Manager script
+labels: ['matomo', 'analytics']
+---
+
+A hook that inserts a [Matomo](https://matomo.org/) Tag Manager container script.
+
+### Component usage
+
+```js
+import { useMatomo } from '@logora/debate.hooks.use_matomo';
+```
+
+```js
+const ComponentWithMatomo = () => {
+  useMatomo("analytics.mysite.com", "3R2zBYFH");
+
+  return <div id="my-root">Hello World</div>;
+}
+```
+
+### Parameters
+
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>matomoHost</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*Matomo domain, for example analytics.mysite.com*</font> |
+| <font color='#4646c6'>matomoContainerTag</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*Matomo container tag*</font> |
+| <font color='#4646c6'>enable</font> | <font color="#397300">string</font> | &cross; | true | <font color="grey">*If `false`, will not load the script*</font> |

package/src/components/hooks/use_matomo/useMatomo.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+export const useMatomo = (matomoHost, matomoContainerTag, enable = true) => {
+    useEffect(() => {
+      if(enable && matomoHost && matomoContainerTag) {
+        const script = document.createElement("script");
+        script.async = true;
+        script.text = "var _mtm = window._mtm = window._mtm || []; \
+        _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'}); \
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; \
+        g.async=true; g.src='https://" + matomoHost + "/js/container_" + matomoContainerTag + ".js'; s.parentNode.insertBefore(g,s);";
+        document.body.appendChild(script);
+      }
+    }, []);
+
+    return null;
+}

package/src/components/hooks/use_matomo/useMatomo.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useMatomo } from './useMatomo.js';
+
+const matomoHost = "analytics.mysite.com";
+const matomoTag = "3R2zBYFH";
+
+describe('useMatomo', () => {
+  it('should load Matomo script correctly', () => {
+    const ComponentWithMatomo = () => {
+      useMatomo(matomoHost, matomoTag);
+
+      return <div>With Matomo</div>;
+    }
+
+    const container = render(<ComponentWithMatomo />);
+    expect(container.getByText('With Matomo')).toBeTruthy();
+
+    const script = document.querySelector('script');
+    expect(script).toBeTruthy();
+    expect(script.src).toContain(matomoHost);
+    expect(script.src).toContain(matomoTag);
+  });
+})

package/src/components/hooks/use_relative_time/index.js

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

package/src/components/hooks/use_relative_time/useRelativeTime.docs.mdx

@@ -0,0 +1,35 @@
+---
+description: A hook to display a relative date in human-readable format.
+labels: ['date', 'relative-time']
+---
+
+import { IntlProvider } from 'react-intl';
+
+This function receives one argument, _time_, which is a timestamp in milliseconds.
+
+It returns the timestamp formatted according to the locale.
+
+For example in English, it will show "2 days ago" if the date is in the past or "3 days left" for a date in the future. 
+
+It must be wrapped by [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+The text can be customized using the locale strings.
+
+### Component usage
+```js
+import { useRelativeTime } from '@logora/debate.hooks.use_relative_time';
+```
+```js
+const RelativeTime = () => {
+    const date = new Date();
+	const daysAgo = new Date(date.getTime());
+    daysAgo.setDate(date.getDate() - 2);
+    const relativeTime = useRelativeTime(daysAgo);
+
+	return (
+        <IntlProvider locale="en">
+            { relativeTime } // "2 days ago"
+        </IntlProvider>
+    )
+}
+```

package/src/components/hooks/use_relative_time/useRelativeTime.jsx

@@ -0,0 +1,40 @@
+import { useIntl } from 'react-intl';
+import PropTypes from "prop-types";
+
+export const useRelativeTime = (time) => {
+    if(!time) return null;
+
+    const intl = useIntl();
+    const now = new Date().getTime();
+    const diff = Math.abs(time - now);
+    const mark = (time - now) > 0 ? 1 : -1;
+
+    const times = [
+        { type: 'second', seconds: 1000, segments: 60 },
+        { type: 'minute', seconds: 60 * 1000, segments: 60 },
+        { type: 'hour', seconds: 60 * 60 * 1000, segments: 24 },
+        { type: 'day', seconds: 24 * 60 * 60 * 1000, segments: 30 },
+        { type: 'month', seconds: 30 * 24 * 60 * 60 * 1000, segments: 12 },
+        { type: 'year', seconds: 12 * 30 * 24 * 60 * 60 * 1000, segments: 1000 },
+    ];
+
+    let params = [];
+    for (let t of times) {
+        const segment = Math.round(diff / t.seconds);
+        if (segment >= 0 && segment < t.segments) {
+            params = [(segment * mark) | 0, t.type];
+            break;
+        }
+    }
+
+    if(params[0] <= 0) {
+        return intl.formatMessage({ id: `relative_time.past.${params[1]}`, defaultMessage: "1 month ago"}, { time: Math.abs(params[0]) });
+    } else {
+        return intl.formatMessage({ id: `relative_time.future.${params[1]}`, defaultMessage: "1 month left"}, { time: Math.abs(params[0]) });
+    }
+}
+
+useRelativeTime.PropTypes = {
+    /** A timestamp in milliseconds */
+    time: PropTypes.number.isRequired,
+}

package/src/components/hooks/use_relative_time/useRelativeTime.test.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider, defineMessages } from 'react-intl';
+import { useRelativeTime } from './useRelativeTime';
+
+const messages = {
+    "relative_time.past.second": "{time, plural, one {# second} other {# seconds}} ago",
+    "relative_time.past.minute": "{time, plural, one {# minute} other {# minutes}} ago",
+    "relative_time.past.hour": "{time, plural, one {# hour} other {# hours}} ago",
+    "relative_time.past.day": "{time, plural, one {# day} other {# days}} ago",
+    "relative_time.past.month": "{time, plural, one {# month} other {# months}} ago",
+    "relative_time.past.year": "{time, plural, one {# year} other {# years}} ago",
+    "relative_time.future.second": "{time, plural, one {# second} other {# seconds}} left",
+    "relative_time.future.minute": "{time, plural, one {# minute} other {# minutes}} left",
+    "relative_time.future.hour": "{time, plural, one {# hour} other {# hours}} left",
+    "relative_time.future.day": "{time, plural, one {# day} other {# days}} left",
+    "relative_time.future.month": "{time, plural, one {# month} other {# months}} left",
+    "relative_time.future.year": "{time, plural, one {# year} other {# years}} left",
+}
+
+describe('useRelativeTime', () => {
+    it('should render an empty string if date is undefined', () => {
+        const RelativeTime = () => {
+            const time = undefined;
+            const relativeTime = useRelativeTime(time);
+        
+            return relativeTime;
+        }
+    
+        const component = render(<IntlProvider messages={messages} locale="en"><RelativeTime /></IntlProvider>);
+    
+        expect(component.container.innerHTML).toEqual("");
+    });
+
+    it('should render the right past date', () => {
+        const RelativeTime = () => {
+            const date = new Date();
+            const daysAgo = new Date(date.getTime());
+            daysAgo.setDate(date.getDate() - 2);
+            const relativeTime = useRelativeTime(daysAgo);
+        
+            return relativeTime;
+        }
+    
+        const component = render(<IntlProvider messages={messages} locale="en"><RelativeTime /></IntlProvider>);
+    
+        expect(screen.getByText("2 days ago")).toBeTruthy();
+        expect(component.container.innerHTML).not.toEqual("");
+    });
+    
+    it('should render the right content with singular text', () => {
+        const RelativeTime = () => {
+            const date = new Date();
+            const daysAgo = new Date(date.getTime());
+            daysAgo.setDate(date.getDate() - 1);
+            const relativeTime = useRelativeTime(daysAgo);
+        
+            return relativeTime;
+        }
+    
+        const component = render(<IntlProvider locale="en" messages={messages}><RelativeTime /></IntlProvider>);
+    
+        expect(screen.getByText("1 day ago")).toBeTruthy();
+        expect(component.container.innerHTML).not.toEqual("");
+    });
+    
+    it('should render the right future date', () => {
+        const RelativeTime = () => {
+            const date = new Date();
+            const daysAgo = new Date(date.getTime());
+            daysAgo.setDate(date.getDate() + 2);
+            const relativeTime = useRelativeTime(daysAgo);
+        
+            return relativeTime;
+        }
+    
+        const component = render(<IntlProvider locale="en" messages={messages}><RelativeTime /></IntlProvider>);
+    
+        expect(screen.getByText("2 days left")).toBeTruthy();
+        expect(component.container.innerHTML).not.toEqual("");
+    });
+});

package/src/components/hooks/use_responsive/ResponsiveContext.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ResponsiveContext = createContext();

package/src/components/hooks/use_responsive/ResponsiveProvider.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import { ResponsiveContext } from './ResponsiveContext';
+import PropTypes from 'prop-types';
+import { useDebouncedCallback } from 'use-debounce';
+
+export const ResponsiveProvider = ({ containerPath, containerWidth, children, isMobile }) => {
+    const [elementWidth, setElementWidth] = useState(containerWidth);
+
+    const updateElementWidth = useDebouncedCallback(() => {
+        if (typeof window !== "undefined" && containerPath) {
+            const element = document.querySelector(containerPath);
+            if (element) {
+                setElementWidth(element.getBoundingClientRect().width.toFixed(2));
+            }
+        }
+    }, 250);
+
+    useEffect(() => {
+        if (!elementWidth && typeof window !== "undefined" && containerPath) {
+            const element = document.querySelector(containerPath);
+            if (element) {
+                setElementWidth(element.getBoundingClientRect().width.toFixed(2));
+            }
+        }
+    }, [elementWidth, containerPath]);
+
+    useEffect(() => {
+        if (typeof window !== "undefined" && containerPath) {
+            window.addEventListener('resize', updateElementWidth);
+            return () => {
+                window.removeEventListener('resize', updateElementWidth);
+            };
+        }
+    }, [updateElementWidth, containerPath]);
+
+    return (
+        <ResponsiveContext.Provider value={{ elementWidth: elementWidth, isMobile: isMobile || elementWidth <= 576, isTablet: !isMobile && elementWidth > 576, isDesktop: !isMobile && elementWidth >= 769 }}>
+            { children }
+        </ResponsiveContext.Provider>
+    )
+}
+
+ResponsiveProvider.propTypes = {
+    /** Container path from which the width will be calculated */
+    containerPath: PropTypes.string,
+    /** Width of container to use for responsive queries */
+    containerWidth: PropTypes.number,
+    /** Provider children */
+    children: PropTypes.node,
+    /** Overriding calculation and force mobile design */
+    isMobile: PropTypes.bool
+}

package/src/components/hooks/use_responsive/index.js

@@ -0,0 +1,2 @@
+export { ResponsiveProvider } from './ResponsiveProvider';
+export { useResponsive } from './useResponsive';

package/src/components/hooks/use_responsive/useResponsive.docs.mdx

@@ -0,0 +1,46 @@
+---
+description: A provider to help make the display responsive based on a container width.
+labels: ['responsive']
+---
+
+This provider calculates the width of the container passed in prop, and returns responsive variables to use.
+
+If _containerPath_ is passed, the provider will get the container with _querySelector_ and calculate its width.
+If _containerWidth_ is passed, the provider will use it as width and not take into account _containerPath_.
+
+This hook returns three boolean variables to enable responsive design :
+- _isMobile_ : container width under 576 pixels
+- _isTablet_ : container width betwwen 577 and 768 pixels
+- _isDesktop_ : container width above 769 pixels
+
+### Component usage
+
+```js
+import { ResponsiveProvider, useResponsive } from '@logora/debate.hooks.use_responsive';
+```
+
+```js
+const ResponsiveComponent = () => {
+	const { isMobile, isTablet, isDesktop } = useResponsive();
+
+	return (
+        <>
+            { isMobile && <div>Shown in mobile container only</div> }
+            { isTablet && <div>Shown in tablet container only</div> }
+            { isDesktop && <div>Shown in desktop container only</div> }
+        </>
+    )
+}
+```
+
+```js
+const App = () => {
+    return (
+        <div id="rootContainer">
+            <ResponsiveProvider containerPath="#rootContainer">
+                <ResponsiveComponent />
+            </ResponsiveProvider>
+        </div>
+    )
+}
+```

package/src/components/hooks/use_responsive/useResponsive.jsx

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ResponsiveContext } from './ResponsiveContext';
+
+export const useResponsive = () => {
+  const { isMobile, isTablet, isDesktop, elementWidth } = useContext(ResponsiveContext) || {};
+
+  return { isMobile, isTablet, isDesktop, elementWidth };
+}

package/src/components/hooks/use_responsive/useResponsive.stories.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ResponsiveProvider } from './ResponsiveProvider';
+import { useResponsive } from './useResponsive';
+
+const meta = {
+    title: 'Hooks/Use Responsive',
+    component: () => null,
+    args: {
+        containerPath: 'rootContainer'
+    },
+    argTypes: {
+        containerPath: {
+            control: 'text'
+        }
+    },
+    render: ({ containerPath }) => (
+        <div id="rootContainer">
+            <ResponsiveProvider containerPath={containerPath}>
+                <ResponsiveComponent />
+            </ResponsiveProvider>
+        </div>
+    )
+};
+
+export default meta;
+
+const ResponsiveComponent = () => {
+    const { isMobile, isTablet, isDesktop, elementWidth } = useResponsive();
+
+    return (
+        <>
+            <div>{`Change container width (${elementWidth}) to see the different responsive elements`}</div>
+            { isMobile && <div>Shown in mobile container only</div> }
+            { isTablet && <div>Shown in tablet container only</div> }
+            { isDesktop && <div>Shown in desktop container only</div> }
+        </>
+    )
+}
+
+export const DefaultInformationBox = () => {
+    return (
+        <div id="rootContainer">
+            <ResponsiveProvider containerPath={"rootContainer"}>
+                <ResponsiveComponent />
+            </ResponsiveProvider>
+        </div>
+    );
+};
+

package/src/components/hooks/use_responsive/useResponsive.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ResponsiveProvider } from './ResponsiveProvider';
+import { useResponsive } from './useResponsive';
+
+const ResponsiveComponent = () => {
+    const { isMobile, isTablet, isDesktop } = useResponsive();
+
+    return (
+        <>
+            { isMobile && <div>Shown in mobile container only</div> }
+            { isTablet && <div>Shown in tablet container only</div> }
+            { isDesktop && <div>Shown in desktop container only</div> }
+        </>
+    )
+}
+
+describe('useResponsive', () => {
+    it('should display mobile component if container size is mobile', () => {
+        render(
+            <div id="rootContainer">
+                <ResponsiveProvider containerPath={"#rootContainer"} containerWidth={400}>
+                    <ResponsiveComponent />
+                </ResponsiveProvider>
+            </div>
+        )
+
+        expect(screen.getByText("Shown in mobile container only")).toBeTruthy();
+    });
+
+    it('should display tablet component if container size is tablet', () => {
+        render(
+            <div id="rootContainer">
+                <ResponsiveProvider containerPath={"#rootContainer"} containerWidth={700}>
+                    <ResponsiveComponent />
+                </ResponsiveProvider>
+            </div>
+        )
+
+        expect(screen.getByText("Shown in tablet container only")).toBeTruthy();
+    });
+
+    it('should display desktop component if container size is desktop', () => {
+        render(
+            <div id="rootContainer">
+                <ResponsiveProvider containerPath={"#rootContainer"} containerWidth={1000}>
+                    <ResponsiveComponent />
+                </ResponsiveProvider>
+            </div>
+        )
+
+        expect(screen.getByText("Shown in desktop container only")).toBeTruthy();
+    });
+});

package/src/components/icons/bild_icons/Alarm.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Alarm = (props) => (
+    <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {...props} >
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M30.1824 7.02718C30.1824 4.75938 27.9853 2.7027 25.3076 2.7027C22.6297 2.7027 20.4324 4.75947 20.4324 7.02718V7.98188L19.5326 8.30087C14.0527 10.2434 11.4527 15.5412 11.4527 22.1621V33.2881H10.1013C6.31513 33.2881 4.7027 35.2386 4.7027 36.6665V39.1892C4.7027 39.5726 4.85077 39.8397 5.06454 40.0283C5.29777 40.234 5.63116 40.3605 5.97297 40.3605H44.6419C44.9837 40.3605 45.3171 40.234 45.5503 40.0283C45.7641 39.8397 45.9122 39.5726 45.9122 39.1892V36.6665C45.9122 35.2394 44.3007 33.2881 40.5067 33.2881H39.1554V22.1621C39.1554 15.54 36.5612 10.2431 31.0823 8.30087L30.1824 7.98188V7.02718ZM25.3076 0C28.8726 0 32.2895 2.5279 32.8153 6.07549C39.1898 8.76985 41.8581 15.205 41.8581 22.1621V30.6622C45.6917 31.1043 48.6148 33.4207 48.6148 36.6665V39.1892C48.6148 41.6664 46.5347 43.0632 44.6419 43.0632H33.9924C33.0746 46.9546 29.5204 50 25.3038 50C21.086 50 17.5384 46.9535 16.6218 43.0632H5.97297C4.08013 43.0632 2 41.6664 2 39.1892V36.6665C2 33.4218 4.92152 31.1051 8.75 30.6624V22.1621C8.75 15.2038 11.4252 8.76952 17.7995 6.07548C18.3254 2.52784 21.7427 0 25.3076 0ZM25.3038 47.2973C27.992 47.2973 30.3318 45.4777 31.1804 43.0632H19.4335C20.2808 45.4785 22.6167 47.2973 25.3038 47.2973Z" />
+    </svg>
+)

package/src/components/icons/bild_icons/Announcement.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Announcement = (props) => (
+    <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle 
+            cx="12.5" 
+            cy="12.5" r="11.5" 
+            fill="none" 
+            stroke="#000" 
+        />
+        <path 
+            d="M10.884 7.1H14.046L13.519 14.869H11.411L10.884 7.1ZM12.465 19.136C12.0003 19.136 11.6093 18.9887 11.292 18.694C10.986 18.388 10.833 18.0197 10.833 17.589C10.833 17.1583 10.986 16.8013 11.292 16.518C11.598 16.2233 11.989 16.076 12.465 16.076C12.941 16.076 13.332 16.2233 13.638 16.518C13.944 16.8013 14.097 17.1583 14.097 17.589C14.097 18.0197 13.9383 18.388 13.621 18.694C13.315 18.9887 12.9297 19.136 12.465 19.136Z" 
+            fill="#000" 
+        />
+    </svg>
+)

package/src/components/icons/bild_icons/Arrow.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Arrow = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M19,11H9l3.29-3.29a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0l-4.29,4.3A2,2,0,0,0,6,12H6a2,2,0,0,0,.59,1.4l4.29,4.3a1,1,0,1,0,1.41-1.42L9,13H19a1,1,0,0,0,0-2Z"/>
+    </svg>
+)

package/src/components/icons/bild_icons/BildIcons.docs.mdx

@@ -0,0 +1,21 @@
+---
+description: An SVG library for icon components.
+labels: ['icons']
+---
+
+### Component usage
+
+```js
+import { Votebox } from '@logora/debate.icons.bild_icons';
+```
+
+```js
+<Votebox width={30} height={30} />
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>height</font> | <font color="#397300">integer</font> | &cross; | - | <font color="grey">*icon height in pixels*</font> |
+| <font color='#4646c6'>width</font> | <font color="#397300">integer</font> | &cross; | - | <font color="grey">*icon width in pixels*</font> |
+| <font color='#4646c6'>className</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*icon extra classname*</font> |