@adaptabletools/adaptable 24.0.0-canary.0 → 24.0.0-canary.10

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/useSelection.js

@@ -1,63 +0,0 @@
-import { useState } from 'react';
-const useSelection = (columns, defaultValue, fieldName, changeListeners) => {
-    changeListeners = changeListeners || {};
-    const onChange = changeListeners.onChange || ((column, flag) => { });
-    const onBatchChange = changeListeners.onBatchChange || ((flag) => { });
-    const [selected, setSelected] = useState(typeof defaultValue === 'object'
-        ? defaultValue
-        : columns.reduce((acc, col) => {
-            const flag = fieldName ? col[fieldName] : defaultValue;
-            if (flag) {
-                acc[col.field] = flag;
-            }
-            return acc;
-        }, {}));
-    const getColumn = (field) => columns.filter((c) => c.field === field)[0];
-    const result = {
-        selected,
-        isSelected: (field) => !!selected[field],
-        isAllSelected: () => Object.keys(selected).length === columns.length,
-        isNoneSelected: () => Object.keys(selected).length === 0,
-        selectColumn: (field) => {
-            if (!selected[field]) {
-                setSelected({
-                    ...selected,
-                    [field]: true,
-                });
-                onChange(getColumn(field), true);
-            }
-        },
-        deselectColumn: (field) => {
-            if (selected[field]) {
-                const newSelected = { ...selected };
-                delete newSelected[field];
-                setSelected(newSelected);
-                onChange(getColumn(field), false);
-            }
-        },
-        toggleColumn: (field) => {
-            if (result.isSelected(field)) {
-                result.deselectColumn(field);
-            }
-            else {
-                result.selectColumn(field);
-            }
-        },
-        deselectAll: () => {
-            setSelected({});
-            columns.forEach((col) => {
-                onChange(col, false);
-            });
-            onBatchChange(false);
-        },
-        selectAll: () => {
-            setSelected(columns.reduce((acc, col) => {
-                acc[col.field] = true;
-                return acc;
-            }, {}));
-            onBatchChange(true);
-        },
-    };
-    return result;
-};
-export default useSelection;

package/src/View/AdaptableWizardView/Utilities/Utils.d.ts

@@ -1 +0,0 @@
-export declare const validDataSource: (dataSourceInfo: any) => boolean;

package/src/View/AdaptableWizardView/Utilities/Utils.js

@@ -1,21 +0,0 @@
-export const validDataSource = (dataSourceInfo) => {
-    if (!dataSourceInfo || !Array.isArray(dataSourceInfo.columns)) {
-        throw `We can't find any columns in your configuration`;
-    }
-    if (!dataSourceInfo.columns.length) {
-        throw 'You should have at least one column';
-    }
-    const allStringColumns = dataSourceInfo.columns.reduce((acc, col) => {
-        if (!col || typeof col !== 'string') {
-            return false;
-        }
-        return acc;
-    }, true);
-    if (!allStringColumns) {
-        throw `Some of your columns are not strings`;
-    }
-    if (!Array.isArray(dataSourceInfo.data)) {
-        throw `We can't find the data array in your configuration`;
-    }
-    return true;
-};

package/src/View/AdaptableWizardView/Utilities/helper.d.ts

@@ -1,19 +0,0 @@
-import { GridOptions } from 'ag-grid-enterprise';
-export interface WizardDataSourceInfo {
-    columns: string[];
-    data: any[];
-    primaryKey?: string;
-}
-/**
- * There are two ways in which the datasource can be dropped in the wizard:
- *
- * 1. array of objects - eg: [{"lastName":"John","firstName":"Bobson"},{"lastName":"Mike","firstName":"Richardson"},...]
- * 2. array of arrays - eg: [["lastName","firstName"],["John","Bobson"],["Mike","Richardson"],...]
- *
- * Although the second one is more compact, the first one is what we need for the datasource of the grid,
- * so if we receive v2, we transform it to 1
- * @param json
- */
-export declare const prepareDataSource: (json: any, _file?: File) => WizardDataSourceInfo;
-export declare const getColTypeFromValue: (value: any) => string;
-export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo, defaultGridOptions: Partial<GridOptions>) => GridOptions;

package/src/View/AdaptableWizardView/Utilities/helper.js

