@logora/debate 0.1.0

package/src/components/modal/side_modal/SideModal.stories.jsx

@@ -0,0 +1,112 @@
+export default {
+  title: 'Modal/Side Modal',
+  component: SideModal,
+  args: {
+    modalTitle: 'Choose your side',
+    title: 'Example Debate',
+    isNeutral: false
+  },
+  argTypes: {
+    modalTitle: { control: 'text' },
+    title: { control: 'text' },
+    isNeutral: { control: 'boolean' }
+  }
+};
+
+import React from "react";
+import { SideModal } from "./SideModal";
+import { IntlProvider } from "react-intl";
+import { ModalProvider } from "@logora/debate/dialog/modal";
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const debateName = "Example Debate";
+const debatePositions = [
+  { id: 1, name: "Position A" },
+  { id: 2, name: "Position B" },
+  { id: 3, name: "Position C" },
+];
+
+export const SideModalExample = () => {
+  const disabledPositions = [];
+
+  const handleChooseSide = (positionId) => {
+    console.log(`Selected position: ${positionId}`);
+  };
+
+  return (
+    <div style={{ width: "400px", height: "100px" }}>
+      <ModalProvider>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale="en">
+            <SideModal
+              modalTitle={"Choose your side"}
+              title={debateName}
+              positions={debatePositions}
+              disabledPositions={disabledPositions}
+              onChooseSide={handleChooseSide}
+              isNeutral={false}
+            />
+          </IntlProvider>
+        </IconProvider>
+      </ModalProvider>
+    </div>
+  );
+};
+
+export const SideModalWithNeutralPosition = () => {
+  const disabledPositions = [];
+
+  const handleChooseSide = (positionId) => {
+    console.log(`Selected position: ${positionId}`);
+  };
+
+  return (
+    <div style={{ width: "400px", height: "100px" }}>
+      <ModalProvider>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale="en">
+            <SideModal
+              modalTitle={"Choose your side"}
+              title={debateName}
+              positions={debatePositions}
+              disabledPositions={disabledPositions}
+              onChooseSide={handleChooseSide}
+              isNeutral={true}
+            />
+          </IntlProvider>
+        </IconProvider>
+      </ModalProvider>
+    </div>
+  );
+};
+
+
+export const SideModalWithDisabledPositions = () => {
+  const disabledPositions = [{ id: 2, name: "Position B" }];
+
+  const handleChooseSide = (positionId) => {
+    console.log(`Selected position: ${positionId}`);
+  };
+
+  return (
+    <div style={{ width: "400px", height: "100px" }}>
+      <ModalProvider>
+        <IconProvider library={regularIcons}>
+          <IntlProvider locale="en">
+            <SideModal
+              modalTitle={"Choose your side"}
+              title={debateName}
+              positions={debatePositions}
+              disabledPositions={disabledPositions}
+              onChooseSide={handleChooseSide}
+              isNeutral={false}
+            />
+          </IntlProvider>
+        </IconProvider>
+      </ModalProvider>
+    </div>
+  );
+};
+
+

package/src/components/modal/side_modal/SideModal.test.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { SideModalExample, SideModalWithNeutralPosition, SideModalWithDisabledPositions } from "./SideModal.stories";
+
+beforeAll(() => {
+    HTMLDialogElement.prototype.showModal = function () {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+      this.removeAttribute("open");
+    };
+  });
+
+describe("SideModal", () => {
+    it("should appear with all the right default values", async () => {
+        render(<SideModalExample />);
+        expect(screen.getByText("Example Debate")).toBeInTheDocument();
+        expect(screen.getByText("Choose your side")).toBeInTheDocument();
+    });
+
+    it("should appear with 2 Buttons", async () => {
+        render(<SideModalExample />);
+        const buttons = screen.getAllByRole("button");
+        expect(buttons.length).toBe(2);
+    });
+
+    it("should render with warning when neutral is true", async () => {
+        render(<SideModalWithNeutralPosition />);
+        expect(screen.getByText("It is not possible to write an argument with this one. If you wish to participate in the debate, choose one of the positions displayed above.")).toBeInTheDocument();
+    });
+
+    it("should render with warning when disabled positions", async () => {
+        render(<SideModalWithDisabledPositions />);
+        expect(screen.getByText("You have already reached the argument limit (10) for position Position B. You can support the other position.")).toBeInTheDocument();
+    });
+});

