@logora/debate 0.1.0 → 0.1.1

package/src/components/auth/auth_modal/AuthModal.stories.jsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from "react-router-dom";
-import { IntlProvider } from 'react-intl';
-import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
-import { ModalProvider } from '@logora/debate/dialog/modal';
-import { ConfigProvider } from '@logora/debate/data/config_provider';
-import { AuthProvider } from '@logora/debate/auth/use_auth';
-import { AuthModal } from './AuthModal';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-const httpClient = {
-    get: () => null,
-    post: () => null,
-    patch: () => null
-};
-
-const config = {
-    shortname: "myapp",
-    auth: {
-        type: "social"
-    }
-};
-
-export default {
-    title: 'Auth/Auth Modal',
-    component: AuthModal,
-    args: {
-        authType: 'social',
-        hideBelowButton: false,
-        onHideModal: null
-    },
-    argTypes: {
-        authType: {
-            control: 'select',
-            options: ['social', 'sso']
-        },
-        hideBelowButton: {
-            control: 'boolean'
-        },
-        onHideModal: {
-            control: false
-        }
-    },
-    render: ({ authType, hideBelowButton, ...args }) => {
-        const data = dataProvider(httpClient, 'https://mock.example.api');
-        const currentConfig = {
-            ...config,
-            auth: {
-                type: authType,
-                hideBelowButton
-            }
-        };
-
-        return (
-            <div style={{ width: '400px', height: '300px' }}>
-                <MemoryRouter>
-                    <ConfigProvider config={currentConfig}>
-                        <IconProvider library={regularIcons}>
-                            <IntlProvider locale="en">
-                                <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                    <AuthProvider>
-                                        <ModalProvider>
-                                            <AuthModal {...args} />
-                                        </ModalProvider>
-                                    </AuthProvider>
-                                </DataProviderContext.Provider>
-                            </IntlProvider>
-                        </IconProvider>
-                    </ConfigProvider>
-                </MemoryRouter>
-            </div>
-        );
-    }
-};
-
-export const DefaultAuthModal = {};
-
-export const AuthModalSSO = {
-    args: {
-        authType: 'sso'
-    }
-};
-
-export const AuthModalSSOHideBelowButton = {
-    args: {
-        authType: 'sso',
-        hideBelowButton: true
-    }
-};

package/src/components/auth/auth_modal/index.js

@@ -1 +0,0 @@
-export { AuthModal as default } from './AuthModal';

package/src/components/auth/facebook_login_button/FacebookIcon.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const FacebookIcon = (props) => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085" {...props}>
-        <path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z" fill="#3c5a9a"/>
-    </svg>
-)

package/src/components/auth/facebook_login_button/FacebookLoginButton.docs.mdx

@@ -1,34 +0,0 @@
----
-description: A button to login to Facebook with the OAuth2 protocol.
-labels: ['auth', 'oauth2', 'facebook']
----
-
-import { FacebookLoginButton } from './FacebookLoginButton';
-import { MemoryRouter } from "react-router-dom";
-
-A button component to login to Facebook with OAuth2.
-
-When clicking on the button, a popup will appear that will ask the user to login to Facebook. User will be
-redirected to _redirectUri_ afterwards if login is successful, with authorization code.
-
-Two scopes are requested :
-- email
-- public_profile
-
-### Component usage
-
-```js
-import { FacebookLoginButton } from '@logora/debate.auth.facebook_login_button';
-```
-
-```js
-    <MemoryRouter>
-        <FacebookLoginButton 
-            text={"Sign in with Facebook"}
-            facebookClientId={"facebook-client-id"}
-            redirectUri={"https://auth.redirect/}
-            onCode={(code) => console.log(code)}
-            onClose={closeCallbackFunction}
-        />
-    </MemoryRouter>
-```

