@logora/debate 0.1.0

package/src/components/share/share_modal/ShareModal.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ShareModal } from './ShareModal';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IntlProvider } from 'react-intl';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+beforeAll(() => {
+    HTMLDialogElement.prototype.showModal = function () {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+      this.removeAttribute("open");
+    };
+  });
+
+describe('ShareModal', () => {
+    it('should render modal with content and title', () => {
+        const { getByText, queryAllByRole } = render(
+            <ModalProvider>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ShareModal 
+                            shareUrl="https://app.logora.fr/share/p/48656"
+                            shareText="Text"
+                            shareTitle="Title"
+                            title="Modal title"
+                            showShareCode={false}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ModalProvider>
+        );
+
+        expect(getByText("Modal title")).toBeTruthy();
+        const dialog = screen.getByRole("dialog");
+        expect(dialog).toHaveAttribute("open");
+        expect(queryAllByRole("button")).toHaveLength(4);
+    });
+
+    it('should close on click outside', async () => {
+        const { getByRole, getByText, queryAllByRole } = render(
+            <ModalProvider>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <ShareModal 
+                            shareUrl="https://app.logora.fr/share/p/48656"
+                            shareText="Text"
+                            shareTitle="Title"
+                            title="Modal title"
+                            shareCode='<iframe src="https://api.logora.fr/embed.html?shortname="[...]'
+                            showShareCode={true}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </ModalProvider>
+        );
+
+        expect(getByRole("dialog")).toBeTruthy();
+        expect(getByText("Modal title")).toBeTruthy();
+        expect(queryAllByRole("button")).toHaveLength(5);
+        await userEvent.click(document.body);
+
+        waitForElementToBeRemoved(screen.getByText("Modal title")).then(() =>
+            expect(queryAllByRole("button")).toHaveLength(0)
+        )
+    });
+});

package/src/components/share/share_modal/index.js

@@ -0,0 +1 @@
+export { ShareModal as default } from './ShareModal';

package/src/components/skeleton/box_skeleton/BoxSkeleton.docs.mdx

@@ -0,0 +1,14 @@
+---
+description: A box skeleton component.
+tags: ['skeleton', 'box']
+---
+
+A skeleton box to be displayed as a placeholder during content loading.
+
+### Component usage
+```js
+import { BoxSkeleton } from '@logora/debate.skeleton.box_skeleton';
+```
+```js
+<BoxSkeleton />
+```

package/src/components/skeleton/box_skeleton/BoxSkeleton.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+import PropTypes from "prop-types";
+
+export const BoxSkeleton = ({ enableAnimation = true, boxHeight = 200, onlyEdgeBox = false, className }) => {
+  return (
+    <div className={className} data-testid={"box-skeleton"}>
+      <div style={{ marginRight: ".5em" }}>
+        <Skeleton enableAnimation={enableAnimation} height={boxHeight} />
+        {!onlyEdgeBox && 
+          <>
+            <Skeleton enableAnimation={enableAnimation} height={20} style={{margin: "1em 0"}} />
+            <div style={{ display: "flex", flexDirection: "row", justifycontent: "flex-start" }}>
+              <Skeleton enableAnimation={enableAnimation} circle={true} height={40} width={40} style={{marginRight: "15px"}} />
+              <Skeleton enableAnimation={enableAnimation} circle={true} height={40} width={40} style={{marginRight: "15px"}} />
+              <Skeleton enableAnimation={enableAnimation} circle={true} height={40} width={40} style={{marginRight: "15px"}} />
+              <div style={{ marginLeft: "auto", alignSelf: "flex-end", marginRight: "5px" }}>
+                <Skeleton enableAnimation={enableAnimation} height={10} width={70} />
+              </div>
+            </div>
+          </>
+        }
+      </div>
+    </div>
+  )
+};
+
+BoxSkeleton.propTypes = {
+  /** Enable skeleton animation */
+  enableAnimation: PropTypes.bool,
+  /** Height of the main box in pixels */
+  boxHeight: PropTypes.number,
+  /** If `true`, will not show the footer */
+  onlyEdgeBox: PropTypes.bool,
+  /** Skeleton class name */
+  className: PropTypes.string,
+};

