@logora/debate 0.1.0

package/src/components/gamification/badge_box/BadgeBox.stories.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { BadgeBox } from './BadgeBox';
+import { faker } from '@faker-js/faker';
+import { IntlProvider } from 'react-intl';
+
+const badge = {
+    icon_url: faker.image.avatarGitHub(),
+    level: 2,
+    name: faker.person.jobTitle(),
+    next_title_level: 3,
+    steps: 20,
+    title: faker.person.jobTitle(),
+    progress: 6,
+}
+
+const badgeCompleted = {
+    icon_url: faker.image.avatarGitHub(),
+    level: 3,
+    name: faker.person.jobTitle(),
+    next_title_level: 3,
+    steps: 13,
+    title: faker.person.jobTitle(),
+    progress: 13,
+}
+
+export default {
+    title: 'Gamification/Badge Box',
+    component: BadgeBox,
+    args: {
+        eloquenceTitle: '',
+        ...badge
+    },
+    argTypes: {
+        eloquenceTitle: { control: 'text' },
+        icon_url: { control: 'text' },
+        level: { control: 'number' },
+        name: { control: 'text' },
+        next_title_level: { control: 'number' },
+        steps: { control: 'number' },
+        title: { control: 'text' },
+        progress: { control: 'number' }
+    },
+    render: (args) => (
+        <IntlProvider locale="en">
+            <BadgeBox {...args} />
+        </IntlProvider>
+    )
+};
+
+export const DefaultBadgeBox = {};
+
+export const TitleShownBadgeBox = {
+    args: {
+        ...badgeCompleted,
+        eloquenceTitle: badgeCompleted.name
+    }
+};
+
+export const TitleObtainedBadgeBox = {
+    args: {
+        ...badgeCompleted,
+        eloquenceTitle: ''
+    }
+};