package/src/components/auth/facebook_login_button/FacebookLoginButton.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { OAuth2Button } from '@logora/debate/auth/oauth2_button';
-import { FacebookIcon } from "./FacebookIcon";
-import styles from './FacebookLoginButton.module.scss';
-
-export const FacebookLoginButton = ({ text, facebookClientId, redirectUri, onCode, onClose}) => {
-  return (
-    <OAuth2Button 
-      authDialogUrl={"https://www.facebook.com/v9.0/dialog/oauth"}
-      clientId={facebookClientId}
-      scope={"email,public_profile"}
-      onCode={onCode}
-      onClose={onClose}
-      provider={"facebook"}
-      redirectUri={redirectUri}
-    >
-      <div className={styles.facebookButton}>
-        <FacebookIcon height={35} width={35} className={styles.icon} />&nbsp;
-        <span>
-          { text }
-        </span>
-      </div>
-    </OAuth2Button>
-  );
-}

package/src/components/auth/facebook_login_button/FacebookLoginButton.module.scss

@@ -1,32 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.facebookButton {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  align-self: center;
-  width: 300px !important;
-  height: 50px !important;
-  margin-bottom: 15px;
-  border: theme.$box-border;
-  border-radius: theme.$box-border-radius;
-  cursor: pointer;
-  @include spacing.p(3, xs);
-  &:hover{
-    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.05);
-  }
-  span {
-    @include spacing.pl(2, xs);
-  }
-}
-
-.icon {
-  fill: #4267B2 !important;
-  fill-rule: evenodd;
-  height: 25px;
-  width: 35px;
-  border-right: 1px solid theme.$background-color-secondary;
-  @include spacing.pr(2, xs);
-}

package/src/components/auth/facebook_login_button/FacebookLoginButton.stories.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from "react-router-dom";
-import { FacebookLoginButton } from './FacebookLoginButton';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export default {
-    title: 'Auth/Facebook Login Button',
-    component: FacebookLoginButton,
-    args: {
-        text: 'Sign in with Facebook',
-        facebookClientId: 'client-id',
-        redirectUri: 'https://auth.redirect/uri'
-    },
-    argTypes: {
-        text: {
-            control: 'text'
-        },
-        facebookClientId: {
-            control: 'text'
-        },
-        redirectUri: {
-            control: 'text'
-        }
-    },
-    render: (args) => (
-        <MemoryRouter>
-            <IconProvider library={regularIcons}>
-                <FacebookLoginButton {...args} />
-            </IconProvider>
-        </MemoryRouter>
-    )
-};
-
-export const DefaultFacebookLoginButton = {};

package/src/components/auth/facebook_login_button/FacebookLoginButton.test.jsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { FacebookLoginButton } from './FacebookLoginButton';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-Object.defineProperty(window, 'location', {
-	value: {
-	  origin: 'http://example.fr',
-	  href: 'http://example.fr/path-name',
-	}
-});
-
-const spyWindowOpen = vi.spyOn(window, 'open');
-spyWindowOpen.mockImplementation(vi.fn());
-
-describe('FacebookLoginButton', () => {
-	it('should render button with the correct text', () => {
-		const facebookLoginButton = render(
-			<MemoryRouter>
-				<IconProvider library={regularIcons}>
-					<FacebookLoginButton 
-						text={"Sign in with Facebook"}
-						facebookClientId={"client-id"}
-						redirectUri={"https://auth.redirect/uri"}
-					/>
-				</IconProvider>
-			</MemoryRouter>
-		);
-		const renderedButton = facebookLoginButton.getByText(/Sign in with Facebook/i);
-		expect(renderedButton).toBeTruthy();
-	});
-
-	it('should open popup with correct link on click', async () => {
-		spyWindowOpen.mockClear();
-
-		const authDialogUrl = "https://www.facebook.com/v9.0/dialog/oauth";
-		const clientId = "facebook-client-id";
-		const scope = "email,public_profile";
-		const redirectUri = "https://auth.redirect/uri";
-
-		const facebookLoginButton = render(
-			<MemoryRouter initialEntries={["/path-name"]}>
-				<IconProvider library={regularIcons}>
-					<FacebookLoginButton 
-						text={"Sign in with Facebook"}
-						facebookClientId={clientId}
-						redirectUri={redirectUri}
-					/>
-				</IconProvider>
-			</MemoryRouter>
-		);
-		const renderedButton = screen.getByText(/Sign in with Facebook/i);
-		expect(renderedButton).toBeTruthy();
-
-		let expectedUrl = new URL(authDialogUrl);
-		expectedUrl.searchParams.append("client_id", clientId);
-		expectedUrl.searchParams.append("redirect_uri", redirectUri);
-		expectedUrl.searchParams.append("scope", scope);
-		expectedUrl.searchParams.append("state", window.btoa(window.location.href));
-
-		await userEvent.click(renderedButton);
-		expect(spyWindowOpen).toHaveBeenCalledTimes(1);
-		expect(spyWindowOpen).toHaveBeenLastCalledWith(expectedUrl.href, "", "width=500,height=500,left=262,top=107.2");
-	});
-});