package/src/components/skeleton/box_skeleton/BoxSkeleton.stories.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BoxSkeleton } from './BoxSkeleton';
+
+const meta = {
+    title: 'Skeleton/Box Skeleton',
+    component: BoxSkeleton,
+    args: {
+        boxHeight: undefined,
+        onlyEdgeBox: false,
+        enableAnimation: true
+    },
+    argTypes: {
+        boxHeight: { control: 'number' },
+        onlyEdgeBox: { control: 'boolean' },
+        enableAnimation: { control: 'boolean' }
+    },
+    render: (args) => {
+        if (args.onlyEdgeBox) {
+            return <div style={{ width: '200px' }}><BoxSkeleton {...args} /></div>;
+        }
+        return <BoxSkeleton {...args} />;
+    }
+};
+
+export default meta;
+
+export const DefaultBoxSkeleton = {};
+
+export const BoxSkeletonLarge = {
+    args: {
+        boxHeight: 400
+    }
+};
+
+export const BoxSkeletonOnlyEdgeBox = {
+    args: {
+        boxHeight: 200,
+        onlyEdgeBox: true
+    }
+};
+
+export const BoxSkeletonWithoutAnimation = {
+    args: {
+        enableAnimation: false
+    }
+};

package/src/components/skeleton/box_skeleton/BoxSkeleton.test.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BoxSkeleton } from './BoxSkeleton';
+
+describe('BoxSkeleton', () => {
+    it('should render skeleton with default props', () => {
+        const container = render(
+            <BoxSkeleton />
+        );
+        expect(container.getByTestId('box-skeleton')).toBeInTheDocument();
+    });
+
+    it('renders the component with custom box height', () => {
+        const { getByTestId } = render(<BoxSkeleton boxHeight={300} />);
+        const skeletonContainer = getByTestId('box-skeleton');
+        const mainBoxItem = skeletonContainer.querySelectorAll('.react-loading-skeleton')[0];
+        expect(mainBoxItem).toHaveStyle('height: 300px');
+    });
+    
+    it('enables animation when enableAnimation prop is true', () => {
+        const { getByTestId } = render(<BoxSkeleton enableAnimation={true} />);
+        const skeletonContainer = getByTestId('box-skeleton');
+        const skeletonItems = skeletonContainer.querySelectorAll('.react-loading-skeleton');
+        skeletonItems.forEach((item) => {
+            expect(item).toHaveClass('react-loading-skeleton');
+            expect(getComputedStyle(item, ':after')['visibility'] == "visible").toBeTruthy();
+        });
+    });
+
+    it('disables animation when enableAnimation prop is false', () => {
+        const { getByTestId } = render(<BoxSkeleton enableAnimation={false} />);
+        const skeletonContainer = getByTestId('box-skeleton');
+        const skeletonItems = skeletonContainer.querySelectorAll('.react-loading-skeleton');
+        skeletonItems.forEach((item) => {
+            expect(item).toHaveClass('react-loading-skeleton');
+            expect(item).toHaveStyle('--pseudo-element-display: none');
+        });
+    });
+});

package/src/components/skeleton/box_skeleton/index.js

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

package/src/components/skeleton/user_content_skeleton/UserContentSkeleton.docs.mdx

@@ -0,0 +1,15 @@
+---
+description: A user content skeleton component.
+---
+
+A skeleton for user content loading. The height of the body can be controlled with the `numberLines` prop.
+
+### Component usage
+```js
+import { UserContentSkeleton } from '@logora/debate.skeleton.user_content_skeleton';
+```
+```js
+<UserContentSkeleton>
+    <div>Loading</div>
+</UserContentSkeleton>
+```

