@logora/debate 0.1.0 → 0.2.0

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

@@ -1,37 +0,0 @@
----
-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

@@ -1,42 +0,0 @@
-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

@@ -1,38 +0,0 @@
-@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

@@ -1,39 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
----
-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

@@ -1,43 +0,0 @@
-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

@@ -1,43 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
----
-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

@@ -1,28 +0,0 @@
-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

@@ -1,33 +0,0 @@
-@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

@@ -1,40 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,29 +0,0 @@
----
-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>
-```