@logora/debate 0.1.0 → 0.2.0

package/src/components/dialog/dropdown/Dropdown.jsx

@@ -1,59 +0,0 @@
-import React, { useState, useRef } from "react";
-import useOnClickOutside from 'use-onclickoutside';
-import cx from "classnames";
-import styles from "./Dropdown.module.scss";
-import PropTypes from "prop-types";
-
-export const Dropdown = ({ onClick, horizontalPosition = "left", disabled = false, className, dropdownClassName, children }) => {
-    const [active, setActive] = useState(false);
-    const dropdownRef = useRef(null);
-
-	const onToggleClick = () => {
-        if(!disabled) {
-            if (onClick) {
-                onClick();
-            }
-            setActive(!active);
-        }
-	};
-
-    useOnClickOutside(dropdownRef, () => setActive(false));
-
-	return (
-        <div ref={dropdownRef} className={cx(styles.dropdownWrapper, { [className]: className })}>
-            <button
-                type='button'
-                aria-expanded={active}
-                className={styles.dropdownHeader}
-                onClick={onToggleClick}
-            >
-                {children[0]}
-            </button>
-            { active && (
-                <div className={dropdownClassName ? dropdownClassName : cx(
-                        styles.dropdownList,
-                        { [styles[horizontalPosition]]: horizontalPosition }
-                    )}
-                    onClick={() => setActive(false)}
-                >
-                    { children[1] }
-                </div>
-            )}
-        </div>
-    );
-}
-
-Dropdown.propTypes = {
-    /** Callback triggered when clicking the dropdown button */
-    onClick: PropTypes.func,
-    /** Dropdown horizontal alignment, can be `left`, `center` or `right` */
-    horizontalPosition: PropTypes.string,
-    /** Disable dropdown */
-    disabled: PropTypes.bool,
-    /** Class name passed to the root container */
-    className: PropTypes.string,
-    /** Class name passed to the dropdown */
-    dropdownClassName: PropTypes.string,
-    /** Dropdown button and content of the dropdown */
-    children: PropTypes.node,
-};

package/src/components/dialog/dropdown/Dropdown.module.scss

@@ -1,41 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.dropdownWrapper {
-	position: relative;
-	display: inline-block;
-}
-
-.dropdownHeader {
-	border: none;
-	padding: 0 !important;
-	cursor: pointer;
-	background-color: theme.$background-color-primary;
-	&:focus-visible {
-		outline: revert;
-	  }
-}
-
-.dropdownList {
-	position: absolute;
-	z-index: 3;
-	background: theme.$background-color-primary;
-	box-shadow: theme.$box-shadow;
-	border: theme.$box-border;
-	border-radius: theme.$box-border-radius;
-	overscroll-behavior-y: contain;
-	width: max-content;
-}
-
-.left {
-	left: 0 !important;
-}
-
-.right {
-	right: 0 !important;
-}
-
-.center {
-	left: 50%;
-	transform: translateX(-50%);
-}

package/src/components/dialog/dropdown/Dropdown.stories.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Dropdown } from './Dropdown';
-
-export default {
-    title: 'Dialog/Dropdown',
-    component: Dropdown,
-    args: {
-        disabled: false,
-        horizontalPosition: 'left',
-        triggerText: 'Left'
-    },
-    argTypes: {
-        disabled: { control: 'boolean' },
-        horizontalPosition: { control: 'select', options: ['left', 'center', 'right'] },
-        triggerText: { control: 'text' }
-    },
-    render: ({ triggerText, ...args }) => (
-        <Dropdown {...args}>
-            <div style={{ padding: '5px 15px', border: '1px solid black', borderRadius: '6px' }}>{triggerText}</div>
-            <div>
-                <p>Child 1</p>
-                <p>Child 2</p>
-            </div>
-        </Dropdown>
-    )
-};
-
-export const DefaultDropdown = {};
-
-export const DisabledDropdown = {
-    args: {
-        disabled: true,
-        triggerText: 'Disabled'
-    }
-};
-
-export const RightDropdown = {
-    args: {
-        horizontalPosition: 'right',
-        triggerText: 'Right'
-    }
-};

