jamespot-react-components 1.0.0

package/src/components/Form/Input/JRCSelect/JRCAutocompleteCommunity.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, Story } from '@storybook/react';
+import { useForm } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import * as React from 'react';
+import { JRCAutocompleteCommunityProps, JRCInputCommunity } from './JRCAutocompleteCommunity';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputCommunity,
+} as Meta;
+
+type Community = { uri: string; title: string };
+
+type FormData = {
+    selectSimple: Community;
+    selectMultiple: Array<Community>;
+};
+
+const Template: Story<JRCAutocompleteCommunityProps<FormData>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            selectSimple: {} as Community,
+            selectMultiple: [] as Array<Community>,
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<FormData> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <p>-.-</p>
+            <JRCInputCommunity {...args} name="selectSimple" control={control} multiple={false} />
+            <p>-.-</p>
+            <JRCInputCommunity {...args} name="selectMultiple" control={control} multiple={true} />
+            <p>-.-</p>
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const Community = Template.bind({});
+Community.args = {
+    label: 'label',
+    htmlFor: 'htmlFor',
+    placeholder: 'placeholder',
+    labelIsLegend: false,
+    description: 'description',
+};

package/src/components/Form/Input/JRCSelect/JRCAutocompleteCommunity.tsx

@@ -0,0 +1,34 @@
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import * as React from 'react';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import jamespot from 'jamespot-user-api';
+import { NativeAutocomplete } from './JRCInputAutocomplete';
+
+const autocompleteCommunity = (inputValue: string) => jamespot.community.autocomplete(inputValue);
+
+export type JRCAutocompleteCommunityProps<T> = JRCInputFieldProps<T> & {
+    multiple?: boolean;
+};
+
+export function JRCInputCommunity<T>(
+    props: JRCAutocompleteCommunityProps<T>,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const { name, control, rules, label, htmlFor, labelIsLegend, description, helper } = props;
+
+    return (
+        <JRCFormFieldRenderer
+            name={name}
+            control={control}
+            rules={rules}
+            label={label}
+            htmlFor={htmlFor}
+            labelIsLegend={labelIsLegend}
+            description={description}
+            helper={helper}
+            renderFunction={(field) => (
+                <NativeAutocomplete {...props} {...field} asyncPromise={autocompleteCommunity} getSearch="title" />
+            )}
+        />
+    );
+}

package/src/components/Form/Input/JRCSelect/JRCInputAutocomplete.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { Select } from './JRCInputSelect';
+import styled from 'styled-components';
+import JRCAvatar from '../../../JRCAvatar/JRCAvatar';
+import { JRCTag } from '../../../JRCTag/JRCTag';
+import { AutocompleteLittle, JRCAutocompleteProps, NativeAutocompleteProps } from './JRCInputSelect.types';
+
+const Flex = styled.div`
+    display: flex;
+    align-items: center;
+    min-height: 40px;
+    gap: 10px;
+`;
+
+export function CustomOption({ option }: { option: AutocompleteLittle }) {
+    return (
+        <Flex>
+            <JRCAvatar alt="tag" uri={option.uri} focusable={true} />
+            <div>{option.title}</div>
+        </Flex>
+    );
+}
+
+export function CustomSelectedOption({ option }: { option: AutocompleteLittle }) {
+    return <JRCTag focusable={true} uri={option.uri} label={option.title} tooltipDescription={option.title} />;
+}
+
+export const NativeAutocomplete = React.forwardRef(function <T>(
+    props: NativeAutocompleteProps<T>,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    return (
+        <>
+            <Select
+                getSearch="title"
+                components={{
+                    Option: CustomOption,
+                    SelectedOption: CustomSelectedOption,
+                }}
+                {...props}
+            />
+        </>
+    );
+}) as unknown as <T>(props: NativeAutocompleteProps<T>) => JSX.Element;
+
+export function JRCInputAutocomplete<T>(props: JRCAutocompleteProps<T>) {
+    const { name, control, rules, label, htmlFor, labelIsLegend, description, helper } = props;
+
+    return (
+        <JRCFormFieldRenderer
+            name={name}
+            control={control}
+            rules={rules}
+            label={label}
+            htmlFor={htmlFor}
+            labelIsLegend={labelIsLegend}
+            description={description}
+            helper={helper}
+            renderFunction={(field) => <NativeAutocomplete {...props} {...field} />}
+        />
+    );
+}

