@logora/debate 0.1.0

package/src/components/input/search_input/SearchInput.stories.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { SearchInput } from './SearchInput';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const noop = () => {};
+
+export default {
+    title: 'Input/Search Input',
+    component: SearchInput,
+    args: {
+        onSearchSubmit: noop,
+        placeholder: 'Search',
+        reducedByDefault: false,
+        disabled: false
+    },
+    argTypes: {
+        onSearchSubmit: { control: false },
+        placeholder: { control: 'text' },
+        reducedByDefault: { control: 'boolean' },
+        disabled: { control: 'boolean' }
+    },
+    render: (args) => (
+        <IntlProvider locale="en">
+            <IconProvider library={regularIcons}>
+                <SearchInput {...args} />
+            </IconProvider>
+        </IntlProvider>
+    )
+};
+
+export const DefaultSearchInput = {};
+
+export const ReducedByDefaultSearchInput = {
+    args: {
+        reducedByDefault: true
+    }
+};
+
+export const DisabledSearchInput = {
+    args: {
+        disabled: true
+    }
+};

package/src/components/input/search_input/SearchInput.test.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import userEvent from '@testing-library/user-event';
+import { SearchInput } from './SearchInput';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const callback = vi.fn();
+
+describe('SearchInput', () => {
+    it('should render an input search', () => {
+        const searchInput = render(
+
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <SearchInput onSearchSubmit={callback} placeholder="Search" />
+                </IconProvider>
+            </IntlProvider>
+        );
+
+        expect(screen.getByText("Search")).toBeTruthy();
+    });
+
+    it('should call callback function on submit', async () => {
+        const placeholder = "Search for answers";
+        const searchInput = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <SearchInput onSearchSubmit={callback} placeholder={placeholder} />
+                </IconProvider>
+            </IntlProvider>
+        );
+
+        const input = screen.getByRole("textbox");
+
+        await userEvent.click(input);
+        await userEvent.keyboard("My query");
+        await userEvent.keyboard("[Enter]");
+
+        expect(input.tagName).toBe("INPUT");
+        expect(screen.getByText(placeholder)).toBeTruthy();
+        expect(callback).toHaveBeenCalled();
+        expect(input.value).toBe("My query");
+    });
+
+    it('should call callback function and reset query on reset', async () => {
+        const placeholder = "Search for answers";
+        const searchInput = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <SearchInput onSearchSubmit={callback} placeholder={placeholder} />
+                </IconProvider>
+            </IntlProvider>
+        );
+
+        const input = screen.getByRole("textbox");
+
+        await userEvent.click(input);
+        await userEvent.keyboard("My query");
+
+
+        const resetButton = screen.getByLabelText("Reset search");
+        await userEvent.click(resetButton);
+
+        expect(input.tagName).toBe("INPUT");
+        expect(screen.getByText(placeholder)).toBeTruthy();
+        expect(callback).toHaveBeenCalled();
+        expect(input.value).toBe("");
+    });
+
+    it('should call function when the search icon is clicked', async () => {
+        const placeholder = "Search for answers";
+        const searchInput = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <SearchInput onSearchSubmit={callback} placeholder={placeholder} />
+                </IconProvider>
+            </IntlProvider>
+        );
+
+        const input = screen.getByRole("textbox");
+
+        await userEvent.click(input);
+        await userEvent.keyboard("My query");
+
+        const submitButton = screen.getByLabelText("starts search");
+        await userEvent.click(submitButton);
+
+        expect(input.tagName).toBe("INPUT");
+        expect(screen.getByText(placeholder)).toBeTruthy();
+        expect(callback).toHaveBeenCalled();
+        expect(input.value).toBe("My query");
+    });
+});

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

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

package/src/components/input/select/Select.docs.mdx