package/src/components/dialog/dropdown/Dropdown.test.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Dropdown } from './Dropdown';
-
-describe('Dropdown', () => {
-	it('should render a dropdown with first child has button', () => {
-		const dropdown = render(
-			<Dropdown>
-				<div>Title</div>
-				<>
-					<p>Child 1</p>
-					<p>Child 2</p>
-				</>
-			</Dropdown>
-		);
-		const renderedDropdown = dropdown.getByText(/Title/i);
-		expect(renderedDropdown).toBeTruthy();
-	});
-
-	it('should display children when clicking on title', async () => {
-		const dropdown = render(
-			<Dropdown>
-				<div>Title</div>
-				<>
-					<p>Child 1</p>
-					<p>Child 2</p>
-				</>
-			</Dropdown>
-		);
-		const dropdownTitle = dropdown.getByText(/Title/i);
-		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
-		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
-
-		await userEvent.click(dropdownTitle);
-		
-		expect(dropdown.getByText(/Child 1/i)).toBeTruthy();
-		expect(dropdown.getByText(/Child 2/i)).toBeTruthy();
-	});
-
-	it('should not display children on click if disabled', async () => {
-		const dropdown = render(
-			<Dropdown disabled>
-				<div>Title</div>
-				<>
-					<p>Child 1</p>
-					<p>Child 2</p>
-				</>
-			</Dropdown>
-		);
-		const dropdownTitle = dropdown.getByText(/Title/i);
-		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
-		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
-
-		await userEvent.click(dropdownTitle);
-		
-		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
-		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
-	});
-
-	it('should close on click outside', async () => {
-		const dropdown = render(
-			<Dropdown>
-				<div>Title</div>
-				<>
-					<p>Child 1</p>
-					<p>Child 2</p>
-				</>
-			</Dropdown>
-		);
-
-		await userEvent.click(dropdown.getByText(/Title/i));
-		
-		expect(dropdown.getByText(/Child 1/i)).toBeTruthy();
-		expect(dropdown.getByText(/Child 2/i)).toBeTruthy();
-
-		await userEvent.click(document.body);
-
-		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
-		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
-	});
-
-	it('should close when an item from the list is clicked', async () => {
-		const ChildContainer = () => {
-			return (
-				<>
-					Child 1
-				</>
-			)
-		}
-		const dropdown = render(
-			<Dropdown closeOnContentClick>
-				<div>Title</div>
-				<ChildContainer />
-			</Dropdown>
-		);
-
-		await userEvent.click(screen.getByText(/Title/i));
-
-		expect(screen.getByText(/Child 1/i)).toBeTruthy();
-
-		await userEvent.click(screen.getByText(/Child 1/i));
-
-		expect(screen.queryByText(/Child 1/i)).toBeNull();
-	});
-
-	it('should call onClick when clicking on button', async () => {
-		const callback = vi.fn();
-
-		const dropdown = render(
-			<Dropdown onClick={callback}>
-				<div>Title</div>
-				<>
-					<p>Child 1</p>
-					<p>Child 2</p>
-				</>
-			</Dropdown>
-		);
-
-		await userEvent.click(dropdown.getByText(/Title/i));
-		expect(callback).toHaveBeenCalledTimes(1);
-
-		await userEvent.click(dropdown.getByText(/Title/i));
-		expect(callback).toHaveBeenCalledTimes(2);
-	});
-});

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

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

package/src/components/dialog/modal/Modal.docs.mdx