@@ -1,81 +0,0 @@
-export const prepareDataSource = (json, _file) => {
-    if (!Array.isArray(json) || !json.length) {
-        return {
-            primaryKey: undefined,
-            columns: [],
-            data: [],
-        };
-    }
-    let columns = [];
-    let data = [];
-    let primaryKey;
-    if (Array.isArray(json[0])) {
-        columns = json[0];
-        for (let i = 1, len = json.length; i < len; i++) {
-            const it = json[i];
-            const obj = {};
-            for (let j = 0; j < columns.length; j++) {
-                obj[columns[j]] = it[j];
-            }
-            data.push(obj);
-        }
-    }
-    else {
-        columns = Object.keys(json[0]);
-        data = json;
-    }
-    primaryKey = columns[0];
-    return {
-        primaryKey,
-        columns,
-        data,
-    };
-};
-const typeToColType = {
-    string: 'text',
-    number: 'number',
-    boolean: 'boolean',
-    date: 'date',
-};
-export const getColTypeFromValue = (value) => {
-    const dataType = typeof value;
-    let columnDataType = typeToColType[dataType] || typeToColType.string;
-    if (value instanceof Date) {
-        columnDataType = typeToColType.date;
-    }
-    if (Array.isArray(value) && value.length && typeof value[0] === 'number') {
-        columnDataType = 'numberArray';
-    }
-    return columnDataType;
-};
-export const prepareGridOptions = (dataSourceInfo, defaultGridOptions) => {
-    const firstItem = dataSourceInfo.data[0];
-    const columnDefs = dataSourceInfo.columns.map((columnName) => {
-        const firstItemValue = firstItem[columnName];
-        const columnType = getColTypeFromValue(firstItemValue);
-        return {
-            headerName: columnName,
-            field: columnName,
-            type: columnType,
-            filter: true,
-            sortable: true,
-            enableRowGroup: true,
-            resizable: true,
-            editable: true,
-        };
-    });
-    const gridOptions = {
-        ...defaultGridOptions,
-        defaultColDef: {
-            floatingFilter: true,
-        },
-        rowData: dataSourceInfo.data,
-        columnDefs,
-        cellSelection: true,
-        rowSelection: {
-            mode: 'multiRow',
-        },
-        rowHeight: 30,
-    };
-    return gridOptions;
-};

package/src/View/AdaptableWizardView/Wizard.d.ts

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Reducer, ReactNode } from 'react';
-import { GridOptions } from 'ag-grid-enterprise';
-import { AdaptableOptions } from '../../types';
-import { ConfigurationWizardProps } from './AdaptableConfigurationDialog/ConfigurationWizard';
-export interface AdaptableWizardViewProps {
-    adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
-        primaryKey?: string;
-    };
-    gridOptions?: GridOptions;
-    /**
-     * Default true.
-     */
-    ddEnabled?: boolean;
-    /**
-     * When true the the configuration wizard will be shown.
-     * It will use the available information in adaptableOptions & gridOptions.
-     * This mode skips over interpreting data to figure-out columns.
-     */
-    skipToWizard?: boolean;
-    onInit: (adaptableOptions: AdaptableOptions, gridOptions: GridOptions) => any;
-    fileContentsToJSON?: (str: string) => Promise<any> | any;
-    readFile?: (file: File) => Promise<any>;
-    fileAccept?: string;
-    helpText?: React.ReactNode;
-    loadingMessage?: ReactNode;
-    defaultActionMessage?: ReactNode;
-    dragOverActionMessage?: ReactNode;
-    fetchData?: () => Promise<Record<string, any>[]>;
-    showFetchDataWizard?: boolean;
-    startSections?: ConfigurationWizardProps['startSections'];
-    prepareData?: (data: any, file?: File) => {
-        columns: string[];
-        data: any[];
-        primaryKey?: string;
-    };
-}
-export declare const initialState: Partial<WizardState>;
-export declare const reducer: Reducer<WizardState, any>;
-interface WizardState {
-    dropped: boolean;
-    error: any;
-    adaptableOptions: AdaptableOptions;
-    gridOptions: GridOptions;
-}
-/**
- * The wizard in a few modes:
- *
- * 1. Based on data:
- * 1.1 Drag and drop a file
- * 1.2 Fetch data from a url
- *
- * 2. Based on configuration:
- * Provide a schema, on how the data looks like.
- */
-export declare const Wizard: (props: AdaptableWizardViewProps) => React.JSX.Element;
-export {};

