@coveord/plasma-mantine 56.3.2 → 56.4.0

package/src/components/Prompt/Prompt.tsx

@@ -0,0 +1,134 @@
+import {
+    Box,
+    factory,
+    Factory,
+    ModalRootProps,
+    ModalStylesNames,
+    StylesApiProps,
+    Title,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import {Children, ComponentType, ReactElement, ReactNode} from 'react';
+import {Modal} from '../Modal/Modal.js';
+import {PromptContextProvider} from './Prompt.context.js';
+import classes from './Prompt.module.css';
+import {PromptCancelButton, PromptCancelButtonStylesNamesVariant} from './PromptCancelButton.js';
+import {PromptConfirmButton, PromptConfirmButtonStylesNamesVariant} from './PromptConfirmButton.js';
+import CriticalIcon from './icons/CriticalIcon.js';
+import InfoIcon from './icons/InfoIcon.js';
+import SuccessIcon from './icons/SuccessIcon.js';
+import WarningIcon from './icons/WarningIcon.js';
+
+export type PromptVariant = 'success' | 'warning' | 'critical' | 'info';
+export type PromptVars = {root: '--prompt-icon-size'};
+export type PromptStylesNames =
+    | Exclude<ModalStylesNames, 'title'>
+    | 'icon'
+    | PromptCancelButtonStylesNamesVariant
+    | PromptConfirmButtonStylesNamesVariant;
+
+export interface PromptProps
+    extends StylesApiProps<PromptFactory>,
+        Omit<ModalRootProps, 'classNames' | 'styles' | 'vars' | 'attributes'> {
+    /**
+     * Controls prompt appearance
+     *
+     * @default "info"
+     */
+    variant?: PromptVariant;
+    children: ReactNode;
+    title: ReactNode;
+}
+
+export type PromptFactory = Factory<{
+    props: PromptProps;
+    ref: HTMLDivElement;
+    vars: PromptVars;
+    variant: PromptVariant;
+    stylesNames: PromptStylesNames;
+    staticComponents: {
+        CancelButton: typeof PromptCancelButton;
+        ConfirmButton: typeof PromptConfirmButton;
+        Footer: typeof PromptFooter;
+    };
+}>;
+
+const PromptVariantIconsMapping: Record<PromptVariant, ComponentType> = {
+    success: SuccessIcon,
+    warning: WarningIcon,
+    critical: CriticalIcon,
+    info: InfoIcon,
+};
+
+const defaultProps: Partial<PromptProps> = {
+    variant: 'info',
+    centered: true,
+};
+
+export const Prompt = factory<PromptFactory>((_props, ref) => {
+    const props = useProps('Prompt', defaultProps, _props);
+    const {
+        variant,
+        title,
+        children,
+        className,
+        classNames,
+        style,
+        styles,
+        unstyled,
+        vars,
+        attributes: _attributes,
+        ...others
+    } = props;
+    const getStyles = useStyles<PromptFactory>({
+        name: 'Prompt',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+    });
+    const stylesApiProps = {classNames, styles};
+
+    const footers: ReactElement[] = [];
+    const otherChildren: ReactElement[] = [];
+
+    Children.forEach(children, (child: ReactElement) => {
+        (child.type === Prompt.Footer ? footers : otherChildren).push(child);
+    });
+
+    const IconComponent = PromptVariantIconsMapping[variant];
+
+    return (
+        <PromptContextProvider value={{variant, getStyles}}>
+            <Modal.Root ref={ref} variant="prompt" size="sm" {...others} {...getStyles('root')}>
+                <Modal.Overlay {...getStyles('overlay', stylesApiProps)} />
+                <Modal.Content {...getStyles('content', stylesApiProps)}>
+                    <Modal.Header {...getStyles('header', stylesApiProps)}>
+                        <IconComponent />
+                        <Modal.Title>
+                            <Title order={3} component="div">
+                                {title}
+                            </Title>
+                        </Modal.Title>
+                        <Modal.CloseButton {...getStyles('close', stylesApiProps)} />
+                    </Modal.Header>
+                    <Modal.Body {...getStyles('body', stylesApiProps)}>
+                        <Box {...getStyles('inner', stylesApiProps)}>{otherChildren}</Box>
+                    </Modal.Body>
+                    {footers}
+                </Modal.Content>
+            </Modal.Root>
+        </PromptContextProvider>
+    );
+});
+
+const PromptFooter = Modal.Footer.withProps({pt: 0});
+
+Prompt.CancelButton = PromptCancelButton;
+Prompt.ConfirmButton = PromptConfirmButton;
+Prompt.Footer = PromptFooter;

package/src/components/Prompt/PromptCancelButton.tsx

@@ -0,0 +1,26 @@
+import {CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
+import {Button, ButtonProps} from '../Button/Button.js';
+import {usePromptContext} from './Prompt.context.js';
+
+export type PromptCancelButtonStylesNamesVariant = 'cancel';
+
+export interface PromptCancelButtonProps
+    extends CompoundStylesApiProps<PromptCancelButtonFactory>,
+        Omit<ButtonProps, 'primary' | 'classNames' | 'styles' | 'vars' | 'variant'> {}
+
+export type PromptCancelButtonFactory = Factory<{
+    props: PromptCancelButtonProps;
+    ref: HTMLButtonElement;
+    stylesNames: PromptCancelButtonStylesNamesVariant;
+    compound: true;
+}>;
+
+const defaultProps: Partial<PromptCancelButtonProps> = {};
+
+export const PromptCancelButton = factory<PromptCancelButtonFactory>((_props, ref) => {
+    const {getStyles} = usePromptContext();
+    const props = useProps('PromptCancelButton', defaultProps, _props);
+    const {className, classNames, style, styles, unstyled, vars, ...others} = props;
+
+    return <Button.Tertiary ref={ref} {...others} {...getStyles('cancel', {style, styles, className, classNames})} />;
+});

package/src/components/Prompt/PromptConfirmButton.tsx

@@ -0,0 +1,60 @@
+import {CompoundStylesApiProps, factory, Factory, PolymorphicComponentProps, useProps} from '@mantine/core';
+import {JSXElementConstructor, ReactElement} from 'react';
+import {Button, ButtonProps} from '../Button/Button.js';
+import {PromptVariant} from './Prompt.js';
+import {usePromptContext} from './Prompt.context.js';
+
+export type PromptConfirmButtonStylesNamesVariant = 'confirm';
+
+export interface PromptConfirmButtonProps
+    extends CompoundStylesApiProps<PromptConfirmButtonFactory>,
+        Omit<ButtonProps, 'primary' | 'classNames' | 'styles' | 'vars' | 'variant'> {}
+
+export type PromptConfirmButtonFactory = Factory<{
+    props: PromptConfirmButtonProps;
+    ref: HTMLButtonElement;
+    stylesNames: PromptConfirmButtonStylesNamesVariant;
+    compound: true;
+}>;
+
+const COMPONENT_BY_VARIANT: Record<
+    PromptVariant,
+    <L = 'button'>(
+        props: PolymorphicComponentProps<L, ButtonProps>,
+    ) => ReactElement<any, string | JSXElementConstructor<any>>
+> = {
+    success: Button.Primary,
+    info: Button.Primary,
+    warning: Button.DestructivePrimary,
+    critical: Button.DestructivePrimary,
+};
+
+const defaultProps: Partial<PromptConfirmButtonProps> = {};
+
+export const PromptConfirmButton = factory<PromptConfirmButtonFactory>((_props, ref) => {
+    const {variant, getStyles} = usePromptContext();
+    const props = useProps('PromptConfirmButton', defaultProps, _props);
+    const {
+        className,
+        classNames,
+        style,
+        styles,
+        unstyled,
+        vars,
+        disabled,
+        disabledTooltip,
+        disabledTooltipProps,
+        ...others
+    } = props;
+    const Component = COMPONENT_BY_VARIANT[variant];
+    return (
+        <Component
+            ref={ref}
+            disabled={disabled}
+            disabledTooltip={disabledTooltip}
+            disabledTooltipProps={disabledTooltipProps}
+            {...others}
+            {...getStyles('confirm', {style, styles, className, classNames})}
+        />
+    );
+});

package/src/components/Radio/Radio.ts

@@ -0,0 +1 @@
+export {Radio, type RadioFactory, type RadioProps} from '@mantine/core';

package/src/components/Rating/Rating.ts

@@ -0,0 +1 @@
+export {Rating, type RatingFactory, type RatingProps} from '@mantine/core';

package/src/components/RingProgress/RingProgress.ts

@@ -0,0 +1 @@
+export {RingProgress, type RingProgressFactory, type RingProgressProps} from '@mantine/core';

package/src/components/ScrollArea/ScrollArea.ts

@@ -0,0 +1 @@
+export {ScrollArea, type ScrollAreaFactory, type ScrollAreaProps} from '@mantine/core';

package/src/components/SegmentedControl/SegmentedControl.ts

@@ -0,0 +1 @@
+export {SegmentedControl, type SegmentedControlFactory, type SegmentedControlProps} from '@mantine/core';

package/src/components/Select/Select.tsx

@@ -0,0 +1,11 @@
+import {factory, Select as MantineSelect, SelectFactory} from '@mantine/core';
+import {readOnlyInputStyles} from '../ReadOnly/ReadOnlyInputStyles.js';
+
+const ReadOnlySelect = MantineSelect.withProps({styles: readOnlyInputStyles});
+
+export const Select = factory<SelectFactory>((props, ref) => {
+    if (props.readOnly && !props.disabled) {
+        return <ReadOnlySelect ref={ref} {...props} />;
+    }
+    return <MantineSelect ref={ref} {...props} />;
+});

package/src/components/SemiCircleProgress/SemiCircleProgress.ts

@@ -0,0 +1 @@
+export {SemiCircleProgress, type SemiCircleProgressFactory, type SemiCircleProgressProps} from '@mantine/core';

package/src/components/SimpleGrid/SimpleGrid.ts

@@ -0,0 +1 @@
+export {SimpleGrid, type SimpleGridFactory, type SimpleGridProps} from '@mantine/core';

package/src/components/Skeleton/Skeleton.ts

@@ -0,0 +1 @@
+export {Skeleton, type SkeletonFactory, type SkeletonProps} from '@mantine/core';

package/src/components/Slider/Slider.ts

@@ -0,0 +1 @@
+export {Slider, type SliderFactory, type SliderProps} from '@mantine/core';

package/src/components/Space/Space.ts

@@ -0,0 +1 @@
+export {Space, type SpaceFactory, type SpaceProps} from '@mantine/core';

package/src/components/Spoiler/Spoiler.ts

@@ -0,0 +1 @@
+export {Spoiler, type SpoilerFactory, type SpoilerProps} from '@mantine/core';

package/src/components/Stack/Stack.ts

@@ -0,0 +1 @@
+export {Stack, type StackFactory, type StackProps} from '@mantine/core';

package/src/components/Stepper/Stepper.ts

@@ -0,0 +1 @@
+export {Stepper, type StepperFactory, type StepperProps} from '@mantine/core';

package/src/components/Switch/Switch.ts

@@ -0,0 +1 @@
+export {Switch, type SwitchFactory, type SwitchProps} from '@mantine/core';

package/src/components/Table/Table.tsx

@@ -0,0 +1,321 @@
+import {Box, Center, Factory, Loader, useProps, useStyles} from '@mantine/core';
+import {useClickOutside, useMergedRef} from '@mantine/hooks';
+import {
+    ColumnDef,
+    Row,
+    RowSelectionState,
+    defaultColumnSizing,
+    getCoreRowModel,
+    useReactTable,
+} from '@tanstack/react-table';
+import isEqual from 'fast-deep-equal';
+import {Children, ForwardedRef, ReactElement, useEffect, useRef} from 'react';
+import {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';
+import classes from './Table.module.css';
+import {TableLayout, TableProps} from './Table.types.js';
+import {TableProvider} from './TableContext.js';
+import {TableLayouts} from './layouts/TableLayouts.js';
+import {TableActionItem, TableActionItemStylesNames} from './table-actions/TableActionItem.js';
+import {TableHeaderActionsStylesNames} from './table-actions/TableHeaderActions.js';
+import {TableActionsListStylesNames} from './table-actions/TableActionsList.js';
+import {TableActionsColumn} from './table-column/TableActionsColumn.js';
+import {
+    TableAccordionColumn,
+    TableCollapsibleColumn,
+    TableCollapsibleColumnStylesNames,
+} from './table-column/TableCollapsibleColumn.js';
+import {TableSelectableColumn} from './table-column/TableSelectableColumn.js';
+import {TableColumnsSelector, TableColumnsSelectorStylesNames} from './table-columns-selector/TableColumnsSelector.js';
+import {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker.js';
+import {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter.js';
+import {TableFooter} from './table-footer/TableFooter.js';
+import {TableHeader, TableHeaderStylesNames} from './table-header/TableHeader.js';
+import {TableThStylesNames} from './table-header/Th.js';
+import {TableLastUpdated, TableLastUpdatedStylesNames} from './table-last-updated/TableLastUpdated.js';
+import {TableLoading} from './table-loading/TableLoading.js';
+import {TableNoData} from './table-no-data/TableNoData.js';
+import {TablePagination} from './table-pagination/TablePagination.js';
+import {TablePerPage} from './table-per-page/TablePerPage.js';
+import {TablePredicate, TablePredicateStylesNames} from './table-predicate/TablePredicate.js';
+import {TableState} from './use-table.js';
+
+type TableStylesNames =
+    | 'root'
+    | 'table'
+    | 'header'
+    | 'body'
+    | TableHeaderActionsStylesNames
+    | TableActionsListStylesNames
+    | TableActionItemStylesNames
+    | TableCollapsibleColumnStylesNames
+    | TableDateRangePickerStylesNames
+    | TableFilterStylesNames
+    | TableHeaderStylesNames
+    | TableThStylesNames
+    | TableLastUpdatedStylesNames
+    | TablePredicateStylesNames
+    | TableColumnsSelectorStylesNames;
+
+export type PlasmaTableFactory = Factory<{
+    props: TableProps<unknown>;
+    ref: HTMLDivElement;
+    stylesNames: TableStylesNames;
+    staticComponents: {
+        AccordionColumn: typeof TableAccordionColumn;
+        ActionsColumn: typeof TableActionsColumn;
+        ActionItem: typeof TableActionItem;
+        CollapsibleColumn: typeof TableCollapsibleColumn;
+        ColumnsSelector: typeof TableColumnsSelector;
+        DateRangePicker: typeof TableDateRangePicker;
+        Filter: typeof TableFilter;
+        Footer: typeof TableFooter;
+        Header: typeof TableHeader;
+        LastUpdated: typeof TableLastUpdated;
+        Layouts: typeof TableLayouts;
+        Loading: typeof TableLoading;
+        NoData: typeof TableNoData;
+        Pagination: typeof TablePagination;
+        PerPage: typeof TablePerPage;
+        Predicate: typeof TablePredicate;
+    };
+}>;
+
+const defaultProps: Partial<TableProps<unknown>> = {
+    layouts: [TableLayouts.Rows as TableLayout],
+    layoutProps: {},
+    loading: false,
+    additionalRootNodes: [],
+    options: {},
+    getRowActions: () => [],
+};
+
+export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {
+    const {
+        store,
+        data,
+        getRowId,
+        getRowAttributes,
+        getRowExpandedContent,
+        getRowActions,
+        columns,
+        layouts,
+        layoutProps,
+        children,
+        loading,
+        additionalRootNodes,
+        options,
+        ref,
+
+        // Style props
+        style,
+        className,
+        classNames,
+        styles,
+        unstyled,
+        ...others
+    } = useProps('PlasmaTable', defaultProps as TableProps<T>, props);
+
+    const getStyles = useStyles<PlasmaTableFactory>({
+        name: 'PlasmaTable',
+        classes,
+        props: props as TableProps<unknown>,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+    });
+
+    const convertedChildren = Children.toArray(children) as ReactElement[];
+    const header = convertedChildren.find((child) => child.type === TableHeader);
+    const footer = convertedChildren.find((child) => child.type === TableFooter);
+    const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);
+    const noData = convertedChildren.find((child) => child.type === TableNoData);
+
+    const table = useReactTable({
+        data: data || [],
+        state: {
+            globalFilter: store.state.globalFilter,
+            sorting: store.state.sorting,
+            pagination: store.state.pagination,
+            columnVisibility: store.state.columnVisibility,
+            expanded: store.state.expanded,
+        },
+        onGlobalFilterChange: store.setGlobalFilter,
+        onExpandedChange: store.setExpanded,
+        onSortingChange: store.setSorting,
+        onPaginationChange: store.setPagination,
+        onColumnVisibilityChange: store.setColumnVisibility,
+        columns: store.multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: options?.getPaginationRowModel === undefined,
+        enableMultiRowSelection: !!store.multiRowSelectionEnabled,
+        getRowId,
+        getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row),
+        enableRowSelection: !loading,
+        defaultColumn: {
+            size: undefined,
+            minSize: defaultColumnSizing.minSize,
+            maxSize: defaultColumnSizing.maxSize,
+        },
+        rowCount: options?.getFilteredRowModel ? undefined : store.state.totalEntries,
+        ...options,
+    });
+
+    table.setOptions((prev) => ({
+        ...prev,
+        state: {
+            ...prev.state,
+            rowSelection: store.state.rowSelection as RowSelectionState,
+        },
+        onRowSelectionChange: (rowSelectionUpdater) => {
+            store.setRowSelection((old) => {
+                const newRowSelection = (
+                    rowSelectionUpdater instanceof Function
+                        ? rowSelectionUpdater(old as RowSelectionState)
+                        : rowSelectionUpdater
+                ) as TableState<T>['rowSelection'];
+
+                if (isEqual(old, newRowSelection)) {
+                    return old;
+                }
+
+                const rows = table.getRowModel().rowsById;
+
+                Object.keys(newRowSelection).forEach((rowId) => {
+                    if (newRowSelection[rowId] === true) {
+                        if (!rows[rowId]) {
+                            console.error(
+                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',
+                            );
+                        }
+                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);
+                    }
+                });
+
+                return newRowSelection;
+            });
+        },
+    }));
+
+    useEffect(() => {
+        // Update the selected rows data when the data prop changes
+        if (store.getSelectedRows().length > 0) {
+            store.setRowSelection((old) => {
+                const rowsById = table.getRowModel().rowsById;
+                const newSelection = {...old};
+                Object.keys(old).forEach((rowId) => {
+                    if (rowsById[rowId]) {
+                        newSelection[rowId] = rowsById[rowId].original;
+                    }
+                });
+                return isEqual(newSelection, old) ? old : newSelection;
+            });
+        }
+    }, [data]);
+
+    const containerRef = useRef<HTMLDivElement>();
+    useClickOutside(
+        () => {
+            if (!store.multiRowSelectionEnabled && store.getSelectedRows().length > 0) {
+                store.clearRowSelection();
+            }
+        },
+        null,
+        [containerRef.current, ...additionalRootNodes],
+    );
+    const mergedRef = useMergedRef(containerRef, ref);
+
+    if (!data) {
+        return (
+            <Center style={{flexGrow: 1}}>
+                <Loader />
+            </Center>
+        );
+    }
+
+    const Layout =
+        store.state.layout === null ? layouts[0] : layouts.find(({displayName}) => displayName === store.state.layout);
+    const hasRows = table.getRowModel().rows.length > 0;
+
+    return (
+        <Box ref={mergedRef} {...others} {...getStyles('root')}>
+            <TableProvider<T> value={{getStyles, getRowActions, store, table, layouts, containerRef}}>
+                <Layout>
+                    {store.isVacant && !store.isFiltered ? (
+                        noData
+                    ) : (
+                        <>
+                            <Box component="table" {...getStyles('table')} mod={{loading}}>
+                                <thead {...getStyles('header')}>
+                                    {header ? (
+                                        <tr>
+                                            <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
+                                                {header}
+                                            </th>
+                                        </tr>
+                                    ) : null}
+                                    <Layout.Header
+                                        getRowExpandedContent={getRowExpandedContent}
+                                        getRowAttributes={getRowAttributes}
+                                        loading={loading}
+                                        {...layoutProps}
+                                    />
+                                </thead>
+                                <tbody {...getStyles('body')}>
+                                    {hasRows ? (
+                                        <Layout.Body
+                                            getRowExpandedContent={getRowExpandedContent}
+                                            getRowAttributes={getRowAttributes}
+                                            loading={loading}
+                                            {...layoutProps}
+                                        />
+                                    ) : (
+                                        <tr>
+                                            <td colSpan={table.getAllColumns().length}>
+                                                <TableLoading visible={loading || !store.isFiltered}>
+                                                    {noData}
+                                                </TableLoading>
+                                            </td>
+                                        </tr>
+                                    )}
+                                </tbody>
+                            </Box>
+                            {footer}
+                            {lastUpdated}
+                        </>
+                    )}
+                </Layout>
+            </TableProvider>
+        </Box>
+    );
+};
+
+export const TableComponentsOrder = {
+    MultiSelectInfo: 7,
+    Actions: 6,
+    Predicate: 5,
+    Filter: 4,
+    DateRangePicker: 3,
+    ColumnsSelector: 2,
+    LayoutControl: 1,
+};
+
+Table.AccordionColumn = TableAccordionColumn;
+Table.ActionsColumn = TableActionsColumn;
+Table.ActionItem = TableActionItem;
+Table.CollapsibleColumn = TableCollapsibleColumn;
+Table.ColumnsSelector = TableColumnsSelector;
+Table.DateRangePicker = TableDateRangePicker;
+Table.Filter = TableFilter;
+Table.Footer = TableFooter;
+Table.Header = TableHeader;
+Table.LastUpdated = TableLastUpdated;
+Table.Layouts = TableLayouts;
+Table.Loading = TableLoading;
+Table.NoData = TableNoData;
+Table.Pagination = TablePagination;
+Table.PerPage = TablePerPage;
+Table.Predicate = TablePredicate;
+
+Table.extend = identity as CustomComponentThemeExtend<PlasmaTableFactory>;