@coveord/plasma-mantine 56.3.3 → 56.5.0

package/src/components/Collection/Collection.tsx

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

@@ -0,0 +1,147 @@
+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 '../ActionIcon/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/ColorInput/ColorInput.ts

@@ -0,0 +1 @@
+export {ColorInput, type ColorInputFactory, type ColorInputProps} from '@mantine/core';

package/src/components/ColorPicker/ColorPicker.ts

@@ -0,0 +1 @@
+export {ColorPicker, type ColorPickerFactory, type ColorPickerProps} from '@mantine/core';

package/src/components/ColorSwatch/ColorSwatch.ts

@@ -0,0 +1 @@
+export {ColorSwatch, type ColorSwatchFactory, type ColorSwatchProps} from '@mantine/core';

package/src/components/Combobox/Combobox.ts

@@ -0,0 +1 @@
+export {Combobox, type ComboboxFactory, type ComboboxProps, useCombobox} from '@mantine/core';

package/src/components/Container/Container.ts

@@ -0,0 +1 @@
+export {Container, type ContainerFactory, type ContainerProps} from '@mantine/core';

package/src/components/CopyButton/CopyButton.ts

@@ -0,0 +1 @@
+export {CopyButton, type CopyButtonProps} from '@mantine/core';

package/src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,78 @@
+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 '../ActionIcon/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} />
+    );