@coveord/plasma-mantine 56.3.3 → 56.4.0

package/src/components/collection/Collection.tsx

@@ -1,300 +0,0 @@
-import {IconPlus} from '@coveord/plasma-react-icons';
-import {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
-import {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';
-import {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';
-import {
-    __InputWrapperProps,
-    Box,
-    BoxProps,
-    Factory,
-    Input,
-    MantineSpacing,
-    Stack,
-    StylesApiProps,
-    useProps,
-    useStyles,
-} from '@mantine/core';
-import {useDidUpdate} from '@mantine/hooks';
-import {ForwardedRef, ReactNode} from 'react';
-
-import {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';
-import {Button} from '../button/Button.js';
-import classes from './Collection.module.css';
-import {CollectionProvider} from './CollectionContext.js';
-import {CollectionItem} from './CollectionItem.js';
-
-export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {
-    /**
-     * The default value each new item should have
-     */
-    newItem: T;
-    /**
-     * A render function called for each item passed in the `value` prop.
-     *
-     * @param item The current item's value
-     * @param index The current item's index
-     */
-    children: (item: T, index: number) => ReactNode;
-    /**
-     * The list of items to display inside the collection
-     *
-     * @default []
-     */
-    value?: T[];
-    /**
-     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
-     *
-     * This method is required when using this component with ReactHookForm.
-     *
-     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.
-     *
-     * @param originalItem The original item
-     * @param itemIndex The index of the original item
-     */
-    getItemId?: (originalItem: T, itemIndex: number) => string;
-    /**
-     * Unused, has no effect
-     */
-    onFocus?: () => void;
-    /**
-     * Function called whenever the value needs to be updated
-     *
-     * @param value The whole list of items after the change
-     */
-    onChange?: (value: T[]) => void;
-    /**
-     * Function called after an item is removed from the collection using the remove button
-     *
-     * @param itemIndex The index of the item that was removed
-     */
-    onRemoveItem?: (itemIndex: number) => void;
-    /**
-     * Function that gets called whenever a collection item needs to be reordered
-     *
-     * @param payload The origin and destination index of the item to reorder
-     */
-    onReorderItem?: (payload: {from: number; to: number}) => void;
-    /**
-     * Function that gets called when a new item needs to be added to the collection
-     *
-     * @param value The value of the item to insert
-     * @param index The index of the new item to insert
-     */
-    onInsertItem?: (value: T, index: number) => void;
-    /**
-     * Whether the collection should have drag and drop behavior enabled
-     *
-     * @default false
-     */
-    draggable?: boolean;
-    /**
-     * Whether the collection is disabled, or in other words in read only mode
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items
-     *
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Function that determines if the add item button should be enabled given the current items of the collection.
-     * The button is always enabled if this props remains undefined
-     *
-     * @param values The current items of the collection
-     */
-    allowAdd?: (values: T[]) => boolean;
-    /**
-     * The label of the add item button
-     *
-     * @default "Add item"
-     */
-    addLabel?: string;
-    /**
-     * The tooltip text displayed when hovering over the disabled add item button
-     *
-     * @default 'There is already an empty item'
-     */
-    addDisabledTooltip?: string;
-    /**
-     * The gap between the colleciton items
-     *
-     * @default 'xs'
-     */
-    gap?: MantineSpacing;
-    /**
-     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item
-     *
-     * @default false
-     */
-    required?: boolean;
-}
-
-export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';
-
-export type CollectionFactory = Factory<{
-    props: CollectionProps<unknown>;
-    ref: HTMLDivElement;
-    stylesNames: CollectionStylesNames;
-}>;
-
-const defaultProps: Partial<CollectionProps<unknown>> = {
-    draggable: false,
-    addLabel: 'Add item',
-    addDisabledTooltip: 'There is already an empty item',
-    disabled: false,
-    readOnly: false,
-    gap: 'md',
-    required: false,
-    getItemId: ({id}: any) => id,
-};
-
-export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {
-    const {
-        value,
-        onChange,
-        onRemoveItem,
-        onReorderItem,
-        onInsertItem,
-        disabled,
-        readOnly,
-        draggable,
-        children,
-        gap,
-        required,
-        newItem,
-        addLabel,
-        addDisabledTooltip,
-        allowAdd,
-        label,
-        labelProps,
-        withAsterisk,
-        description,
-        descriptionProps,
-        error,
-        errorProps,
-        getItemId,
-        ref,
-
-        // Style props
-        style,
-        className,
-        classNames,
-        styles,
-        unstyled,
-        ...others
-    } = useProps('Collection', defaultProps as CollectionProps<T>, props);
-
-    const getStyles = useStyles<CollectionFactory>({
-        name: 'Collection',
-        classes,
-        props,
-        className,
-        style,
-        classNames,
-        styles,
-        unstyled,
-    });
-    const sensors = useSensors(
-        useSensor(PointerSensor),
-        useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates,
-        }),
-    );
-
-    const canEdit = !disabled && !readOnly;
-    const hasOnlyOneItem = value.length === 1;
-
-    /**
-     * Enforcing onChange when the value is modified will make sure the errors are carried through.
-     */
-    useDidUpdate(() => {
-        onChange?.(value);
-    }, [JSON.stringify(value)]);
-
-    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;
-    const _label = label ? (
-        <Input.Label required={isRequired} {...labelProps}>
-            {label}
-        </Input.Label>
-    ) : null;
-
-    const _description = description ? (
-        <Input.Description {...descriptionProps}>{description}</Input.Description>
-    ) : null;
-    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;
-    const _header =
-        _label || _description ? (
-            <Stack gap="xxs" pb="xs">
-                {_label}
-                {_description}
-            </Stack>
-        ) : null;
-
-    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item, index) ?? String(index), data: item}));
-
-    const items = standardizedItems.map((item, index) => (
-        <CollectionItem
-            key={item.id}
-            id={item.id}
-            disabled={!canEdit}
-            draggable={draggable}
-            onRemove={() => onRemoveItem?.(index)}
-            removable={!(isRequired && hasOnlyOneItem)}
-        >
-            {children(item.data, index)}
-        </CollectionItem>
-    ));
-
-    const addAllowed = allowAdd?.(value) ?? true;
-
-    const _addButton = canEdit ? (
-        <Box className={classes.addButtonContainer}>
-            <Button.Quaternary
-                leftSection={<IconPlus size={16} />}
-                onClick={() => onInsertItem(newItem, value?.length ?? 0)}
-                disabled={!addAllowed}
-                disabledTooltip={addDisabledTooltip}
-            >
-                {addLabel}
-            </Button.Quaternary>
-        </Box>
-    ) : null;
-
-    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);
-
-    const handleDragEnd = ({over, active}: DragEndEvent): void => {
-        if (over) {
-            const activeIndex = getIndex(String(active.id));
-            const overIndex = getIndex(String(over.id));
-            if (activeIndex !== overIndex) {
-                onReorderItem?.({from: activeIndex, to: overIndex});
-            }
-        }
-    };
-
-    return (
-        <CollectionProvider value={{getStyles}}>
-            <DndContext
-                onDragEnd={handleDragEnd}
-                sensors={sensors}
-                modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-            >
-                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>
-                    <Box ref={ref} {...others} {...getStyles('root')}>
-                        {_header}
-                        <Stack gap={gap} {...getStyles('items')}>
-                            {items}
-                            {_addButton}
-                            {_error}
-                        </Stack>
-                    </Box>
-                </SortableContext>
-            </DndContext>
-        </CollectionProvider>
-    );
-};
-
-Collection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;