@@ -0,0 +1,37 @@
+---
+description: A select input component.
+labels: ['select', 'input', 'dropdown']
+---
+
+A component that renders a select component with multiple options.
+
+Select options are passed as objects. An option can have keys : *dataTid, name, value* and *textKey*.
+
+Select is closed when user clicks outside it. A click on any child from the list also close the list.
+
+It should be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+import { Select } from '@logora/debate.input.select';
+```
+
+```js
+<Select  
+    options={([{
+        name: "Most recent", {/* required */}
+        value: "trending", {/* required */}
+        text: "Sort by newest", {/* required */}
+        dataTid: "action_sort_arguments_newest" {/* optional */}
+    },
+    {
+        name: "Most relevant",
+        value: "-created_at",
+        text: "Sort by oldest",
+        dataTid: "action_sort_arguments_relevant",
+    }])}
+    defaultOption={"trending"}
+    onChange={(option) => console.log(option)}
+/>
+```

package/src/components/input/select/Select.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react";
+import { Icon } from '@logora/debate/icons/icon';
+import { Dropdown } from '@logora/debate/dialog/dropdown';
+import styles from "./Select.module.scss";
+import cx from "classnames";
+import PropTypes from "prop-types";
+
+export const Select = ({ options, defaultOption, onChange, resetSelect = false, disabled = false, className, horizontalPosition = "left" }) => {
+	const defaultOptionValue = defaultOption ? options.filter(elm => elm.name === defaultOption)[0] : options[0];
+	const [currentOption, setCurrentOption] = useState(defaultOptionValue);
+
+	useEffect(() => {
+		if (resetSelect === true) {
+			setCurrentOption(defaultOptionValue);
+		}
+	}, [resetSelect]);
+
+	useEffect(() => {
+		if (defaultOption) {
+			setCurrentOption(options.filter(elm => elm.name === defaultOption)[0]);
+		}
+	}, [defaultOption]);
+
+	const handleSelectOption = (option) => {
+		setCurrentOption(option);
+		if (onChange) {
+			onChange(option);
+		}
+	};
+
+	const handleKeyDown = (e) => {
+		const current = e.currentTarget;
+		switch (e.key) {
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				current.click();
+				break;
+
+			case 'ArrowDown':
+				e.preventDefault();
+				current.nextElementSibling?.focus();
+				break;
+
+			case 'ArrowUp':
+				e.preventDefault();
+				current.previousElementSibling?.focus();
+				break;
+		}
+	};
+
+	const displayOption = (option) => {
+		const isSelected = currentOption?.name === option.name;
+		return (
+			option.name !== "" &&
+			<div
+				role="option"
+				aria-selected={isSelected}
+				tabIndex={0}
+				className={cx(styles.selectOption, { [styles.selectOptionActive]: isSelected })}
+				key={option.value}
+				value={option.value}
+				data-tid={option.dataTid}
+				onClick={() => handleSelectOption(option)}
+				onKeyDown={handleKeyDown}
+			>
+				{option.text}
+			</div>
+		);
+	};
+	return (
+		<div className={styles.selectContainer}>
+			<Dropdown horizontalPosition={horizontalPosition}>
+				<div className={cx(styles.selectInput, { [className]: className, [styles.disabled]: disabled })}>
+					<span className={styles.currentOptionText}>{currentOption?.text}</span>{" "}
+					<Icon name="lightArrow" className={styles.arrowDown} height={10} width={10} />
+				</div>
+				{!disabled && (
+					<div role="listbox">
+						{options.map(displayOption)}
+					</div>
+				)}
+			</Dropdown>
+		</div>
+	);
+};
+Select.propTypes = {
+	/** An array of options to select */
+	options: PropTypes.array.isRequired,
+	/** Option to display as default */
+	defaultOption: PropTypes.any,
+	/** Callback function triggered when clicking on an option */
+	onChange: PropTypes.func,
+	/** If true, will reset to default option */
+	resetSelect: PropTypes.bool,
+	/** Disable input */
+	disabled: PropTypes.bool,
+	/**  Class name to style the input */
+	className: PropTypes.string,
+	/** Dropdown horizontal alignment, can be left, center or right */
+	horizontalPosition: PropTypes.string
+};

package/src/components/input/select/Select.module.scss

@@ -0,0 +1,72 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.selectContainer {
+	display: flex !important;
+  	justify-content: left !important;
+	@include spacing.px(0, xs);
+	cursor: pointer;
+	@include display.media-breakpoint-up(sm) {
+		display: block !important;
+	}
+}
+
+.selectInput {
+	@include spacing.px(3, xs);
+	@include spacing.py(2.5, xs);
+	background-color: theme.$background-color-primary;
+	border-radius: theme.$button-border-radius;
+	border: theme.$button-border;
+	transition: background-color 0.3s;
+	min-width: 130px;
+	display: flex !important;
+	align-items: center !important;
+	&.span {
+		@include spacing.mr(1, xs);
+		align-self: flex-end;
+	}
+	&:hover {
+		border: 1px solid theme.$text-secondary;
+	}
+	svg {
+		margin-left: auto;
+	}
+	&::first-letter {
+		text-transform: capitalize;
+	}
+	&.disabled {
+		cursor: not-allowed;
+		background-color: theme.$text-tertiary;
+		border: 1px solid theme.$darken-text-tertiary;
+		& ~ label {
+		  color: theme.$darkest-text-tertiary;
+		}
+	}
+}
+
+.currentOptionText { 
+	@include spacing.mr(2, xs);
+	@include display.text-truncate();
+}
+
+.selectOption {
+	@include spacing.px(3, xs);
+	@include spacing.py(2, xs);
+	transition: background-color 0.3s;
+	&:hover {
+		background-color: rgba(0, 0, 0, 0.03);
+	}
+	&::first-letter {
+		text-transform: capitalize;
+	}
+}
+
+.selectOptionActive {
+	background-color: theme.$darken-text-tertiary;
+	color: theme.$text-primary;
+}
+
+.arrowDown {
+	flex-shrink: 0;
+}

package/src/components/input/select/Select.stories.jsx

@@ -0,0 +1,75 @@
+export default {
+    title: 'Input/Select',
+    component: Select,
+    args: {
+        options: undefined,
+        defaultOption: undefined,
+        horizontalPosition: 'left',
+        disabled: false
+    },
+    argTypes: {
+        options: { control: 'object' },
+        defaultOption: { control: 'text' },
+        horizontalPosition: { control: 'select', options: ['left', 'right'] },
+        disabled: { control: 'boolean' }
+    }
+};
+
+import React from 'react';
+import { Select } from './Select';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const options = [
+    {
+        dataTid: "action_sort_arguments_newest",
+        name: "recency",
+        value: "trending",
+        text: "Most recent"
+    },
+    {
+        dataTid: "action_sort_arguments_relevant",
+        name: "relevance",
+        value: "-created_at",
+        text: "Most relevant"
+    },
+    {
+        dataTid: "action_sort_arguments_oldest",
+        name: "oldest",
+        value: "+created_at",
+        text: "Oldest"
+    }
+]
+
+export const DefaultSelect = () => {
+    return (
+        <IconProvider library={regularIcons}>
+            <Select options={options} />
+        </IconProvider>
+    )
+};
+
+export const SelectWithDefault = () => {
+    return (
+        <IconProvider library={regularIcons}>
+            <Select options={options} defaultOption={"relevance"} />
+        </IconProvider>
+    )
+};
+
+export const SelectWithRightOptions = () => {
+    return (
+        <IconProvider library={regularIcons}>
+            <Select options={options} horizontalPosition={"right"} />
+        </IconProvider>
+    )
+};
+
+export const DisabledSelect = () => {
+    return (
+        <IconProvider library={regularIcons}>
+            <Select options={options} disabled />
+        </IconProvider>
+    )
+};
+

package/src/components/input/select/Select.test.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Select } from './Select';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const options = [
+    {
+        dataTid:"action_sort_arguments_newest",
+        name:"Option 1",
+        value:"trending",
+        text: "Option 1"
+    },
+    {
+        dataTid:"action_sort_arguments_relevant",
+        name:"Option 2",
+        value:"-created_at",
+        text: "Option 2"
+    },
+    {
+        dataTid:"action_sort_arguments_oldest",
+        name:"Option 3",
+        value:"+created_at",
+        text: "Option 3"
+    }
+]
+
+describe('Select', () => {
+    it('should render a dropdown with first option text', () => {
+        const dropdown = render(
+            <IconProvider library={regularIcons}>
+                <Select options={options} /> 
+            </IconProvider>
+        );
+        const renderedFirstOption = dropdown.getByText(/Option 1/i);
+        expect(renderedFirstOption).toBeTruthy();
+        expect(dropdown.queryByText(/Option 2/i)).toBeNull();
+        expect(dropdown.queryByText(/Option 3/i)).toBeNull();
+    });
+
+    it('should display all options when clicking on title', async () => {
+        const dropdown = render(
+            <IconProvider library={regularIcons}>
+                <Select options={options} /> 
+            </IconProvider>
+        );
+        const dropdownFirstOption = dropdown.getByText(/Option 1/i);
+        expect(dropdown.queryByText(/Option 2/i)).toBeNull();
+        expect(dropdown.queryByText(/Option 3/i)).toBeNull();
+
+        await userEvent.click(dropdownFirstOption);
+        expect(dropdown.getByText(/Option 2/i)).toBeTruthy();
+        expect(dropdown.getByText(/Option 3/i)).toBeTruthy();
+    });
+
+    it('should not display options on click if disabled', async () => {
+        const dropdown = render(
+            <IconProvider library={regularIcons}>
+                <Select disabled options={options} /> 
+            </IconProvider>
+        );
+        const dropdownFirstOption = dropdown.getByText(/Option 1/i);
+        expect(dropdown.queryByText(/Option 2/i)).toBeNull();
+        expect(dropdown.queryByText(/Option 3/i)).toBeNull();
+        
+        await userEvent.click(dropdownFirstOption);
+        expect(dropdown.queryByText(/Option 2/i)).toBeNull();
+        expect(dropdown.queryByText(/Option 3/i)).toBeNull();
+    });
+
+    it('should close on option click', async () => {
+        const dropdown = render(
+            <IconProvider library={regularIcons}>
+                <Select options={options} /> 
+            </IconProvider>
+        );
+
+        await userEvent.click(dropdown.getByText(/Option 1/i));
+        
+        expect(dropdown.getByText(/Option 2/i)).toBeTruthy();
+        expect(dropdown.getByText(/Option 3/i)).toBeTruthy();
+
+        await userEvent.click(dropdown.getByText(/Option 2/i));
+
+        expect(dropdown.queryByText(/Option 1/i)).toBeNull();
+        expect(dropdown.queryByText(/Option 3/i)).toBeNull();
+    });
+
+    it('should close on click outside', async () => {
+        const dropdown = render(
+            <IconProvider library={regularIcons}>
+                <Select options={options} /> 
+            </IconProvider>
+        );
+
+        await userEvent.click(dropdown.getByText(/Option 1/i));
+        
+        expect(dropdown.getByText(/Option 2/i)).toBeTruthy();
+        expect(dropdown.getByText(/Option 3/i)).toBeTruthy();
+
+        await userEvent.click(document.body);
+
+        expect(dropdown.queryByText(/Option 2/i)).toBeNull();
+        expect(dropdown.queryByText(/Option 3/i)).toBeNull();
+    });
+
+    it('should call onChange when clicking on option', async () => {
+        const callback = vi.fn();
+
+        const dropdown = render(
+            <IconProvider library={regularIcons}>
+                <Select onChange={callback} options={options} /> 
+            </IconProvider>
+        );
+
+        await userEvent.click(dropdown.getByText(/Option 1/i));
+        await userEvent.click(dropdown.getByText(/Option 2/i));
+
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(dropdown.queryByText(/Option 1/i)).toBeNull();
+        expect(dropdown.queryByText(/Option 3/i)).toBeNull();
+    });
+
+    it('should display default option', () => {
+        const { getByText, queryByText } = render(
+            <IconProvider library={regularIcons}>
+                <Select options={options} defaultOption={"Option 2"} /> 
+            </IconProvider>
+        );
+        
+        expect(getByText(/Option 2/i)).toBeTruthy();
+        expect(queryByText(/Option 1/i)).toBeNull();
+        expect(queryByText(/Option 3/i)).toBeNull();
+    });
+});

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

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

package/src/components/input/text_editor/EditorTheme.js

@@ -0,0 +1,71 @@
+import styles from './TextEditor.module.scss';
+
+const exampleTheme = {
+    ltr: styles.ltr,
+    rtl: styles.rtl,
+    placeholder: styles.editorPlaceholder,
+    paragraph: styles.editorParagraph,
+    quote: styles.editorQuote,
+    heading: {
+      h1: styles.editorHeadingH1,
+      h2: styles.editorHeadingH2,
+      h3: styles.editorHeadingH3,
+      h4: styles.editorHeadingH4,
+      h5: styles.editorHeadingH5
+    },
+    list: {
+      nested: {
+        listitem: styles.editorNestedListItem,
+      },
+      ol: styles.editorListOl,
+      ul: styles.editorListUl,
+      listitem: styles.editorListItem
+    },
+    image: styles.editorTextImage,
+    link: styles.editorTextLink,
+    text: {
+      bold: styles.editorTextBold,
+      italic: styles.editorTextItalic,
+      overflowed: styles.editorTextOverflowed,
+      hashtag: styles.editorTextHashtag,
+      underline: styles.editorTextUnderline,
+      strikethrough: styles.editorTextStrikethrough,
+      underlineStrikethrough: styles.editorTextUnderlineStrikethrough,
+      code: styles.editorTextCode
+    },
+    code: styles.editorCode,
+    codeHighlight: {
+      atrule: styles.editorTokenAttr,
+      attr: styles.editorTokenAttr,
+      boolean: styles.editorTokenProperty,
+      builtin: styles.editorTokenSelector,
+      cdata: styles.editorTokenComment,
+      char: styles.editorTokenSelector,
+      class: styles.editorTokenFunction,
+      "class-name": styles.editorTokenFunction,
+      comment: styles.editorTokenComment,
+      constant: styles.editorTokenProperty,
+      deleted: styles.editorTokenProperty,
+      doctype: styles.editorTokenComment,
+      entity: styles.editorTokenOperator,
+      function: styles.editorTokenFunction,
+      important: styles.editorTokenVariable,
+      inserted: styles.editorTokenSelector,
+      keyword: styles.editorTokenAttr,
+      namespace: styles.editorTokenVariable,
+      number: styles.editorTokenProperty,
+      operator: styles.editorTokenOperator,
+      prolog: styles.editorTokenComment,
+      property: styles.editorTokenProperty,
+      punctuation: styles.editorTokenPunctuation,
+      regex: styles.editorTokenVariable,
+      selector: styles.editorTokenSelector,
+      string: styles.editorTokenSelector,
+      symbol: styles.editorTokenProperty,
+      tag: styles.editorTokenProperty,
+      url: styles.editorTokenOperator,
+      variable: styles.editorTokenVariable
+    }
+  };
+  
+export default exampleTheme;

package/src/components/input/text_editor/TextEditor.docs.mdx

@@ -0,0 +1,31 @@
+---
+description: A text editor component.
+labels: ['input', 'text editor']
+---
+
+import { TextEditor } from './TextEditor';
+
+A component that renders a input for text edition with rich content options : 
+- bold
+- italic
+- underline
+- quote
+- ordered list
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+import TextEditor from "@logora/debate.input.text_editor";
+```
+
+```js
+<TextEditor 
+    handleChange={handleChange}
+    placeholder={"Your placeholder"}
+    onSubmit={(textContent, richContent, sources) => console.log(textContent)}
+    onActivation={() => console.log("Activated !")}
+    disabled={false}
+/>
+```