@logora/debate 0.1.0

package/src/components/auth/use_auth/useAuthInterceptor.jsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { authTokenHandler } from './authTokenHandler';
+
+export const useAuthInterceptor = (httpClient, authUrl, tokenKey) => {
+    const { getToken, refreshToken } = authTokenHandler(httpClient, authUrl, tokenKey);
+
+    const isTokenExpired = (tokenObject) => {
+        try {
+            return tokenObject.expires_at < (Date.now() / 1000);
+        } catch (err) {
+            return false;
+        }
+    }
+
+    useEffect(() => {
+        httpClient.interceptors.request.use(
+            (config) => {
+                const originalRequest = config;
+                if(originalRequest.headers.authorization) {
+                    const tokenObject = getToken();
+                    if (
+                        tokenObject &&
+                        isTokenExpired(tokenObject) &&
+                        config.url !== authUrl
+                    ) {
+                        return refreshToken().then((accessToken) => {
+                            const header = `Bearer ${accessToken}`;
+                            originalRequest.headers.authorization = header;
+                            return Promise.resolve(originalRequest);
+                        });
+                    }
+                }
+                return config;
+            },
+            (err) => {
+                return Promise.reject(err);
+            }
+        );
+    }, []);
+
+    return null;
+}

package/src/components/chart/line_chart/LineChart.docs.mdx

