jamespot-react-components 1.0.3 → 1.0.65

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

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

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

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

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

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

@@ -1,92 +0,0 @@
-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 == {};

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

@@ -1,83 +0,0 @@
-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: Array<Data> }>> = (args) => {
-    const { handleSubmit, control, reset } = useForm({
-        defaultValues: {
-            select: [{ animal: 'elephant', cat: 'big' }],
-        },
-        criteriaMode: 'all',
-    });
-
-    const onSubmit: SubmitHandler<{ select: Array<Data> }> = (data) => {
-        alert(JSON.stringify(data, null, 2));
-    };
-
-    return (
-        <form onSubmit={handleSubmit(onSubmit)}>
-            <p>-.-</p>
-            <JRCInputSelect {...args} name="select" control={control} />
-            <p>-.-</p>
-            <input type="submit" />
-            <input type="reset" />
-            <button type="button" onClick={() => reset()}>
-                Custom Reset
-            </button>
-        </form>
-    );
-};
-
-export const AsyncSelect = Template.bind({});
-AsyncSelect.args = {
-    label: 'label',
-    htmlFor: 'htmlFor',
-    placeholder: 'placeholder',
-    labelIsLegend: false,
-    description: 'description',
-
-    asyncPromise: (input) =>
-        Promise.resolve(
-            [
-                { animal: 'elephant', cat: 'big' },
-                { animal: 'girage', cat: 'tall' },
-                { animal: 'mouse', cat: 'big' },
-            ].filter((option) => new RegExp(input).test(option.animal)),
-        ),
-
-    multiple: true,
-    getLabel: (option: any) => `~${option.animal}~`,
-    getValue: (option: any) => `~${option.animal}~`,
-
-    searchable: true,
-    getSearch: (option: any) => `${option.animal}`,
-
-    group: true,
-    getGroup: 'cat',
-
-    components: {
-        Option: (props: any) => {
-            return (
-                <div>
-                    {props.option.cat}-{props.option.animal}
-                </div>
-            );
-        },
-        // SelectedOption: (props: any) => {
-        //     return <div>{props.value}</div>
-        // }
-    },
-};