package/src/components/modal/side_modal/index.js

@@ -0,0 +1 @@
+export { SideModal as default } from "./SideModal";

package/src/components/navbar/navbar_button/NavbarButton.docs.mdx

@@ -0,0 +1,37 @@
+---
+description: A mobile navigation trigger button that opens the NavbarModal.
+labels: ['navbar', 'button', 'modal']
+---
+
+import { NavbarButton } from './NavbarButton';
+
+A button that opens the navigation modal (NavbarModal). It is intended for mobile usage or inside a drawer. When not rendered inside a drawer (`inDrawer = false`), it only appears on mobile screens (width <= 576px). Inside a drawer (`inDrawer = true`), visibility can be controlled with `showNavbarButtonInDrawer`.
+
+### Props
+- inDrawer (boolean) — renders the button styled for a drawer context.
+- showNavbarButtonInDrawer (boolean) — if false while `inDrawer` is true, the button is hidden.
+
+### Component usage
+
+To import the component:
+
+```js
+import { NavbarButton } from '@logora/debate.navbar.navbar_button';
+```
+
+To use the NavbarButton component:
+
+```jsx
+<NavbarButton />
+```
+
+In drawer:
+```jsx
+<NavbarButton inDrawer />
+```
+
+Hidden in drawer:
+```jsx
+<NavbarButton inDrawer showNavbarButtonInDrawer={false} />
+```
+

package/src/components/navbar/navbar_button/NavbarButton.jsx

@@ -0,0 +1,43 @@
+import { useModal } from '@logora/debate/dialog/modal';
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { Icon } from '@logora/debate/icons/icon';
+import cx from "classnames";
+import { NavbarModal } from '@logora/debate/navbar/navbar_modal';
+
+import styles from './NavbarButton.module.scss';
+
+export const NavbarButton = ({ inDrawer = false, showNavbarButtonInDrawer = true }) => {
+    const modal = useModal?.();
+    const responsive = useResponsive?.() || {};
+    const { isMobile, elementWidth } = responsive;
+
+    const handleShowModal = () => {
+        modal?.showModal?.(<NavbarModal />);
+    };
+
+    if (inDrawer && !showNavbarButtonInDrawer) {
+        return null;
+    }
+
+    if (!inDrawer) {
+        const shouldShowOnMobile = isMobile && elementWidth <= 576;
+        if (!shouldShowOnMobile) {
+            return null;
+        }
+    }
+
+    const className = cx({
+        [styles.mobileIcon]: !inDrawer,
+        [styles.mobileIconDrawer]: inDrawer,
+    });
+
+    return (
+        <div
+            className={className}
+            onClick={handleShowModal}
+            data-tid="action_view_mobile_navigation"
+        >
+            <Icon name="mobileMenu" width={50} height={50} />
+        </div>
+    );
+};

package/src/components/navbar/navbar_button/NavbarButton.module.scss

@@ -0,0 +1,45 @@
+@use 'styles/theme' as theme;
+
+.mobileIcon {
+  position: fixed;
+  right: 10px;
+  bottom: 60px;
+  z-index: 500;
+
+  svg {
+
+    path,
+    circle {
+      fill: theme.$text-light;
+
+      &:first-child {
+        fill: theme.$call-primary;
+      }
+    }
+  }
+}
+
+.mobileIconDrawer {
+  position: relative;
+  width: auto;
+  height: auto;
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -8px;
+
+  svg {
+    position: static;
+
+    circle {
+      display: none;
+    }
+
+    path {
+      fill: theme.$text-primary !important;
+    }
+  }
+}

package/src/components/navbar/navbar_button/NavbarButton.stories.jsx

