@logora/debate 0.1.0

package/src/components/input/checkbox/hidden/hidden-checkbox.module.scss

@@ -0,0 +1,28 @@
+.hidden {
+  pointer-events: none;
+  overflow: hidden;
+  // opacity hinder accessibility. (consider replacing in the future)
+  opacity: 0;
+
+  // pos: abs removes the element from the normal flow,
+  // collapsing the space it occupies,
+  // without hindering screen readers, and focus.
+  // (this is important in Firefox where checkbox takes a min size of 4px)
+  position: absolute;
+
+  // minimize, without removing from dom:
+  outline: 0;
+  margin: 0 -1px 0 0; // compensate the input's size
+  border: 0;
+  width: 1px;
+  height: 1px;
+  background: none;
+  padding: 0;
+}
+
+// rules not to apply,
+// as screen readers will ignore them:
+
+// visibility: hidden;
+// display: none;
+// width: 0; height: 0;

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

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { HiddenCheckbox } from './hidden-checkbox';
+
+const meta = {
+	title: 'Input/Checkbox/Hidden',
+	component: HiddenCheckbox,
+	args: {
+		defaultChecked: false
+	},
+	argTypes: {
+		defaultChecked: {
+			control: 'boolean'
+		}
+	},
+	render: ({ defaultChecked }) => {
+		const [active, setActive] = useState(defaultChecked);
+		const [focused, setFocused] = useState(false);
+
+		return (
+			<div>
+				<HiddenCheckbox
+					defaultChecked={defaultChecked}
+					onChange={(e) => setActive(e.currentTarget.checked)}
+					onFocus={() => setFocused(true)}
+					onBlur={() => setFocused(false)}
+				/>
+				<div>
+					{active ? 'checked' : 'unchecked'} {focused ? '· focused' : ''}
+				</div>
+			</div>
+		);
+	}
+};
+
+export default meta;
+
+export const Preview = () => {
+	const [active, setActive] = useState(false);
+	const [focused, setFocused] = useState(false);
+
+	return (
+		<div>
+			<HiddenCheckbox
+				onChange={(e) => setActive(e.currentTarget.checked)}
+				onFocus={() => setFocused(true)}
+				onBlur={() => setFocused(false)}
+			/>
+			<div>
+				{active ? 'checked' : 'unchecked'} {focused ? '· focused' : ''}
+			</div>
+		</div>
+	);
+};
+
+export const Checked = () => {
+	const [active, setActive] = useState(true);
+	const [focused, setFocused] = useState(false);
+
+	return (
+		<div>
+			<HiddenCheckbox
+				defaultChecked={true}
+				onChange={(e) => setActive(e.currentTarget.checked)}
+				onFocus={() => setFocused(true)}
+				onBlur={() => setFocused(false)}
+			/>
+			<div>
+				{active ? 'checked' : 'unchecked'} {focused ? '· focused' : ''}
+			</div>
+		</div>
+	);
+};
+

package/src/components/input/checkbox/hidden/index.js

@@ -0,0 +1 @@
+export { HiddenCheckbox } from './hidden-checkbox';

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

@@ -0,0 +1,9 @@
+Easy styling for the native `<input type="checkbox"/>` tag, using the `input +` css selector. 
+This component will mirror a checkbox preceeding it, and mimic its state.
+
+Default styles include the following attributes:
+- checked / unchecked
+- disabled
+- focus
+
+Use the `className` prop to replace the default styles.

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import classnames from 'classnames';
+import styles from './checkbox-indicator.module.scss';
+
+export const classes = {
+	checkedIndicator: styles.checkedIndicator,
+	defaultCheckbox: styles.defaultCheckbox,
+};
+
+/**
+ * 'Vanilla' base component for checkbox indicator. Mirrors preceding checkbox.
+ */
+export function CheckboxIndicator(props) {
+	const { className = classes.defaultCheckbox } = props;
+
+	return <span {...props} className={classnames(className, classes.checkedIndicator)} />;
+}

package/src/components/input/checkbox/indicator/checkbox-indicator.module.scss

@@ -0,0 +1,26 @@
+.checkedIndicator {
+	user-select: none;
+
+	cursor: pointer;
+	input:disabled + & {
+		cursor: auto;
+	}
+}
+
+.defaultCheckbox {
+	&::before {
+		content: '☐';
+	}
+
+	input:focus + & {
+		outline: auto;
+	}
+	
+	input:disabled + & {
+		opacity: 0.62;
+	}
+
+	input:checked + &::before {
+		content: '☑';
+	}
+}

