@logora/debate 0.1.0

package/src/components/source/context_source_list/ContextSourceList.docs.mdx

@@ -0,0 +1,37 @@
+---
+description: A list of context articles.
+labels: ['sources', 'context']
+---
+
+A component that renders a list of articles / sources.
+
+It should be wrapped around [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+### Component usage
+
+```js
+    import { ContextSourceList } from '@logora/debate.source.context_source_list';
+```
+
+```js
+<IntlProvider locale="en">
+    <ContextSourceList
+        sources={{
+            source_url: "#",
+            id: 1,
+            origin_image_url: "https://picsum.photos/200",
+            publisher: "Logora",
+            title: "Title of article",
+            published_date: "2022-02-25T11:00:00.000Z"
+        },
+        {
+            source_url: "#",
+            id: 2,
+            origin_image_url: "https://picsum.photos/200",
+            publisher: "Logora",
+            title: "An another article",
+            published_date: "2022-08-11T11:00:00.000Z"
+        }}
+    />
+</IntlProvider>
+```

package/src/components/source/context_source_list/ContextSourceList.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useIntl } from "react-intl";
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { Link } from '@logora/debate/action/link';
+import { ContextSourceBox } from "@logora/debate/source/context_source_box";
+import { SectionBox } from "@logora/debate/section/section_box"
+import styles from './ContextSourceList.module.scss';
+import cx from "classnames";
+import PropTypes from "prop-types";
+
+export const ContextSourceList = ({ sources = [] }) => {
+    const intl = useIntl();
+    const { isMobile, isTablet, isDesktop } = useResponsive();
+
+    const displaySource = (source) => {
+        return (
+            <Link className={styles.listItem} to={source.source_url} key={source.id} target="_blank" external>
+                <ContextSourceBox imageUrl={source.origin_image_url} author={source.publisher} title={source.title} date={source.published_date} />
+            </Link>
+        )
+    }
+    return (
+        <SectionBox isCollapsible isCollapsedByDefault={false} title={intl.formatMessage({ id: "source.context_source_list.title", defaultMessage: "Debate context" })}>
+            <div className={cx(styles.content, { [styles.contentDesktop]: isDesktop, [styles.contentTablet]: isTablet, [styles.contentMobile]: isMobile })}>
+                {sources.map(displaySource)}
+            </div>
+        </SectionBox>
+    )
+}
+
+ContextSourceList.propTypes = {
+    /** A list of articles to display */
+    sources: PropTypes.arrayOf(PropTypes.shape({
+        /** ID of the source to be used as a unique source */
+        id: PropTypes.number,
+        title: PropTypes.string,
+        source_url: PropTypes.string,
+        published_date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+        publisher: PropTypes.string,
+        origin_image_url: PropTypes.string
+    }))
+}

package/src/components/source/context_source_list/ContextSourceList.module.scss