@@ -0,0 +1,93 @@
+export default {
+  title: 'Navbar/Navbar Button',
+  component: NavbarButton,
+  args: {
+    inDrawer: true,
+    isLoggedIn: false
+  },
+  argTypes: {
+    inDrawer: { control: 'boolean' },
+    isLoggedIn: { control: 'boolean' }
+  }
+};
+
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { IntlProvider } from "react-intl";
+import { ConfigProvider } from "@logora/debate/data/config_provider";
+import { AuthContext } from "@logora/debate/auth/use_auth";
+import { ModalProvider } from "@logora/debate/dialog/modal";
+import { ResponsiveProvider } from "@logora/debate/hooks/use_responsive";
+import { IconProvider } from "@logora/debate/icons/icon_provider";
+import * as regularIcons from "@logora/debate/icons/regular_icons";
+import { Location } from "@logora/debate/util/location";
+import { faker } from "@faker-js/faker";
+import { NavbarButton } from "./NavbarButton";
+
+
+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 loggedInUser = {
+  id: faker.number.int(),
+  full_name: faker.person.fullName(),
+  image_url: faker.image.avatarGitHub(),
+  hash_id: faker.lorem.slug(),
+};
+
+const config = {
+  isDrawer: true,
+  modules: {
+    consultation: true,
+    suggestions: { active: true },
+  },
+  actions: {
+    hideLoginButton: false,
+  },
+};
+
+const Providers = ({ children, config, currentUser = null, isLoggedIn = false }) => (
+  <BrowserRouter>
+      <ConfigProvider routes={routes} config={config}>
+        <AuthContext.Provider value={{ currentUser, isLoggedIn }}>
+          <ResponsiveProvider>
+            <IconProvider library={regularIcons}>
+            <IntlProvider locale="en">
+              <ModalProvider>
+                {children}
+              </ModalProvider>
+              </IntlProvider>
+            </IconProvider>
+          </ResponsiveProvider>
+        </AuthContext.Provider>
+      </ConfigProvider>
+  </BrowserRouter>
+);
+
+
+
+const drawerConfigLoggedOut = { ...config, isDrawer: true };
+export const NavbarButtonDrawerLoggedOut = () => (
+  <div style={{ width: 120, height: 120 }}>
+    <Providers config={drawerConfigLoggedOut} isLoggedIn={false}>
+      <NavbarButton inDrawer />
+    </Providers>
+  </div>
+);
+
+const drawerConfigLoggedIn = { ...config, isDrawer: true };
+export const NavbarButtonDrawerLoggedIn = () => (
+  <div style={{ width: 120, height: 120 }}>
+    <Providers config={drawerConfigLoggedIn} isLoggedIn={true} currentUser={loggedInUser}>
+      <NavbarButton inDrawer />
+    </Providers>
+  </div>
+);

