@logora/debate 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,101 +0,0 @@
-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,
-};