@logora/debate 0.1.0

package/src/components/follow/follow_button/FollowButton.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useFollow } from '@logora/debate/follow/use_follow';
+import { Tooltip } from '@logora/debate/dialog/tooltip';
+import { Button } from '@logora/debate/action/button';
+import styles from './FollowButton.module.scss';
+import PropTypes from "prop-types";
+import cx from 'classnames';
+
+export const FollowButton = ({ followableType, followableId, tooltipText, dataTid, noBorder }) => {
+    const intl = useIntl();
+    const { followActive, handleFollow } = useFollow(followableType, followableId);
+
+    return (
+        <Tooltip text={tooltipText}>
+            <Button data-tid={dataTid} className={cx(styles.followUserButton, {[styles.followUserButtonNoBorder]: noBorder})} active={noBorder || followActive} handleClick={handleFollow} data-testid={"button"} border={false}>
+                { !followActive && noBorder && <span className={styles.followIcon}>+</span>}
+                { followActive ? 
+                    <span data-testid={"followed"}>{(intl.formatMessage({ id: "follow.followed", defaultMessage: "Followed" }))}</span>
+                :
+                    <span data-testid={"follow"}>{(intl.formatMessage({ id: "follow.follow", defaultMessage: "Follow" }))}</span>
+                }
+                { !followActive && !noBorder && <span className={styles.followIcon}>+</span>}
+            </Button>
+        </Tooltip>
+    )
+};
+
+FollowButton.propTypes = {
+    /** Type of the followable content */
+    followableType: PropTypes.string,
+    /**  Id of the followable content */
+    followableId: PropTypes.number,
+    /**  Text of the tooltip */
+    tooltipText: PropTypes.string,
+    /**  Data-tid for tracking */
+    dataTid: PropTypes.string,
+    /**  Deactivate button style */
+    noBorder: PropTypes.bool
+};

package/src/components/follow/follow_button/FollowButton.module.scss

@@ -0,0 +1,17 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+button.followUserButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: spacing.$spacer-sm;
+  padding: spacing.$spacer-sm;
+  font-weight: theme.$font-weight-bold;
+}
+
+button.followUserButtonNoBorder {
+  font-weight: theme.$font-weight-normal;
+  color: theme.$text-primary !important;
+  padding: 0 !important;
+}

package/src/components/follow/follow_button/FollowButton.stories.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from "react-router-dom";
+import { FollowButton } from './FollowButton';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthProvider } from '@logora/debate/auth/use_auth';
+import { ConfigContext } from '@logora/debate/data/config_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const httpClient = {};
+const data = dataProvider(httpClient, 'https://mock.example.api');
+const config = { auth: { disableLoginModal: false }};
+
+export default {
+    title: 'Follow/Follow Button',
+    component: FollowButton,
+    args: {
+        followableType: 'content',
+        followableId: 12,
+        tooltipText: 'Tooltip content',
+        dataTid: 'data-tid',
+        noBorder: false
+    },
+    argTypes: {
+        followableType: { control: 'text' },
+        followableId: { control: 'number' },
+        tooltipText: { control: 'text' },
+        dataTid: { control: 'text' },
+        noBorder: { control: 'boolean' }
+    },
+    render: (args) => (
+        <MemoryRouter>
+            <IntlProvider locale='en'>
+                <IconProvider library={regularIcons}>
+                    <DataProviderContext.Provider value={{ dataProvider: data }}>
+                        <AuthProvider>
+                            <ConfigContext.Provider value={{ config }}>
+                                <ModalProvider>
+                                    <FollowButton {...args} />
+                                </ModalProvider>
+                            </ConfigContext.Provider>
+                        </AuthProvider>
+                    </DataProviderContext.Provider>
+                </IconProvider>
+            </IntlProvider>
+        </MemoryRouter>
+    )
+};
+
+export const DefaultFollowButton = {};
+
+export const FollowButtonNoBorder = {
+    args: {
+        noBorder: true
+    }
+};