package/src/components/gamification/badge_box/BadgeBox.test.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { BadgeBox } from './BadgeBox';
+import { faker } from '@faker-js/faker';
+import { IntlProvider } from 'react-intl';
+import { render } from '@testing-library/react';
+
+const badge = {
+    icon_url: faker.image.avatarGitHub(),
+    level: 2,
+    name: faker.person.jobTitle(),
+    next_title_level: 3,
+    steps: 20,
+    title: faker.person.jobTitle(),
+    progress: 6,
+}
+
+const badgeCompleted = {
+    icon_url: faker.image.avatarGitHub(),
+    level: 3,
+    name: faker.person.jobTitle(),
+    next_title_level: 3,
+    steps: 13,
+    title: faker.person.jobTitle(),
+    progress: 13,
+}
+
+describe("BadgeBox", () => { 
+    it("renders correctly", () => {
+        const { getByText, getByAltText } = render(
+            <IntlProvider locale="en">
+                <BadgeBox 
+                    eloquenceTitle="" 
+                    icon_url={badge.icon_url}
+                    level={badge.level}
+                    name={badge.name}
+                    next_title_level={badge.next_title_level}
+                    steps={badge.steps}
+                    title={badge.title}
+                    progress={badge.progress}
+                />
+            </IntlProvider>
+        );
+        
+        const badgeImg = getByAltText("Badge " + badge.title);
+        expect(badgeImg).toBeInTheDocument();
+        expect(badgeImg).toHaveAttribute('src', badge.icon_url);
+
+        expect(getByText("Level 2")).toBeInTheDocument();
+        expect(getByText("Write 20 arguments with a relevance score of at least 75")).toBeInTheDocument();
+        expect(getByText("At level 3 you will get the title :")).toBeInTheDocument();
+    });
+
+    it("renders title obtained", () => {
+        const { getByText, getByAltText, getByTestId, queryByText } = render(
+            <IntlProvider locale="en">
+                <BadgeBox 
+                    eloquenceTitle=""
+                    icon_url={badgeCompleted.icon_url}
+                    level={badgeCompleted.level}
+                    name={badgeCompleted.name}
+                    next_title_level={badgeCompleted.next_title_level}
+                    steps={badgeCompleted.steps}
+                    title={badgeCompleted.title}
+                    progress={badgeCompleted.progress}
+                />
+            </IntlProvider>
+        );
+        
+        const badgeImg = getByAltText("Badge " + badgeCompleted.title);
+        expect(badgeImg).toBeInTheDocument();
+        expect(badgeImg).toHaveAttribute('src', badgeCompleted.icon_url);
+
+        const badgeReward = getByTestId("badge-reward");
+        expect(badgeReward).toHaveClass("rewardObtained");
+        expect(badgeReward).not.toHaveClass("rewardShown");
+
+        expect(getByText("Level 3")).toBeInTheDocument();
+        expect(getByText("Write 13 arguments with a relevance score of at least 75")).toBeInTheDocument();
+        expect(getByText("Title obtained :")).toBeInTheDocument();
+        expect(getByText(`"Dialogue pro"`)).toBeInTheDocument();
+        expect(queryByText("At level 3 you will get the title :")).toBeNull();
+    });
+
+    it("renders title shown", () => {
+        const { getByText, getByAltText, getByTestId, queryByText } = render(
+            <IntlProvider locale="en">
+                <BadgeBox 
+                    eloquenceTitle={badgeCompleted.name}
+                    icon_url={badgeCompleted.icon_url}
+                    level={badgeCompleted.level}
+                    name={badgeCompleted.name}
+                    next_title_level={badgeCompleted.next_title_level}
+                    steps={badgeCompleted.steps}
+                    title={badgeCompleted.title}
+                    progress={badgeCompleted.progress}
+                />
+            </IntlProvider>
+        );
+        
+        const badgeImg = getByAltText("Badge " + badgeCompleted.title);
+        expect(badgeImg).toBeInTheDocument();
+        expect(badgeImg).toHaveAttribute('src', badgeCompleted.icon_url);
+
+        const badgeReward = getByTestId("badge-reward");
+        expect(badgeReward).toHaveClass("rewardShown");
+
+        expect(getByText("Level 3")).toBeInTheDocument();
+        expect(getByText("Write 13 arguments with a relevance score of at least 75")).toBeInTheDocument();
+        expect(getByText("Title shown :")).toBeInTheDocument();
+        expect(getByText(`"Dialogue pro"`)).toBeInTheDocument();
+        expect(queryByText("At level 3 you will get the title :")).toBeNull();
+    });
+})

package/src/components/gamification/badge_box/index.js

@@ -0,0 +1 @@
+export { BadgeBox } from "./BadgeBox";

package/src/components/gamification/point_box/PointBox.docs.mdx

@@ -0,0 +1,19 @@
+---
+description: A box component with an icon, some text and time ago to show points.
+labels: [gamification", "point"]
+---
+
+A box component with an icon, some text and time ago to display points.
+
+### Component usage
+
+```jsx
+import { PointBox } from '@logora/debate.gamification.point_box';
+```
+```jsx
+<PointBox 
+    icon={svg icon}
+    text={"Your text"}
+    timeAgo={"12 days ago"}
+/>
+```

package/src/components/gamification/point_box/PointBox.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './PointBox.module.scss';
+import PropTypes from 'prop-types';
+
+export const PointBox = ({ icon, text, timeAgo }) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.icon}>
+                { icon }
+            </div>
+            <div className={styles.text}>
+                { text }
+                { timeAgo && <div className={styles.timeAgo}>
+                    { timeAgo }
+                </div> }
+            </div>
+        </div>
+    )
+}
+
+PointBox.propTypes = {
+    /** Svg icon */
+    icon: PropTypes.node.isRequired,
+    /** Text displayed */
+    text: PropTypes.node.isRequired,
+    /** Time ago */
+    timeAgo: PropTypes.string
+};

package/src/components/gamification/point_box/PointBox.module.scss

