@logora/debate 0.1.0

package/src/components/input/argument_input/ArgumentInput.stories.jsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { IntlProvider } from 'react-intl';
+import { faker } from '@faker-js/faker';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { InputProvider } from '@logora/debate/input/input_provider';
+import { ArgumentInput } from './ArgumentInput';
+
+const vote = {
+  id: faker.number.int(),
+  voteable_type: faker.lorem.word(),
+  voteable_id: faker.number.int(),
+  user_id: faker.number.int()
+};
+
+const httpClient = {
+  get: () => null,
+  post: () => Promise.resolve({ data: { success: true, data: { resource: vote } } }),
+  patch: () => null,
+  delete: () => Promise.resolve({ data: { success: true, data: {} } })
+};
+
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+const debate = {
+  id: faker.number.int(),
+  name: faker.lorem.word(),
+  positions: [
+    {
+      id: faker.number.int(),
+      name: faker.lorem.word()
+    },
+    {
+      id: faker.number.int(),
+      name: faker.lorem.word()
+    }
+  ]
+};
+
+const currentUser = {
+  id: faker.number.int(),
+  full_name: faker.person.fullName(),
+  image_url: faker.image.avatarGitHub(),
+  points: faker.number.int()
+};
+
+const defaultArgs = {
+  onSubmit: () => {},
+  groupId: debate.id,
+  groupName: debate.name,
+  positions: debate.positions,
+  disabledPositions: [],
+  listId: 'argumentList',
+  positionId: debate.positions[0].id,
+  hideSourceAction: false,
+  avatarSize: 48,
+  placeholder: 'Add an argument...',
+  disabled: false,
+  isReply: false,
+  focusOnInit: false,
+  userGuideUrl: ''
+};
+
+const Providers = ({ children, isLoggedIn = true, config = {} }) => (
+  <BrowserRouter>
+    <ConfigProvider config={config}>
+      <IconProvider library={regularIcons}>
+        <IntlProvider locale='en'>
+          <DataProviderContext.Provider value={{ dataProvider: data }}>
+            <AuthContext.Provider value={{ currentUser, isLoggedIn }}>
+              <ToastProvider>
+                <ModalProvider>
+                  <ListProvider>
+                    <InputProvider>{children}</InputProvider>
+                  </ListProvider>
+                </ModalProvider>
+              </ToastProvider>
+            </AuthContext.Provider>
+          </DataProviderContext.Provider>
+        </IntlProvider>
+      </IconProvider>
+    </ConfigProvider>
+  </BrowserRouter>
+);
+
+export default {
+  title: 'Input/Argument Input',
+  component: ArgumentInput,
+  args: defaultArgs,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    isReply: { control: 'boolean' },
+    hideSourceAction: { control: 'boolean' },
+    focusOnInit: { control: 'boolean' },
+    avatarSize: { control: { type: 'number', min: 24, max: 80, step: 2 } },
+    placeholder: { control: 'text' },
+    userGuideUrl: { control: 'text' },
+    maxLength: { control: 'number' },
+    positions: { control: 'object' },
+    disabledPositions: { control: 'object' },
+    onSubmit: { control: false }
+  },
+  render: (args) => (
+    <Providers>
+      <ArgumentInput {...args} />
+    </Providers>
+  )
+};
+
+export const DefaultArgumentInput = {};
+
+export const ReplyArgumentInput = {
+  args: {
+    isReply: true,
+    avatarSize: 40,
+    placeholder: 'Your reply...'
+  }
+};
+
+export const ArgumentInputWithoutSourceAction = {
+  args: {
+    hideSourceAction: true
+  }
+};
+
+export const ArgumentInputDisabled = {
+  args: {
+    disabled: true,
+    hideSourceAction: true
+  }
+};
+
+export const ArgumentPositionDisabled = {
+  args: {
+    disabledPositions: [{ id: debate.positions[0].id, name: debate.positions[0].name }],
+    hideSourceAction: true
+  }
+};
+
+export const DisabledArgumentInputForVisitors = {
+  render: (args) => (
+    <Providers isLoggedIn={false} config={{ actions: { disableInputForVisitor: true }, auth: { type: 'social' } }}>
+      <ArgumentInput {...args} />
+    </Providers>
+  )
+};
+
+export const FocusOnInitArgumentInput = {
+  args: {
+    focusOnInit: true,
+    hideSourceAction: true
+  }
+};
+
+export const ArgumentInputWithoutPositions = {
+  args: {
+    positions: [],
+    positionId: null
+  }
+};
+
+export const ArgumentInputWithGuideMessageLink = {
+  args: {
+    userGuideUrl: 'https://example.com/user-guide'
+  }
+};
+
+export const ArgumentInputWithTooltipOnSourcesButton = {
+  render: (args) => (
+    <Providers config={{ allowed_sources: ['https://yes.com'] }}>
+      <ArgumentInput {...args} />
+    </Providers>
+  )
+};