package/src/components/input/checkbox/indicator/checkbox-indicator.stories.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { CheckboxIndicator } from './checkbox-indicator';
+
+const meta = {
+	title: 'Input/Checkbox/Indicator',
+	component: CheckboxIndicator,
+	args: {
+		checked: true,
+		disabled: false
+	},
+	argTypes: {
+		checked: {
+			control: 'boolean'
+		},
+		disabled: {
+			control: 'boolean'
+		}
+	},
+	render: ({ checked, disabled }) => (
+		<div>
+			<input type="checkbox" defaultChecked={checked} disabled={disabled} /> → <CheckboxIndicator />
+		</div>
+	)
+};
+
+export default meta;
+
+export const Checked = () => {
+	return (
+		<div>
+			<input type="checkbox" defaultChecked /> → <CheckboxIndicator />
+		</div>
+	);
+};
+
+export const Unchecked = () => {
+	return (
+		<div>
+			<input type="checkbox" /> → <CheckboxIndicator />
+		</div>
+	);
+};
+
+export const Disabled = () => {
+	return (
+		<div>
+			<input type="checkbox" defaultChecked disabled /> → <CheckboxIndicator />
+		</div>
+	);
+};
+

package/src/components/input/checkbox/indicator/index.js

@@ -0,0 +1 @@
+export { CheckboxIndicator, classes } from './checkbox-indicator';

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