package/src/components/skeleton/user_content_skeleton/UserContentSkeleton.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+import styles from './UserContentSkeleton.module.scss';
+import cx from 'classnames';
+import PropTypes from "prop-types";
+
+export const UserContentSkeleton = ({ enableAnimation = true, numberLines = 4, border = false, tag, tagClassName, children}) => {
+  return (
+    <SkeletonTheme baseColor="var(--background-color-secondary)" highlightColor="var(--darkest-text-tertiary)">
+      <div data-testid={"user-content-skeleton"} className={cx(styles.skeletonContainer, { [styles.border]: border })}>
+        <div className={styles.skeletonHeader}>
+          <Skeleton enableAnimation={enableAnimation} circle={true} height={60} width={60} />
+          <div className={styles.skeletonHeaderLines}>
+            <Skeleton enableAnimation={enableAnimation} />
+            <Skeleton enableAnimation={enableAnimation} />
+          </div>
+          { tag &&
+              <div className={styles.tagContainer}>
+                  <div className={cx(styles.tagBox, tagClassName)}>
+                      <div className={styles.tag}>
+                          { tag }
+                      </div>
+                  </div>
+              </div>
+          }
+        </div>
+        { numberLines > 0 &&
+          <div data-testid={"skeleton-body"} className={styles.skeletonBody}>
+            <Skeleton enableAnimation={enableAnimation} count={numberLines} />
+          </div>
+        }
+        { children &&
+          <div className={styles.childrenLayer}>
+            { children }
+          </div>
+        }
+      </div>
+    </SkeletonTheme>
+  )
+};
+
+UserContentSkeleton.propTypes = {
+  /** Enable skeleton animation */
+  enableAnimation: PropTypes.bool,
+  /** Will add a border to the box if `true` */
+  border: PropTypes.bool,
+  /** Number of skeleton lines in the body */
+  numberLines: PropTypes.number,
+  /** Number of skeleton lines in the body */
+  tag: PropTypes.string,
+  /** Number of skeleton lines in the body */
+  tagClassName: PropTypes.string,
+  /** Children displayed at the center of the skeleton */
+  children: PropTypes.node,
+};

package/src/components/skeleton/user_content_skeleton/UserContentSkeleton.module.scss

