@logora/debate 0.1.0

package/src/components/dialog/dialog_box/DialogBox.stories.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { DialogBox } from './DialogBox';
+
+const meta = {
+    title: 'Dialog/Dialog Box',
+    component: DialogBox,
+    args: {
+        title: 'Debates',
+        content: 'Participate by writing your argument and earn eloquence points',
+        isHidden: false,
+        children: 'React child'
+    },
+    argTypes: {
+        title: {
+            control: 'text'
+        },
+        content: {
+            control: 'text'
+        },
+        isHidden: {
+            control: 'boolean'
+        },
+        children: {
+            control: 'text'
+        }
+    },
+    render: ({ children, ...args }) => (
+        <div style={{ width: '400px', height: '200px' }}>
+            <IntlProvider locale='en'>
+                <DialogBox {...args}>
+                    <span>{children}</span>
+                </DialogBox>
+            </IntlProvider>
+        </div>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultDialogBox = (props) => renderStory(props);
+
+export const HiddenDialogBox = (props) => renderStory({ isHidden: true, ...props });

package/src/components/dialog/dialog_box/DialogBox.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DefaultDialogBox, HiddenDialogBox } from './DialogBox.stories';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+it('should render with the correct text', () => {
+	const dialog = render(
+        <DefaultDialogBox />
+	);
+
+    expect(screen.getByText(/Debate/i)).toBeTruthy();
+    expect(screen.getByText(/Participate by writing your argument and earn eloquence points/i)).toBeTruthy();
+    expect(screen.getByText(/Got it/i)).toBeTruthy();
+});
+
+it('should be hidden', () => {
+	const dialog = render(
+        <HiddenDialogBox />
+	);
+
+    expect(screen.queryByText(/Debate/i)).toBeFalsy();
+    expect(screen.queryByText(/Participate by writing your argument and earn eloquence points/i)).toBeFalsy();
+    expect(screen.queryByText(/Got it/i)).toBeFalsy();
+});
+
+it('should close on close button click', async () => {
+	const dialog = render(
+        <DefaultDialogBox />
+	);
+
+    expect(screen.getByText(/Debate/i)).toBeTruthy();
+    expect(screen.getByText(/Participate by writing your argument and earn eloquence points/i)).toBeTruthy();
+    expect(screen.getByText(/Got it/i)).toBeTruthy();
+
+    await userEvent.click(screen.getByText(/Got it/i))
+
+	expect(screen.queryByText(/Debate/i)).toBeFalsy();
+    expect(screen.queryByText(/Participate by writing your argument and earn eloquence points/i)).toBeFalsy();
+    expect(screen.queryByText(/Got it/i)).toBeFalsy();
+});

package/src/components/dialog/dialog_box/index.js

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

package/src/components/dialog/drawer/Drawer.docs.mdx

@@ -0,0 +1,31 @@
+---
+description: A drawer component.
+labels: ['drawer', 'overlay']
+---
+
+import { Drawer } from './Drawer';
+
+A component that renders a clickable drawer with the optional button, title, and content that can be customized. 
+The drawer slides from the right side of the screen and comes with a custom size and the possibility to enable overlay.
+
+The drawer can be controlled with the *logora:drawer:close* event.
+
+### Component usage
+
+To import the component:
+```js
+import { Drawer } from '@logora/debate.dialog.drawer';
+```
+
+To use the Drawer component:
+
+```js
+<Drawer 
+    onClose={handleCloseFunction}
+    title="My Drawer"
+    size="30vw"
+    enableOverlay={true}
+>
+    Drawer Content
+</Drawer>
+```

package/src/components/dialog/drawer/Drawer.jsx

@@ -0,0 +1,159 @@
+import React, { useState, useEffect, Suspense } from 'react';
+import ReactDrawer from 'react-modern-drawer';
+import { Icon } from '@logora/debate/icons/icon';
+import { NavbarButton } from '@logora/debate/navbar/navbar_button';
+import { useLocation } from "react-router";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useIntl } from 'react-intl';
+import { useConfig, useRoutes } from "@logora/debate/data/config_provider";
+import { useAuthRequired } from "@logora/debate/hooks/use_auth_required";
+import { Link } from "@logora/debate/action/link";
+import { Avatar } from "@logora/debate/user/avatar";
+import { Dropdown } from "@logora/debate/dialog/dropdown";
+import { IconTextLink } from "@logora/debate/action/icon_text_link";
+import { Loader } from "@logora/debate/progress/loader";
+import NotificationMenu from "@logora/debate/notification/notification_menu";
+import 'react-modern-drawer/dist/index.css';
+import styles from './Drawer.module.scss';
+import PropTypes from 'prop-types';
+
+export const Drawer = ({ isOpen = false, onClose, title, size = '30vw', enableOverlay = false, pathParameter = null, children, notificationDefinitions = {} }) => {
+    const [isdrawerOpen, setIsDrawerOpen] = useState(isOpen);
+    const location = useLocation();
+    const routes = useRoutes();
+    const config = useConfig();
+    const intl = useIntl();
+    const { isLoggedIn, currentUser } = useAuth();
+    const requireAuthentication = useAuthRequired();
+    const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);
+
+    const closeDrawer = () => {
+        setIsDrawerOpen(false);
+        if (pathParameter && typeof window !== 'undefined') {
+            const url = new URL(window.location);
+            url.searchParams.delete(pathParameter);
+            window.history.pushState({}, '', url);
+        }
+        onClose?.();
+    }
+
+    useEffect(() => {
+        setIsDrawerOpen(isOpen)
+    }, [isOpen])
+
+    useEffect(() => {
+        if (pathParameter && location?.pathname && typeof window !== 'undefined') {
+            const url = new URL(window?.location);
+            url.searchParams.set(pathParameter, location.pathname);
+            window.history.pushState({}, '', url);
+        }
+    }, [location])
+
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            window.addEventListener('logora:drawer:close', closeDrawer);
+            return () => {
+                window.removeEventListener('logora:drawer:close', closeDrawer);
+            };
+        }
+    }, []);
+
+    const toggleNotificationDropdown = () => {
+        setUnreadNotificationCount(0);
+    };
+
+    return (
+        <>
+            <ReactDrawer
+                open={isdrawerOpen}
+                onClose={closeDrawer}
+                direction='right'
+                size={size}
+                enableOverlay={enableOverlay}
+                className={styles.drawer}
+                zIndex={1000000}
+            >
+                <div className={styles.header}>
+                    <div className={styles.headerRowTop}>
+                        <button
+                            type="button"
+                            onClick={closeDrawer}
+                            className={styles.closeButton}
+                            aria-label={intl.formatMessage({ id: "dialog.drawer.aria_label", defaultMessage: "Close drawer" })}
+                        >
+                            <Icon name="close" width={15} height={15} />
+                        </button>
+                    </div>
+
+                    <div className={styles.headerRowBottom}>
+                        <div className={styles.headerLeft}>
+                            <NavbarButton
+                                inDrawer
+                                showNavbarButtonInDrawer={(config?.layout?.showNavbarButtonInDrawer !== false)}
+                            />
+                        </div>
+
+                        {isLoggedIn && config?.layout?.showProfileNotificationInDrawer !== false && (
+                            <div className={styles.headerRight}>
+                                <Dropdown
+                                    onClick={toggleNotificationDropdown}
+                                    dropdownClassName={styles.notificationDropdown}
+                                    className={styles.notificationsContainer}
+                                >
+                                    <div className={styles.notificationIcon}>
+                                        <IconTextLink
+                                            pin={unreadNotificationCount > 0}
+                                            pinText={unreadNotificationCount.toString()}
+                                            textClassName={styles.hideText}
+                                        >
+                                            <Icon name="alarm" height={24} width={24} />
+                                        </IconTextLink>
+                                    </div>
+
+                                    <Suspense fallback={<Loader />}>
+                                        <NotificationMenu
+                                            notificationDefinitions={notificationDefinitions}
+                                        />
+                                    </Suspense>
+                                </Dropdown>
+
+                                <div className={styles.drawerProfile}>
+                                    <Link to={routes.userShowLocation.toUrl({ userSlug: currentUser.hash_id })}>
+                                        <Avatar
+                                            avatarUrl={currentUser.image_url}
+                                            userName={currentUser.full_name}
+                                            size={30}
+                                        />
+                                    </Link>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    {title && <div className={styles.title}>{title}</div>}
+                </div>
+
+                <div className={styles.body}>
+                    {children}
+                </div>
+            </ReactDrawer>
+        </>
+    )
+}
+
+Drawer.propTypes = {
+    /** Controls the opening of the drawer */
+    isOpen: PropTypes.bool,
+    /** On close callback */
+    onClose: PropTypes.func,
+    /** Drawer title */
+    title: PropTypes.node,
+    /** Determines the size of drawer */
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Determines whether to show the overlay */
+    enableOverlay: PropTypes.bool,
+    /** Name of the query parameter that will store the current path */
+    pathParameter: PropTypes.string,
+    /** Drawer content */
+    children: PropTypes.node,
+};

package/src/components/dialog/drawer/Drawer.module.scss

@@ -0,0 +1,136 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.drawer {
+    overflow: auto;
+    height: 100% !important;
+    min-width: 450px;
+    max-width: 100vw;
+    @include spacing.px(2, xs);
+
+    @media (width <=768px) {
+        width: 100% !important;
+        min-width: unset;
+        position: fixed;
+        z-index: 1000;
+    }
+}
+
+.header {
+    display: flex !important;
+    flex-direction: column !important;
+    color: theme.$text-primary;
+    background-color: theme.$background-color-primary;
+    min-height: 30px;
+    position: sticky;
+    top: 0;
+    z-index: 1001;
+    @include spacing.py(3, xs);
+}
+
+
+.closeButton {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    margin-left: auto;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer;
+    color: theme.$text-secondary;
+    padding-left: 0;
+    padding-right: 0;
+
+    svg {
+        fill: theme.$text-secondary;
+    }
+}
+
+
+
+.body {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: spacing.$spacer;
+    width: 100% !important;
+    margin: auto;
+    @include spacing.py(2, xs);
+}
+
+.title {
+    margin: 0 8px;
+}
+
+.headerRowTop {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+}
+
+.headerRowBottom {
+    display: flex;
+    align-items: center;
+    @include spacing.mt(2, xs);
+}
+
+.headerLeft {
+    display: flex;
+    align-items: center;
+}
+
+.headerRight {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    flex-wrap: nowrap !important;
+    margin-left: auto;
+    gap: 14px;
+}
+
+
+.notificationsContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-top: 9px;
+}
+
+.notificationIcon {
+    display: flex;
+    align-items: center;
+}
+
+.drawerProfile {
+    display: flex !important;
+    align-items: center !important;
+}
+
+
+.notificationDropdown {
+    position: absolute;
+    top: 90%;
+    right: 0;
+    margin-top: 8px;
+    min-width: 340px;
+    overflow-y: auto;
+    background: theme.$background-color-primary;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    border-radius: theme.$box-border-radius;
+    z-index: 1100;
+    
+    @media (width <= 576px) {
+        position: fixed;
+        top: 60px;
+        left: 8px;
+        right: 8px;
+        width: auto;
+        min-width: unset;
+        max-height: calc(100vh - 80px);
+        margin-top: 25px;
+        border-radius: theme.$box-border-radius;
+        z-index: 900;
+    }
+}