package/src/components/navbar/navbar_button/NavbarButton.test.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { IntlProvider } from "react-intl";
+import { ConfigProvider } from "@logora/debate/data/config_provider";
+import { AuthContext } from "@logora/debate/auth/use_auth";
+import { ModalProvider } from "@logora/debate/dialog/modal";
+import { ResponsiveProvider } from "@logora/debate/hooks/use_responsive";
+import { IconProvider } from "@logora/debate/icons/icon_provider";
+import * as regularIcons from "@logora/debate/icons/regular_icons";
+import { Location } from "@logora/debate/util/location";
+import { NavbarButton } from "./NavbarButton";
+
+const routes = {
+    indexLocation: new Location("espace-debat", {}),
+    debateShowLocation: new Location("espace-debat/debat/:debateSlug", { debateSlug: "" }),
+    rootLocation: new Location("/", {}),
+};
+
+const baseConfig = {
+    isDrawer: false,
+    modules: {
+        consultation: true,
+        suggestions: { active: true },
+    },
+    actions: { hideLoginButton: false },
+};
+
+const Providers = ({ children }) => (
+    <BrowserRouter>
+        <ConfigProvider routes={routes} config={baseConfig}>
+            <AuthContext.Provider value={{ currentUser: null, isLoggedIn: false }}>
+                <ResponsiveProvider>
+                    <ModalProvider>
+                        <IconProvider library={regularIcons}>
+                            <IntlProvider locale="en">{children}</IntlProvider>
+                        </IconProvider>
+                    </ModalProvider>
+                </ResponsiveProvider>
+            </AuthContext.Provider>
+        </ConfigProvider>
+    </BrowserRouter>
+);
+
+const renderNavbarButton = (props = {}) => {
+    return render(
+        <Providers>
+            <NavbarButton {...props} />
+        </Providers>
+    );
+};
+
+describe("NavbarButton", () => {
+    it("renders inside drawer when inDrawer = true", () => {
+        const { container } = renderNavbarButton({ inDrawer: true });
+
+        const btn = container.querySelector('[data-tid="action_view_mobile_navigation"]');
+        expect(btn).not.toBeNull();
+    });
+
+    it("returns null if inDrawer=true and showNavbarButtonInDrawer=false", () => {
+        const { container } = renderNavbarButton({ inDrawer: true, showNavbarButtonInDrawer: false });
+
+        const btn = container.querySelector('[data-tid="action_view_mobile_navigation"]');
+        expect(btn).toBeNull();
+    });
+});

package/src/components/navbar/navbar_button/index.js

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

package/src/components/navbar/navbar_modal/NavbarModal.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A navigation modal for the navbar.
+labels: ['modal', 'navbar', 'overlay']
+---
+
+import { NavbarModal } from './NavbarModal';
+
+A component that renders a navigation modal used in the navbar. It adapts to drawer or full-screen mode depending on the configuration and displays links based on enabled modules and authentication state.
+
+The modal can be closed programmatically via the ModalProvider and supports authentication via `useAuthRequired` when the login action is triggered.
+
+### Component usage
+
+To import the component:
+
+```js
+import { NavbarModal } from '@logora/debate.interface.navbar_modal';
+```
+
+To use the NavbarModal component:
+
+```jsx
+<NavbarModal />
+```

package/src/components/navbar/navbar_modal/NavbarModal.jsx