@@ -0,0 +1,39 @@
+A complete Input Checkbox and text solution for user input.  
+This component is vanilla (without styles). Consider using the styled version from the Evangelist scope, [here](http://bit.dev/teambit/evangelist/input/checkbox/label).
+
+## Indicator
+The `<Input/>` tag is difficult to style, so it is hidden (using the `<HiddenInput/>` component), and replaced visually with a `<Indicator/>` component.
+The *indicator* is a `<span/>` element that mirrors the state of the *input* tag, showing checked/unchecked state, disabled state, and focus.
+
+Use the *indicator* prop to pass a custom indicator:
+
+```tsx
+<CheckboxLabel indicator={<NeonIndicator/>}>approve</CheckboxLabel>
+```
+
+## Accessing input
+Input related props are automatically forwarded to the hidden *input*.
+This includes the properties `checked`, `defaultChecked` `onInputChanged`, and `disabled`.
+If you need to pass custom props to the *input*, create a dedicate instance in your consuming code like so:
+
+```tsx
+import { CheckboxLabel, Input } from '...input.checkbox.label';
+
+function SelectAll() {
+	// ...	
+	return <CheckboxLabel input={<Input aria-orientation="rtl"/>}>select all</CheckboxLabel>
+}
+```
+
+Automatic forwarding will no longer occur, and you will have to supply props directly to the input:
+
+```tsx
+<CheckboxLabel input={(
+	<Input
+		aria-orientation="rtl"
+		onChange={handleChange}
+		checked={isChecked}
+	/>)}>
+		select all
+</CheckboxLabel>
+```

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { HiddenCheckbox } from '@logora/debate/input/checkbox/hidden';
+import { CheckboxIndicator, classes } from '@logora/debate/input/checkbox/indicator';
+
+export { HiddenCheckbox as Input };
+
+/** Custom checkbox with text. */
+export function CheckboxLabel({
+  checked,
+  defaultChecked,
+  onInputChanged,
+  type,
+  disabled,
+  name,
+  required,
+  value,
+  input = (
+    <HiddenCheckbox
+      defaultChecked={defaultChecked}
+      onChange={onInputChanged}
+      checked={checked}
+      disabled={disabled}
+      type={type}
+      name={name}
+      value={value}
+      required={required}
+    />
+  ),
+  indicator = <CheckboxIndicator className={classes.defaultCheckbox} />,
+  children,
+  ...rest
+}) {
+  return (
+    <label {...rest}>
+      {input}
+      {indicator}
+      {children}
+    </label>
+  );
+}

package/src/components/input/checkbox/label/checkbox.stories.jsx

@@ -0,0 +1,57 @@
+export default {
+	title: 'Input/Checkbox',
+	component: CheckboxLabel,
+	args: {
+		defaultChecked: false,
+		children: 'hello world'
+	},
+	argTypes: {
+		defaultChecked: {
+			control: 'boolean'
+		},
+		children: {
+			control: 'text'
+		}
+	},
+	render: (args) => (
+		<div>
+			<CheckboxLabel {...args}>{args.children}</CheckboxLabel>
+		</div>
+	)
+};
+
+import { HiddenCheckbox } from '@logora/debate/input/checkbox/hidden';
+import React, { useState } from 'react';
+import { CheckboxLabel } from './checkbox-label';
+
+export const UncontrolledVanilla = {};
+
+export const UncontrolledChecked = {
+	args: {
+		defaultChecked: true
+	}
+};
+
+export function CustomInput() {
+	const [state, setState] = useState(false);
+	return (
+		<div>
+			<CheckboxLabel
+				input={
+					<HiddenCheckbox
+						onChange={(e) => setState(e.target.checked)}
+						checked={state}
+						alt="custom checkbox"
+					/>
+				}
+			>
+				{' '}
+				Checkmarbox with a label
+			</CheckboxLabel>
+			<div>
+				-{'>'} {state ? 'checked' : 'unchecked'}
+			</div>
+		</div>
+	);
+}
+

package/src/components/input/checkbox/label/index.js

@@ -0,0 +1 @@
+export { CheckboxLabel, Input } from './checkbox-label';

package/src/components/input/input_provider/InputProvider.docs.mdx

@@ -0,0 +1,38 @@
+---
+description: A context provider and hook to manage input fields in React.
+labels: ['react', 'context', 'input-provider']
+---
+
+A component to manage input fields using React context.
+
+InputProvider stores the state of the input fields including focus, reset, input content, and input rich content. It provides a context where these values can be accessed by the child components.
+
+### Component usage
+
+```js
+    import { InputProvider, useInput } from "@logora/debate.input.input_provider";
+```
+
+To use the `InputProvider`, you need to wrap it around your components that need to access the input state. The state values can be accessed using the `useInput` hook.
+
+```js
+const ConsumerComponent = () => {
+  const { focus, setFocus, inputContent, setInputContent, inputRichContent, setInputRichContent, reset, setReset } = useInput();
+
+  // Use the state values as needed
+  // ...
+
+  return (
+    // JSX for your component
+    // ...
+  );
+}
+
+const ParentComponent = () => {
+  return (
+    <InputProvider>
+      <ConsumerComponent />
+    </InputProvider>
+  );
+}
+```

package/src/components/input/input_provider/InputProvider.jsx

@@ -0,0 +1,16 @@
+import React, { createContext, useState } from "react";
+
+export const InputContext = createContext();
+
+export const InputProvider = ({ children }) => {
+    const [focus, setFocus] = useState(false);
+    const [reset, setReset] = useState(false);
+    const [inputContent, setInputContent] = useState();
+    const [inputRichContent, setInputRichContent] = useState();
+
+    return (
+        <InputContext.Provider value={{ focus, setFocus, inputContent, setInputContent, inputRichContent, setInputRichContent, reset, setReset }}>
+            { children }
+        </InputContext.Provider>
+    );
+}

package/src/components/input/input_provider/InputProvider.test.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { InputProvider } from './InputProvider';
+import { useInput } from './useInput';
+
+describe('InputProvider', () => {
+    it('should render children', () => {
+        const component = render(
+            <InputProvider>
+                <div>OK</div>
+            </InputProvider>
+        );
+    
+        expect(screen.getByText("OK")).toBeTruthy();
+    });
+    
+    it('should set content', async () => {
+        const ContentComponent = () => {
+            const { inputContent, setInputContent } = useInput();
+    
+            const handleClick = () => {
+                setInputContent("My text");
+            }
+        
+            return (
+                <div>
+                    <button onClick={handleClick}>Add content</button>
+                    <span>{inputContent}</span>
+                </div>
+            );
+        }
+    
+        const component = render(
+            <InputProvider>
+                <ContentComponent />
+            </InputProvider>
+        );
+    
+        expect(screen.queryByText("My text")).toBeNull();
+        const button = screen.getByText("Add content");
+        await fireEvent.click(button);
+        expect(screen.getByText("My text")).toBeTruthy();
+    });
+    
+    it('should set focus', async () => {
+        const FocusComponent = () => {
+            const { focus, setFocus } = useInput();
+    
+            const handleClick = () => {
+                setFocus(true);
+            }
+    
+            return (
+                <div>
+                    <button onClick={handleClick}>Add focus</button>
+                    <span>{focus.toString()}</span>
+                </div>
+            );
+        }
+    
+        const component = render(
+            <InputProvider>
+                <FocusComponent />
+            </InputProvider>
+        );
+    
+        expect(screen.queryByText("true")).toBeNull();
+        expect(screen.queryByText("false")).toBeTruthy();
+        const button = screen.getByText("Add focus");
+        await fireEvent.click(button);
+        expect(screen.getByText("true")).toBeTruthy();
+    });
+    
+    it('should set reset', async () => {
+        const ResetComponent = () => {
+            const { reset, setReset } = useInput();
+    
+            const handleClick = () => {
+                setReset(true);
+            }
+    
+            return (
+                <div>
+                    <button onClick={handleClick}>Add reset</button>
+                    <span>{reset.toString()}</span>
+                </div>
+            );
+        }
+    
+        const component = render(
+            <InputProvider>
+                <ResetComponent />
+            </InputProvider>
+        );
+    
+        expect(screen.queryByText("true")).toBeNull();
+        expect(screen.queryByText("false")).toBeTruthy();
+        const button = screen.getByText("Add reset");
+        await fireEvent.click(button);
+        expect(screen.getByText("true")).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { InputProvider } from './InputProvider';
+export { useInput } from './useInput';

package/src/components/input/input_provider/useInput.jsx

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { InputContext } from "./InputProvider";
+
+export const useInput = () => {
+    const inputContext = useContext(InputContext);
+
+    return inputContext;
+}

package/src/components/input/search_input/SearchInput.docs.mdx

@@ -0,0 +1,25 @@
+---
+description: An input to handle search.
+labels: ['search_input', 'input']
+---
+
+import { SearchInput } from './SearchInput';
+
+An input to handle search queries with custom placeholder.
+
+It should be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+import { SearchInput } from '@logora/debate.input.search_input';
+```
+
+```js
+<SearchInput 
+    placeholder="Search"
+    onSearchSubmit={(query) => console.log("SearchInput callback")} 
+    disabled={false}
+    reducedByDefault={false}
+/>
+```

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

@@ -0,0 +1,71 @@
+import React, { useState, useRef } from "react";
+import { useIntl } from "react-intl";
+import { TextInput } from '@logora/debate/input/text_input';
+import { Icon } from '@logora/debate/icons/icon';
+import useOnClickOutside from 'use-onclickoutside';
+import styles from "./SearchInput.module.scss";
+import PropTypes from "prop-types";
+
+export const SearchInput = ({ onSearchSubmit, placeholder, disabled, reducedByDefault }) => {
+	const intl = useIntl();
+	const [query, setQuery] = useState("");
+	const [openSearch, setOpenSearch] = useState(false);
+	const searchRef = useRef(null);
+	useOnClickOutside(searchRef, reducedByDefault ? () => setOpenSearch(false) : null);
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		onSearchSubmit(query);
+	};
+
+	const handleReset = (e) => {
+		e.preventDefault();
+		setQuery("");
+		onSearchSubmit("");
+	};
+
+	return (
+		!reducedByDefault || openSearch ?
+			(
+				<form data-tid={"form_search"} onSubmit={handleSubmit} method='get' autoComplete='off' ref={searchRef}>
+					<TextInput
+						type={"text"}
+						name={"q"}
+						aria-label={intl.formatMessage({
+							id: "input.search_input.aria_label",
+							defaultMessage: "Search bar"
+						})}
+						value={query}
+						placeholder={placeholder}
+						disabled={disabled}
+						onChange={e => setQuery(e.target.value)}
+						data-testid={"input_search_query"}
+						data-tid={"input_search_query"}
+						iconRight=
+						{query &&
+							<Icon name="close" className={styles.searchReset} data-tid={"action_search_reset"} height={16} width={16} onClick={(e) => handleReset(e)} aria-label={intl.formatMessage({id: "input.search_input.reset_icon.aria_label", defaultMessage: "Reset search"})} />
+						}
+						iconLeft={<Icon name="search" className={styles.searchSubmit} data-tid={"action_search_submit"} height={16} width={16} onClick={(e) => handleSubmit(e)} aria-label={intl.formatMessage({id: "input.search_input.submit_icon.aria_label", defaultMessage: "starts search"})} />
+						}
+					/>
+				</form>
+			)
+			:
+			(
+				<div className={styles.searchReducedButton} onClick={() => setOpenSearch(true)}>
+					<Icon name="search" className={styles.searchSubmit} data-tid={"action_search_submit"} height={20.8} width={16} />
+				</div>
+			)
+	)
+}
+
+SearchInput.propTypes = {
+	/** Callback function for submit */
+	onSearchSubmit: PropTypes.func.isRequired,
+	/** Text of the placeholder */
+	placeholder: PropTypes.string,
+	/** If true, the component is disabled  */
+	disabled: PropTypes.bool,
+	/**  If true, the component is reduced by default */
+	reducedByDefault: PropTypes.bool,
+};

package/src/components/input/search_input/SearchInput.module.scss

@@ -0,0 +1,18 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.searchSubmit, .searchReset {
+	cursor: pointer;
+}
+
+.searchButton {
+	border: 0;
+}
+
+.searchReducedButton {
+	border: theme.$box-border;
+	border-radius: theme.$box-border-radius;
+	@include spacing.px(3, xs);
+	@include spacing.py(2.5, xs);
+	cursor: pointer;
+}