package/src/components/Form/Input/JRCSelect/JRCInputSelect.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, Story } from '@storybook/react';
+import { useForm } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import * as React from 'react';
+import { JRCInputSelect } from './JRCInputSelect';
+import { JRCInputSelectProps } from './JRCInputSelect.types';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputSelect,
+} as Meta;
+
+type Data = {
+    animal: string;
+    cat: string;
+};
+
+const Template: Story<JRCInputSelectProps<{ select: Data; select2: Array<Data> }>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            select: { animal: 'elephant', cat: 'cat2' },
+            select2: [] as Array<Data>,
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ select: Data; select2: Array<Data> }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <p>-.-</p>
+            <JRCInputSelect {...args} name="select" control={control} />
+            <p>-.-</p>
+            <JRCInputSelect {...args} name="select2" control={control} group={false} multiple={true} />
+            <p>-.-</p>
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const InputSelect = Template.bind({});
+InputSelect.args = {
+    label: 'label',
+    htmlFor: 'htmlFor',
+    placeholder: 'placeholder',
+    labelIsLegend: false,
+    description: 'description',
+
+    options: [...Array(100).keys()].map((i) => ({ animal: `elephant-${i}`, cat: `cat-${i % 3}` })),
+
+    multiple: false,
+    getLabel: (option: any) => `~${option.animal}~`,
+    getValue: (option: any) => `~${option.animal}~`,
+
+    searchable: true,
+    getSearch: (option: any) => `${option.animal}`,
+
+    group: true,
+    getGroup: 'cat',
+};

package/src/components/Form/Input/JRCSelect/JRCInputSelect.style.tsx

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+import { ClickAwayListener } from '../../Common/ClickAwayListener';
+import * as React from 'react';
+import JRCIcon from '../../../JRCIcon/JRCIcon';
+
+export const RelativeClickAwayListener = styled(ClickAwayListener)`
+    position: relative;
+`;
+export const OptionWrapper = styled.div<{ isSelected?: boolean; isFocused?: boolean }>`
+    ${(props) => props.isSelected && 'font-weight: bolder'};
+    ${(props) => props.isFocused && 'background-color: #F8F8FF'};
+    min-height: 32px;
+    line-height: 32px;
+    padding: 0 16px;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    :hover {
+        background-color: #f8f8ff;
+    }
+`;
+export const OptionGroup = styled.div``;
+
+export const OptionGroupHeader = styled.div`
+    min-height: 32px;
+    line-height: 32px;
+    padding: 0 8px;
+    background-color: #efefff;
+`;
+export const OptionGroupValues = styled.div``;
+export const OptionMenu = styled.div`
+    max-height: max(200px, 40vh);
+    min-width: 250px;
+    background-color: white;
+    overflow: auto;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+    border: 1px solid #dadaf0;
+    border-radius: 8px;
+    margin-top: 4px;
+`;
+export const SelectedOptionWrapper = styled.div``;
+export const SelectedOption = styled.button.attrs(() => ({ type: 'button' }))`
+    display: inline-block;
+    border: none;
+    vertical-align: middle;
+
+    margin: 0 4px 4px 0;
+
+    :hover,
+    :focus-visible {
+        div {
+            background-color: ${(props) => props.theme.color.orangeL80};
+
+            i {
+                color: ${(props) => props.theme.color.orange};
+            }
+        }
+    }
+`;
+export const JRCDefaultSelectedOption = styled.div`
+    min-height: 24px;
+    line-height: 24px;
+
+    display: flex;
+    align-items: center;
+
+    padding: 4px 16px 4px 12px;
+    border-radius: 4px;
+    background-color: #f8f8ff;
+    transition: all 0.2s;
+`;
+
+export const TimesIcon = styled.i.attrs(() => ({ className: 'react-icon icon-times' }))`
+    margin: 0 8px;
+    color: ${(props) => props.theme.color.grey2};
+    transition: all 0.2s;
+`;
+
+const AbsoluteIcon = styled(JRCIcon)`
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    pointer-events: none;
+`;
+
+export const DropdownIndicator = ({ open }: { open: boolean }) => {
+    if (open) {
+        return <AbsoluteIcon name="icon-angle-up" color="grey2" />;
+    } else {
+        return <AbsoluteIcon name="icon-angle-down" color="grey2" />;
+    }
+};