@@ -0,0 +1,175 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { useLocation } from "react-router";
+import { matchPath } from "react-router-dom";
+import { Modal, useModal } from "@logora/debate/dialog/modal";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useConfig, useRoutes } from "@logora/debate/data/config_provider";
+import { useAuthRequired } from "@logora/debate/hooks/use_auth_required";
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { Icon } from "@logora/debate/icons/icon";
+import { Link } from "@logora/debate/action/link";
+import { Avatar } from "@logora/debate/user/avatar";
+import cx from "classnames";
+import styles from "./NavbarModal.module.scss";
+
+export const NavbarModal = () => {
+	const { hideModal } = useModal();
+	const config = useConfig();
+	const routes = useRoutes();
+	const { pathname } = useLocation();
+	const { isLoggedIn, currentUser } = useAuth();
+	const requireAuthentication = useAuthRequired();
+	const responsive = useResponsive?.() || {};
+	const { isMobile, elementWidth } = responsive;
+	const shouldShowProfileOnMobile = isMobile && elementWidth <= 576 && !config.isDrawer;
+
+	const isActive = (activePath) => {
+		return !!matchPath(activePath, pathname);
+	};
+
+	const showLoginModal = () => {
+		requireAuthentication({});
+	};
+
+	return (
+		<Modal fullScreen={!config.isDrawer} showCloseButton>
+			<div className={styles.modalContainer}>
+				<div className={styles.modalTitle}>
+					<FormattedMessage id="info.menu" defaultMessage={"Navigation"} />
+				</div>
+				<div className={styles.navigationContainer}>
+					<div
+						className={cx(styles.modalItem, {
+							[styles.active]:
+								isActive(routes.indexLocation.path) ||
+								isActive(routes.debateShowLocation.path) ||
+								isActive(routes.rootLocation.path || "/"),
+						})}
+						onClick={hideModal}
+					>
+						<Link
+							className={cx(styles.itemContainer, {
+								[styles.activeItem]:
+									isActive(routes.indexLocation.path) ||
+									isActive(routes.debateShowLocation.path) ||
+									isActive(routes.rootLocation.path || "/"),
+							})}
+							to={routes.indexLocation.toUrl()}
+							data-tid={"view_index"}
+						>
+							<Icon name="chat" height={24} width={24} />
+							<span className={styles.text}>
+								<FormattedMessage id="info.all_debates_short" defaultMessage={"Debates"} />
+							</span>
+						</Link>
+					</div>
+					{config.modules.consultation && (
+						<div
+							className={cx(styles.modalItem, {
+								[styles.active]:
+									isActive(routes.consultationIndexLocation.path) ||
+									isActive(routes.consultationShowLocation.path),
+							})}
+							onClick={hideModal}
+						>
+							<Link
+								className={cx(styles.itemContainer, {
+									[styles.activeItem]:
+										isActive(routes.consultationIndexLocation.path) ||
+										isActive(routes.consultationShowLocation.path),
+								})}
+								to={routes.consultationIndexLocation.toUrl()}
+								data-tid={"view_consultation"}
+							>
+								<Icon name="community" height={24} width={24} />
+								<span className={cx(styles.text, styles.consultationText)}>
+									<FormattedMessage id="info.consultations" defaultMessage={"Consultations"} />
+								</span>
+							</Link>
+						</div>
+					)}
+					{config.modules.suggestions?.active === false ? null : (
+						<div
+							className={cx(styles.modalItem, {
+								[styles.active]: isActive(routes.suggestionLocation.path),
+							})}
+							onClick={hideModal}
+						>
+							<Link
+								className={cx(styles.itemContainer, {
+									[styles.activeItem]: isActive(routes.suggestionLocation.path),
+								})}
+								to={routes.suggestionLocation.toUrl()}
+								data-tid={"view_suggestions"}
+							>
+								<Icon name="suggestion" height={24} width={24} />
+								<span className={styles.text}>
+									<FormattedMessage id="info.suggestion" defaultMessage={"Suggestions"} />
+								</span>
+							</Link>
+						</div>
+					)}
+					{isLoggedIn && shouldShowProfileOnMobile && (
+						<div
+							className={cx(styles.modalItem, {
+								[styles.active]:
+									isActive(routes.userShowLocation.path) ||
+									isActive(routes.userEditLocation.path),
+							})}
+							onClick={hideModal}
+						>
+							<Link
+								className={cx(styles.itemContainer, {
+									[styles.activeItem]:
+										isActive(routes.userShowLocation.path) ||
+										isActive(routes.userEditLocation.path),
+								})}
+								to={routes.userShowLocation.toUrl({
+									userSlug: currentUser.hash_id,
+								})}
+								data-tid={"view_user_profile"}
+							>
+								<div data-tid={"view_user_profile"} className={styles.profile}>
+									<Avatar
+										avatarUrl={currentUser.image_url}
+										userName={currentUser.full_name}
+										size={24}
+										data-tid={"view_user_profile"}
+									/>
+									<span className={styles.text}>
+										<FormattedMessage id="info.profile" defaultMessage={"Profile"} />
+									</span>
+								</div>
+							</Link>
+						</div>
+					)}
+					{!isLoggedIn && config?.actions?.hideLoginButton !== true && (
+						<div
+							className={styles.modalItem}
+							data-tid={"action_login_link"}
+							onClick={showLoginModal}
+						>
+							<div
+								className={styles.itemContainer}
+								data-tid={"action_login_link"}
+							>
+								<Icon name="login" height={24} width={24} />
+								<span className={styles.text}>
+									<FormattedMessage id="action.sign_in" defaultMessage={"Sign in"} />
+								</span>
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+			{!config.isDrawer && (
+				<div className={styles.mobileExitButton} onClick={hideModal}>
+					<Icon name="mobileClose" width={50} height={50} />
+				</div>
+			)}
+		</Modal>
+	);
+};
+
+