@@ -1,39 +0,0 @@
----
-description: A modal component and its context to create modals.
-labels: ['modal', 'modal-context']
----
-
-import { Modal } from './Modal';
-import { ModalProvider } from './ModalProvider';
-import { useModal } from './useModal';
-
-A component that renders a modal (dialog). Modal is closed when user clicks outside it and a close button can also be displayed.
-
-Component must be wrapped with the ModalProvider context.
-
-ModalProvider is a helper based on [Context API](https://en.reactjs.org/docs/context.html) and React hooks for simplified work
-with modals (dialogs).
-
-To use the context, first wrap your application with _ModalProvider_. Then, use the hook _useModal_ that exposes _showModal_ and _hideModal_ functions.
-
-### Component usage
-
-```js
-import { Modal, ModalProvider, useModal } from '@logora/debate.dialog.modal';
-
-const Modal = () => {
-	const { showModal, hideModal } = useModal();
-
-	return <div onClick={hideModal}>Close modal</div>
-}
-
-const ModalConsumer = () => {
-	const { showModal, hideModal } = useModal();
-
-	return <div onClick={() => showModal(<Modal />)}>Open modal</div>;
-}
-
-<ModalProvider>
-    <ModalConsumer />
-</ModalProvider>
-```

package/src/components/dialog/modal/Modal.jsx

@@ -1,101 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { useIntl } from 'react-intl';
-import PropTypes from "prop-types";
-import { useModal } from './useModal';
-import cx from 'classnames';
-import styles from './Modal.module.scss';
-import { Icon } from "@logora/debate/icons/icon";
-
-export const Modal = ({ title, showCloseButton = false, fullScreen, children, disableClickOutside = false, ...rest }) => {
-  const dialogRef = useRef();
-  const intl = useIntl();
-  const { hideModal } = useModal();
-  
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-  
-    if (!dialog.open) dialog.showModal();
-    dialog.focus();
-  
-    const prevHtmlOverflow = document.documentElement.style.overflow;
-    const prevBodyOverflow = document.body.style.overflow;
-  
-    document.documentElement.style.overflow = "hidden";
-    document.body.style.overflow = "hidden";
-  
-    return () => {
-      document.documentElement.style.overflow = prevHtmlOverflow;
-      document.body.style.overflow = prevBodyOverflow;
-  
-      if (dialog.open) dialog.close();
-    };
-  }, []);
-  
-
-  const handleClickBackdrop = (e) => {
-    if (disableClickOutside) return;
-    
-    if (e.currentTarget !== e.target) return;
-    
-    hideModal();
-  };
-
-  const handleClose = () => {
-    hideModal();
-  };
-
-  return (
-    <dialog 
-      ref={dialogRef}
-      className={cx(styles.modalDialog, { [styles.modalDialogFullScreen]: fullScreen })} 
-      aria-labelledby={title ? "modal-title" : undefined}
-      onClick={handleClickBackdrop}
-      onClose={handleClose}
-      {...rest}
-    >
-      <div className={cx(styles.modalContainer)}>
-        <div className={cx(styles.modalHeader, { [styles.modalHeaderWithTitle]: title })}>
-          {title &&
-            <div id="modal-title">{title}</div>
-          }
-          {showCloseButton &&
-            <button
-              type="button"
-              className={styles.modalExitButton}
-              onClick={hideModal}
-              aria-label={intl.formatMessage({ id: "dialog.modal.aria_label", defaultMessage: "Close dialog" })}
-              data-testid="close-button"
-            >
-              <Icon
-                name="close"
-                height={18}
-                width={18}
-                aria-hidden="true"
-                focusable="false"
-              />
-            </button>
-          }
-        </div>
-        <div className={styles.modalContent}>
-          {children}
-        </div>
-      </div>
-    </dialog>
-  );
-};
-
-Modal.propTypes = {
-  /** Modal title */
-  title: PropTypes.string,
-  /** If true, a close button will be shown */
-  showCloseButton: PropTypes.bool,
-  /** If true, the modal will be full screen with a white background */
-  fullScreen: PropTypes.bool,
-  /** Modal content */
-  children: PropTypes.node,
-  /** Disable the click outside to close modal option */
-  disableClickOutside: PropTypes.bool,
-  /** Other props passed to the modal */
-  rest: PropTypes.object
-};

package/src/components/dialog/modal/Modal.module.scss

@@ -1,99 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-@use 'styles/display' as display;
-
-.modalDialog {
-  border: none;
-  padding: 0;
-  background: transparent;
-
-  width: 100%;
-  max-width: 500px;
-
-  margin: auto;              
-  position: fixed;          
-  inset: 0;                  
-  
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &::backdrop {
-    background: rgba(0, 0, 0, 0.6);
-  }
-}
-
-.modalDialog:focus {
-  outline: none;
-}
-
-
-.modalDialogFullScreen {
-  max-width: none;
-  width: 100%;
-  height: 100%;
-  margin: 0 !important;
-  
-  &::backdrop {
-    background: theme.$background-color-primary;
-  }
-}
-
-.modalContainer {
-  background: theme.$background-color-primary;
-  border-radius: theme.$box-border-radius;
-  width: 100%;
-  position: relative;
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  @include spacing.p(3, xs);
-
-  @include display.media-breakpoint-down(xs) {
-    margin: 0.75em;
-  }
-}
-
-.modalHeader {
-  display: flex !important;
-  align-items: flex-start !important;
-  justify-content: space-between !important;
-  width: 100%;
-  font-weight: theme.$font-weight-bold;
-  color: theme.$text-primary;
-  @include spacing.px(3, xs);
-  @include spacing.pb(1, xs);
-
-  .modalExitButton {
-    line-height: theme.$line-height-none;
-    opacity: 1;
-    margin-left: auto;
-    background: transparent;
-    border: none;
-    padding: 0;
-    appearance: none;
-    &:hover {
-      color: theme.$text-secondary;
-      cursor: pointer;
-    }
-
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        opacity: .75;
-      }
-    }
-  }
-}
-
-.modalExitButton:focus {
-  outline: none;
-}
-
-.modalHeaderWithTitle {
-  @include spacing.mb(3, xs);
-}
-
-.modalContent {
-  width: 100%;
-  @include spacing.px(3, xs);
-}

