@logora/debate 0.1.0

package/src/components/input/toggle_position/TogglePosition.stories.jsx

@@ -0,0 +1,96 @@
+export default {
+    title: 'Input/Toggle Position',
+    component: TogglePosition,
+    args: {
+        activeLabel: undefined,
+        firstLabel: {
+            id: 902,
+            name: 'Yes',
+            language: null,
+            translation_entries: []
+        },
+        secondLabel: {
+            id: 903,
+            name: 'No',
+            language: null,
+            translation_entries: []
+        }
+    },
+    argTypes: {
+        activeLabel: { control: 'number' },
+        firstLabel: { control: 'object' },
+        secondLabel: { control: 'object' }
+    }
+};
+
+import React from 'react';
+import { TogglePosition } from './TogglePosition';
+import { IntlProvider } from 'react-intl';
+
+export const DefaultTogglePosition = () => {
+    return (
+        <IntlProvider locale="en">
+            <TogglePosition 
+                firstLabel={{
+                    "id": 902,
+                    "name": "Yes",
+                    "language": null,
+                    "translation_entries": []
+                }}
+                secondLabel={{
+                    "id": 903,
+                    "name": "No",
+                    "language": null,
+                    "translation_entries": []
+                }}
+                onChange={(label) => label}
+            />
+        </IntlProvider>
+    );
+};
+
+export const FirstLabelTogglePosition = () => {
+    return (
+        <IntlProvider locale="en">
+            <TogglePosition 
+                activeLabel={0}
+                firstLabel={{
+                    "id": 902,
+                    "name": "Yes",
+                    "language": null,
+                    "translation_entries": []
+                }}
+                secondLabel={{
+                    "id": 903,
+                    "name": "No",
+                    "language": null,
+                    "translation_entries": []
+                }}
+                onChange={(label) => label}
+            />
+        </IntlProvider>
+    );
+};
+
+export const SecondLabelTogglePosition = () => {
+    return (
+        <IntlProvider locale="en">
+            <TogglePosition 
+                activeLabel={1}
+                firstLabel={{
+                    "id": 902,
+                    "name": "Yes",
+                    "language": null,
+                    "translation_entries": []
+                }}
+                secondLabel={{
+                    "id": 903,
+                    "name": "No",
+                    "language": null,
+                    "translation_entries": []
+                }}
+                onChange={(label) => label}
+            />
+        </IntlProvider>
+    );
+};

package/src/components/input/toggle_position/TogglePosition.test.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DefaultTogglePosition, FirstLabelTogglePosition } from './TogglePosition.stories';
+import { TogglePosition } from './TogglePosition';
+import { IntlProvider } from 'react-intl';
+import userEvent from '@testing-library/user-event';
+
+const callback = vi.fn();
+
+describe('Toggle', () => {
+    it('should render the toggle with correct texts by default', () => {
+        const { container } = render(<DefaultTogglePosition />);
+
+        expect(screen.getByText("Yes")).toBeTruthy();
+        expect(screen.getByText("No")).toBeTruthy();
+
+        const firstLabel = screen.getByTestId('firstLabel');
+        expect(firstLabel).not.toHaveClass('labelActive');
+
+        const secondLabel = screen.getByTestId('secondLabel');
+        expect(secondLabel).not.toHaveClass('labelActive');
+    });
+
+    it('should render the toggle with first label activation and change label choice after click', async () => {
+        const { container } = render(<FirstLabelTogglePosition />);
+
+        const firstLabel = screen.getByTestId('firstLabel');
+        expect(firstLabel).toHaveClass('labelActive');
+
+        const secondLabel = screen.getByTestId('secondLabel');
+        expect(secondLabel).not.toHaveClass('labelActive');
+
+        await userEvent.click(secondLabel);
+        expect(firstLabel).not.toHaveClass('labelActive');
+        expect(secondLabel).toHaveClass('labelActive');
+    });
+
+    it('should call callback function on label choice', async () => {
+        const { container } = render(
+            <IntlProvider locale="en">
+                <TogglePosition 
+                    onChange={callback}
+                    firstLabel={{
+                        "id": 902,
+                        "name": "Yes",
+                        "language": null,
+                        "translation_entries": []
+                    }}
+                    secondLabel={{
+                        "id": 903,
+                        "name": "No",
+                        "language": null,
+                        "translation_entries": []
+                    }}
+                />
+            </IntlProvider>
+        );
+
+        const firstLabel = screen.getByTestId('firstLabel');
+
+        await userEvent.click(firstLabel);
+        expect(firstLabel).toHaveClass('labelActive');
+        expect(callback).toHaveBeenCalled();
+
+    });
+});

