@logora/debate 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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