@@ -0,0 +1,38 @@
+
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+    @include spacing.p(3, xs);
+    display: flex;
+    gap: spacing.$spacer-md;
+    position: relative;
+    font-size: theme.$font-size-small;
+    border-radius: theme.$box-border-radius;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    height: fit-content;
+}
+
+.icon {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    min-width: 30px;
+    max-height: 30px;
+    border-radius: 50%;
+    background-color: theme.$call-primary;
+    svg {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        fill: theme.$text-light !important;
+    }
+}
+
+.timeAgo {
+    font-weight: theme.$font-weight-normal;
+    color: theme.$text-secondary;
+    font-size: theme.$font-size-extra-small;
+}

package/src/components/gamification/point_box/PointBox.stories.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { PointBox } from './PointBox';
+import { Chat } from '@logora/debate/icons/regular_icons';
+
+const meta = {
+    title: 'Gamification/Point Box',
+    component: PointBox,
+    args: {
+        text: 'Your text',
+        timeAgo: '12 days ago',
+        showIcon: true
+    },
+    argTypes: {
+        text: { control: 'text' },
+        timeAgo: { control: 'text' },
+        showIcon: { control: 'boolean' }
+    },
+    render: ({ showIcon, ...args }) => (
+        <PointBox
+            {...args}
+            icon={showIcon ? <Chat width={16} height={16} data-testid={'svg-icon'} /> : null}
+        />
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultPointBox = (props) => renderStory(props);
+
+export const PointBoxWithoutTimeAgo = (props) => renderStory({ timeAgo: null, ...props });

package/src/components/gamification/point_box/PointBox.test.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { DefaultPointBox,  PointBoxWithoutTimeAgo } from "./PointBox.stories";
+
+describe("PointBox", () => {
+    it("render correctly", () => {
+        const { queryByText, getByTestId } = render(<DefaultPointBox />);
+
+        expect(getByTestId("svg-icon")).toBeInTheDocument();
+        expect(queryByText("Your text")).toBeInTheDocument();
+        expect(queryByText("12 days ago")).toBeInTheDocument();
+    });
+
+    it("render without time ago", () => {
+        const { queryByText, getByTestId } = render(<PointBoxWithoutTimeAgo />);
+        
+        expect(getByTestId("svg-icon")).toBeInTheDocument();
+        expect(queryByText("Your text")).toBeInTheDocument();
+        expect(queryByText("12 days ago")).not.toBeInTheDocument();
+    });
+});

package/src/components/gamification/point_box/index.js

@@ -0,0 +1 @@
+export { PointBox } from "./PointBox";

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

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

package/src/components/hooks/use_auth_required/useAuthRequired.docs.mdx

@@ -0,0 +1,22 @@
+---
+description: A hook to dispatch a custom event to signal authentication.
+labels: ['auth']
+---
+
+This hook dispatch a custom event to signal authentication.
+
+### Component usage
+```js
+import { useAuthRequired } from '@logora/debate.hooks.use_auth_required';
+```
+```js
+const Component = () => {
+	const requireAuth = useAuthRequired();
+
+	return (
+        <>
+            {requireAuthentication({})}
+        </>
+    )
+}
+```

package/src/components/hooks/use_auth_required/useAuthRequired.jsx

@@ -0,0 +1,28 @@
+import React, { useContext, lazy, Suspense } from 'react';
+import { ConfigContext } from '@logora/debate/data/config_provider';
+import { useModal } from '@logora/debate/dialog/modal';
+const AuthModal = lazy(() => import('@logora/debate/auth/auth_modal'));
+
+export const useAuthRequired = () => {
+    const { config } = useContext(ConfigContext);
+    const { showModal } = useModal();
+
+    const requireAuthentication = (modalParams = {}) => {
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(
+                new CustomEvent("LOGORA::authenticationRequired", { detail: { redirectUrl: window.location.href } })
+            );
+            window.dispatchEvent(
+                new CustomEvent("logora:authentication:requested", {
+                    detail: { redirectUrl: window.location.href }
+                })
+            );
+        }
+        if (config?.auth?.disableLoginModal === true) {
+            return;
+        }
+        showModal(<Suspense fallback={null}><AuthModal {...modalParams} /></Suspense>);
+    }
+
+    return requireAuthentication;
+}

package/src/components/hooks/use_auth_required/useAuthRequired.test.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ConfigContext } from '@logora/debate/data/config_provider';
+import { useAuthRequired } from './useAuthRequired';
+import { useModal } from '@logora/debate/dialog/modal';
+
+vi.mock('@logora/debate/dialog/modal', () => ({
+    useModal: vi.fn(),
+}));
+
+const TestComponent = () => {
+    const requireAuthentication = useAuthRequired();
+
+    return (
+        <div>
+            <button onClick={() => requireAuthentication({ foo: 'bar' })}>
+                Authenticate
+            </button>
+        </div>
+    );
+};
+
+describe('useAuthRequired', () => {
+    const showModal = vi.fn();
+    const hideModal = vi.fn();
+
+    beforeEach(() => {
+        useModal.mockReturnValue({
+            showModal,
+            hideModal,
+        });
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should call requireAuthentication on button click', () => {
+        const config = {
+            auth: {
+                disableLoginModal: false,
+            },
+        };
+
+        const redirectUrl = window.location.href;
+
+        window.dispatchEvent = vi.fn();
+
+        const { getByText } = render(
+            <ConfigContext.Provider value={{ config }}>
+                <TestComponent />
+            </ConfigContext.Provider>
+        );
+
+        fireEvent.click(getByText('Authenticate'));
+
+        expect(window.dispatchEvent).toHaveBeenCalledWith(
+            new CustomEvent('logora:authentication:requested', { detail: { redirectUrl } })
+        );
+    });
+
+    it('should not show AuthModal if disableLoginModal is true', () => {
+        const config = {
+            auth: {
+                disableLoginModal: true,
+            },
+        };
+
+        const redirectUrl = window.location.href;
+
+        const { getByText } = render(
+            <ConfigContext.Provider value={{ config }}>
+                <TestComponent />
+            </ConfigContext.Provider>
+        );
+
+        fireEvent.click(getByText('Authenticate'));
+
+        expect(window.dispatchEvent).toHaveBeenCalledWith(
+            new CustomEvent('logora:authentication:requested', { detail: { redirectUrl } })
+        );
+        
+        expect(showModal).not.toHaveBeenCalled();
+    });
+});

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

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