@@ -0,0 +1,38 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.title {
+    font-size: theme.$font-size-large;
+    line-height: theme.$line-height-tight;
+    font-weight: theme.$font-weight-bold;
+    font-family: theme.$title-font-family;
+}
+
+.content {
+    display: grid;
+    gap: spacing.$spacer;
+
+    &.contentMobile {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    &.contentTablet {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    &.contentDesktop {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.listItem {
+    text-decoration: none !important;
+    color: inherit !important;
+    border: theme.$box-border !important;
+    border-radius: theme.$box-border-radius !important;
+    @include spacing.p(3, xs);
+
+    &:hover {
+        border: 1px solid theme.$text-primary !important;
+    }
+}

package/src/components/source/context_source_list/ContextSourceList.stories.jsx

@@ -0,0 +1,39 @@
+export default {
+    title: 'Source/Context Source List',
+    component: ContextSourceList,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import { ContextSourceList } from './ContextSourceList';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const createSource = () => {
+    return {
+        id: faker.number.int(10000000),
+        title: faker.lorem.sentence(),
+        source_url: faker.internet.url(),
+        origin_image_url: faker.image.url(),
+        publisher: faker.vehicle.manufacturer(),
+        published_date: faker.date.recent()
+    };
+};
+
+const sources = Array.from([1, 2, 3, 4, 5], s => createSource());
+
+export const DefaultContextSourceList = () => {
+    return (
+        <IntlProvider locale="en">
+            <ResponsiveProvider>
+                <IconProvider library={regularIcons}>
+                    <ContextSourceList sources={sources} />
+                </IconProvider>
+            </ResponsiveProvider>
+        </IntlProvider>
+    );
+};

package/src/components/source/context_source_list/ContextSourceList.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ContextSourceList } from './ContextSourceList';
+import { IntlProvider } from 'react-intl';
+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 { faker } from '@faker-js/faker';
+
+const createSource = () => {
+    return {
+        id: faker.number.int(10000000),
+        title: faker.music.songName(),
+        source_url: faker.internet.url(),
+        origin_image_url: faker.image.url(),
+        publisher: faker.vehicle.manufacturer(),
+        published_date: faker.date.recent()
+    };
+};
+
+const sources = Array.from([1, 2, 3], s => createSource());
+
+describe('ContextSourceList', () => {
+    it('should render with the correct text', () => {
+        const box = render(
+            <IntlProvider locale="en">
+                <ResponsiveProvider>
+                    <IconProvider library={regularIcons}>
+                        <ContextSourceList
+                            sources={sources}
+                        />
+                    </IconProvider>
+                </ResponsiveProvider>
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("Debate context")).toBeTruthy();
+        const links = screen.queryAllByRole("link");
+        expect(links).toHaveLength(3);
+        expect(screen.getByText(sources[0].title)).toBeTruthy();
+        expect(screen.getByText(sources[1].title)).toBeTruthy();
+        expect(screen.getByText(sources[2].title)).toBeTruthy();
+        expect(links[0]).toHaveAttribute('href', sources[0].source_url);
+        expect(links[1]).toHaveAttribute('href', sources[1].source_url);
+
+    });
+});

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

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

package/src/components/source/source_box/SourceBox.docs.mdx

@@ -0,0 +1,23 @@
+---
+description: A box for sources / articles.
+---
+
+import { SourceBox } from './SourceBox';
+
+A component that renders a source / article.
+
+### Component usage
+
+```js
+    import { SourceBox } from '@logora/debate.source.source_box';
+```
+
+```js
+    <SourceBox 
+        title={'La Fifa multiplie fautes et coups pas francs'}
+        publisher={'Le Canard Enchaîné'}
+        description={"Pour complaire au Qatar, les instances du foot banissent la bière."}
+        url={'http://example.com/source'}
+        imageUrl={'https://picsum.photos/536/354'}
+    />
+```

package/src/components/source/source_box/SourceBox.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './SourceBox.module.scss';
+import PropTypes from "prop-types";
+
+export const SourceBox = ({ title, description, url, publisher, imageUrl }) => {
+	return (
+		<div className={styles.sourceBox}>
+			<div>
+				{ imageUrl && (
+					<div>
+						<img className={styles.sourceBoxImage} src={imageUrl} height={200} width={280} alt={`${title}`}  />
+					</div>
+				)}
+			</div>
+			<div className={styles.sourceBoxBody}>
+				<div className={styles.sourceBoxPublisher}>
+					{ publisher }
+				</div>
+				<div className={styles.sourceBoxTitle} title={ title }>
+					<a className={styles.sourceLink} href={ url } target="_blank" rel="nofollow noopener noreferrer">
+						{ title }
+					</a>
+				</div>
+				<div className={styles.sourceBoxDescription}>
+					{ description }
+				</div>
+			</div>
+		</div>
+	);
+}
+
+SourceBox.propTypes = {
+	/** Title of the source */
+	title: PropTypes.string.isRequired,
+	/** Description of the source */
+	description: PropTypes.string,
+	/** Publisher of the source */
+	publisher: PropTypes.string,
+	/**  URL of the source */
+	url: PropTypes.string,
+	/**  URL of the source image */
+	imageUrl: PropTypes.string
+  };

package/src/components/source/source_box/SourceBox.module.scss

@@ -0,0 +1,43 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.sourceBox {
+    border: theme.$box-border;
+    box-shadow: theme.$box-shadow;
+    border-radius: theme.$box-border-radius;
+    @include spacing.mb(4, xs);
+}
+
+.sourceBoxImage {
+    width: 100%;
+    object-fit: cover;
+}
+
+.sourceBoxBody {
+    @include spacing.px(3, xs);
+    @include spacing.py(2, xs);
+}
+
+.sourceBoxPublisher {
+    @include display.text-truncate();
+    color: theme.$text-secondary;
+    font-size: theme.$font-size-normal;
+}
+
+.sourceBoxTitle {
+    font-weight: theme.$font-weight-bold;
+    font-size: theme.$font-size-large;
+    @include display.text-truncate();
+    @include spacing.my(1, xs);
+}
+
+.sourceBoxDescription {
+    display: block;
+    @include display.line-clamp(2);
+}
+
+a.sourceLink {
+    text-decoration: none !important;
+    color: theme.$text-primary !important;
+}

package/src/components/source/source_box/SourceBox.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SourceBox } from './SourceBox';
+import { faker } from '@faker-js/faker';
+
+const source = {
+  title: faker.music.songName(),
+  description: faker.lorem.sentence(),
+  url: faker.internet.url(),
+  imageUrl: faker.image.url(),
+  publisher: faker.vehicle.manufacturer()
+};
+
+export default {
+  title: 'Source/Source Box',
+  component: SourceBox,
+  args: source,
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    url: { control: 'text' },
+    imageUrl: { control: 'text' },
+    publisher: { control: 'text' }
+  }
+};
+
+export const DefaultSourceBox = {};

package/src/components/source/source_box/SourceBox.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SourceBox } from './SourceBox';
+import { faker } from '@faker-js/faker';
+
+const source = { 
+    title: faker.music.songName(),
+    description: faker.lorem.sentence(),
+    url: faker.internet.url(),
+    imageUrl: faker.image.url(),
+    publisher: faker.vehicle.manufacturer()
+};
+
+describe('SourceBox', () => {
+    it('should render a source box with the correct text', () => {
+        const sourceBox = render(
+            <SourceBox
+                title={source.title} 
+                description={source.description}
+                publisher={source.publisher}
+                url={source.url}
+                imageUrl={source.imageUrl}
+            />
+        );
+        
+        expect(sourceBox.getByText(source.publisher)).toBeTruthy();
+        expect(sourceBox.getByText(source.title)).toBeTruthy();
+        expect(sourceBox.getByText(source.description)).toBeTruthy();
+    });
+});

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

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

package/src/components/source/source_list_item/SourceListItem.docs.mdx

@@ -0,0 +1,23 @@
+---
+description: A stylized list element for a source.
+labels: ['source', 'list-item']
+---
+
+A component that renders a stylized list element for sources.
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+    import { SourceListItem } from '@logora/debate.source.source_list_item';
+```
+
+```js
+    <SourceListItem 
+        publisher={"source.com"} 
+        url={"https://source.com"} 
+        title={"Source list item component"} 
+        index={0}
+    />
+```

package/src/components/source/source_list_item/SourceListItem.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from '@logora/debate/action/link'
+import { Icon } from '@logora/debate/icons/icon';
+import styles from './SourceListItem.module.scss';
+import PropTypes from "prop-types";
+
+export const SourceListItem = ({ index = 0, url, title, publisher }) => {
+    return (
+        <Link className={styles.sourceListItem} to={url} external target="_blank" rel="nofollow noreferrer noopener" data-tid={"link_view_source"}>
+            <Icon name="link" width={16} height={16} />
+            <div className={styles.sourceListItemLink} >
+                <span>[ { index + 1} ]</span> 
+                <span>{ publisher && `${publisher} – `} {title}</span>
+            </div>
+        </Link>
+    );
+}
+
+SourceListItem.propTypes = {
+    /** Callback function for submit */
+    index: PropTypes.number,
+    /** URL of the source */
+    url: PropTypes.string,
+    /** Title of the source */
+    title: PropTypes.string,
+    /** Publisher of the source */
+    publisher: PropTypes.string,
+};

package/src/components/source/source_list_item/SourceListItem.module.scss

@@ -0,0 +1,33 @@
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+
+a.sourceListItem {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    font-size: theme.$font-size-extra-small;
+    margin-top: 5px;
+    padding: 5px;
+    border: 1px solid theme.$background-color-secondary;
+    border-radius: theme.$box-border-radius;
+    max-width: 100%;
+    svg {
+        margin-right: 5px;
+        flex-shrink: 0 !important;
+        width: 16px !important;
+        height: 16px !important;
+    }
+    color: theme.$text-primary !important;
+    text-decoration: none !important;
+    outline: none !important;
+}
+
+.sourceListItemLink {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @include display.line-clamp(2);
+
+    span {
+        margin-right: 5px;
+    }
+}

package/src/components/source/source_list_item/SourceListItem.stories.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { SourceListItem } from './SourceListItem';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+  title: 'Source/Source List Item',
+  component: SourceListItem,
+  args: {
+    publisher: 'source.com',
+    url: 'https://source.com',
+    title: 'Source list item component',
+    index: 0,
+    containerWidth: 'auto'
+  },
+  argTypes: {
+    publisher: { control: 'text' },
+    url: { control: 'text' },
+    title: { control: 'text' },
+    index: { control: 'number' },
+    containerWidth: { control: 'text' }
+  },
+  render: ({ containerWidth, ...args }) => (
+    <div style={{ width: containerWidth }}>
+      <IconProvider library={regularIcons}>
+        <SourceListItem {...args} />
+      </IconProvider>
+    </div>
+  )
+};
+
+export const DefaultSourceListItem = {};
+
+export const LineClampedSourceListItem = {
+  args: {
+    containerWidth: '250px',
+    title:
+      'Super long title article, Super long title article, Super long title article, Super long title article, Super long title article, Super long title article'
+  }
+};

package/src/components/source/source_list_item/SourceListItem.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SourceListItem } from './SourceListItem';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+describe('SourceListItem', () => {
+    it('should render with the correct text', () => {
+        const item = render(
+            <IconProvider library={regularIcons}>
+                <SourceListItem 
+                    publisher={"source.com"} 
+                    url={"https://source.com"} 
+                    title={"Source list item component"} 
+                    index={0}
+                />
+            </IconProvider>
+        );
+
+        expect(screen.getByText(/source.com/i)).toBeTruthy();
+        expect(screen.getByText(/Source list item component/i)).toBeTruthy();
+        expect(screen.getByText("[ 1 ]")).toBeTruthy();
+    });
+
+    it('should render with the correct link', () => {
+        const item = render(
+            <IconProvider library={regularIcons}>
+                <SourceListItem 
+                    publisher={"source.com"} 
+                    url={"https://source.com"} 
+                    title={"Source list item component"} 
+                    index={0}
+                />
+            </IconProvider>
+        );
+
+        expect(screen.getByRole('link')).toBeTruthy();
+        expect(screen.getByText(/source.com/i).closest('a')).toHaveAttribute('href', 'https://source.com');
+        expect(screen.getByRole('link')).toHaveAttribute('href', 'https://source.com');
+    })
+});

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

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

package/src/components/source/source_modal/SourceModal.docs.mdx

@@ -0,0 +1,29 @@
+---
+description: A modal to retrieve metadata for a source web page.
+labels: ['modal']
+---
+
+A modal component that fetches metadata from a web page (source) provided by user input.
+
+User inputs the URL of a web page, and when clicking on search, the modal will fetch the page metadata and display it.
+
+User can submit via a button and a callback enables to retrieve the fetched source.
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+    import { SourceModal } from '@logora/debate.source.source_modal';
+```
+
+```js
+    <IntlProvider locale="en">
+        <ModalProvider>
+            <SourceModal 
+                onAddSource={() => null}
+                onHideModal={() => null}
+            />
+        </ModalProvider>
+    </IntlProvider>
+```