@@ -0,0 +1,78 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.skeletonContainer {
+    position: relative;
+}
+
+.skeletonHeader {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: flex-start !important;
+}
+
+.skeletonHeaderLines {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+    text-align: left;
+    @include spacing.mt(2, xs);
+    flex: 1;
+    min-width: 80px;
+}
+
+.skeletonBody {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    @include spacing.mt(2, xs);
+}
+
+.childrenLayer {
+    position: absolute;  
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.border {
+    border-radius: theme.$box-border-radius;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    @include spacing.p(3, xs);
+}
+
+.tagContainer {
+    display: flex !important;
+	flex-direction: column !important;
+	align-items: flex-end !important;
+	justify-content: flex-start !important;
+	padding: 0 !important;
+	width: max-content;
+	margin-left: auto;
+    @include spacing.mt(2, xs);
+}
+
+.tagBox {
+	font-weight: theme.$font-weight-bold;
+	display: flex !important;
+	align-items: center !important;
+	justify-content: flex-end !important;
+	border-radius: theme.$box-border-radius;
+	background-color: theme.$call-primary;
+}
+
+.tag {
+	font-size: theme.$font-size-extra-small;
+	color: theme.$text-light;
+	@include display.line-clamp(2);
+	max-height: 3.4em;
+	@include spacing.px(2.5, xs);
+	@include spacing.py(2, xs);
+}

package/src/components/skeleton/user_content_skeleton/UserContentSkeleton.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { UserContentSkeleton } from './UserContentSkeleton';
+
+const meta = {
+  title: 'Skeleton/User Content Skeleton',
+  component: UserContentSkeleton,
+  args: {
+    border: false,
+    numberLines: undefined,
+    enableAnimation: true,
+    tag: undefined,
+    withChildren: false
+  },
+  argTypes: {
+    border: { control: 'boolean' },
+    numberLines: { control: 'number' },
+    enableAnimation: { control: 'boolean' },
+    tag: { control: 'text' },
+    withChildren: { control: 'boolean' }
+  },
+  render: ({ withChildren, ...args }) => (
+    <UserContentSkeleton {...args}>
+      {withChildren ? <div>Some content</div> : null}
+    </UserContentSkeleton>
+  )
+};
+
+export default meta;
+
+export const DefaultUserContentSkeleton = {};
+
+export const UserContentSkeletonWithBorder = { args: { border: true } };
+
+export const UserContentSkeletonWithoutBody = { args: { numberLines: 0 } };
+
+export const UserContentSkeletonWithTwoLines = { args: { numberLines: 2 } };
+
+export const UserContentSkeletonWithoutAnimation = { args: { enableAnimation: false } };
+
+export const UserContentSkeletonWithTag = { args: { tag: 'Rock' } };
+
+export const UserContentSkeletonWithTagAndBorder = { args: { border: true, tag: 'Rock' } };
+
+export const UserContentSkeletonWithChildren = { args: { withChildren: true } };

package/src/components/skeleton/user_content_skeleton/UserContentSkeleton.test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { UserContentSkeleton } from './UserContentSkeleton';
+
+describe('UserContentSkeleton', () => {
+    it('should render skeleton with correct test id', () => {
+        const container = render(
+            <UserContentSkeleton />
+        );
+        expect(container.getByTestId('user-content-skeleton')).toBeTruthy();
+    });
+
+    it('hides the body when numberLines prop is 0', () => {
+        const container = render(<UserContentSkeleton numberLines={0} />);
+
+        expect(screen.getByTestId('user-content-skeleton')).toBeTruthy();
+        expect(screen.queryByTestId('skeleton-body')).toBeNull();
+    });
+
+    it('enables animation when enableAnimation prop is true', () => {
+        const { getByTestId } = render(<UserContentSkeleton enableAnimation={true} />);
+        const skeletonContainer = getByTestId('user-content-skeleton');
+        const skeletonItems = skeletonContainer.querySelectorAll('.react-loading-skeleton');
+        skeletonItems.forEach((item) => {
+            expect(item).toHaveClass('react-loading-skeleton');
+            expect(getComputedStyle(item, ':after')['visibility'] == "visible").toBeTruthy();
+        });
+    });
+
+    it('disables animation when enableAnimation prop is false', () => {
+        const { getByTestId } = render(<UserContentSkeleton enableAnimation={false} />);
+        const skeletonContainer = getByTestId('user-content-skeleton');
+        const skeletonItems = skeletonContainer.querySelectorAll('.react-loading-skeleton');
+        skeletonItems.forEach((item) => {
+            expect(item).toHaveClass('react-loading-skeleton');
+            expect(item).toHaveStyle('--pseudo-element-display: none');
+        });
+    });
+
+    it('displays children if passed', () => {
+        const { getByTestId, getByText } = render(
+            <UserContentSkeleton enableAnimation={false}>
+                <div>My child</div>
+            </UserContentSkeleton>
+        );
+        expect(getByTestId('user-content-skeleton')).toBeTruthy();
+        expect(getByText('My child')).toBeTruthy();
+    });
+
+    it('displays tag if passed', () => {
+        const { getByTestId, getByText } = render(<UserContentSkeleton tag={"Music"} />);
+        expect(getByTestId('user-content-skeleton')).toBeTruthy();
+        expect(getByText('Music')).toBeTruthy();
+    });
+});

package/src/components/skeleton/user_content_skeleton/index.js

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

package/src/components/source/context_source_box/ContextSourceBox.docs.mdx

@@ -0,0 +1,27 @@
+---
+description: A stylized box for sources / articles.
+---
+
+import { ContextSourceBox } from './ContextSourceBox';
+import { IntlProvider } from 'react-intl';
+
+A component that renders a stylized box for sources / articles.
+
+It should be wrapped around [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+### Component usage
+
+```js
+    import { ContextSourceBox } from '@logora/debate.source.context_source_box';
+```
+
+```js
+<IntlProvider locale="en">
+    <ContextSourceBox
+        imageUrl="https://example.com/yourimage.jpg"
+        author="Logora"
+        date="2022-10-13T12:54:02.487Z"
+        title="An interesting article about cats" 
+    />
+</IntlProvider>
+```

package/src/components/source/context_source_box/ContextSourceBox.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useIntl } from "react-intl";
+import { FormattedDate } from 'react-intl';
+import styles from './ContextSourceBox.module.scss';
+import PropTypes from "prop-types";
+
+export const ContextSourceBox = ({ title, imageUrl, date, author }) => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.container}>
+        <div className={styles.content}>
+            <div className={styles.infos}>
+              { author &&
+                <>
+                  <span className={styles.sourceAuthor}>{author}</span>
+                  <span className={styles.separator}>·</span>
+                </>
+              }
+              <span className={styles.sourcePublishedDate}><FormattedDate day="2-digit" month="2-digit" year="numeric" value={new Date(date)} /></span>
+            </div>
+            <div className={styles.sourceTitle}>{title}</div>
+        </div>
+        <img src={imageUrl} alt={intl.formatMessage({ id: "source.context_source_box.alt", defaultMessage: "Debate source image"})} className={styles.image} />
+    </div>
+  )
+}
+
+ContextSourceBox.propTypes = {
+  /** Title of the source */
+  title: PropTypes.string.isRequired,
+  /** Author of the source */
+  author: PropTypes.string,
+  /** Publication date of the source */
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date) ]),
+  /**  URL of the source image */
+  imageUrl: PropTypes.string
+};