@@ -0,0 +1,34 @@
+---
+description: A component that renders a line chart related to the datasets that are passed.
+---
+
+import { LineChart } from './LineChart';
+
+A component that renders a line chart related to the datasets that are passed.
+
+It must be inside [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+import { LineChart } from '@logora/debate.chart.pie_chart';
+```
+
+```js
+    const formattedLineChartData = [{ label: "My dataset", contentColor: "#E6E6E6", data: { "dimension": 115, "value": 2 } }]
+    const labels = [{ "id": 114, "name": "moto", "taggings_count": 0, "display_name": "moto"},{ "id": 115, "name": "honda", "taggings_count": 0, "display_name": "honda"},{ "id": 116, "name": "cbr", "taggings_count": 0, "display_name": "cbr"},{ "id": 117, "name": "chanyol", "taggings_count": 0, "display_name": "chanyol"}]
+
+    <IntlProvider locale="en">
+        <IconProvider library={regularIcons}>
+            <LineChart
+                filterOptions={FILTER_OPTIONS}
+                className={"myClassName"}
+                title={"My chart title"}
+                onFilterChange={() => handleLineChartFilterChange()}
+                labels={labels}
+                data={formattedLineChartData}
+            />
+        </IconProvider>
+    </IntlProvider>
+```

package/src/components/chart/line_chart/LineChart.jsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
+import 'chart.js/auto';
+import { Line } from 'react-chartjs-2';
+import { Select } from '@logora/debate/input/select';
+import { Tag } from '@logora/debate/tag/tag';
+import { Icon } from '@logora/debate/icons/icon'
+import { Loader } from '@logora/debate/progress/loader';
+import styles from "./LineChart.module.scss";
+import StandardErrorBoundary from "@logora/debate/error/standard_error_boundary";
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+
+export const LineChart = ({ data, labels, onFilterChange, title, className, filterOptions }) => {
+  const intl = useIntl();
+  
+  const CHART_OPTIONS = {
+    responsive: true, 
+    maintainAspectRatio: false, 
+    plugins: { title: { display: true, font: { size: "16" }, text: title}, legend: { position: "top", align: "center" } }, 
+    scales: { y: { beginAtZero: true, grid: { drawOnChartArea: true, color: "#f1f1f1" } }, x: { grid: { drawOnChartArea: false } } } 
+  };
+  
+	const [isLoading, setIsLoading] = useState(true);
+  const [metric, setMetric] = useState(filterOptions[0].value);
+  const [activeTagId, setActiveTagId] = useState(null);
+  const [lineChartData, setLineChartData] = useState();
+
+  useEffect(() => {
+    onFilterChange(metric, activeTagId);
+  }, [activeTagId])
+
+  useEffect(() => {
+    if (data != undefined && data.length > 0) {
+      formatLineChartData(data);
+    }
+  }, [data])
+
+  const onSetMetric = (value) => {
+    setMetric(value);
+    onFilterChange(value, activeTagId);
+  }
+
+  const formatLineChartData = (data) => {
+    let finalData = {
+      labels: data[0].data.map(elm => elm.dimension.split("-").reverse().join("-")).map((elm, index) => index % 3 === 0 ? elm : ""),
+      datasets: data.map(dataset => { 
+        return {
+            label: dataset.label,
+            data: dataset.data.map(elm => elm.value),
+            fill: false,
+            borderColor: dataset.contentColor,
+            backgroundColor: `${dataset.contentColor}88`,
+            tension: 0.2
+        };
+      })
+    }
+    setLineChartData(finalData);
+    setIsLoading(false);
+  }
+
+  const displayTags = (tag) => {
+    const tagIsActive = activeTagId === tag.id;
+
+    return (
+      <div className={styles.tagItem} key={tag.id} onClick={() => setActiveTagId(tag.id == activeTagId ? null : tag.id)}>
+        <Tag text={tag.display_name || tag.name}  active={tagIsActive} rightIcon={tagIsActive && <Icon name="close" height={10} width={10} />} />
+      </div>
+    );
+  }
+
+  return (
+    <StandardErrorBoundary>
+      <div className={cx(styles.lineChartContainer, className)}>
+        <div className={styles.lineChartFilterOptions}>
+          <Select options={filterOptions} onChange={(selectedObject) => onSetMetric(selectedObject.value)} />
+          { labels && 
+            <div className={styles.filterTagList}>
+              {[{id: null , display_name: intl.formatMessage({ id: "info.all" }), name: "aaa"}, ...labels].sort((a, b) => {return (a['name'].localeCompare(b['name'], 'fr', {ignorePunctuation: true}))}).map(displayTags)}
+            </div>}
+        </div>
+        { isLoading ?
+            <Loader/>
+          :
+            <div className={styles.lineChartWrapper}>
+              <Line data={lineChartData} options={CHART_OPTIONS} />
+            </div>
+        }
+      </div>
+    </StandardErrorBoundary>
+  )
+}
+
+LineChart.propTypes = {
+	/** Array containing label, contentColor and data */
+	data: PropTypes.array,
+	/** Array of objects containing the labels */
+	labels: PropTypes.array,
+	/** Callback function used to filter data */
+	onFilterChange: PropTypes.func,
+	/** Title for the chart */
+	title: PropTypes.string,
+	/** Extra classname for the chart container */
+	className: PropTypes.string,
+	/** Array of filters */
+	filterOptions: PropTypes.array
+};

package/src/components/chart/line_chart/LineChart.module.scss

@@ -0,0 +1,54 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/flex' as flex;
+@use 'styles/display' as display;
+
+.lineChartContainer {
+  display: flex !important;
+  flex-direction: column !important;
+  height: max-content;
+  color: theme.$text-primary;
+
+  p {
+    @include spacing.mt(3, xs);
+  }
+}
+
+.lineChartFilterOptions {
+  display: flex !important;
+  @include flex.flex-direction(column, xs);
+  @include flex.flex-direction(row, sm);
+  align-items: baseline !important;
+}
+
+.filterTagList {
+  display: flex !important;
+  flex-wrap: wrap;
+  @include flex.justify-content(flex-start, sm);
+  align-items: flex-start !important;
+  @include spacing.mt(0, sm);
+  @include spacing.mt(3, xs);
+  @include spacing.ml(3, sm);
+  @include spacing.ml(0, xs);
+  gap: spacing.$spacer-xxs;
+
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tagItem {
+  display: flex !important;
+  color: theme.$text-secondary;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.lineChartWrapper {
+  height: 300px;
+}

package/src/components/chart/line_chart/LineChart.stories.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { LineChart } from './LineChart';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+
+const FILTER_OPTIONS = [{ name: "day", value: "day", text: "day" }, { name: "week", value: "week", text: "week" }]
+const data = [{ label: "My dataset", contentColor: "#b6f542" , data: [ { "dimension": "2024-01-20", "value": 4 }, { "dimension": "2024-01-21", "value": 15 }, { "dimension": "2024-01-22", "value": 8 }]}]
+
+const noop = () => {};
+
+const meta = {
+    title: 'Chart/Line Chart',
+    component: LineChart,
+    args: {
+        filterOptions: FILTER_OPTIONS,
+        className: 'myClassName',
+        title: 'My chart title',
+        onFilterChange: noop,
+        labels: null,
+        data
+    },
+    argTypes: {
+        filterOptions: { control: 'object' },
+        className: { control: 'text' },
+        title: { control: 'text' },
+        onFilterChange: { control: false },
+        labels: { control: 'object' },
+        data: { control: 'object' }
+    },
+    render: (args) => (
+        <IntlProvider locale="en">
+            <IconProvider library={regularIcons}>
+                <LineChart {...args} />
+            </IconProvider>
+        </IntlProvider>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultLineChart = (props) => renderStory(props);
+
+const data2 = [{ label: "My dataset", contentColor: "#b6f542" , data: [ { "dimension": "2024-01-20", "value": 4 }, { "dimension": "2024-01-21", "value": 15 }, { "dimension": "2024-01-22", "value": 8 }]}, { label: "My dataset 2", contentColor: "#4287f5" , data: [ { "dimension": "2024-01-20", "value": 27 }, { "dimension": "2024-01-21", "value": 35 }, { "dimension": "2024-01-22", "value": 4 }]}]
+
+export const MultiLineChart = (props) => renderStory({ data: data2, ...props });

package/src/components/chart/line_chart/LineChart.test.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DefaultLineChart } from "./LineChart.stories";
+import { render, screen } from '@testing-library/react';
+
+describe('LineChart', () => {
+    it ('renders LineChart component', () => {  
+        const container = render(
+            <DefaultLineChart />
+        );
+        expect(screen.getByText("day")).toBeTruthy();
+    })
+})

package/src/components/chart/line_chart/index.js

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

package/src/components/chart/pie_chart/PieChart.docs.mdx

@@ -0,0 +1,26 @@
+---
+description: A component that renders a pie chart related to the dataset passed.
+---
+
+import { PieChart } from './PieChart';
+
+A component that renders a pie chart related to the dataset that is passed.
+
+It must be inside [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+### Component usage
+
+```js
+import { PieChart } from '@logora/debate.chart.pie_chart';
+```
+
+```js
+    const data = [{ "dimension": 115, "value": 2 }]
+    const labels = [{ "id": 114, "name": "moto", "taggings_count": 0, "display_name": "moto"},{ "id": 115, "name": "honda", "taggings_count": 0, "display_name": "honda"},{ "id": 116, "name": "cbr", "taggings_count": 0, "display_name": "cbr"},{ "id": 117, "name": "chanyol", "taggings_count": 0, "display_name": "chanyol"}]
+    const totalItemsCount = 2;
+    const pieTitle = "# of proposals"
+
+    <IntlProvider locale="en">
+        <PieChart data={data} totalItemsCount={totalItemsCount} labels={labels} pieTitle={pieTitle} />
+    </IntlProvider>
+```

package/src/components/chart/pie_chart/PieChart.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
+import 'chart.js/auto';
+import { Pie } from 'react-chartjs-2';
+import { Loader } from '@logora/debate/progress/loader';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import styles from "./PieChart.module.scss";
+import StandardErrorBoundary from "@logora/debate/error/standard_error_boundary";
+import PropTypes from 'prop-types';
+
+const DEFAULT_COLORS = ['rgba(255, 99, 132, 0.8)', 'rgba(54, 162, 235, 0.8)', 'rgba(255, 206, 86, 0.8)', 'rgba(75, 192, 192, 0.8)', 'rgba(153, 102, 255, 0.8)', 'rgba(255, 159, 64, 0.8)', 'rgba(255, 143, 102, 0.8)', 'rgba(93, 82, 179, 0.8)']
+
+export const PieChart = ({ data, labels, totalItemsCount, pieTitle, colors, minPercentageValue = 0.75 }) => {
+	const intl = useIntl();
+	const [pieChartData, setPieChartData] = useState(undefined);
+	const [maxValue, setMaxValue] = useState(0);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		if (data != undefined) {
+			formatPieChartData(data);
+			setMaxValue(data.length);
+		}
+	}, [data])
+
+	const formatPieChartData = (data) => {
+		const negligibleDimensions = data.filter(item => Math.round((100*item.value)/totalItemsCount) <= (maxValue * minPercentageValue)) 
+		const otherDimensions = { dimension: "others", value: negligibleDimensions.reduce((a, b) => a + b.value, 0) }
+		let finalArr = data.filter(e => !negligibleDimensions.includes(e)).sort((a, b) => b.value - a.value);
+		if (negligibleDimensions.reduce((a, b) => a + b.value, 0) > 0) { finalArr.push(otherDimensions); }
+				
+		let finalData = {
+			labels: finalArr.map(elm => labels.filter(tag => tag.id == elm.dimension)[0] ? `${labels.filter(tag => tag.id == elm.dimension)[0].name} (${Math.round((100*elm.value)/totalItemsCount)} %)` : intl.formatMessage({ id: "consultation.synthesis.others", defaultMessage: "Others" })), // Find correct name associated with label
+			datasets: [
+				{
+					data: finalArr.map(elm => Math.round((100*elm.value)/totalItemsCount)),
+					backgroundColor: colors || DEFAULT_COLORS,
+					borderWidth: 2,
+				},
+			],
+		};
+		
+		setPieChartData(finalData);
+		setIsLoading(false);
+	}
+
+	const options = {
+		responsive: true, 
+		maintainAspectRatio: false,
+		plugins: {
+			datalabels: {
+				display: true,
+				color: "white",
+				font: { size: "16" },
+				formatter: function (value) {
+					if(value >= maxValue)
+						return value + " %"
+					else {
+						return " ";
+					}
+				}
+			},
+			title: {
+				display: true,
+				font: { size: "16" },
+				text: pieTitle
+			},
+			tooltip: {
+				callbacks: {
+					label: function(value) { return ` ${value.label}`; }
+				}
+			}
+		}
+	}
+
+	return (
+		<StandardErrorBoundary>
+			{ isLoading ?
+				<Loader/>
+			:
+				<div className={styles.pieChart} data-testid="pieChartCanvas">
+					<Pie data={pieChartData} options={options} />
+				</div>
+			}
+		</StandardErrorBoundary>
+	)
+}
+
+PieChart.propTypes = {
+	/** Array containing label, contentColor and data */
+	data: PropTypes.array,
+	/** Array of objects containing the labels */
+	labels: PropTypes.array,
+	/** The number of data items */
+	totalItemsCount: PropTypes.number,
+	/** Title for the pie chart */
+	pieTitle: PropTypes.string,
+	/** Array of colors overriding the default colors */
+	colors: PropTypes.array,
+	/** Discrimining percentage value under which the elements will be labelized as "Other" */
+	minPercentageValue: PropTypes.number
+};

package/src/components/chart/pie_chart/PieChart.module.scss

@@ -0,0 +1,17 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.pieChart {
+  align-self: center;
+  color: theme.$text-primary;
+  flex: 1;
+  min-width: 0;
+  height: 400px;
+  @include spacing.mt(4, xs);
+  @include spacing.p(3, xs);
+  
+  @include display.media-breakpoint-down(xs) {
+    flex: unset;
+  }
+}

package/src/components/chart/pie_chart/PieChart.stories.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { PieChart } from './PieChart';
+
+const data = [{ "dimension": 115, "value": 1 }, { "dimension": 114, "value": 2 }, { "dimension": 116, "value": 2 }, { "dimension": 117, "value": 5 }]
+const labels = [{ "id": 114, "name": "moto", "taggings_count": 0, "display_name": "moto"},{ "id": 115, "name": "honda", "taggings_count": 0, "display_name": "honda"},{ "id": 116, "name": "cbr", "taggings_count": 0, "display_name": "cbr"},{ "id": 117, "name": "chanyol", "taggings_count": 0, "display_name": "chanyol"}]
+const totalItemsCount = 10;
+const pieTitle = "# of proposals"
+
+const meta = {
+    title: 'Chart/Pie Chart',
+    component: PieChart,
+    args: {
+        data,
+        totalItemsCount,
+        labels,
+        pieTitle
+    },
+    argTypes: {
+        data: { control: 'object' },
+        totalItemsCount: { control: 'number' },
+        labels: { control: 'object' },
+        pieTitle: { control: 'text' }
+    },
+    render: (args) => (
+        <IntlProvider locale="en">
+            <PieChart {...args} />
+        </IntlProvider>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultPieChart = (props) => renderStory(props);

package/src/components/chart/pie_chart/PieChart.test.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DefaultPieChart } from "./PieChart.stories";
+import { render, screen } from '@testing-library/react';
+
+describe('PieChart', () => {
+    it ('renders PieChart component', () => {  
+        const container = render(
+            <DefaultPieChart />
+        );
+        expect(screen.getByTestId("pieChartCanvas")).toBeTruthy();
+    })
+})

package/src/components/chart/pie_chart/index.js

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

package/src/components/consultation/consultation_box/ConsultationBox.docs.mdx

@@ -0,0 +1,21 @@
+---
+description: A component that renders a consultation box.
+---
+
+import { ConsultationBox } from './ConsultationBox';
+
+A component that renders a consultation box. It renders an image, a full title and some stats about the consultation.
+
+### Component usage
+```js
+import { ConsultationBox } from '@logora/debate.consultation.consultation_box';
+```
+```js
+<BrowserRouter>
+    <IntlProvider locale="en">
+        <ConfigProvider routes={{...routes}}>
+            <ConsultationBox consultation={consultation} />
+        </ConfigProvider>
+    </IntlProvider>
+</BrowserRouter>
+```

package/src/components/consultation/consultation_box/ConsultationBox.jsx

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
+import { useRelativeTime } from '@logora/debate/hooks/use_relative_time';
+import { Link } from '@logora/debate/action/link';
+import { Icon } from "@logora/debate/icons/icon";
+import { ProgressBar } from "@logora/debate/progress/progress_bar";
+import { useResponsive } from "@logora/debate/hooks/use_responsive";
+import { useRoutes } from '@logora/debate/data/config_provider';
+import { TranslatedContent } from '@logora/debate/translation/translated_content';
+import styles from './ConsultationBox.module.scss';
+import cx from 'classnames';
+import PropTypes from "prop-types";
+
+export const ConsultationBox = ({ consultation }) => {
+    const intl = useIntl();
+    const date = useMemo(() => new Date());
+    const endDate = new Date(consultation.ends_at);
+    const remainingTime = useRelativeTime(endDate.getTime());
+    const routes = useRoutes();
+    const { isMobile } = useResponsive();
+
+    const displayRemainingTime = () => {
+        if( endDate < date ) {
+            return <span><FormattedMessage id="consultation.consultation_box.consultation_ended" defaultMessage={"Consultation ended"}/></span>;
+        } else {
+            return <>
+                <span><FormattedMessage id="consultation.consultation_box.in_progress" defaultMessage={"Consultation in progress"}/> - </span>
+                <span>{ remainingTime }</span>
+            </>;
+        }
+    }
+
+    return (
+        <>
+            <div className={styles.container}>
+                <Link to={routes.consultationShowLocation.toUrl({ consultationSlug: consultation.slug })}>
+                    <img loading={"lazy"} className={styles.consultationImage} src={consultation.image_url} alt={intl.formatMessage({ id: "consultation.consultation_box.alt", defaultMessage: "Presentation image for the consultation"})}/>
+                </Link>
+                { consultation.ends_at && 
+                    <div className={cx(styles.consultationTime, {[styles.ended]: endDate < date})}>
+                        {displayRemainingTime()}
+                    </div>
+                }
+                <Link to={routes.consultationShowLocation.toUrl({ consultationSlug: consultation.slug })}>
+                    <div className={styles.consultationTitle}>
+                        <TranslatedContent 
+                            originalContent={consultation.title}
+                            originalLanguage={consultation.language}
+                            targetField={"title"}
+                            translations={consultation.translation_entries}
+                        />
+                    </div>
+                </Link>
+                <Link to={routes.consultationShowLocation.toUrl({ consultationSlug: consultation.slug })}>
+                    <div className={styles.consultationButtonContainer}>
+                        { consultation.ends_at && (endDate < date) ?
+                            <span><FormattedMessage id="consultation.consultation_box.action_show_result" defaultMessage={"Show result"} /></span>
+                        :
+                            <span><FormattedMessage id="consultation.consultation_box.action_consultation_participate" defaultMessage={"Participate"} /></span>
+                        }
+                        <Icon name="arrow" width={18} height={18} className={styles.arrowIcon} />
+                    </div>
+                </Link>
+                <div className={styles.consultationInformations}>
+                    <div className={styles.consultationLeft}>
+                        <div className={cx(styles.consultationGroupInformation, styles.consultationGroupRight)}>
+                            <span className={styles.consultationTextInformation}>{consultation.proposals_count}</span>
+                            <Icon name="chat" width={15} height={20} />
+                        </div>
+                        <div className={styles.consultationGroupInformation}>
+                            <span className={styles.consultationTextInformation}>{consultation.total_participants}</span>
+                            <Icon name="user" width={15} height={20} />
+                        </div>
+                    </div>
+                    { consultation.vote_goal > 0 &&
+                        <div className={cx(styles.consultationGroupInformation, styles.progressBarContainer)}>
+                            {endDate < date ?
+                                <FormattedMessage id="consultation.consultation_box.stats_votes" values={{ votesCount: consultation.total_votes }} defaultMessage={"{votesCount} votes"} />
+                            :
+                                <ProgressBar 
+                                    className={styles.progress} 
+                                    innerClassName={styles.bar} 
+                                    progress={consultation.total_votes} 
+                                    goal={consultation.vote_goal}
+                                    showProgressSubtitle={true}
+                                    progressUnit={"votes"}
+                                />
+                            }
+                        </div>
+                    }
+                </div>
+            </div>
+        </>
+    );
+};
+
+ConsultationBox.propTypes = {
+    /** A consultation object gathering all the consultation infos */
+    consultation: PropTypes.object.isRequired,
+};