package/src/components/input/toggle_position/index.js

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

package/src/components/intl/intl_provider/IntlContext.jsx

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

package/src/components/intl/intl_provider/IntlProvider.docs.mdx

@@ -0,0 +1,37 @@
+---
+description: An IntlProvider component.
+labels: ['i18n', 'react-intl', 'provider']
+---
+
+An IntlProvider component that wraps your application and provides it a context of internationalization. 
+This component uses the `react-intl` package.
+
+The provider can import locales synchronously or asynchronously, using the `async` prop.
+
+## Component usage
+
+To import the IntlProvider component:
+
+```jsx
+import { IntlProvider, IntlContext } from '@logora/debate.intl.intl_provider';
+```
+
+To use the IntlProvider component:
+
+```jsx
+<IntlProvider language={"en"} locales={localesObject} customMessages={yourMessages}>
+    <YourApp />
+</IntlProvider>
+```
+
+In the above wrapper, replace `language` with the string of your app's current language (such as 'en', 'fr', etc.) and `locales` with the JSON object that contains localized messages for the app.
+
+`customMessages` is used to override your localized messages.
+
+If `async` is true, you can pass the path to the localized messages files to the `locales` prop. The component will then import the correct file asynchronously. This is useful to avoid loading all language files.
+
+All the components inside the IntlProvider will have access to the intl object via context and can use it to output translated texts.
+
+This component generally used once, at the root level of your application, but it can be used in other parts of the app if needed.
+
+react-intl package also provides several APIs to format dates, numbers, and strings (like pluralization rules), helps to handle translated message values containing HTML formatting, and components for common cases like numbers, dates, and strings. Please refer to the package documentation for more details.

package/src/components/intl/intl_provider/IntlProvider.jsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { IntlContext } from "./IntlContext";
+import { IntlProvider as ReactIntlProvider } from 'react-intl';
+import { flatten } from 'flat';
+import useSessionStorageState from '@rooks/use-sessionstorage-state';
+import PropTypes from 'prop-types';
+
+export const IntlProvider = ({ language, locales, async = false, customMessages = {}, children, onError }) => {
+  const [storedLocale, setStoredLocale] = useSessionStorageState("logora:locale", null);
+
+  const getLocale = () => {
+    if (storedLocale) {
+      return storedLocale;
+    } else if (language) {
+      return language;
+    }
+  }
+
+  const getMessages = () => {
+    if (!async && (locale in locales)) {
+      return locales[locale];
+    } else {
+      return {};
+    }
+  }
+
+  const [locale, setLocale] = useState(getLocale());
+  const [messages, setMessages] = useState(getMessages());
+
+  useEffect(() => {
+    if (locale) {
+      if (async && (locale in locales)) {
+        (locales[locale])().then((m) => {
+          setMessages(m?.default || m);
+        }).catch(() => setMessages({}));
+      }
+
+      if (storedLocale !== locale) {
+        setStoredLocale(locale);
+      }
+    }
+  }, [locale]);
+
+  const mergeRemoteMessages = (messages) => {
+    let updatedMessages = { ...messages };
+    Object.keys(updatedMessages).forEach((k) => {
+      if (Object.keys(customMessages).indexOf(k) > -1) {
+        updatedMessages[k] = customMessages[k];
+      }
+    });
+    return updatedMessages;
+  }
+
+  const displayContext = () => {
+    return (
+      <ReactIntlProvider locale={locale} messages={mergeRemoteMessages(flatten(messages))} onError={onError}>
+        <IntlContext.Provider value={{ locale, setLocale }}>
+          {children}
+        </IntlContext.Provider>
+      </ReactIntlProvider>
+    )
+  }
+
+  return (
+    <>
+      {async && typeof window !== 'undefined' ?
+        (Object.keys(messages).length > 0 ?
+          displayContext()
+          :
+          null
+        )
+        :
+        displayContext()
+      }
+    </>
+  )
+};
+
+IntlProvider.propTypes = {
+  /** Current language used */
+  language: PropTypes.string,
+  /** Object containing the locale strings. Can be imported lazily in async mode */
+  locales: PropTypes.any,
+  /** If true, will fetch the locales asynchronously with import */
+  async: PropTypes.bool,
+  /** Dictionary of messages that will override localized messages */
+  customMessages: PropTypes.object,
+  /** Component children */
+  children: PropTypes.node,
+  /** Optional onError callback passed to react-intl */
+  onError: PropTypes.func
+};