package/src/components/hooks/use_css_theme/useCssTheme.docs.mdx

@@ -0,0 +1,34 @@
+---
+description: A React hook for applying CSS variables to a specified element.
+labels: ['theme', 'css-theme', 'css-variables']
+---
+
+A React hook for applying CSS variables to a specified element.
+Provided theme can be in camel-case or kebab-case.
+
+### Component usage 
+
+```js
+import { useCssTheme } from '@logora/debate.hooks.use_css_theme';
+
+function MyStyledComponent() {
+  const theme = {
+    primaryColor: 'red',
+    secondaryColor: 'blue',
+    fontSize: '16px',
+  };
+
+  useCSSTheme(theme, 'my-root');
+
+  return <div id="my-root">Hello World</div>;
+}
+```
+
+
+### Properties
+
+| Name       | Type   | Required | Default | Description                                                   |
+| ---------- | ------ | -------- | ------- | ------------------------------------------------------------- |
+| `theme`    | object | Yes      | -       | An object containing CSS variable names and their corresponding values. |
+| `rootId`   | string | Yes      | -       | The id of the root element to which the CSS variables should be applied. |
+| `camelCase`| boolean| No       | true    | Determines if the theme should be converted from camel-case to kebab-case. |

package/src/components/hooks/use_css_theme/useCssTheme.js