package/src/components/auth/facebook_login_button/index.js

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

package/src/components/auth/google_login_button/GoogleIcon.jsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-export const GoogleIcon = (props) => (
-    <svg viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" {...props}>
-        <path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/>
-        <path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/>
-        <path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/>
-        <path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/>
-    </svg>
-)

package/src/components/auth/google_login_button/GoogleLoginButton.docs.mdx

@@ -1,43 +0,0 @@
----
-description: A button to login to Google with the OAuth2 protocol.
-labels: ['auth', 'oauth2', 'google']
----
-
-import { GoogleLoginButton } from './GoogleLoginButton';
-import { MemoryRouter } from "react-router-dom";
-
-A button component to login to Google with OAuth2.
-
-When clicking on the button, a popup will appear that will ask the user to login to Google. User will be
-redirected to _redirectUri_ afterwards if login is successful, with authorization code.
-
-Two scopes are requested :
-- https://www.googleapis.com/auth/userinfo.email 
-- https://www.googleapis.com/auth/userinfo.profile
-
-### Component usage
-
-```js
-import { GoogleLoginButton } from '@logora/debate.auth.google_login_button';
-```
-
-```js
-    <MemoryRouter>
-        <GoogleLoginButton 
-            text={"Sign in with Google"}
-            googleClientId={"google-client-id"}
-            redirectUri={"https://auth.redirect/}
-            onCode={(code) => console.log(code)}
-            onClose={closeCallbackFunction}
-        />
-    </MemoryRouter>
-```
-
-### Properties
-| **Name**      | **Type** | **Required** | **Default** | **Description** |
-| ----------- | ----------- | :-----------: | ----------- | ----------- |
-| <font color='#4646c6'>text</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*button text*</font> |
-| <font color='#4646c6'>googleClientId</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*google oauth2 client ID*</font> |
-| <font color='#4646c6'>redirectUri</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*oauth2 redirect URI*</font> |
-| <font color='#4646c6'>onCode</font> | <font color="#397300">function</font> | &check; | - | <font color="grey">*callback triggered if auth is successful. onCode takes one argument, which is the oauth2 authorization code*</font> |
-| <font color='#4646c6'>onClose</font> | <font color="#397300">function</font> | &cross; | - | <font color="grey">*callback triggered if popup is closed by user*</font> |

package/src/components/auth/google_login_button/GoogleLoginButton.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { OAuth2Button } from '@logora/debate/auth/oauth2_button';
-import { GoogleIcon } from "./GoogleIcon";
-import styles from './GoogleLoginButton.module.scss';
-
-export const GoogleLoginButton = ({ text, googleClientId, redirectUri, onCode, onClose, className }) => {
-    return (
-        <OAuth2Button 
-            authDialogUrl={"https://accounts.google.com/o/oauth2/v2/auth"}
-            clientId={googleClientId}
-            responseType={"code"}
-            scope={"https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"}
-            onCode={onCode}
-            onClose={onClose}
-            provider={"google"}
-            redirectUri={redirectUri}
-            className={className}
-        >
-            <div className={styles.container}>
-                <GoogleIcon height={35} width={35} className={styles.icon} />&nbsp;
-                <span>
-                    { text }
-                </span>
-            </div>
-        </OAuth2Button>
-    )
-}

package/src/components/auth/google_login_button/GoogleLoginButton.module.scss