package/src/View/AdaptableWizardView/Wizard.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useState, useEffect } from 'react';
-import { prepareDataSource, prepareGridOptions } from './Utilities/helper';
-import ConfigurationDialog from './AdaptableConfigurationDialog';
-import FileDroppable from '../../components/FileDroppable';
-import { validDataSource } from './Utilities/Utils';
-import { Flex } from '../../components/Flex';
-export const initialState = {
-    dropped: false,
-};
-export const reducer = (state, action) => {
-    if (action.type === 'DROPPED') {
-        return {
-            ...state,
-            adaptableOptions: action.payload.adaptableOptions,
-            gridOptions: action.payload.gridOptions,
-            dropped: true,
-            error: null,
-        };
-    }
-    if (action.type === 'ERROR') {
-        return {
-            ...state,
-            dropped: false,
-            error: action.payload,
-        };
-    }
-    if (action.type === 'CANCEL') {
-        return {
-            ...state,
-            error: null,
-            dropped: false,
-        };
-    }
-    return state;
-};
-export const Wizard = (props) => {
-    const [state, dispatch] = useReducer(reducer, {
-        ...initialState,
-        adaptableOptions: props.adaptableOptions,
-        gridOptions: props.gridOptions,
-    });
-    const [droppableKey, setDroppableKey] = useState(Date.now());
-    const [isDataLoading, setIsDataLoading] = useState(false);
-    const handleDataSource = (array, file) => {
-        const dataSourceInfo = (props.prepareData || prepareDataSource)(array, file);
-        try {
-            validDataSource(dataSourceInfo);
-        }
-        catch (err) {
-            return dispatch({
-                type: 'ERROR',
-                payload: `Invalid adaptable configuration - ${err}`,
-            });
-        }
-        const gridOptions = prepareGridOptions(dataSourceInfo, props.gridOptions);
-        const adaptableOptions = { ...props.adaptableOptions };
-        adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
-        if (dataSourceInfo.primaryKey) {
-            adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
-        }
-        const shouldShowWizard = props.fetchData ? Boolean(props.showFetchDataWizard) : true;
-        if (shouldShowWizard) {
-            dispatch({
-                type: 'DROPPED',
-                payload: { adaptableOptions, gridOptions },
-            });
-        }
-        else {
-            props.onInit(adaptableOptions, gridOptions);
-        }
-    };
-    let wizard;
-    if (props.skipToWizard || state.dropped) {
-        wizard = (_jsx(ConfigurationDialog, { startSections: props.startSections, adaptableConfig: {
-                adaptableOptions: state.adaptableOptions,
-                gridOptions: state.gridOptions,
-            }, onCancel: () => {
-                setDroppableKey(Date.now());
-                dispatch({
-                    type: 'CANCEL',
-                });
-            }, onFinish: (adaptableConfig) => {
-                props.onInit(adaptableConfig.adaptableOptions, adaptableConfig.gridOptions);
-            } }));
-    }
-    useEffect(() => {
-        if (props.fetchData) {
-            setIsDataLoading(true);
-            props.fetchData().then((data) => {
-                handleDataSource(data);
-                setIsDataLoading(false);
-            });
-        }
-    }, []);
-    const ddEnabled = props.ddEnabled ?? !props.fetchData;
-    return (_jsxs(_Fragment, { children: [ddEnabled && (_jsx(FileDroppable, { className: 'ab-NocodeWizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource }, droppableKey)), isDataLoading && (_jsx(Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column", children: props.loadingMessage || 'Loading ...' })), wizard] }));
-};

package/src/View/AdaptableWizardView/index.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { AdaptableWizardViewProps } from './Wizard';
-declare const AdaptableWizardView: React.FunctionComponent<React.PropsWithChildren<AdaptableWizardViewProps>>;
-export default AdaptableWizardView;

package/src/View/AdaptableWizardView/index.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Wizard } from './Wizard';
-const AdaptableWizardView = (props) => _jsx(Wizard, { ...props });
-export default AdaptableWizardView;

package/src/components/ColorPicker/ColorPicker.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { HTMLProps } from 'react';
-import { AdaptableApi } from '../../Api/AdaptableApi';
-import { BoxProps } from '../Flex';
-export type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
-    api: AdaptableApi;
-    onChange: (color: string) => void;
-    className?: string;
-    value: string;
-    includeAlpha?: boolean;
-} & Omit<BoxProps, 'onChange'>;
-export declare const ColorPicker: React.ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & React.RefAttributes<unknown>>;

package/src/components/ColorPicker/ColorPicker.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useCallback, useEffect } from 'react';
-import { debounce } from '../../Utilities/Helpers/TimingHelper';
-import { cn } from '../../lib/utils';
-import Input from '../Input';
-import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
-import tinycolor from 'tinycolor2';
-import { Box, Flex } from '../Flex';
-import { twMerge } from '../../twMerge';
-export const ColorPicker = React.forwardRef((props, ref) => {
-    const ColorPalette = props.api.userInterfaceApi.getColorPalette();
-    let { value, includeAlpha = true, className, ...restProps } = props;
-    const debouncedOnChange = useCallback(debounce((color) => {
-        props.onChange(color);
-    }, 30), [props.onChange]);
-    useEffect(() => {
-        return () => {
-            debouncedOnChange.cancel();
-        };
-    }, [debouncedOnChange]);
-    const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [getVariableColor(colorItem)]: colorItem }), {});
-    const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
-        return (_jsx("option", { value: x, children: x }, x));
-    });
-    const ABcolorChoices = _jsx("datalist", { id: 'ABcolorChoices', children: ABcolorChoicesOptions });
-    const preparedValue = React.useMemo(() => {
-        const color = getVariableColor(value);
-        return tinycolor(color).toHexString();
-    }, [value]);
-    const preparedAlphaColor = React.useMemo(() => {
-        const color = getVariableColor(value);
-        return [tinycolor(color).setAlpha(0).toRgbString(), tinycolor(color).setAlpha(1).toRgbString()];
-    }, [value]);
-    const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
-    const alpha = tinycolor(getVariableColor(value)).getAlpha();
-    return (_jsxs(Flex, { className: cn('ColorPicker twa:items-center twa:gap-2', {
-            'twa:opacity-30': props.disabled,
-        }, className), children: [_jsx(Input, { ...restProps, as: undefined, disabled: props.disabled, className: twMerge('ab-ColorPicker-swatch'), onChange: (event) => {
-                    const color = optionsMap[event.target.value] ?? event.target.value;
-                    debouncedOnChange(color);
-                }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }), ABcolorChoices, includeAlpha && (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1", children: [_jsx(Box, { children: "Opacity" }), _jsx(Flex, { alignItems: "center", className: "twa:min-h-input", children: _jsx(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                                const color = tinycolor(getVariableColor(value))
-                                    .setAlpha(event.target.value)
-                                    .toRgbString();
-                                debouncedOnChange(color);
-                            }, min: 0, max: 1, step: 0.01, type: "range" }) })] }))] }));
-});

