@logora/debate 0.1.0

package/src/components/source/source_modal/SourceModal.jsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { Modal, useModal } from '@logora/debate/dialog/modal';
+import { useDataProvider } from '@logora/debate/data/data_provider';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { SourceBox } from '@logora/debate/source/source_box';
+import { Button } from '@logora/debate/action/button';
+import { Loader } from '@logora/debate/progress/loader';
+import { SearchInput } from '@logora/debate/input/search_input';
+import { AnnouncementDialog } from "@logora/debate/dialog/announcement_dialog";
+import styles from './SourceModal.module.scss';
+import PropTypes from "prop-types";
+
+export const SourceModal = ({ onAddSource, onHideModal, allowedSources = [] }) => {
+    const [disabled, setDisabled] = useState(false);
+    const [source, setSource] = useState();
+    const [showPreviewError, setShowPreviewError] = useState(false);
+    const dataProvider = useDataProvider();
+    const [showUnauthorizedError, setShowUnauthorizedError] = useState(false);
+    const intl = useIntl();
+    const { hideModal } = useModal();
+
+    const handleAddSource = () => {
+        onAddSource(source);
+        setSource(null);
+        hideModal();
+        if (onHideModal) {
+            onHideModal();
+        }
+    }
+
+    const isSourceAuthorized = (sourceUrl) => {
+        if (!allowedSources || allowedSources.length === 0) {
+            return true;
+        }
+
+        const domain = sourceUrl.hostname.replace('www.', '');
+
+        if (allowedSources.includes(domain)) {
+            return true;
+        }
+        return false;
+    }
+
+    const fetchSource = (input) => {
+        setShowUnauthorizedError(false);
+        setSource(null);
+        setShowPreviewError(false);
+
+        if (!input) {
+            return false;
+        }
+
+        let inputUrl;
+
+        try {
+            inputUrl = new URL(input);
+        } catch {
+            setShowPreviewError(true);
+            return false;
+        }
+
+        if (!isSourceAuthorized(inputUrl)) {
+            setShowUnauthorizedError(true);
+        } else {
+            setDisabled(true);
+            dataProvider.create("sources/fetch", { query: input }).then(response => {
+                if (response.data.success) {
+                    setSource(response.data.data.resource);
+                    setDisabled(false);
+                } else {
+                    setDisabled(false);
+                    setShowPreviewError(true);
+                }
+            }, error => {
+                setDisabled(false);
+                setShowPreviewError(true);
+            });
+        }
+    }
+
+    return (
+        <Modal title={intl.formatMessage({ id: "source.source_modal.modal_title", defaultMessage: "Add a source" })} showCloseButton>
+            <div className={styles.sourceModalBody}>
+                <div className={styles.sourceInputContainer}>
+                    <SearchInput
+                        placeholder={intl.formatMessage({ id: "source.source_modal.input_placeholder", defaultMessage: "Enter the URL of the source..." })}
+                        onSearchSubmit={(query) => fetchSource(query)}
+                        disabled={disabled}
+                        type="url"
+                    />
+                    <div className={styles.sourceInputHelp}>
+                        <FormattedMessage
+                            id="source.source_modal.input_help"
+                            defaultMessage="Press Enter to add the source"
+                        />
+                    </div>
+                    {allowedSources.length > 0 && (
+                        <>
+                            <div className={styles.separator} />
+                            <div className={styles.allowedSourcesInfo}>
+                                <FormattedMessage
+                                    id="source.source_modal.info_label"
+                                    defaultMessage="Choose from : {domains}"
+                                    values={{ domains: allowedSources.join(', ') }}
+                                />
+                            </div>
+                        </>
+                    )}
+
+                </div>
+                <div className={styles.sourcePreviewBox}>
+                    {showPreviewError && (
+                        <AnnouncementDialog
+                            message={intl.formatMessage({ id: "source.source_modal.error", defaultMessage: "Error when fetching source" })}
+                            fullWidth
+                        />
+                    )}
+                    {showUnauthorizedError && (
+                        <AnnouncementDialog
+                            message={intl.formatMessage({ id: "source.source_modal.error_unauthorized", defaultMessage: "Unauthorized source" })}
+                            fullWidth
+                        />
+                    )}
+                    {source && (
+                        <div>
+                            {!disabled ?
+                                <>
+                                    <SourceBox
+                                        title={source.title}
+                                        description={source.description}
+                                        url={source.source_url}
+                                        imageUrl={source.origin_image_url}
+                                        publisher={source.publisher}
+                                    />
+                                    <Button data-tid={"action_submit_source"} className={styles.sourcePreviewButton} handleClick={handleAddSource}>
+                                        <FormattedMessage id="source.source_modal.submit_label" defaultMessage="Add" />
+                                    </Button>
+                                </>
+                                :
+                                <Loader />
+                            }
+                        </div>
+                    )}
+                </div>
+            </div>
+        </Modal>
+    );
+}
+
+SourceModal.propTypes = {
+    /** Callback triggered when a source is added */
+    onAddSource: PropTypes.func.isRequired,
+    /** Callback triggered when modal is closed */
+    onHideModal: PropTypes.func,
+    /** List of authorized source domains */
+    allowedSources: PropTypes.arrayOf(PropTypes.string),
+}