package/src/components/input/argument_input/ArgumentInput.test.jsx

@@ -0,0 +1,482 @@
+import React from "react";
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ArgumentInput } from "./ArgumentInput";
+import { BrowserRouter } from "react-router-dom";
+import { ConfigProvider } from "@logora/debate/data/config_provider";
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { IntlProvider } from "react-intl";
+import { faker } from '@faker-js/faker';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { InputProvider, useInput } from '@logora/debate/input/input_provider';
+
+vi.mock('@lexical/react/LexicalErrorBoundary', () => ({
+    LexicalErrorBoundary: ({ children }) => children,
+}));
+
+const httpClient = {
+    get: () => null,
+    post: (url, data, config) => {
+        return new Promise(function (resolve, reject) {
+            resolve({ data: { success: true, data: { resource: argument } } });
+        });
+    },
+    patch: () => null,
+    delete: (url, data, config) => {
+        return new Promise(function (resolve, reject) {
+            resolve({ data: { success: true, data: {} } });
+        });
+    }
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const debate = {
+    id: faker.number.int(),
+    name: faker.lorem.word(),
+    positions: [
+        {
+            id: faker.number.int(),
+            name: faker.lorem.word(),
+        },
+        {
+            id: faker.number.int(),
+            name: faker.lorem.word(),
+        }
+    ],
+
+}
+
+const argument = {
+    position: {
+        id: debate.positions[0].id
+    }
+}
+
+const currentUser = {
+    id: faker.number.int(),
+    full_name: faker.person.fullName(),
+    image_url: faker.image.avatarGitHub(),
+    points: faker.number.int()
+}
+
+const callback = vi.fn();
+
+describe("ArgumentInput", () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: vi.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: vi.fn(),
+                removeListener: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+                dispatchEvent: vi.fn(),
+            })),
+        });
+        const proto = globalThis.HTMLDialogElement?.prototype;
+        if (proto && !proto.showModal) {
+            Object.defineProperty(proto, "showModal", {
+                configurable: true,
+                value: function () {
+                    this.setAttribute("open", "");
+                },
+            });
+        }
+        if (proto && !proto.close) {
+            Object.defineProperty(proto, "close", {
+                configurable: true,
+                value: function () {
+                    this.removeAttribute("open");
+                    this.dispatchEvent(new Event("close"));
+                },
+            });
+        }
+    });
+
+    it("should render correctly", () => {
+        const { queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <ToastProvider>
+                                        <ModalProvider>
+                                            <ListProvider>
+
+                                                <InputProvider>
+                                                    <ArgumentInput
+                                                        onSubmit={callback}
+                                                        groupId={debate.id}
+                                                        groupName={debate.name}
+                                                        positions={debate.positions}
+                                                        disabledPositions={[]}
+                                                        listId={"argumentList"}
+                                                        positionId={debate.positions[0].id}
+                                                        hideSourceAction={false}
+                                                        avatarSize={48}
+                                                        placeholder={"Add an argument..."}
+                                                    />
+                                                </InputProvider>
+
+                                            </ListProvider>
+                                        </ModalProvider>
+                                    </ToastProvider>
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(queryByText(debate.positions[0].name)).toBeInTheDocument();
+        expect(queryByText(debate.positions[1].name)).toBeInTheDocument();
+        expect(queryByText(currentUser.full_name)).toBeInTheDocument();
+        expect(queryByText("Add an argument...")).toBeInTheDocument();
+        expect(queryByText("Your position")).toBeInTheDocument();
+    });
+
+    it("should render correctly if is reply", () => {
+        const { queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <ToastProvider>
+                                        <ModalProvider>
+                                            <ListProvider>
+
+                                                <InputProvider>
+                                                    <ArgumentInput
+                                                        onSubmit={callback}
+                                                        groupId={debate.id}
+                                                        groupName={debate.name}
+                                                        positions={debate.positions}
+                                                        disabledPositions={[]}
+                                                        listId={"argumentList"}
+                                                        positionId={debate.positions[0].id}
+                                                        hideSourceAction={false}
+                                                        avatarSize={40}
+                                                        isReply
+                                                        placeholder={"Your reply..."}
+                                                    />
+                                                </InputProvider>
+
+                                            </ListProvider>
+                                        </ModalProvider>
+                                    </ToastProvider>
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(queryByText("Your reply...")).toBeInTheDocument();
+        expect(queryByText(debate.positions[0].name)).toBeInTheDocument();
+        expect(queryByText(debate.positions[1].name)).toBeInTheDocument();
+        expect(queryByText(currentUser.full_name)).not.toBeInTheDocument();
+    });
+
+    it("should be disabled", () => {
+        const { queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <ToastProvider>
+                                        <ModalProvider>
+                                            <ListProvider>
+
+                                                <InputProvider>
+                                                    <ArgumentInput
+                                                        onSubmit={callback}
+                                                        groupId={debate.id}
+                                                        groupName={debate.name}
+                                                        positions={debate.positions}
+                                                        disabledPositions={[]}
+                                                        disabled
+                                                        listId={"argumentList"}
+                                                        positionId={debate.positions[0].id}
+                                                        hideSourceAction={false}
+                                                        avatarSize={48}
+                                                        placeholder={"Add an argument..."}
+                                                    />
+                                                </InputProvider>
+
+                                            </ListProvider>
+                                        </ModalProvider>
+                                    </ToastProvider>
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(queryByText("Debate is closed")).toBeInTheDocument();
+    });
+
+    it("should display side modal if the disabledPositions is set", async () => {
+        const { queryByText, getByText, getByTestId } = render(
+            <BrowserRouter>
+                <ConfigProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <ToastProvider>
+                                        <ModalProvider>
+                                            <ListProvider>
+
+                                                <InputProvider>
+                                                    <ArgumentInput
+                                                        onSubmit={() => { }}
+                                                        groupId={debate.id}
+                                                        groupName={debate.name}
+                                                        positions={debate.positions}
+                                                        disabledPositions={[{ id: debate.positions[0].id, name: debate.positions[0].name }]}
+                                                        listId={"argumentList"}
+                                                        positionId={debate.positions[0].id}
+                                                        hideSourceAction
+                                                        avatarSize={48}
+                                                        placeholder={"Add an argument..."}
+                                                    />
+                                                </InputProvider>
+
+                                            </ListProvider>
+                                        </ModalProvider>
+                                    </ToastProvider>
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(queryByText("Add an argument...")).toBeInTheDocument();
+        expect(queryByText(debate.positions[0].name)).toBeInTheDocument();
+        expect(queryByText(debate.positions[1].name)).toBeInTheDocument();
+
+        const onSubmit = getByTestId('submit-button');
+        expect(onSubmit).toBeInTheDocument();
+        await act(async () => { await userEvent.click(onSubmit) });
+    });
+
+    it("should display error if the validation rules are not met", async () => {
+        const targetContent = { "root": { "children": [{ "children": [{ "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "I write", "type": "text", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "paragraph", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "root", "version": 1 } };
+        const targetUrlContent = { "root": { "children": [{ "children": [{ "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "I write https://mysite.com", "type": "text", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "paragraph", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "root", "version": 1 } };
+
+        const AddContentComponent = () => {
+            const { setInputRichContent } = useInput();
+
+            const setShortContent = (event) => {
+                setInputRichContent(targetContent);
+            }
+
+            const setUrlContent = (event) => {
+                setInputRichContent(targetUrlContent);
+            }
+
+            return (
+                <>
+                    <div onClick={setShortContent}>Click to set short content</div>
+                    <div onClick={setUrlContent}>Click to set url content</div>
+                </>
+            )
+        }
+
+        const { getByTestId, queryByText, getByRole } = render(
+            <BrowserRouter>
+                <ConfigProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <ToastProvider>
+                                        <ModalProvider>
+                                            <ListProvider>
+
+                                                <InputProvider>
+                                                    <AddContentComponent />
+                                                    <ArgumentInput
+                                                        onSubmit={callback}
+                                                        groupId={debate.id}
+                                                        groupName={debate.name}
+                                                        positions={debate.positions}
+                                                        disabledPositions={[]}
+                                                        disabled
+                                                        listId={"argumentList"}
+                                                        positionId={debate.positions[0].id}
+                                                        hideSourceAction={false}
+                                                        avatarSize={48}
+                                                        placeholder={"Add an argument..."}
+                                                    />
+                                                </InputProvider>
+
+                                            </ListProvider>
+                                        </ModalProvider>
+                                    </ToastProvider>
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        const input = getByTestId("argument-input");
+        await userEvent.click(input);
+
+        const onSubmit = getByTestId('submit-button');
+
+        // Empty content
+        await act(async () => { await userEvent.click(onSubmit) });
+        expect(queryByText("content can't be empty.")).toBeInTheDocument();
+
+        // Short content
+        const setContentButton = screen.getByText("Click to set short content");
+        await act(async () => { await userEvent.click(setContentButton) });
+        expect(queryByText("I write")).toBeInTheDocument();
+
+        await act(async () => { await userEvent.click(onSubmit) });
+        expect(queryByText("content is too short. It must be at least 3 long.")).toBeInTheDocument();
+
+        // Url content
+        const setUrlContentButton = screen.getByText("Click to set url content");
+        await act(async () => { await userEvent.click(setUrlContentButton) });
+        expect(queryByText("I write https://mysite.com")).toBeInTheDocument();
+        expect(queryByText("content must not contain any links")).toBeInTheDocument();
+
+        // await act(async () => { await userEvent.click(onSubmit) });
+    });
+
+    it("should call submit callback", async () => {
+        const targetContent = { "root": { "children": [{ "children": [{ "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "I write an argument", "type": "text", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "paragraph", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "root", "version": 1 } };
+
+        const AddContentComponent = () => {
+            const { setInputRichContent } = useInput();
+
+            const setContent = (event) => {
+                setInputRichContent(targetContent);
+            }
+
+            return (
+                <>
+                    <div onClick={setContent}>Click to set content</div>
+                </>
+            )
+        }
+
+        const { getByTestId, queryByText, getByRole } = render(
+            <BrowserRouter>
+                <ConfigProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <ToastProvider>
+                                        <ModalProvider>
+                                            <ListProvider>
+
+                                                <InputProvider>
+                                                    <AddContentComponent />
+                                                    <ArgumentInput
+                                                        onSubmit={callback}
+                                                        groupId={debate.id}
+                                                        groupName={debate.name}
+                                                        positions={debate.positions}
+                                                        disabledPositions={[]}
+                                                        disabled
+                                                        listId={"argumentList"}
+                                                        positionId={debate.positions[0].id}
+                                                        hideSourceAction={false}
+                                                        avatarSize={48}
+                                                        placeholder={"Add an argument..."}
+                                                    />
+                                                </InputProvider>
+
+                                            </ListProvider>
+                                        </ModalProvider>
+                                    </ToastProvider>
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        const input = getByTestId("argument-input");
+        await act(async () => { await userEvent.click(input) });
+
+        const setContentButton = screen.getByText("Click to set content");
+        await act(async () => { await userEvent.click(setContentButton) });
+        expect(queryByText("I write an argument")).toBeInTheDocument();
+
+        const onSubmit = getByTestId('submit-button');
+        await act(async () => { await userEvent.click(onSubmit) });
+        expect(callback).toHaveBeenCalled();
+    });
+
+    it("should render correctly when there is no position", () => {
+        const { queryByText } = render(
+            <BrowserRouter>
+                <ConfigProvider>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <ToastProvider>
+                                        <ModalProvider>
+                                            <ListProvider>
+
+                                                <InputProvider>
+                                                    <ArgumentInput
+                                                        onSubmit={callback}
+                                                        groupId={debate.id}
+                                                        groupName={debate.name}
+                                                        positions={[]}
+                                                        disabledPositions={[]}
+                                                        listId={"argumentList"}
+                                                        positionId={null}
+                                                        hideSourceAction={false}
+                                                        avatarSize={48}
+                                                        placeholder={"Add an argument..."}
+                                                    />
+                                                </InputProvider>
+
+                                            </ListProvider>
+                                        </ModalProvider>
+                                    </ToastProvider>
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </BrowserRouter>
+        );
+
+        expect(queryByText("Add an argument...")).toBeInTheDocument();
+        expect(queryByText("Your position")).not.toBeInTheDocument();
+    });
+});
+

package/src/components/input/argument_input/index.js

@@ -0,0 +1 @@
+export { ArgumentInput as default } from "./ArgumentInput";

package/src/components/input/checkbox/hidden/hidden-checkbox.docs.mdx

@@ -0,0 +1,4 @@
+A completely invisible implementation of the `<Input type="checkbox"/>` element. The component should still be accessible by screen readers and keyboad navigation.
+Use the *Indicator component* to create a full custom visual checkbox.
+
+Try checking it in the example below using your keyboard:

package/src/components/input/checkbox/hidden/hidden-checkbox.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import classnames from 'classnames';
+import styles from './hidden-checkbox.module.scss';
+
+/** Hidden but interactive checkbox */
+export function HiddenCheckbox({ className, type = 'checkbox', ...rest }) {
+	return <input {...rest} type={type} className={classnames(className, styles.hidden)} />;
+}