package/src/components/dialog/drawer/Drawer.stories.jsx

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IntlProvider } from 'react-intl';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { Location } from '@logora/debate/util/location';
+import { faker } from '@faker-js/faker';
+import { Drawer } from './Drawer';
+
+const mockUser = {
+  id: faker.number.int(),
+  full_name: faker.person.fullName(),
+  image_url: faker.image.avatarGitHub(),
+  hash_id: faker.lorem.slug()
+};
+
+const baseConfig = {
+  isDrawer: true,
+  modules: {
+    consultation: true,
+    suggestions: { active: true }
+  },
+  actions: {
+    hideLoginButton: false
+  },
+  layout: {
+    showNavbarButtonInDrawer: true
+  }
+};
+
+const createNotification = () => ({
+  id: faker.number.int(10000000),
+  created_at: faker.date.recent(),
+  notify_type: 'new_comment',
+  is_opened: faker.datatype.boolean()
+});
+
+const notificationDefinitions = {
+  new_comment: {
+    getRedirectUrl: () => '/comments/1',
+    getImage: () => <img src={faker.image.url()} alt='notification-image' />,
+    getContent: () => faker.commerce.productDescription()
+  }
+};
+
+const routes = {
+  indexLocation: new Location('espace-debat', {}),
+  debateShowLocation: new Location('espace-debat/debat/:debateSlug', { debateSlug: '' }),
+  rootLocation: new Location('/', {}),
+  consultationIndexLocation: new Location('espace-debat/consultations', {}),
+  consultationShowLocation: new Location('espace-debat/consultations/:consultationSlug', { consultationSlug: '' }),
+  suggestionLocation: new Location('espace-debat/suggestions', {}),
+  userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' }),
+  userEditLocation: new Location('espace-debat/user/:userSlug/edit', { userSlug: '' })
+};
+
+const httpClient = {
+  post: () => Promise.resolve({ data: { success: true, data: {} } }),
+  get: () => Promise.resolve({ data: { success: true, data: Array.from({ length: 5 }, createNotification) } })
+};
+
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+const defaultArgs = {
+  title: '',
+  enableOverlay: false,
+  size: undefined,
+  pathParameter: '',
+  notificationDefinitions,
+  startOpen: false,
+  content: 'Drawer content'
+};
+
+const meta = {
+  title: 'Dialog/Drawer',
+  component: Drawer,
+  args: defaultArgs,
+  argTypes: {
+    title: { control: 'text' },
+    enableOverlay: { control: 'boolean' },
+    size: { control: 'number' },
+    pathParameter: { control: 'text' },
+    startOpen: { control: 'boolean' },
+    content: { control: 'text' },
+    notificationDefinitions: { control: 'object' }
+  },
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(args.startOpen);
+    const { startOpen, content, ...drawerProps } = args;
+
+    const mergedConfig = {
+      ...baseConfig
+    };
+
+    return (
+      <BrowserRouter>
+        <ConfigProvider routes={routes} config={mergedConfig}>
+          <DataProviderContext.Provider value={{ dataProvider: data }}>
+            <ListProvider>
+              <AuthContext.Provider value={{ currentUser: mockUser, isLoggedIn: true }}>
+                <ResponsiveProvider>
+                  <IconProvider library={regularIcons}>
+                    <IntlProvider locale='en'>
+                      <ModalProvider>
+                        <div onClick={() => setIsOpen((prev) => !prev)} data-testid='open-button'>
+                          Click here to toggle drawer
+                        </div>
+                        <div
+                          onClick={() => {
+                            const event = new CustomEvent('logora:drawer:close');
+                            window.dispatchEvent(event);
+                          }}
+                          data-testid='close-button'
+                        >
+                          Click here to close drawer
+                        </div>
+                        <Drawer {...drawerProps} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                          <div>{content}</div>
+                        </Drawer>
+                      </ModalProvider>
+                    </IntlProvider>
+                  </IconProvider>
+                </ResponsiveProvider>
+              </AuthContext.Provider>
+            </ListProvider>
+          </DataProviderContext.Provider>
+        </ConfigProvider>
+      </BrowserRouter>
+    );
+  }
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultDrawer = (props) => renderStory(props);
+
+export const DrawerWithoutNavbarButton = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(args.startOpen);
+    const { startOpen, content, ...drawerProps } = args;
+
+    return (
+      <BrowserRouter>
+        <ConfigProvider
+          routes={routes}
+          config={{
+            layout: {
+              showNavbarButtonInDrawer: false,
+              showProfileNotificationInDrawer: false
+            }
+          }}
+        >
+          <DataProviderContext.Provider value={{ dataProvider: data }}>
+            <ListProvider>
+              <AuthContext.Provider value={{ currentUser: mockUser, isLoggedIn: true }}>
+                <ResponsiveProvider>
+                  <IconProvider library={regularIcons}>
+                    <IntlProvider locale='en'>
+                      <ModalProvider>
+                        <div onClick={() => setIsOpen((prev) => !prev)} data-testid='open-button'>
+                          Click here to toggle drawer
+                        </div>
+                        <div
+                          onClick={() => {
+                            const event = new CustomEvent('logora:drawer:close');
+                            window.dispatchEvent(event);
+                          }}
+                          data-testid='close-button'
+                        >
+                          Click here to close drawer
+                        </div>
+                        <Drawer {...drawerProps} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                          <div>{content}</div>
+                        </Drawer>
+                      </ModalProvider>
+                    </IntlProvider>
+                  </IconProvider>
+                </ResponsiveProvider>
+              </AuthContext.Provider>
+            </ListProvider>
+          </DataProviderContext.Provider>
+        </ConfigProvider>
+      </BrowserRouter>
+    );
+  }
+};