package/src/components/source/source_modal/SourceModal.module.scss

@@ -0,0 +1,45 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.sourceModalBody {
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  @include spacing.py(2, xs);
+}
+
+.sourcePreviewBox {
+  width: 100%;
+  @include spacing.p(0, xs);
+  @include spacing.my(3, xs);
+}
+
+.sourceInputContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+button.sourcePreviewButton {
+  width: 100%;
+}
+
+.allowedSourcesInfo {
+  font-size: theme.$font-size-small;
+  color: theme.$text-secondary;
+  white-space: normal;
+  word-break: break-word;
+  margin-top: 0.5em;
+}
+
+.sourceInputHelp {
+  font-size: theme.$font-size-extra-small;
+  color: theme.$text-secondary;
+  margin-top: 1.07em;
+  margin-bottom: 0.5em;
+}
+
+.separator {
+  width: 100%;
+  height: 1px;
+  background-color: theme.$text-secondary;
+  opacity: 0.3;
+}

package/src/components/source/source_modal/SourceModal.stories.jsx

@@ -0,0 +1,82 @@
+export default {
+    title: 'Source/Source Modal',
+    component: SourceModal,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { SourceModal } from './SourceModal';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { IntlProvider } from 'react-intl';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const allowedDomains = Array.from({ length: 3}, () => faker.internet.domainName());
+
+
+const source = { 
+    title: faker.music.songName(),
+    description: faker.lorem.sentence(),
+    source_url: faker.internet.url(),
+    origin_image_url: faker.image.url(),
+    publisher: faker.vehicle.manufacturer()
+};
+
+
+
+const httpClient = {
+    get: () => null,
+    post: (url, data, config) => {
+        return new Promise(function(resolve, reject) {
+            resolve({ data: { success: true, data: { resource: source } }});
+        });
+    },
+    patch: () => null
+};
+
+export const DefaultSourceModal = () => {
+    const data = dataProvider(httpClient, "https://mock.example.api");
+
+    return (
+        <div style={{width: "250px", height: "100px"}}>
+            <ModalProvider>
+                <IntlProvider locale="en">
+                    <IconProvider library={regularIcons}>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <SourceModal 
+                                onAddSource={() => console.log("Add source")} 
+                                onHideModal={() => console.log("Hide modal")} 
+                            />
+                        </DataProviderContext.Provider>
+                    </IconProvider>
+                </IntlProvider>
+            </ModalProvider>
+        </div>
+    )
+};
+
+export const SourceModalWithError = () => {
+    const data = dataProvider(httpClient, "https://mock.example.api");
+
+    return (
+        <div style={{width: "250px", height: "100px"}}>
+            <ModalProvider>
+                <IntlProvider locale="en">
+                    <IconProvider library={regularIcons}>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <SourceModal 
+                                onAddSource={() => console.log("Add source")} 
+                                onHideModal={() => console.log("Hide modal")} 
+                                allowedSources={allowedDomains}
+                            />
+                        </DataProviderContext.Provider>
+                    </IconProvider>
+                </IntlProvider>
+            </ModalProvider>
+        </div>
+    )
+};
+

package/src/components/source/source_modal/SourceModal.test.jsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { SourceModal } from './SourceModal';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { IntlProvider } from 'react-intl';
+import userEvent from '@testing-library/user-event';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const addSourceCallback = vi.fn();
+const hideModalCallback = vi.fn();
+
+const source = {
+    title: faker.music.songName(),
+    description: faker.lorem.sentence(),
+    source_url: faker.internet.url(),
+    origin_image_url: faker.image.url(),
+    publisher: faker.vehicle.manufacturer()
+};
+
+
+const httpClient = {
+    get: () => null,
+    post: (_url, _data, _config) => {
+        return new Promise(function (resolve, _reject) {
+            resolve({ data: { success: true, data: { resource: source } } });
+        });
+    },
+    patch: () => null
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+beforeAll(() => {
+    HTMLDialogElement.prototype.showModal = function () {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+      this.removeAttribute("open");
+    };
+  });
+
+describe('SourceModal', () => {
+      it('should render modal with content and title', async () => {
+        render(
+          <ModalProvider>
+            <IntlProvider locale="en">
+              <IconProvider library={regularIcons}>
+                <DataProviderContext.Provider value={{ dataProvider: data }}>
+                  <SourceModal onAddSource={addSourceCallback} onHideModal={hideModalCallback} />
+                </DataProviderContext.Provider>
+              </IconProvider>
+            </IntlProvider>
+          </ModalProvider>
+        );
+      
+        expect(screen.getByText("Add a source")).toBeInTheDocument();
+        expect(screen.getByRole("textbox", { name: /search bar/i })).toBeInTheDocument();
+      
+        const dialog = document.querySelector("dialog");
+        expect(dialog).toHaveAttribute("open");
+      });
+      
+    it('should trigger addSourceCallback when adding source', async () => {
+        const modal = render(
+            <ModalProvider>
+                <IntlProvider locale="en">
+                    <IconProvider library={regularIcons}>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <SourceModal
+                                onAddSource={addSourceCallback}
+                                onHideModal={hideModalCallback}
+                            />
+                        </DataProviderContext.Provider>
+                    </IconProvider>
+                </IntlProvider>
+            </ModalProvider>
+        );
+
+        const input = await screen.findByRole("textbox");
+        await userEvent.type(input, "https://lemonde.fr[Enter]");
+        expect(input.value).toBe("https://lemonde.fr");
+
+        expect(screen.getByText(source.title)).toBeTruthy();
+        expect(screen.getByText(source.publisher)).toBeTruthy();
+
+        const addSourceButton = screen.getByText("Add");
+        expect(addSourceButton).toBeTruthy();
+        await userEvent.click(addSourceButton);
+
+        expect(addSourceCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should show error if input is not well formed', async () => {
+        const allowedDomains = ["example.com"];
+        const addSourceCallback = vi.fn();
+
+        render(
+            <ModalProvider>
+                <IntlProvider locale="en">
+                    <IconProvider library={regularIcons}>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <SourceModal
+                                onAddSource={addSourceCallback}
+                                allowedSources={allowedDomains}
+                            />
+                        </DataProviderContext.Provider>
+                    </IconProvider>
+                </IntlProvider>
+            </ModalProvider>
+        );
+
+        const input = screen.getByRole('textbox');
+        await userEvent.type(input, "example/test{Enter}");
+        expect(input.value).toBe("example/test");
+
+        expect(screen.getByText("Error when fetching source")).toBeTruthy();
+    });
+
+    it('should display an error message when adding a source with a non-allowed domain', async () => {
+        const allowedDomains = ["example.com"];
+        const addSourceCallback = vi.fn();
+
+        render(
+            <ModalProvider>
+                <IntlProvider locale="en">
+                    <IconProvider library={regularIcons}>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <SourceModal
+                                onAddSource={addSourceCallback}
+                                allowedSources={allowedDomains}
+                            />
+                        </DataProviderContext.Provider>
+                    </IconProvider>
+                </IntlProvider>
+            </ModalProvider>
+        );
+
+        const input = screen.getByRole('textbox');
+        await userEvent.type(input, "https://ggg.com{Enter}");
+        expect(input.value).toBe("https://ggg.com");
+        await waitFor(() => {
+            expect(screen.getByText("Unauthorized source")).toBeInTheDocument();
+        });
+        expect(addSourceCallback).not.toHaveBeenCalled();
+    });
+
+    it('should add source if domain is in allowed domains', async () => {
+        const allowedDomains = ["example.com"];
+        const addSourceCallback = vi.fn();
+
+        render(
+            <ModalProvider>
+                <IntlProvider locale="en">
+                    <IconProvider library={regularIcons}>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <SourceModal
+                                onAddSource={addSourceCallback}
+                                allowedSources={allowedDomains}
+                            />
+                        </DataProviderContext.Provider>
+                    </IconProvider>
+                </IntlProvider>
+            </ModalProvider>
+        );
+
+        const input = screen.getByRole('textbox');
+        await userEvent.type(input, "https://example.com/test{Enter}");
+        expect(input.value).toBe("https://example.com/test");
+
+        const addSourceButton = screen.getByText("Add");
+        expect(addSourceButton).toBeTruthy();
+        await userEvent.click(addSourceButton);
+        
+        expect(addSourceCallback).toHaveBeenCalledTimes(1);
+    });
+});
+

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

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

package/src/components/styles/display/_display.scss

@@ -0,0 +1,127 @@
+@use "sass:map";
+@use "sass:list";
+
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px
+);
+
+@mixin display($value, $breakpoint) {
+  @include media-breakpoint-up($breakpoint) {
+    display: $value !important;
+  }
+}
+
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+
+  @return null;
+}
+
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+  @if $min != 0 {
+    @return $min;
+  }
+
+  @return null;
+}
+
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @if $next {
+    @return breakpoint-min($next, $breakpoints) - .02;
+  }
+
+  @return null;
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @container (min-width: #{$min}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @container (max-width: #{$max}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @container (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @container (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+@mixin text-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* HYPHENS */
+@mixin hyphens($mode) {
+  -webkit-hyphens: $mode;
+  -ms-hyphens: $mode;
+  -moz-hyphens: $mode;
+  hyphens: $mode;
+}
+
+/* LINE CLAMP */
+@mixin line-clamp($number_lines) {
+  display: -webkit-box;
+  word-wrap: break-word;
+  -webkit-line-clamp: $number_lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/styles/display/display.docs.mdx

@@ -0,0 +1,8 @@
+---
+description: SASS mixins for responsive and text display.
+---
+
+### Component usage
+```scss
+    @use '@logora/debate.styles.display' as display;
+```

package/src/components/styles/display/index.scss

@@ -0,0 +1 @@
+@forward './display';

package/src/components/styles/flex/_flex.scss

@@ -0,0 +1,55 @@
+@use 'styles/display' as display;
+
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@mixin flex-direction($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    flex-direction: $value !important;
+  }
+}
+
+@mixin flex-wrap($breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    flex-wrap: wrap !important;
+  }
+}
+
+@mixin flex-nowrap ($breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    flex-wrap: nowrap !important;
+  }
+}
+
+@mixin justify-content($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    justify-content: $value !important;
+  }
+}
+
+@mixin align-items($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    align-items: $value !important;
+  }
+}
+
+@mixin align-content($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    align-content: $value !important;
+  }
+}
+
+@mixin align-self($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    align-self: $value !important;
+  }
+}
+
+// ORDERS
+
+@mixin order($value, $breakpoint) {
+  @include display.media-breakpoint-up($breakpoint) {
+    order: $value;
+  }
+}

package/src/components/styles/flex/flex.docs.mdx

@@ -0,0 +1,8 @@
+---
+description: SASS mixins for flex behavior.
+---
+
+### Component usage
+```scss
+    @use '@logora/debate.styles.flex' as flex;
+```

package/src/components/styles/flex/index.scss

@@ -0,0 +1 @@
+@forward './flex';