package/src/components/intl/intl_provider/IntlProvider.test.jsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+//import { renderToStaticMarkup } from 'react-dom/server'
+import { useIntl } from 'react-intl';
+import { IntlProvider } from './IntlProvider';
+import { locales, localesAsync } from './locales';
+
+const IntlComponent = () => {
+    const intl = useIntl();
+
+    return (
+        <div>
+            <h1>{intl.formatMessage({ id: "title", defaultMessage: "Default title" })}</h1>
+            <h2>{intl.formatMessage({ id: "header.subtitle", defaultMessage: "Default subtitle" })}</h2>
+        </div>
+    )
+}
+
+describe('IntlProvider', () => {
+    beforeEach(() => {
+        window.sessionStorage.clear();
+    });
+
+    describe('sync mode', () => {
+        it('should render children with correct language', () => {
+            render(
+                <IntlProvider locales={locales} language={"fr"} async={false} onError={() => {}}>
+                    <IntlComponent />
+                </IntlProvider>
+            )
+
+            expect(screen.getByText("Mon titre")).toBeTruthy();
+            expect(screen.getByText("Sous-titre")).toBeTruthy();
+        });
+
+        it('should render children with another language', () => {
+            render(
+                <IntlProvider locales={locales} language={"en"} async={false} onError={() => {}}>
+                    <IntlComponent />
+                </IntlProvider>
+            )
+
+            expect(screen.getByText("My title")).toBeTruthy();
+            expect(screen.getByText("Subtitle")).toBeTruthy();
+        });
+
+        it('should render children with default if language is unknown', () => {
+            render(
+                <IntlProvider locales={locales} language={"pt"} async={false} onError={() => {}}>
+                    <IntlComponent />
+                </IntlProvider>
+            )
+
+            expect(screen.getByText("Default title")).toBeTruthy();
+            expect(screen.getByText("Default subtitle")).toBeTruthy();
+        });
+
+        it('should render with custom messages', () => {
+            const customMessages = {
+                "header.subtitle": "Mon autre sous-titre..."
+            }
+
+            render(
+                <IntlProvider locales={locales} language={"fr"} customMessages={customMessages} async={false} onError={() => {}}>
+                    <IntlComponent />
+                </IntlProvider>
+            )
+
+            expect(screen.getByText("Mon titre")).toBeTruthy();
+            expect(screen.getByText("Mon autre sous-titre...")).toBeTruthy();
+        });
+
+        /*
+        it('should render with correct locales when rendering server side', () => {
+            const html = renderToStaticMarkup(
+                <IntlProvider locales={locales} language={"fr"} async={false} onError={() => {}}>
+                    <IntlComponent />
+                </IntlProvider>
+            )
+
+            expect(html).toContain("Mon titre");
+            expect(html).toContain("Sous-titre")
+        });
+        */
+    });
+
+    describe('async mode', () => {
+        it('should render children with correct language', async () => {
+            await act(async () => {
+                render(
+                    <IntlProvider locales={localesAsync} language={"fr"} async onError={() => {}}>
+                        <IntlComponent />
+                    </IntlProvider>
+                )
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText("Mon titre")).toBeTruthy();
+                expect(screen.getByText("Sous-titre")).toBeTruthy();
+            });
+        });
+
+        it('should render children with another language', async () => {
+            await act(async () => {
+                render(
+                    <IntlProvider locales={localesAsync} language={"en"} async onError={() => {}}>
+                        <IntlComponent />
+                    </IntlProvider>
+                )
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText("My title")).toBeTruthy();
+                expect(screen.queryByText("Subtitle") || screen.queryByText("Default subtitle")).toBeTruthy();
+            });
+        });
+
+        it('should render with custom messages', async () => {
+            const customMessages = {
+                "header.subtitle": "Mon autre sous-titre..."
+            }
+
+            await act(async () => {
+                render(
+                    <IntlProvider locales={localesAsync} language={"fr"} customMessages={customMessages} async onError={() => {}}>
+                        <IntlComponent />
+                    </IntlProvider>
+                )
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText("Mon titre")).toBeTruthy();
+                expect(screen.getByText("Mon autre sous-titre...")).toBeTruthy();
+            });
+        });
+
+        /*
+        it('should render with default locales when rendering server side', () => {
+            const { window } = global;
+            delete global.window;
+            const html = renderToStaticMarkup(
+                <IntlProvider locales={localesAsync} language={"fr"} async onError={() => {}}>
+                    <IntlComponent />
+                </IntlProvider>
+            )
+
+            expect(html).toContain("Default title");
+            expect(html).toContain("Default subtitle")
+            global.window = window;
+        });
+        */
+    });
+});