package/src/components/follow/follow_button/FollowButton.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { FollowButton } from './FollowButton';
+import * as useFollowModule from '@logora/debate/follow/use_follow';
+
+describe('FollowButton', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it('should render with the correct text when not following', () => {
+        vi.spyOn(useFollowModule, 'useFollow').mockReturnValue({
+            followActive: false,
+            handleFollow: vi.fn(),
+        });
+
+        render(
+            <IntlProvider locale='en'>
+                <FollowButton followableType="content" followableId={12} tooltipText="Tooltip content" dataTid="data-tid" />
+            </IntlProvider>
+        );
+
+        expect(screen.getByTestId('follow')).toHaveTextContent("Follow");
+        expect(screen.queryByTestId('followed')).toBeNull();
+    });
+
+    it('should call follow handler when clicked', async () => {
+        const handleFollow = vi.fn();
+        vi.spyOn(useFollowModule, 'useFollow').mockReturnValue({
+            followActive: false,
+            handleFollow,
+        });
+
+        render(
+            <IntlProvider locale='en'>
+                <FollowButton followableType="content" followableId={12} tooltipText="Tooltip content" dataTid="data-tid" />
+            </IntlProvider>
+        );
+
+        await userEvent.click(screen.getByTestId('button'));
+        expect(handleFollow).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/follow/follow_button/index.js

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

package/src/components/follow/use_follow/index.js

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

package/src/components/follow/use_follow/useFollow.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A hook to follow a resource.
+labels: ['follow']
+---
+
+A hook to follow a resource. It receive a resourceName and a followableId params.
+
+It's using useAuthenticationRequired hook.
+
+### Component usage
+```js
+import { useFollow } from '@logora/debate.follow.use_follow';
+```
+```js
+const Component = () => {
+    const { followActive, handleFollow } = useFollow(resourceName, followableId);
+
+	return (
+        <button onClick={() => handleFollow()}>
+            Follow
+        </button>
+    )
+}
+```

package/src/components/follow/use_follow/useFollow.jsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useDataProvider } from '@logora/debate/data/data_provider';
+import { useAuthRequired } from '@logora/debate/hooks/use_auth_required';
+
+export const useFollow = (resourceName, followableId) => {
+    const api = useDataProvider();
+    const { isLoggedIn } = useAuth();
+	const requireAuthentication = useAuthRequired();
+    const [followActive, setFollowActive] = useState(false);
+
+    useEffect(() => {
+        if(isLoggedIn) {
+            getFollow();
+        }
+    }, [])
+
+    const getFollow = () => {
+        api.getOneWithToken("follows/" + resourceName, followableId).then(response => {
+            if (response.data.success) {
+                if (response.data.data.resource) {
+                    setFollowActive(true);
+                } else {
+                    setFollowActive(false);
+                }
+            }
+        }).catch(error => {
+            setFollowActive(false);
+        });
+    }
+
+    const followAction = () => {
+        if (followActive) {
+            api.delete("follows/" + resourceName, followableId).then(response => {
+                setFollowActive(false)
+            }, response => {
+                setFollowActive(false);
+            })
+        } else {
+            api.create("follows/" + resourceName + "/" + followableId, {}).then(response => {
+                setFollowActive(true);
+            }, response => {
+                setFollowActive(true);
+            })
+        }
+    }
+
+    const handleFollow = () => {
+        if (isLoggedIn) {
+            followAction();
+        } else {
+            requireAuthentication({});
+        }
+    }
+
+    return {
+        followActive,
+        handleFollow
+    };
+}

package/src/components/follow/use_follow/useFollow.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useFollow } from './useFollow';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import userEvent from '@testing-library/user-event';
+import { faker } from '@faker-js/faker';
+
+const httpClient = {
+    get: () => null,
+    post: (url, data, config) => {
+        return new Promise(function(resolve, reject) {
+            resolve({ data: { success: true, data: { resource: vote } }});
+        });
+    },
+    patch: () => null,
+    delete: (url, data, config) => {
+        return new Promise(function(resolve, reject) {
+            resolve({ data: { success: true, data: {} }});
+        });
+    }
+};
+
+const follow = { 
+    id: faker.number.int(),
+    type: faker.lorem.word(),
+};
+
+const currentUser = {
+    id: faker.number.int(),
+}
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const FollowWrapper = ({ children }) => (
+    <ConfigProvider config={{}}>
+      <DataProviderContext.Provider value={{ dataProvider: data }}>
+        <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+            <ModalProvider>
+                {children}
+            </ModalProvider>
+        </AuthContext.Provider>
+      </DataProviderContext.Provider>
+    </ConfigProvider>
+);
+
+describe('useFollow', () => {
+    it("should render correctly without action", () => {
+        const FollowButton = ({ followableId, followableType }) => {
+            const { followActive, handleFollow } = useFollow(followableType, followableId);
+            return (
+                <>
+                    <button onClick={() => handleFollow()} data-testid="follow"></button>
+                    {followActive ? <span>Followed</span> : <span>Not followed</span>}
+                </>
+            )
+        }
+
+        render(
+            <FollowWrapper>
+                <FollowButton followableType={follow.type} followableId={follow.id} />
+            </FollowWrapper>
+        )
+
+        expect(screen.getByText("Not followed"));
+    });
+
+    it("should render correctly with follow action", async () => {
+        const FollowButton = ({ followableId, followableType }) => {
+            const { followActive, handleFollow } = useFollow(followableType, followableId);
+            return (
+                <>
+                    <button onClick={() => handleFollow()} data-testid="follow"></button>
+                    {followActive ? <span>Followed</span> : <span>Not followed</span>}
+                </>
+            )
+        }
+
+        const {getByTestId } = render(
+            <FollowWrapper>
+                <FollowButton followableType={follow.type} followableId={follow.id} />
+            </FollowWrapper>
+        )
+
+        expect(screen.getByText("Not followed"));
+
+        const followButton = getByTestId("follow");
+        await userEvent.click(followButton);
+
+        expect(screen.getByText("Followed"));
+    });
+});

package/src/components/forms/form/extract-form-data.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+/**
+ * a method to extract form elements data from within a form element's submit event
+ */
+export function extractFormData(event) {
+  const formData = new FormData(event.currentTarget)?.entries();
+  const dataToSubmit = {};
+  for (let [key, value] of formData) {
+    if (!key) return;
+    dataToSubmit[key] = value;
+  }
+  return dataToSubmit;
+}

package/src/components/forms/form/form-context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const FormContext = createContext({});

package/src/components/forms/form/form.docs.mdx

@@ -0,0 +1,232 @@
+---
+description: A self validating form component with context.
+labels: ['form', 'context']
+---
+
+import { useEffect, useState, useCallback } from 'react';
+import { Form } from './form';
+import { useForm } from './use-form';
+
+This component is used to create self validated forms.
+It can be used to wrap form elements and thus provide them with a context which holds validation hooks that can be used by the nested elements.
+
+### The `useForm` hook:
+
+The `Form` exposes a `useForm` hook, which allows nested form elements to listen and interact with the form's context.
+
+```ts
+export type FormContextProps<T extends Record<string, any> = any> = {
+  onValidate?: (name: string, message: string | undefined) => void;
+  onBlur?: (event: FocusEvent<HTMLFormElement> | PartilaEvent) => void;
+  onChange?: (event: ChangeEvent<HTMLFormElement> | PartilaEvent) => void;
+  initialValues?: T;
+  loading?: boolean;
+  errors?: Record<keyof T, ErrorMessage>;
+  values?: T;
+};
+```
+
+### The `extractFormData` method:
+
+When submitting the form, you can use the `extractFormData` method for extracting the form's values and using them outside of the form.
+
+Just pass the `onSubmit` event.
+
+```ts
+function MyForm() {
+  function onSubmit(e) {
+    const data = extractFormData(e);
+    ...
+  }
+  <Form onSubmit={onSubmit}>
+    ...
+  </Form>
+}
+
+```
+
+### Create your own input:
+
+This input uses `useForm` directly to get the methods, `values` and `errors`.
+Further down is an example for when you want to create your own validation hook.
+
+:::note
+Each form element which is nested in the form needs a `name`, which is used as the key for the individual validation of that element.
+:::
+
+```ts live
+() => {
+  function EmailInputExample(props) {
+    const [message, setMessage] = useState(undefined);
+    const { onChange, onBlur, onValidate, values, errors } = useForm();
+
+    // get the value of the input by the `name` passed to it.
+    const value = values && values[props.name];
+
+    useEffect(() => {
+      // run any validations on the value in the input
+      // and update the message to be shown.
+      if (!value || value === '') return;
+
+      const emailRegEx = /\S+@\S+\.\S+/;
+      if (!emailRegEx.test(value)) {
+        return setMessage('Email should have only valid chars');
+      }
+      setMessage(undefined);
+    }, [value]);
+
+    useEffect(() => {
+      // update the form validation when changing error message
+      onValidate && onValidate(props.name, message);
+    }, [message, onValidate]);
+
+    return (
+      <>
+        <input required {...props} onChange={onChange} onBlur={onBlur} />
+        <div>{errors[props.name]}</div>
+      </>
+    );
+  }
+
+  return (
+    <Form>
+      <EmailInputExample
+        placeholder='input example'
+        name='input-example'
+        required
+      />
+      <Button />
+    </Form>
+  );
+
+  function Button() {
+    const { errors = {} } = useForm();
+    const isDisabled = Object.keys(errors).length > 0;
+    return <button disabled={isDisabled}>submit</button>;
+  }
+};
+```
+
+### Create a validation hook:
+
+This example creates a `useEmail` hook that is separate form the input.
+That way it can be used separately from the UI and reused anywhere.
+
+```ts
+function useEmail(name) {
+  const [message, setMessage] = useState(undefined);
+  const { onValidate, values, ...rest } = useForm();
+
+  // get the value of the input by the `name` passed to it.
+  const value = values && values[name];
+
+  useEffect(() => {
+    // run any validations on the value in the input and update the message to be shown.
+    if (!value || value === '') return;
+
+    const emailRegEx = /\S+@\S+\.\S+/;
+    if (!emailRegEx.test(value)) {
+      return setMessage('Email should have only valid chars');
+    }
+    setMessage(undefined);
+  }, [value]);
+
+  useEffect(() => {
+    // update the form validation when changing error message
+    onValidate && onValidate(name, message);
+  }, [message, onValidate]);
+
+  const handleBlur = useCallback(
+    ({ value, required, ...rest }) => {
+      if (!value || value === '') {
+        setMessage('Required');
+      }
+    },
+    [value]
+  );
+
+  return { message, handleBlur, value, ...rest };
+}
+```
+
+See it in action:
+
+```ts live
+() => {
+  // useEmail is a validation hook that can be exportred separately to it's own component.
+  function useEmail(name) {
+    const [message, setMessage] = useState(undefined);
+    const { onValidate, values, ...rest } = useForm();
+
+    // get the value of the input by the `name` passed to it.
+    const value = values && values[name];
+
+    useEffect(() => {
+      // run any validations on the value in the input and update the message to be shown.
+      if (!value || value === '') return;
+
+      const emailRegEx = /\S+@\S+\.\S+/;
+      if (!emailRegEx.test(value)) {
+        return setMessage('Email should have only valid chars');
+      }
+      setMessage(undefined);
+    }, [value]);
+
+    useEffect(() => {
+      // update the form validation when changing error message
+      onValidate && onValidate(name, message);
+    }, [message, onValidate]);
+
+    const handleBlur = useCallback(
+      ({ value, required, ...rest }) => {
+        if (!value || value === '') {
+          setMessage('Required');
+        }
+      },
+      [value]
+    );
+
+    return { message, handleBlur, value, ...rest };
+  }
+
+  // this input uses the `useEmail` hook
+
+  function EmailInputExample(props) {
+    const { message, handleBlur, onChange } = useEmail(props.name);
+    return (
+      <>
+        <input
+          required
+          {...props}
+          onChange={onChange}
+          onBlur={(e) => {
+            handleBlur({ name: e.target.name, value: e.target.value });
+          }}
+        />
+        <div>{message}</div>
+      </>
+    );
+  }
+
+  return (
+    <Form>
+      <EmailInputExample
+        placeholder='input example'
+        name='input-example'
+        required
+      />
+      <Button />
+    </Form>
+  );
+
+  function Button() {
+    const { errors = {} } = useForm();
+    const isDisabled = Object.keys(errors).length > 0;
+    return <button disabled={isDisabled}>submit</button>;
+  }
+};
+```
+
+:::note
+Also note how the `Button` at the bottom of the example uses the `useForm` hook to check if the form has any errors which should prevent it from submitting the form.
+:::

package/src/components/forms/form/form.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FormContext } from './form-context';
+import { useFormContext } from './use-form-context';
+
+export function Form({ children, onSubmit, onChange, ...rest }) {
+  const context = useFormContext();
+
+  return (
+    <FormContext.Provider value={context}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onSubmit && onSubmit(e, context.values)
+        }}
+        onChange={(e) => {
+          const target = e.target;
+          const nextValue = {[target.name]: target.value}
+          onChange && onChange(e, {...context.values, ...nextValue})
+        }}
+        {...rest}
+      >
+        {children}
+      </form>
+    </FormContext.Provider>
+  );
+}