package/src/components/Form/Input/JRCSelect/JRCInputSelect.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { StyledSelect } from '../JRCStyledInput';
+import { scrollIntoView } from '../../../../utils/utils.document';
+import { deepEqual } from '../../../../utils/utils.object';
+import * as Components from './JRCInputSelect.style';
+import * as utils from './JRCInputSelect.utils';
+import { JRCInputSelectProps, NativeSelectProps } from './JRCInputSelect.types';
+
+export const Select = React.forwardRef(function <T>(
+    props: NativeSelectProps<T>,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const getLabel = (option: any) => utils.get(option, props.getLabel);
+    const getValue = (option: any) => utils.get(option, props.getValue);
+    const getSearch = (option: any) => utils.get(option, props.getSearch);
+    const getGroup = (option: any) => utils.get(option, props.getGroup);
+
+    const [search, setSearch] = React.useState<string>('');
+    const [open, setOpen] = React.useState(false);
+    const [focusIndex, setFocusIndex] = React.useState(0);
+
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const menuRef = React.useRef<HTMLDivElement>(null);
+
+    const [options, setOptions] = React.useState<Array<any>>(props.options || []);
+
+    const [isSearched, setIsSearched] = React.useState(false);
+
+    React.useEffect(() => {
+        if (props.options) setOptions(props.options);
+    }, [props.options]);
+
+    React.useEffect(() => {
+        if (!props.multiple) {
+            setSearch(utils.isNullOrEmpty(props.value) ? '' : (getSearch(props.value) as string));
+        }
+    }, [props.value]);
+
+    React.useEffect(() => {
+        if (!props.searchable && isSearched) return;
+
+        props.asyncPromise &&
+            props.asyncPromise(search).then((res) => {
+                setOptions(res);
+                setIsSearched(true);
+            });
+    }, [props.asyncPromise, search]);
+
+    /*
+     * Ref of the selected option
+     */
+    let selectedOptionRef: HTMLDivElement | null = null;
+    function selectedOptionRefCallback(ref: HTMLDivElement) {
+        selectedOptionRef = ref;
+        if (menuRef.current && selectedOptionRef) scrollIntoView(menuRef.current, selectedOptionRef);
+    }
+
+    // Hack to use .focus() outside of this component while beeing able to access the ref within this component
+    React.useImperativeHandle(
+        ref,
+        () =>
+            ({
+                focus: () => {
+                    inputRef?.current?.focus();
+                },
+            } as any),
+    );
+
+    function onClick(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLInputElement>, option: any) {
+        if (props.multiple) {
+            props.onChange(
+                props.value && Array.isArray(props.value) && utils.getIndex(props.value, option) >= 0
+                    ? utils.removeItem(props.value, option)
+                    : utils.addItem(props.value, option),
+            );
+        } else {
+            if (deepEqual(props.value, option)) {
+                props.onChange('');
+            } else {
+                props.onChange(option);
+                setOpen(false);
+            }
+        }
+
+        // keep focus inside the input
+        inputRef?.current?.focus();
+        // when pressing enter to select an option, prevent form submission
+        e.preventDefault();
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (props.searchable) {
+            setSearch(e.target.value || '');
+        }
+    };
+
+    const memoizedOptions = React.useMemo(
+        () =>
+            props.searchable
+                ? options.filter((option) => !search || new RegExp(search, 'i').test(getSearch(option)))
+                : options,
+        [options, search],
+    );
+
+    const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'ArrowDown') {
+            setFocusIndex(open ? (focusIndex + 1) % memoizedOptions.length : 0);
+            setOpen(true);
+        } else if (e.key === 'ArrowUp') {
+            setFocusIndex(open && focusIndex > 0 ? focusIndex - 1 : memoizedOptions.length - 1);
+            setOpen(true);
+        } else if (e.key === 'Enter' && focusIndex !== undefined) {
+            if (!props.multiple) setOpen(false);
+            const focusedOption = memoizedOptions
+                .map((el) => ({ el, group: getGroup(el) }))
+                .sort((el1, el2) => (el1.group === el2.group ? 0 : el1.group < el2.group ? -1 : 1))
+                .map((v) => v.el)[focusIndex];
+            onClick(e, focusedOption);
+        } else if (e.key === 'Tab' || e.key === 'Escape') {
+            setOpen(false);
+        } else if (!props.multiple && props.value) {
+            props.onChange('');
+        }
+    };
+
+    return (
+        <>
+            {props.multiple && (
+                <Components.SelectedOptionWrapper>
+                    {(props.value as Array<any>).map((v, index) => (
+                        <Components.SelectedOption
+                            key={index}
+                            onClick={() => {
+                                props.onChange(utils.removeItem(props.value as any[], v));
+                            }}>
+                            {props?.components?.SelectedOption ? (
+                                <props.components.SelectedOption option={v} />
+                            ) : (
+                                <Components.JRCDefaultSelectedOption>
+                                    <Components.TimesIcon />
+                                    {getValue(v)}
+                                </Components.JRCDefaultSelectedOption>
+                            )}
+                        </Components.SelectedOption>
+                    ))}
+                </Components.SelectedOptionWrapper>
+            )}
+            <Components.RelativeClickAwayListener onClickAway={() => setOpen(false)}>
+                <StyledSelect
+                    ref={inputRef}
+                    disabled={props.disabled}
+                    placeholder={props.placeholder}
+                    searchable={props.searchable}
+                    value={search}
+                    dataCy={props.dataCy}
+                    onChange={handleChange}
+                    onKeyDown={handleKey}
+                    onClick={() => setOpen(true)}
+                />
+                <Components.DropdownIndicator open={open} />
+                {open && (
+                    <Components.OptionMenu ref={menuRef}>
+                        {!props.group &&
+                            memoizedOptions.map((option, index) => (
+                                <Components.OptionWrapper
+                                    key={index}
+                                    ref={index === focusIndex ? selectedOptionRefCallback : undefined}
+                                    onClick={(e) => onClick(e, option)}
+                                    isFocused={index === focusIndex}
+                                    data-cy={props.dataCy && `${props.dataCy}-option-${index}`}
+                                    isSelected={utils.isOrIncludes(props.value, option)}>
+                                    {props?.components?.Option ? (
+                                        <props.components.Option option={option} />
+                                    ) : (
+                                        getLabel(option).toString()
+                                    )}
+                                </Components.OptionWrapper>
+                            ))}
+                        {props.group &&
+                            utils.group(memoizedOptions, getGroup).map((group, groupIndex) => (
+                                <Components.OptionGroup key={group.label}>
+                                    <Components.OptionGroupHeader>{group.label}</Components.OptionGroupHeader>
+                                    <Components.OptionGroupValues>
+                                        {group.options.map((option, optionIndex) => (
+                                            <Components.OptionWrapper
+                                                onClick={(e) => onClick(e, option)}
+                                                data-cy={
+                                                    props.dataCy &&
+                                                    `${props.dataCy}-group-${groupIndex}-option-${optionIndex}`
+                                                }
+                                                key={option._index}
+                                                ref={
+                                                    option._index === focusIndex ? selectedOptionRefCallback : undefined
+                                                }
+                                                isFocused={option._index === focusIndex}
+                                                isSelected={utils.isOrIncludes(props.value, option)}>
+                                                {props?.components?.Option ? (
+                                                    <props.components.Option option={option} />
+                                                ) : (
+                                                    getLabel(option).toString()
+                                                )}
+                                            </Components.OptionWrapper>
+                                        ))}
+                                    </Components.OptionGroupValues>
+                                </Components.OptionGroup>
+                            ))}
+                    </Components.OptionMenu>
+                )}
+            </Components.RelativeClickAwayListener>
+        </>
+    );
+}) as unknown as <T>(props: NativeSelectProps<T>) => JSX.Element;
+
+export function JRCInputSelect<T>(props: JRCInputSelectProps<T>) {
+    const { name, control, rules, label, htmlFor, labelIsLegend, description, helper } = props;
+
+    return (
+        <JRCFormFieldRenderer
+            name={name}
+            control={control}
+            rules={rules}
+            label={label}
+            htmlFor={htmlFor}
+            labelIsLegend={labelIsLegend}
+            description={description}
+            helper={helper}
+            renderFunction={(field) => <Select {...props} {...field} />}
+        />
+    );
+}