package/src/components/dialog/modal/Modal.stories.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Modal } from './Modal';
-import { ModalProvider } from './ModalProvider';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import { IntlProvider } from "react-intl";
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export default {
-    title: 'Dialog/Modal',
-    component: Modal,
-    args: {
-        title: null,
-        showCloseButton: false,
-        fullScreen: false,
-        children: 'Are you sure you want to continue ?'
-    },
-    argTypes: {
-        title: { control: 'text' },
-        showCloseButton: { control: 'boolean' },
-        fullScreen: { control: 'boolean' },
-        children: { control: 'text' }
-    },
-    render: ({ children, ...args }) => (
-        <div style={{ width: '150px', height: '80px' }}>
-            <IconProvider library={regularIcons}>
-                <IntlProvider locale="en">
-                    <ModalProvider>
-                        <Modal {...args}>
-                            <div>{children}</div>
-                        </Modal>
-                    </ModalProvider>
-                </IntlProvider>
-            </IconProvider>
-        </div>
-    )
-};
-
-export const DefaultModal = {};
-
-export const ModalWithCloseButton = {
-    args: {
-        title: 'Confirm your action',
-        showCloseButton: true
-    }
-};
-
-export const ModalFullScreen = {
-    args: {
-        title: 'Confirm your action',
-        fullScreen: true,
-        showCloseButton: true
-    }
-};

package/src/components/dialog/modal/Modal.test.jsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Modal } from './Modal';
-import { ModalProvider } from './ModalProvider';
-import { useModal } from './useModal';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import { IntlProvider } from "react-intl";
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-beforeAll(() => {
-  if (typeof HTMLDialogElement !== 'undefined') {
-    if (!HTMLDialogElement.prototype.showModal) {
-      HTMLDialogElement.prototype.showModal = function () {
-        this.setAttribute('open', '');
-      };
-    }
-    if (!HTMLDialogElement.prototype.close) {
-      HTMLDialogElement.prototype.close = function () {
-        this.removeAttribute('open');
-        this.dispatchEvent(new Event('close'));
-      };
-    }
-  }
-});
-
-const TestModal = () => {
-  const { showModal } = useModal();
-
-  return (
-    <div>
-      <button
-        data-testid="show-modal-button"
-        onClick={() =>
-          showModal(
-            <Modal title="my title" showCloseButton>
-              <div data-testid="modal-content">modal content</div>
-            </Modal>
-          )
-        }
-      >
-        show modal
-      </button>
-    </div>
-  );
-};
-
-describe('Modal', () => {
-  it('should render modal with content and title', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <IconProvider library={regularIcons}>
-        <IntlProvider locale="en">
-          <ModalProvider>
-            <TestModal />
-          </ModalProvider>
-        </IntlProvider>
-      </IconProvider>
-    );
-
-    expect(screen.queryByText("modal content")).toBeNull();
-
-    await user.click(screen.getByTestId("show-modal-button"));
-
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    expect(screen.getByText("modal content")).toBeInTheDocument();
-    expect(screen.getByText("my title")).toBeInTheDocument();
-  });
-
-  it('should render close button if showCloseButton is true', () => {
-    render(
-      <IconProvider library={regularIcons}>
-        <IntlProvider locale="en">
-          <ModalProvider>
-            <Modal title="my title" showCloseButton>
-              <div data-testid="modal-content">modal content</div>
-            </Modal>
-          </ModalProvider>
-        </IntlProvider>
-      </IconProvider>
-    );
-
-    expect(screen.getByText("modal content")).toBeInTheDocument();
-    expect(screen.getByText("my title")).toBeInTheDocument();
-    expect(screen.getByTestId("close-button")).toBeInTheDocument();
-  });
-
-  it('should close when clicking on close button', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <IconProvider library={regularIcons}>
-        <IntlProvider locale="en">
-          <ModalProvider>
-            <TestModal />
-          </ModalProvider>
-        </IntlProvider>
-      </IconProvider>
-    );
-
-    expect(screen.queryByRole("dialog")).toBeNull();
-
-    await user.click(screen.getByTestId("show-modal-button"));
-
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    expect(screen.getByText("modal content")).toBeInTheDocument();
-    expect(screen.getByTestId("close-button")).toBeInTheDocument();
-
-    await user.click(screen.getByTestId("close-button"));
-
-    expect(screen.queryByText("modal content")).toBeNull();
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-  });
-});