package/src/components/source/context_source_box/ContextSourceBox.module.scss

@@ -0,0 +1,50 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.container {
+    display: flex !important;
+    gap: spacing.$spacer-md;
+    justify-content: space-between;
+    cursor: pointer;
+    &:hover .sourceTitle {
+        text-decoration: underline;
+    }
+    @include display.media-breakpoint-down(sm) {
+        gap: spacing.$spacer;
+    }
+}
+
+.image {
+    width: 48px !important;
+    height: 48px !important;
+    flex: 0 0 48px;
+    border-radius: theme.$box-border-radius;
+    object-fit: cover;
+    overflow: hidden;
+    color: transparent;
+    text-indent: 10000px; 
+}
+
+.infos {
+    display: flex !important;
+    flex-wrap: wrap;
+    font-size: theme.$font-size-small;
+    line-height: theme.$line-height-none;
+    color: theme.$text-primary;
+    @include spacing.mb(1, xs);
+}
+
+.sourceAuthor {
+    line-height: theme.$line-height-tight;
+}
+
+.sourceTitle {
+    font-size: theme.$font-size-normal;
+    line-height: theme.$line-height-normal;
+    font-weight: theme.$font-weight-bold;
+}
+
+.separator {
+    @include spacing.px(1, xs);
+}

package/src/components/source/context_source_box/ContextSourceBox.stories.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { ContextSourceBox } from './ContextSourceBox';
+import { faker } from '@faker-js/faker';
+
+const source = {
+  imageUrl: faker.image.url(),
+  author: faker.vehicle.manufacturer(),
+  date: faker.date.recent(),
+  title: faker.music.songName()
+};
+
+export default {
+  title: 'Source/Context Source Box',
+  component: ContextSourceBox,
+  args: source,
+  argTypes: {
+    imageUrl: { control: 'text' },
+    author: { control: 'text' },
+    date: { control: 'date' },
+    title: { control: 'text' }
+  },
+  render: (args) => (
+    <IntlProvider locale='en'>
+      <ContextSourceBox {...args} />
+    </IntlProvider>
+  )
+};
+
+export const DefaultContextSourceBox = {};
+
+export const ContextSourceBoxWithoutAuthor = {
+  args: {
+    author: ''
+  }
+};

package/src/components/source/context_source_box/ContextSourceBox.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ContextSourceBox } from './ContextSourceBox';
+import { IntlProvider } from 'react-intl';
+import { faker } from '@faker-js/faker';
+
+const source = {
+    imageUrl: faker.image.url(),
+    author: faker.vehicle.manufacturer(),
+    date: faker.date.recent(),
+    title: faker.music.songName()
+}
+
+describe('ContextSourceBox', () => {
+    it('should render with the correct text', () => {
+        const box = render(
+            <IntlProvider locale="en">
+                <ContextSourceBox 
+                    imageUrl={source.imageUrl}
+                    author={source.author}
+                    date={source.date}
+                    title={source.title}
+                />
+            </IntlProvider>
+        );
+        expect(box.getByText(source.title)).toBeTruthy();
+        expect(box.getByText(source.author)).toBeTruthy();
+        expect(box.getByAltText('Debate source image')).toHaveAttribute('src', source.imageUrl);
+    });
+
+    it('should render without author and separator if author empty', () => {
+        const box = render(
+            <IntlProvider locale="en">
+                <ContextSourceBox 
+                    imageUrl={source.imageUrl}
+                    date={source.date}
+                    title={source.title}
+                />
+            </IntlProvider>
+        );
+        expect(box.getByText(source.title)).toBeTruthy();
+        expect(box.queryByText(source.author)).toBeNull();
+        expect(box.queryByText("•")).toBeNull();
+        expect(box.getByAltText('Debate source image')).toHaveAttribute('src', source.imageUrl);
+    });
+});

package/src/components/source/context_source_box/index.js

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