package/src/components/Form/Input/JRCSelect/JRCInputSelect.types.ts

@@ -0,0 +1,51 @@
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { DataCy } from '../../../../types/dataAttributes';
+
+/**
+ * Select
+ */
+export type NativeSelectProps<T> = ControllerRenderProps<T> & SelectProps;
+export type JRCInputSelectProps<T> = JRCInputFieldProps<T> & SelectProps;
+
+export type Getter = ((option: any) => any) | string;
+
+export type SelectProps = DataCy & {
+    options?: Array<any>;
+    asyncPromise?: (inputValue: string) => Promise<any[]>;
+
+    multiple?: boolean;
+
+    getLabel?: ((option: any) => any) | string;
+    getValue?: ((option: any) => any) | string;
+
+    disabled?: boolean;
+    placeholder?: string;
+
+    searchable?: boolean;
+    getSearch?: ((option: any) => any) | string;
+
+    group?: boolean;
+    getGroup?: ((option: any) => any) | string;
+
+    components?: {
+        // Receive a full option object
+        Option?: React.ComponentType<{ option: any }>;
+        // Receive an option if getValue is not provided, getValue(option) otherwise
+        SelectedOption?: React.ComponentType<{ option: any }>;
+    };
+};
+
+/**
+ * Autocomplete
+ */
+export type NativeAutocompleteProps<T> = ControllerRenderProps<T> & AutocompleteInnerProps;
+export type JRCAutocompleteProps<T> = JRCInputFieldProps<T> & AutocompleteInnerProps;
+
+export type AutocompleteLittle = { uri: string; title: string };
+
+export type AutocompleteInnerProps = Omit<SelectProps, 'options'> &
+    DataCy & {
+        options?: Array<AutocompleteLittle>;
+        asyncPromise?: (inputValue: string) => Promise<Array<AutocompleteLittle>>;
+    };