package/src/components/intl/intl_provider/index.js

@@ -0,0 +1,3 @@
+export { IntlProvider } from './IntlProvider';
+export { IntlContext } from './IntlContext';
+export { useLocale } from './useLocale';

package/src/components/intl/intl_provider/locales/en.json

@@ -0,0 +1,4 @@
+{
+    "title": "My title",
+    "header.subtitle": "Subtitle"
+}

package/src/components/intl/intl_provider/locales/es.json

@@ -0,0 +1,4 @@
+{
+    "title": "Título",
+    "header.subtitle": "Subtítulo"
+}

package/src/components/intl/intl_provider/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "title": "Mon titre",
+    "header": {
+        "subtitle": "Sous-titre"
+    }
+}

package/src/components/intl/intl_provider/locales/index.js

@@ -0,0 +1,11 @@
+import en from './en.json';
+import fr from './fr.json';
+import es from './es.json';
+
+export const locales = { fr, en, es };
+
+export const localesAsync = {
+    fr: () => import('./fr.json'),
+    en: () => import('./en.json'),
+    es: () => import('./es.json')
+}

package/src/components/intl/intl_provider/useLocale.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { IntlContext } from "./IntlContext";
+
+export const useLocale = () => {
+    const { locale, setLocale } = useContext(IntlContext);
+
+    return { locale, setLocale };
+}

package/src/components/list/list_provider/ListProvider.docs.mdx

@@ -0,0 +1,51 @@
+---
+description: A context provider and hook to manage elements in a list.
+labels: ['list', 'list-provider']
+---
+
+A component to help with list management.
+
+ListProvider stores elements to add, update or remove, and a list ID.
+To update these elemtents, use the _add_, _update_ and _remove_ functions.
+
+A list can then use the _useList_ hook to manage its elements. To do that, listen to the changes in _addElement_, _updateElement_ and _removeElement_.
+A _listId_ is also stored in case there are multiple lists managed.
+
+### Component usage
+
+```js
+    import { ListProvider, useList } from "@logora/debate.list.list_provider";
+```
+
+```js
+    const List = (props) => {
+        const [elements, setElements] = useState([]);
+        const uniqueListId = "myList";
+        const { listId, addElement, updateElement, removeElement } = useList();
+
+        useEffect(() => {
+            if(listId === uniqueListId) {
+                setElements(current => [...current, addElement]);
+            }
+        }, [addElement])
+
+        return (
+            elements.map(e => {
+                <div className="listElement">e</div>
+            })
+        );
+    }
+
+    const ListManager = (props) => {
+        const { add, update, remove } = useList();
+        
+        return (
+            <div onClick={add("myList", "myValue")}>Click here to add element to list<div>
+        );
+    }
+
+    <ListProvider>
+        <ListManager />
+        <List />
+    </ListProvider>
+```