@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+
+export const useCssTheme = (theme, rootId, camelCase = true) => {
+  useEffect(() => {
+    if(theme && rootId) {
+      updateTheme(theme, rootId);
+    }
+  }, []);
+
+  const updateTheme = (theme, rootId) => {
+    const root = document.getElementById(rootId);
+    if(root) {
+      Object.keys(theme).map((key) => {
+        if(theme[key]) {
+          return root.style.setProperty(toVariable(key), theme[key]);
+        }
+      });
+    }
+  }
+
+  const toVariable = (str) => {
+    const kebabCase = camelCase ? str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`) : str;
+    return '--' + kebabCase;
+  }
+
+  return null;
+}

package/src/components/hooks/use_css_theme/useCssTheme.stories.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useCssTheme } from './useCssTheme.js';
+
+const meta = {
+  title: 'Hooks/Use Css Theme',
+  component: () => null,
+  args: {
+    variant: 'default'
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'kebab']
+    }
+  },
+  render: ({ variant }) => (variant === 'kebab' ? <ThemeKebabCase /> : <DefaultTheme />)
+};
+
+export default meta;
+
+const theme = {
+    colorPrimary: "blue",
+    colorSecondary: "green",
+};
+
+const themeKebabCase = {
+    "color-primary": "purple",
+    "color-secondary": "green",
+};
+
+export const DefaultTheme = () => {
+  useCssTheme(theme, "component");
+
+  return <div id="component" style={{ color: "var(--color-primary, pink)" }}>Blue styled component with CSS variables.</div>;
+}
+
+export const ThemeKebabCase = () => {
+    useCssTheme(themeKebabCase, "componentKebab");
+  
+    return <div id="componentKebab" style={{ color: "var(--color-secondary, blue)" }}>Green styled component with CSS variables</div>;
+}

package/src/components/hooks/use_css_theme/useCssTheme.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DefaultTheme, ThemeKebabCase } from './useCssTheme.stories';
+
+const theme = {
+  colorPrimary: "blue",
+  colorSecondary: "green",
+};
+
+const themeKebabCase = {
+  "color-primary": "purple",
+  "color-secondary": "green",
+};
+
+describe('MyComponent', () => {
+  test('should apply theme styles to root element', () => {
+    render(<DefaultTheme />);
+
+    const root = document.getElementById('component');
+    expect(root.style.getPropertyValue('--color-primary')).toBe(theme.colorPrimary);
+    expect(root.style.getPropertyValue('--color-secondary')).toBe(theme.colorSecondary);
+  });
+
+  test('should apply if camelCase prop is false', () => {
+    render(<ThemeKebabCase />);
+
+    const root = document.getElementById('componentKebab');
+    expect(root.style.getPropertyValue('--color-primary')).toBe(themeKebabCase['color-primary']);
+    expect(root.style.getPropertyValue('--color-secondary')).toBe(themeKebabCase['color-secondary']);
+  });
+});

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

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

package/src/components/hooks/use_font_loader/useFontLoader.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A hook to download fonts from Google Fonts.
+labels: ['fonts', 'webfontloader', 'google-fonts']
+---
+
+A component that uses [Web Font Loader](https://github.com/typekit/webfontloader) to download fonts from Google Fonts.
+
+### Component usage
+
+```js
+import { useFontLoader } from '@logora/debate.hooks.use_font_loader';
+
+function MyComponentWithFonts() {
+  useFontLoader(["Droid Sans:300,400,700:latin"]);
+
+  return <div id="my-root">Hello World</div>;
+}
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>fontFamilies</font> | <font color="#397300">array</font> | &check; | - | <font color="grey">*Array of font families*</font> |
+| <font color='#4646c6'>enable</font> | <font color="#397300">boolean</font> | &cross; | true | <font color="grey">*If `false`, will not load fonts*</font> |

package/src/components/hooks/use_font_loader/useFontLoader.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export const useFontLoader = (fontFamilies, enable = true) => {
+  useEffect(() => {
+    if(enable && fontFamilies?.length) {
+      const WebFontLoader = require('webfontloader');
+      WebFontLoader.load({
+        google: {
+          families: fontFamilies
+        }
+      });
+    }
+  }, [enable])
+
+  return null;
+}