@@ -1,28 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.container {
-	display: flex !important;
-	flex-direction: row !important;
-	justify-content: flex-start !important;
-	align-items: center !important;
-	align-self: center;
-	margin-bottom: 15px;
-	border: theme.$box-border;
-	border-radius: theme.$box-border-radius;
-	width: 300px;
-	height: 50px;
-	padding: 1em;
-	cursor: pointer;
-	&:hover {
-		box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.05);
-	}
-}
-
-.icon {
-	height: 35px;
-	width: 35px;
-	border-right: 1px solid theme.$background-color-secondary;
-	@include spacing.mr(2, xs);
-	@include spacing.pr(3, xs);
-}

package/src/components/auth/google_login_button/GoogleLoginButton.stories.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from "react-router-dom";
-import { GoogleLoginButton } from './GoogleLoginButton';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export default {
-    title: 'Auth/Google Login Button',
-    component: GoogleLoginButton,
-    args: {
-        text: 'Sign in with Google',
-        googleClientId: 'client-id',
-        redirectUri: 'https://auth.redirect/uri'
-    },
-    argTypes: {
-        text: {
-            control: 'text'
-        },
-        googleClientId: {
-            control: 'text'
-        },
-        redirectUri: {
-            control: 'text'
-        }
-    },
-    render: (args) => (
-        <MemoryRouter>
-            <IconProvider library={regularIcons}>
-                <GoogleLoginButton {...args} />
-            </IconProvider>
-        </MemoryRouter>
-    )
-};
-
-export const DefaultGoogleLoginButton = {};

package/src/components/auth/google_login_button/GoogleLoginButton.test.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { GoogleLoginButton } from './GoogleLoginButton';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-Object.defineProperty(window, 'location', {
-	value: {
-	  origin: 'http://example.fr',
-	  href: 'http://example.fr/path-name',
-	}
-});
-
-const spyWindowOpen = vi.spyOn(window, 'open');
-spyWindowOpen.mockImplementation(vi.fn());
-
-describe('GoogleLoginButton', () => {
-	it('should render button with the correct text', () => {
-		const googleLoginButton = render(
-			<MemoryRouter>
-				<IconProvider library={regularIcons}>
-					<GoogleLoginButton 
-						text={"Sign in with Google"}
-						googleClientId={"client-id"}
-						redirectUri={"https://auth.redirect/uri"}
-					/>
-				</IconProvider>
-			</MemoryRouter>
-		);
-		const renderedButton = googleLoginButton.getByText(/Sign in with Google/i);
-		expect(renderedButton).toBeTruthy();
-	});
-
-	it('should open popup with correct link on click', async () => {
-		spyWindowOpen.mockClear();
-
-		const authDialogUrl = "https://accounts.google.com/o/oauth2/v2/auth";
-		const clientId = "google-client-id";
-		const scope = "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile";
-		const redirectUri = "https://auth.redirect/uri";
-
-		const googleLoginButton = render(
-			<MemoryRouter initialEntries={["/path-name"]}>
-				<IconProvider library={regularIcons}>
-					<GoogleLoginButton 
-						text={"Sign in with Google"}
-						googleClientId={clientId}
-						redirectUri={redirectUri}
-					/>
-				</IconProvider>
-			</MemoryRouter>
-		);
-		const renderedButton = screen.getByText(/Sign in with Google/i);
-		expect(renderedButton).toBeTruthy();
-
-		let expectedUrl = new URL(authDialogUrl);
-		expectedUrl.searchParams.append("client_id", clientId);
-		expectedUrl.searchParams.append("redirect_uri", redirectUri);
-		expectedUrl.searchParams.append("scope", scope);
-		expectedUrl.searchParams.append("response_type", "code");
-		expectedUrl.searchParams.append("state", window.btoa(window.location.href));
-
-		await userEvent.click(renderedButton);
-		expect(spyWindowOpen).toHaveBeenCalledTimes(1);
-		expect(spyWindowOpen).toHaveBeenLastCalledWith(expectedUrl.href, "", "width=500,height=500,left=262,top=107.2");
-	});
-});

package/src/components/auth/google_login_button/index.js

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