package/src/components/collection/CollectionItem.tsx

@@ -1,147 +0,0 @@
-import {DragAndDropSize24Px, IconTrash} from '@coveord/plasma-react-icons';
-import {useSortable} from '@dnd-kit/sortable';
-import {CSS} from '@dnd-kit/utilities';
-import {Group, GroupProps, useProps} from '@mantine/core';
-import {FunctionComponent, PropsWithChildren} from 'react';
-
-import {ActionIcon} from '../action-icon/ActionIcon.js';
-import {useCollectionContext} from './CollectionContext.js';
-
-interface CollectionItemProps extends CollectionItemSharedProps {
-    draggable?: boolean;
-    disabled: boolean;
-}
-
-interface CollectionItemSharedProps extends GroupProps {
-    id: string;
-    onRemove?: React.MouseEventHandler<HTMLButtonElement>;
-    removable?: boolean;
-}
-
-const defaultProps: Partial<CollectionItemSharedProps> = {
-    removable: true,
-    gap: 'sm',
-};
-
-const RemoveButton: FunctionComponent<{
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-}> = ({onClick}) => (
-    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>
-        <IconTrash aria-label="Remove" size={16} />
-    </ActionIcon.Quaternary>
-);
-
-const RemoveButtonPlaceholder = () => <div style={{width: 28}} />;
-
-const StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {
-    const {
-        children,
-        removable,
-        onRemove,
-        id,
-
-        // Style props
-        style,
-        className,
-        classNames,
-        styles,
-        ...others
-    } = useProps('CollectionItem', defaultProps, props);
-    const ctx = useCollectionContext();
-    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;
-
-    return (
-        <Group
-            data-testid={`item-${id}`}
-            {...ctx.getStyles('item', {style, className, classNames, styles})}
-            {...others}
-        >
-            {children}
-            {removeButton}
-        </Group>
-    );
-};
-
-const DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {
-    const ctx = useCollectionContext();
-    const {
-        children,
-        id,
-
-        // Style props
-        style,
-        className,
-        classNames,
-        styles,
-        ...others
-    } = useProps('CollectionItem', defaultProps, props);
-    return (
-        <Group
-            data-testid={`item-${id}`}
-            {...ctx.getStyles('item', {style, className, classNames, styles})}
-            {...others}
-        >
-            {children}
-        </Group>
-    );
-};
-
-const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {
-    const ctx = useCollectionContext();
-    const {
-        children,
-        removable,
-        onRemove,
-        id,
-
-        // Style props
-        className,
-        classNames,
-        styles,
-        ...others
-    } = useProps('CollectionItem', defaultProps, props);
-    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;
-    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({
-        id,
-    });
-
-    return (
-        <Group
-            data-testid={`item-${id}`}
-            ref={setNodeRef}
-            {...ctx.getStyles('item', {
-                style: transform
-                    ? {
-                          transform: CSS.Transform.toString(transform),
-                          transition,
-                      }
-                    : undefined,
-                className,
-                classNames,
-                styles,
-            })}
-            data-isdragging={isDragging}
-            {...others}
-        >
-            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>
-                <DragAndDropSize24Px height={16} />
-            </div>
-            {children}
-            {removeButton}
-        </Group>
-    );
-};
-
-export const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({
-    draggable,
-    disabled,
-    ...otherProps
-}) => {
-    if (disabled) {
-        return <DisabledCollectionItem {...otherProps} />;
-    }
-    if (draggable) {
-        return <DraggableCollectionItem {...otherProps} />;
-    }
-    return <StaticCollectionItem {...otherProps} />;
-};

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -1,78 +0,0 @@
-import {IconClipboardCheck, IconClipboardText} from '@coveord/plasma-react-icons';
-import {ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
-import {FunctionComponent, MouseEventHandler} from 'react';
-import {ActionIcon} from '../action-icon/ActionIcon.js';
-
-export interface CopyToClipboardProps extends ActionIconProps {
-    /**
-     * The value to be copied to the clipboard.
-     */
-    value: string;
-    /**
-     * Whether to display the string to be copied alongside the button.
-     *
-     * @default false
-     */
-    withLabel?: boolean;
-    /**
-     * Called each time the value is copied to the clipboard
-     */
-    onCopy?: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The color of the icon when idle
-     *
-     * @default 'gray'
-     */
-    color?: MantineColor | (string & {});
-    /**
-     * The text displayed when hovering over the button
-     *
-     * @default 'Copy to clipboard'
-     */
-    tooltipLabelCopy?: string;
-    /**
-     * The text displayed when the value is copied to the clipboard
-     *
-     * @default 'Copied'
-     */
-    tooltipLabelCopied?: string;
-}
-
-const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({
-    value,
-    onCopy,
-    color,
-    tooltipLabelCopy = 'Copy to clipboard',
-    tooltipLabelCopied = 'Copied',
-    ...others
-}) => (
-    <CopyButton value={value} timeout={2000}>
-        {({copied, copy}) => (
-            <Tooltip label={copied ? tooltipLabelCopied : tooltipLabelCopy}>
-                <ActionIcon.Quaternary
-                    aria-label={tooltipLabelCopy}
-                    color={copied ? 'success' : color}
-                    onClick={(clickEvent) => {
-                        copy();
-                        onCopy?.(clickEvent);
-                    }}
-                    {...others}
-                >
-                    {copied ? <IconClipboardCheck size={16} /> : <IconClipboardText size={16} />}
-                </ActionIcon.Quaternary>
-            </Tooltip>
-        )}
-    </CopyButton>
-);
-
-export const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>
-    withLabel ? (
-        <TextInput
-            value={others.value}
-            readOnly
-            autoComplete="off"
-            rightSection={<CopyToClipboardButton {...others} />}
-        />
-    ) : (
-        <CopyToClipboardButton {...others} />
-    );

package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx

@@ -1,132 +0,0 @@
-import {Center, Group, Space} from '@mantine/core';
-import {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeValue} from '@mantine/dates';
-import {useForm} from '@mantine/form';
-
-import dayjs from 'dayjs';
-import {Button} from '../button/Button.js';
-import DateRangeClasses from './DateRange.module.css';
-import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect.js';
-import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker.js';
-export interface DateRangePickerInlineCalendarProps
-    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
-    /**
-     * Initial selected range
-     */
-    initialRange: DatesRangeValue<DateStringValue | null>;
-    /**
-     * Function called when the user applies the new date range
-     *
-     * @param range the newly selected dates
-     */
-    onApply: (range: DatesRangeValue<DateStringValue | null>) => void;
-    /**
-     * Function called when the user click on the cancel button
-     */
-    onCancel: () => void;
-    /**
-     * The presets to display
-     *
-     * @default {}
-     * @example
-     * {
-     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
-     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
-     * }
-     */
-    presets?: Record<string, DateRangePickerPreset>;
-    /**
-     * Props for RangeCalendar displayed in the popover
-     */
-    rangeCalendarProps?: Omit<
-        DatePickerBaseProps,
-        | 'value'
-        | 'onChange'
-        | 'isDateInRange'
-        | 'isDateFirstInRange'
-        | 'isDateLastInRange'
-        | 'presets'
-        | '__onPresetSelect'
-        | 'allowDeselect'
-    >;
-}
-
-const isDateRangePickerValue = (value: unknown): value is DatesRangeValue => Array.isArray(value) && value.length === 2;
-
-const endOfDay = (value: DateStringValue): DateStringValue => (value ? dayjs(value).endOf('day').toISOString() : value);
-
-export const DateRangePickerInlineCalendar = ({
-    initialRange,
-    onApply,
-    onCancel,
-    presets,
-    startProps,
-    endProps,
-    rangeCalendarProps,
-}: DateRangePickerInlineCalendarProps) => {
-    const form = useForm({
-        initialValues: {
-            dates: initialRange,
-        },
-    });
-    const calendarInputProps = form.getInputProps('dates');
-
-    const onCalendarChange = (range: DateStringValue | DatesRangeValue<DateStringValue | null>): void => {
-        // If the current value is [null, null] and a date is selected, set [selectedValue, null]
-        if (isDateRangePickerValue(range) && range[0] && range[1] === null) {
-            calendarInputProps.onChange([dayjs(range[0]).toISOString(), null]);
-            return;
-        }
-        const normalized =
-            isDateRangePickerValue(range) && range[1] ? [dayjs(range[0]).toISOString(), endOfDay(range[1])] : range;
-        calendarInputProps.onChange(normalized);
-    };
-
-    const onCalendarApply = () => {
-        // In case the user only clicked the start date, but not the end date,
-        // assume a single day was meant to be selected.
-        if (!form.values.dates[1]) {
-            form.values.dates[1] = endOfDay(form.values.dates[0]);
-        }
-        onApply(form.values.dates);
-    };
-    return (
-        <>
-            <Group align="center" gap="xs" grow px="md" py="sm" className={DateRangeClasses.picker}>
-                <EditableDateRangePicker
-                    value={calendarInputProps.value}
-                    {...calendarInputProps}
-                    startProps={startProps}
-                    endProps={endProps}
-                />
-                {presets ? (
-                    <>
-                        <Space w="sm" />
-                        <DateRangePickerPresetSelect
-                            value={calendarInputProps.value}
-                            presets={presets}
-                            {...calendarInputProps}
-                            selectProps={{comboboxProps: {withinPortal: false}}}
-                        />
-                    </>
-                ) : null}
-            </Group>
-            <Center py="sm" px="md">
-                <DatePicker<'range'>
-                    numberOfColumns={2}
-                    columnsToScroll={1}
-                    type="range"
-                    styles={{day: {textAlign: 'center'}}}
-                    firstDayOfWeek={0}
-                    allowSingleDateInRange
-                    {...rangeCalendarProps}
-                    {...calendarInputProps}
-                    onChange={onCalendarChange}
-                />
-            </Center>
-            <Group justify="right" gap="xs" px="md" py="sm" className={DateRangeClasses.save}>
-                <Button.Tertiary onClick={onCancel}>Cancel</Button.Tertiary>
-                <Button.Primary onClick={onCalendarApply}>Apply</Button.Primary>
-            </Group>
-        </>
-    );
-};