package/src/components/list/list_provider/ListProvider.jsx

@@ -0,0 +1,32 @@
+import React, { createContext, useState } from "react";
+
+export const ListContext = createContext();
+
+export const ListProvider = ({ children }) => {
+    const [addElements, setAddElements] = useState({});
+    const [addPinnedElements, setAddPinnedElements] = useState({});
+    const [updateElements, setUpdateElements] = useState({});
+    const [removeElements, setRemoveElements] = useState({});
+
+    const add = (listId, elements) => {
+        setAddElements(addElements => ({...addElements, [listId]: elements}));
+    }
+
+    const addPinned = (listId, element) => {
+        setAddPinnedElements(addPinnedElements => ({...addPinnedElements, [listId]: element}));
+    }
+
+    const update = (listId, elements) => {
+        setUpdateElements(updateElements => ({...updateElements, [listId]: elements}));
+    }
+
+    const remove = (listId, elements) => { 
+        setRemoveElements(removeElements => ({...removeElements, [listId]: elements}));
+    }
+
+    return (
+        <ListContext.Provider value={{ add, addPinned, update, remove, addElements, addPinnedElements, updateElements, removeElements, setAddElements, setAddPinnedElements, setUpdateElements, setRemoveElements }}>
+            { children }
+        </ListContext.Provider>
+    );
+}

package/src/components/list/list_provider/ListProvider.stories.jsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { ListProvider } from './ListProvider';
+import { useList } from './useList';
+
+const meta = {
+    title: 'List/List Provider',
+    component: ListProvider,
+    args: {},
+    argTypes: {},
+    render: () => <DefaultListProvider />
+};
+
+export default meta;
+
+const List = () => {
+    const [elements, setElements] = useState(["first element"]);
+    const uniqueListId = "myList";
+    const { addElements, addPinnedElements, removeElements } = useList();
+
+    useEffect(() => {
+        if(uniqueListId in addElements) {
+            setElements(prevState => [...prevState, addElements[uniqueListId]]);
+        }
+    }, [addElements]);
+
+    useEffect(() => {
+        if(uniqueListId in addPinnedElements) {
+            setElements(prevState => [addPinnedElements[uniqueListId], ...prevState]);
+        }
+    }, [addPinnedElements]);
+
+    useEffect(() => {
+        if(uniqueListId in removeElements) {
+            setElements((prevState) =>
+                prevState.filter((prevItem) => removeElements[uniqueListId].indexOf(prevItem))
+            );
+        }
+    }, [removeElements])
+
+    return (
+        <div>
+            <div className="listTitle">List</div>
+            <div>
+                {
+                    elements.map((el, index) => {
+                        return <div key={index} className="listElement">{ el }</div>;
+                    })
+                }
+            </div>
+        </div>
+        
+    );
+}
+
+const ListManager = () => {
+    const { add, addPinned, remove } = useList();
+    const [counter, setCounter] = useState(0);
+
+    const handleAdd = () => {
+        setCounter(counter + 1);
+        add("myList", `hello-${counter + 1}`);
+    }
+
+    const handleAddPinned = () => {
+        setCounter(counter + 1);
+        addPinned("myList", `hello-${counter + 1}`);
+    }
+
+    const handleRemove = () => {
+        if(counter > 0) {
+            remove("myList", `hello-${counter}`);
+            setCounter(counter - 1);
+        }
+    }
+
+    return (
+        <>
+            <button onClick={ handleAddPinned }>Add pinned element</button>
+            <button onClick={ handleAdd }>Add element</button>
+            <button onClick={ handleRemove }>Remove element</button>
+        </>
+    );
+}
+
+export const DefaultListProvider = () => {
+    return (
+        <ListProvider>
+            <ListManager />
+            <List />
+        </ListProvider>
+    )
+}