package/src/components/auth/login_form/LoginForm.docs.mdx

@@ -1,24 +0,0 @@
----
-description: A simple login form.
-labels: ['auth', 'login', 'form', 'login-form']
----
-
-A login form with email and password inputs.
-
-### Component usage
-
-```js
-import { LoginForm } from '@logora/debate.auth.login_form';
-```
-
-```js
-    <MemoryRouter>
-        <IntlProvider locale="en">
-            <LoginForm 
-                onSubmit={(email, password) => console.log(email) }
-                error={false}
-                forgotPasswordUrl={"http://example.com/forgot_password"}
-            />
-        </IntlProvider>
-    </MemoryRouter>
-```

package/src/components/auth/login_form/LoginForm.jsx

@@ -1,65 +0,0 @@
-import React, { useState } from "react";
-import { useIntl } from "react-intl";
-import { useLocation } from 'react-router';
-import { Button } from '@logora/debate/action/button';
-import { TextInput } from '@logora/debate/input/text_input';
-import styles from "./LoginForm.module.scss";
-import cx from "classnames";
-
-export const LoginForm = ({ onSubmit, forgotPasswordUrl, error = false }) => {
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const intl = useIntl();
-	const location = useLocation();
-
-	const handleSubmit = (event) => {
-		event.preventDefault();
-		if(onSubmit) {
-			onSubmit(email, password);
-		}
-	};
-
-	const getUrlWithRedirect = () => {
-		const baseUrl = new URL(forgotPasswordUrl);
-		baseUrl.searchParams.append("redirect_url", encodeURIComponent(window?.location.origin + location.pathname + location.hash + location.search));
-		return baseUrl.href;
-	};
-
-	return (
-		<form onSubmit={handleSubmit} className={styles.loginForm}>
-			<div className={styles.formGroup}>
-				<TextInput
-					type={"email"}
-					name={"email"}
-					required
-					placeholder={intl.formatMessage({ id: "auth_login_form_email_placeholder", defaultMessage: "Email" })}
-					onChange={(e) => setEmail(e.target.value)}
-					error={error}
-					data-testid={"email-input"}
-				/>
-			</div>
-			<div className={styles.formGroup}>
-				<TextInput
-					type={"password"}
-					name={"password"}
-					required
-					placeholder={intl.formatMessage({ id: "auth_login_form_password_placeholder", defaultMessage: "Password" })}
-					onChange={(e) => setPassword(e.target.value)}
-					error={error}
-					message={error && intl.formatMessage({ id: "auth_login_form_error", defaultMessage: "An error occurred while signing in, please try again" })}
-					data-testid={"password-input"}
-				/>
-			</div>
-			{ forgotPasswordUrl &&
-				<a href={getUrlWithRedirect()} target='_blank' role="link" className={styles.forgotPassword}>
-					{ intl.formatMessage({ id: "auth_login_form_forgot_password", defaultMessage: "Forgot password ?" }) }
-				</a>
-			}
-			<div className={cx(styles.formSubmitGroup)}>
-				<Button className={styles.formSubmitButton} type='submit' role="button" handleClick={() => null}>
-					{ intl.formatMessage({ id: "auth_login_form_sign_in", defaultMessage: "Sign in" }) }
-				</Button>
-			</div>
-		</form>
-	);
-}

package/src/components/auth/login_form/LoginForm.module.scss

@@ -1,36 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.loginForm {
-	@include spacing.my(3, xs);
-	@include spacing.my(4, sm);
-}
-
-.formGroup {
-	@include spacing.my(3, xs);
-}
-
-.formSubmitGroup {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	@include spacing.my(4, xs);
-}
-
-.formSubmitButton {
-	border: theme.$box-border;
-	box-shadow: theme.$box-shadow;
-	border-radius: theme.$box-border-radius;
-	background-color: theme.$call-primary !important;
-	height: calc(2.25em + 2px);
-}
-
-.forgotPassword {
-	color: theme.$call-primary !important;
-	cursor: pointer;
-	width: 100%;
-	display: block;
-	text-align: right;
-	font-size: theme.$font-size-small;
-	@include spacing.mt(2, xs);
-}