package/src/components/ColorPicker/OptionalColorPicker.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { AdaptableApi } from '../../Api/AdaptableApi';
-export type OptionalColorPickerProps = {
-    api: AdaptableApi;
-    value: string | undefined;
-    onChange: (color: string | undefined) => void;
-    defaultColor?: string;
-    disabled?: boolean;
-    includeAlpha?: boolean;
-    className?: string;
-};
-export declare const OptionalColorPicker: React.FC<OptionalColorPickerProps>;

package/src/components/ColorPicker/OptionalColorPicker.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Flex } from '../Flex';
-import SimpleButton from '../SimpleButton';
-import { twMerge } from '../../twMerge';
-import { ColorPicker } from './ColorPicker';
-const DEFAULT_COLOR = '#000000';
-export const OptionalColorPicker = (props) => {
-    const { api, value, onChange, defaultColor = DEFAULT_COLOR, disabled = false, includeAlpha = true, className, } = props;
-    if (!value) {
-        return (_jsxs(Flex, { alignItems: "center", className: twMerge('OptionalColorPicker twa:gap-1', className), children: [_jsxs(Box, { className: "twa:relative twa:w-[36px] twa:h-[24px] twa:shrink-0", children: [_jsx(Box, { className: "ab-OptionalColorPicker-empty twa:absolute twa:inset-0 twa:pointer-events-none", "aria-hidden": true }), _jsx(ColorPicker, { api: api, value: defaultColor, disabled: disabled, includeAlpha: false, onChange: onChange, title: "Click to set colour", className: twMerge('twa:absolute twa:inset-0 twa:gap-0', 'twa:[&_.ab-ColorPicker-swatch]:absolute twa:[&_.ab-ColorPicker-swatch]:inset-0', 'twa:[&_.ab-ColorPicker-swatch]:size-full twa:[&_.ab-ColorPicker-swatch]:opacity-0') })] }), _jsx(Box, { className: "twa:text-2 twa:text-muted-foreground", children: "None" })] }));
-    }
-    return (_jsxs(Flex, { alignItems: "center", className: twMerge('OptionalColorPicker twa:gap-1', className), children: [_jsx(ColorPicker, { api: api, value: value, disabled: disabled, includeAlpha: includeAlpha, onChange: onChange }), _jsx(SimpleButton, { icon: "close", variant: "text", disabled: disabled, tooltip: "Clear colour", onClick: () => onChange(undefined) })] }));
-};

package/src/components/ColorPicker/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ColorPicker';
-export * from './OptionalColorPicker';

package/src/components/ColorPicker/index.js

@@ -1,2 +0,0 @@
-export * from './ColorPicker';
-export * from './OptionalColorPicker';