@logora/debate 0.1.0

package/src/components/consultation/consultation_box/ConsultationBox.module.scss

@@ -0,0 +1,105 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    color: theme.$text-primary;
+    border-radius: theme.$box-border-radius;
+    background: theme.$background-color-primary;
+    a {
+        text-decoration: none !important;
+        color: theme.$text-primary !important;
+    }
+}
+.consultationImage {
+    border-top-right-radius: theme.$box-border-radius;
+    border-top-left-radius: theme.$box-border-radius;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+}
+.consultationTime {
+    @include spacing.py(2, xs);
+    width: 100%;
+    background-color: theme.$info-primary;
+    font-size: theme.$font-size-normal;
+    font-weight: theme.$font-weight-bold;
+    color: theme.$text-light;
+    text-align: center;
+    &.ended {
+        background-color: theme.$text-secondary;
+    }
+}
+.consultationTitle {
+    @include spacing.pt(4, xs);
+    @include spacing.pb(2, xs);
+    @include spacing.px(3, xs);
+    font-size: theme.$font-size-normal;
+    font-weight: theme.$font-weight-bold;
+}
+.consultationButtonContainer {
+    display: flex !important;
+    @include spacing.px(3, xs);
+    @include spacing.pb(4, xs);
+    color: theme.$text-secondary;
+    font-size: theme.$font-size-small;
+    &:hover {
+        text-decoration: underline;
+        text-decoration-color: theme.$text-secondary;
+    }
+    .arrowIcon {
+        @include spacing.ml(1, xs);
+        transform: rotate(180deg);
+        fill: theme.$text-secondary;
+    }
+}
+.consultationInformations {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    @include spacing.px(3, xs);
+    @include spacing.py(2, xs);
+    border-top: 1px solid theme.$text-tertiary;
+    min-height: 50px;
+    .consultationLeft {
+        display: flex !important;
+    }
+    .consultationGroupInformation {
+        display: flex !important;
+        align-items: center !important;
+        &.consultationGroupRight {
+            @include spacing.pr(3, xs);
+        }
+    }
+    .progressBarContainer {
+        width: 60%;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-end !important;
+        font-size: theme.$font-size-extra-small;
+        .progress {
+            @include spacing.mt(1, xs);
+            height: 15px;
+            width: 100%;
+            border-radius: theme.$box-border-radius;
+            background-color: theme.$background-color-secondary !important;
+        }
+        .bar {
+            background-color: theme.$call-primary;
+        }
+        .totalVotes {
+            @include spacing.mr(1, xs);
+        }
+        .totalVotesPercentage {
+            @include spacing.ml(1, xs);
+        }
+    }
+    
+    .consultationTextInformation {
+        @include spacing.pr(1, xs);
+    }
+}

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { Location } from '@logora/debate/util/location';
+import { BrowserRouter } from 'react-router-dom';
+import { ConsultationBox } from "./ConsultationBox";
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const routes = {
+    consultationShowLocation: new Location('espace-debat/consultation/:consultationSlug', { consultationSlug: "" }),
+}
+
+const consultation = {
+    id: 19,
+    slug: faker.lorem.slug(),
+    title: faker.music.songName(),
+    description: faker.commerce.productDescription(),
+    description_url: "",
+    created_at: faker.date.recent(),
+    ends_at: faker.date.future(),
+    vote_goal: 1000,
+    total_votes: 200,
+    total_participants: 44,
+    proposals_count: 53,
+    image_url: faker.image.url(),
+    direct_url: faker.internet.url(),
+    tags: [
+        {
+            id: 37,
+            name: faker.science.chemicalElement().name,
+            taggings_count: 0,
+            display_name: faker.science.chemicalElement().name
+        },
+    ],
+    language: "en",
+    translation_entries: []
+}
+
+const meta = {
+    title: 'Consultation/Consultation Box',
+    component: ConsultationBox,
+    args: {
+        consultation
+    },
+    argTypes: {
+        consultation: {
+            control: 'object'
+        }
+    },
+    render: ({ consultation }) => (
+        <BrowserRouter>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ResponsiveProvider>
+                        <ConfigProvider routes={{ ...routes }} config={{ theme: {} }}>
+                            <ConsultationBox consultation={consultation} />
+                        </ConfigProvider>
+                    </ResponsiveProvider>
+                </IconProvider>
+            </IntlProvider>
+        </BrowserRouter>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultConsultationBox = (props) => renderStory(props);
+
+export const ConsultationEndedBox = (props) => renderStory({
+    consultation: {
+        ...consultation,
+        ends_at: '2022-11-30T00:00:00.000Z'
+    },
+    ...props
+});
+
+export const ConsultationWithoutEndBox = (props) => renderStory({
+    consultation: {
+        ...consultation,
+        ends_at: null
+    },
+    ...props
+});
+
+export const ConsultationWithoutVoteGoalBox = (props) => renderStory({
+    consultation: {
+        ...consultation,
+        vote_goal: 0
+    },
+    ...props
+});

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { DefaultConsultationBox, ConsultationEndedBox, ConsultationWithoutEndBox, ConsultationWithoutVoteGoalBox } from './ConsultationBox.stories';
+import { render } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+
+const consultation = {
+    id: 19,
+    slug: faker.lorem.slug(),
+    title: faker.music.songName(),
+    description: faker.commerce.productDescription(),
+    description_url: "",
+    created_at: faker.date.recent(),
+    ends_at: faker.date.future(),
+    vote_goal: 1000,
+    total_votes: 200,
+    total_participants: 44,
+    proposals_count: 53,
+    image_url: faker.image.url(),
+    direct_url: faker.internet.url(),
+    tags: [
+        {
+            id: 37,
+            name: faker.science.chemicalElement().name,
+            taggings_count: 0,
+            display_name: faker.science.chemicalElement().name
+        },
+    ],
+    language: "en",
+    translation_entries: []
+}
+
+describe('ConsultationBox', () => {
+    it ('renders ConsultationBox component', () => {  
+        const { getByText } = render(<DefaultConsultationBox consultation={consultation} />);
+        expect(getByText(consultation.title)).toBeInTheDocument();
+    });
+
+    it ('renders a clickable title redirecting to the correct link', () => {  
+        const { getByText } = render(<DefaultConsultationBox consultation={consultation} />);
+        expect(getByText(consultation.title).closest('a')).toHaveAttribute('href', '/espace-debat/consultation/' + consultation.slug);
+    });
+
+    it ('renders an ended box', () => {  
+        const { getByText } = render(<ConsultationEndedBox />);
+        expect(getByText("Consultation ended")).toBeInTheDocument();
+    });
+
+    it ('renders without ended box', () => {  
+        const { queryByText } = render(<ConsultationWithoutEndBox />);
+        expect(queryByText("Consultation ended")).toBeNull();
+        expect(queryByText("Consultation in progress")).toBeNull();
+    });
+
+    it ('renders without goal box', () => {  
+        const { queryByText } = render(<ConsultationWithoutVoteGoalBox />);
+        expect(queryByText("200 votes")).toBeNull();
+    });
+});

package/src/components/consultation/consultation_box/index.js

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

package/src/components/data/axios_client/httpClient.docs.mdx

@@ -0,0 +1,4 @@
+---
+description: An axios http client.
+labels: ['axios', 'http', 'http-client']
+---

package/src/components/data/axios_client/httpClient.js

@@ -0,0 +1,11 @@
+// HTTP CLIENT
+import axios from "axios";
+
+const HTTP_TIMEOUT = 10000;
+
+const httpClient = axios.create({
+    timeout: HTTP_TIMEOUT,
+    adapter: 'fetch'
+});
+
+export { httpClient };

package/src/components/data/axios_client/index.js

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

package/src/components/data/config_provider/ConfigProvider.docs.mdx

@@ -0,0 +1,26 @@
+---
+description: A context provider to store configuration and routes.
+labels: ['config', 'config-provider']
+---
+
+ConfigProvider is a context component to store configuration variables and routes.
+
+To use the context, first wrap your application with _ConfigProvider_. Then, use _useConfig_ and _useRoutes_ hooks to get config and routes.
+
+### Component usage
+```js
+import { ConfigProvider, useConfig, useRoutes } from '@logora/debate.data.config_provider';
+```
+
+```js
+const ComponentWithConfig = () => {
+	const config = useConfig();
+	const routes = useRoutes();
+
+	return <div>Hello world</div>;
+}
+
+<ConfigProvider config={layout: "compact"}>
+    <ComponentWithConfig />
+</ConfigProvider>
+```

package/src/components/data/config_provider/ConfigProvider.jsx

@@ -0,0 +1,21 @@
+import React, { createContext } from "react";
+import PropTypes from "prop-types";
+
+export const ConfigContext = createContext();
+
+export const ConfigProvider = ({ config, routes, children }) => {
+  return (
+    <ConfigContext.Provider value={{ config, routes }}>
+      { children }
+    </ConfigContext.Provider>
+  );
+}
+
+ConfigProvider.propTypes = {
+  /** Config object to store */
+  config: PropTypes.object,
+  /** Route object to store */
+  routes: PropTypes.object,
+  /** Provider children */
+  children: PropTypes.node
+};

package/src/components/data/config_provider/ConfigProvider.test.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ConfigProvider } from './ConfigProvider';
+import { useConfig } from './useConfig';
+import { useRoutes } from './useRoutes';
+
+const ComponentWithConfig = () => {
+	const config = useConfig();
+
+	return <div>{ config.message }</div>
+}
+
+const ComponentWithRoutes = () => {
+	const routes = useRoutes();
+
+	return <div>hello world</div>
+}
+
+describe('ConfigProvider', () => {
+	it('should render component with config', () => {
+		const container = render(
+			<ConfigProvider config={{ message: "hello world" }} routes={{}} reactRoot="root">
+				<ComponentWithConfig />
+			</ConfigProvider>
+		);
+
+		expect(container.getByText(/hello world/i)).toBeTruthy()
+	});
+
+	it('should render component with routes', () => {
+		const container = render(
+			<ConfigProvider config={{}} routes={{}} reactRoot="root">
+				<ComponentWithRoutes />
+			</ConfigProvider>
+		);
+
+		expect(container.getByText(/hello world/i)).toBeTruthy()
+	});
+});

package/src/components/data/config_provider/index.js

@@ -0,0 +1,4 @@
+export { ConfigContext, ConfigProvider } from './ConfigProvider';
+export { useConfig } from './useConfig';
+export { useRoutes } from './useRoutes';
+export { withConfig } from './withConfig';

package/src/components/data/config_provider/useConfig.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ConfigContext } from "./ConfigProvider";
+
+export const useConfig = () => {
+    const { config } = useContext(ConfigContext);
+
+    return config;
+}