package/src/components/dialog/drawer/Drawer.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DefaultDrawer } from './Drawer.stories';
+import { render, screen } from '@testing-library/react';
+
+describe('Drawer', () => {
+    it('should open drawer when clicking on button', async () => {
+        render(
+            <DefaultDrawer />
+        );
+
+        const openButton = screen.getByTestId("open-button");
+
+        expect(openButton).toBeTruthy();
+    });
+});

package/src/components/dialog/drawer/index.js

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

package/src/components/dialog/dropdown/Dropdown.docs.mdx

@@ -0,0 +1,28 @@
+---
+description: A Dropdown component.
+labels: ['dropdown']
+---
+
+import { Dropdown } from './Dropdown';
+
+A component that renders a dropdown component. The first child is the button triggering the display of the list, and the second child is the content of the dropdown.
+Dropdown is closed when user clicks outside of it. A click on any child from the list also closes the list.
+Dropdown position can be controlled with props.
+
+### Component usage
+
+```js
+import { Dropdown } from '@logora/debate.dialog.dropdown';
+```
+
+```js
+    <Dropdown onClick={() => console.log("Click dropdown button !")} horizontalPosition={'right'}>
+        {/* First child: trigger button */}
+        <div>Title</div> 
+        {/* Second child: list */}
+        <div>
+            <p>Child 1</p>
+            <p>Child 2</p>
+        </div>
+    </Dropdown>
+```