@logora/debate 0.1.0 → 0.1.1

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

@@ -1,45 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
----
-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

@@ -1,102 +0,0 @@
-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

@@ -1,72 +0,0 @@
-@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

@@ -1,75 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

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

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

@@ -1,71 +0,0 @@
-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

@@ -1,31 +0,0 @@
----
-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}
-/>
-```