package/src/components/Form/Input/JRCSelect/JRCInputSelect.utils.ts

@@ -0,0 +1,92 @@
+import { deepEqual } from '../../../../utils/utils.object';
+
+/**
+ * Get index of an object within an array (works with objects)
+ * @param arr
+ * @param element
+ */
+export function getIndex(arr: Array<any>, element: any): number {
+    return arr.findIndex((v) => deepEqual(v, element));
+}
+
+/**
+ * Remove an object within an array (works with objects)
+ * @param arr
+ * @param value
+ */
+export function removeItem<T>(arr: Array<T>, value: T): Array<T> {
+    const index = getIndex(arr, value);
+    if (index >= 0) {
+        arr.splice(index, 1);
+    }
+    return arr;
+}
+
+/**
+ * Adds an object within an array. Instantiate it if the arr is neither an array nor defined
+ * @param arr
+ * @param value
+ */
+export function addItem<T>(arr: Array<T> | any, value: T): Array<T> {
+    if (Array.isArray(arr)) {
+        arr.push(value);
+        return arr;
+    } else {
+        return [value];
+    }
+}
+
+/**
+ * Sorts, Adds an index then groups an array with a grouping function
+ * @param arr
+ * @param getGroup
+ */
+export function group<T>(
+    arr: Array<T>,
+    getGroup: (v: T) => string,
+): { label: string; options: (T & { _index: number })[] }[] {
+    const mappedArr = arr
+        // add group value once for future use
+        .map((el) => ({ el, group: getGroup(el) }))
+        // sort alphabetically in order for the indexes to be in the right order
+        .sort((el1, el2) => (el1.group === el2.group ? 0 : el1.group < el2.group ? -1 : 1))
+        // group options by their grouping property
+        .reduce((acc, { el, group }, index) => {
+            if (acc.get(group)) acc.set(group, [...acc.get(group), { ...el, _index: index }]);
+            else acc.set(group, [{ ...el, _index: index }]);
+            return acc;
+        }, new Map());
+    // Convert map to array of array
+    return Array.from(mappedArr).map(([k, v]) => ({ label: k, options: v }));
+}
+
+/**
+ * Returns the attribute of an object according to a getter
+ * If the return value is falsy, always return an empty string to avoid warning: "A component is changing a controlled input to be uncontrolled"
+ * @param obj
+ * @param getter
+ */
+export function get(obj: any, getter: any): any {
+    if (getter && typeof getter === 'function') return getter(obj) || '';
+    else if (getter && typeof getter === 'string') return obj[getter] || '';
+    return obj || '';
+}
+
+/**
+ * If the obj is an array, check if the search is in it. Otherwise, checks if the search is the object
+ * @param obj
+ * @param search
+ */
+export function isOrIncludes<T>(obj: T | Array<T>, search: T) {
+    if (Array.isArray(obj)) {
+        return getIndex(obj, search) >= 0;
+    } else {
+        return deepEqual(obj, search);
+    }
+}
+
+/**
+ * Returns true if it is falsy, an empty array or an empty object
+ * @param v
+ */
+export const isNullOrEmpty = (v: any | undefined) => !v || (Array.isArray(v) && !v.length) || v == {};