package/src/components/data/config_provider/useRoutes.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ConfigContext } from "./ConfigProvider";
+
+export const useRoutes = () => {
+    const { routes } = useContext(ConfigContext);
+
+    return routes;
+}

package/src/components/data/config_provider/withConfig.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { ConfigContext } from "./ConfigProvider";
+
+export const withConfig = Component => props => (
+    <ConfigContext.Consumer>
+      {context => <Component {...props} {...context} />}
+    </ConfigContext.Consumer>
+  )

package/src/components/data/data_provider/DataProvider.docs.mdx

@@ -0,0 +1,52 @@
+---
+description: A data provider to call an external API.
+labels: ['data', 'data-provider']
+---
+
+DataProviderContext is a helper based on [Context API](https://en.reactjs.org/docs/context.html) and React hooks for simplified work
+with an external API.
+
+To use the context, first wrap your application with _DataProviderContext.Provider_. Then, use the hook _useDataProvider_ that exposes the data provider.
+
+A dataProvider key should be passed to the context. The _dataProvider_ function creates a dataProvider object that should be passed to the context.
+
+The _dataProvider_ function takes four arguments :
+- httpClient : a client similar to the axios client, with _get_, _post_, _patch_ and _delete_ functions available
+- apiUrl : an API URL that will be used to make requests
+- apiKey (optional) : an API key passed with the _getOne_ and _getList_ requests
+- storageKey (optional) : name of the local storage key where the API access token is stored. The access token is used for the _getOneWithToken_, _getListWithToken_, _create_, _update_, _delete_ requests
+
+_dataProvider_ exposes eight functions that can be used to call the API. All functions return a Promise : 
+- getOne(resource, id, params)
+- getList(resource, params)
+- getSettings(shortname)
+- getOneWithToken(resource, id, params)
+- getListWithToken(resource, params)
+- create(resource, data)
+- update(resource, id, data)
+- delete(resource, id)
+
+
+### Component usage
+```js
+import { dataProvider, DataProviderContext, useDataProvider } from '@logora/debate.data.data_provider';
+```
+```js
+const httpClient = axios.create();
+
+const DataConsumer = () => {
+	const dataProvider = useDataProvider();
+
+    useEffect(() => {
+        dataProvider.getOne("resource-name", "resource-id").then((response) => {
+            console.log(response.data);
+        });
+    });
+
+	return <div>My data consumer</div>;
+}
+
+<DataProviderContext.Provider value={{ dataProvider: dataProvider(httpClient, "https://example.api", "api-key", "token-storage-key") }}>
+    <DataConsumer />
+</DataProviderContext.Provider>
+```

package/src/components/data/data_provider/DataProvider.jsx

@@ -0,0 +1,165 @@
+export function getAuthHeader(storageKey) {
+	try {
+		const token = JSON.parse(localStorage.getItem(storageKey));
+		if (token && token.access_token) {
+			return { authorization: 'Bearer ' + token.access_token };
+		} else {
+			return {};
+		}
+	} catch {
+		return {};
+	}
+}
+
+export const dataProvider = (
+	httpClient,
+	apiUrl,
+	apiKey = "",
+	storageKey = ""
+) => ({
+	getOne: (resource, id, params = {}) => {
+		params.api_key = apiKey;
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}/${id}?${queryString}`;
+		return new Promise((resolve, reject) => {
+			httpClient.get(url)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+
+	getOneWithToken: (resource, id, params = {}) => {
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}/${id}?${queryString}`;
+		const config = {
+			headers: getAuthHeader(storageKey),
+		};
+		return new Promise((resolve, reject) => {
+			httpClient.get(url, config)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+
+	getList: (resource, params = {}) => {
+		params.api_key = apiKey;
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}?${queryString}`;
+		return new Promise((resolve, reject) => {
+			httpClient.get(url)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+
+	getListWithToken: (resource, params = {}) => {
+		const config = {
+			headers: getAuthHeader(storageKey),
+		};
+
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}?${queryString}`;
+		return new Promise((resolve, reject) => {
+			httpClient.get(url, config)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+
+	update: (resource, id, data, params = {}, withToken = true) => {
+		let config = {};
+		if (withToken) {
+			config["headers"] = getAuthHeader(storageKey);
+		} else {
+			params.api_key = apiKey;
+		}
+
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}/${id}?${queryString}`;
+		return new Promise((resolve, reject) => {
+			httpClient.patch(url, data, config)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+
+	create: (resource, data, params = {}, withToken = true) => {
+		let config = {};
+		if (withToken) {
+			config["headers"] = getAuthHeader(storageKey);
+		} else {
+			params.api_key = apiKey;
+		}
+
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}?${queryString}`;
+		return new Promise((resolve, reject) => {
+			httpClient.post(url, data, config)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+
+	delete: (resource, id, params = {}, withToken = true) => {
+		let config = {};
+		if (withToken) {
+			config["headers"] = getAuthHeader(storageKey);
+		} else {
+			params.api_key = apiKey;
+		}
+
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/${resource}/${id}?${queryString}`;
+		return new Promise((resolve, reject) => {
+			httpClient.delete(url, config)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+
+	getSettings: (shortname) => {
+		const params = {
+			shortname: shortname
+		};
+		const queryString = new URLSearchParams(params).toString();
+		const url = `${apiUrl}/settings?${queryString}`;
+		return new Promise((resolve, reject) => {
+			httpClient
+				.post(url)
+				.then((response) => {
+					resolve(response);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	},
+});