@vuu-ui/vuu-table-extras 2.1.19-beta.2 → 2.1.19-beta.3

package/src/column-expression-input/column-language-parser/column-expression-parse-utils.js

@@ -1,56 +0,0 @@
-import { parser } from "./generated/column-parser.js";
-const strictParser = parser.configure({
-    strict: true
-});
-const RelationalOperands = [
-    "Number",
-    "String"
-];
-const ColumnNamedTerms = [
-    ...RelationalOperands,
-    "AndCondition",
-    "ArithmeticExpression",
-    "BooleanOperator",
-    "RelationalOperatorOperator",
-    "CallExpression",
-    "CloseBrace",
-    "Column",
-    "Comma",
-    "ConditionalExpression",
-    "Divide",
-    "Equal",
-    "If",
-    "Minus",
-    "OpenBrace",
-    "OrCondition",
-    "ParenthesizedExpression",
-    "Plus",
-    "RelationalExpression",
-    "RelationalOperator",
-    "Times"
-];
-const isCompleteExpression = (src)=>{
-    try {
-        strictParser.parse(src);
-        return true;
-    } catch (err) {
-        return false;
-    }
-};
-const lastNamedChild = (node)=>{
-    let { lastChild } = node;
-    while(lastChild && !ColumnNamedTerms.includes(lastChild.name)){
-        lastChild = lastChild.prevSibling;
-        console.log(lastChild?.name);
-    }
-    return lastChild;
-};
-const isCompleteRelationalExpression = (node)=>{
-    if (node?.name === "RelationalExpression") {
-        const { firstChild } = node;
-        const lastChild = lastNamedChild(node);
-        if (firstChild?.name === "Column" && "string" == typeof lastChild?.name && RelationalOperands.includes(lastChild.name)) return true;
-    }
-    return false;
-};
-export { ColumnNamedTerms, isCompleteExpression, isCompleteRelationalExpression, lastNamedChild };

package/src/column-expression-input/column-language-parser/index.js

@@ -1,3 +0,0 @@
-export * from "./ColumnExpressionLanguage.js";
-export * from "./ColumnExpressionTreeWalker.js";
-export * from "./column-expression-parse-utils.js";

package/src/column-expression-input/functionDocInfo.js

@@ -1,24 +0,0 @@
-import { createEl } from "@vuu-ui/vuu-utils";
-const functionDocInfo = ({ name, description, example, params, type })=>{
-    const rootElement = createEl("div", "vuuFunctionDoc");
-    const headingElement = createEl("div", "function-heading");
-    const nameElement = createEl("span", "function-name", name);
-    const paramElement = createEl("span", "param-list", params.description);
-    const typeElement = createEl("span", "function-type", type);
-    headingElement.appendChild(nameElement);
-    headingElement.appendChild(paramElement);
-    headingElement.appendChild(typeElement);
-    const child2 = createEl("p", void 0, description);
-    rootElement.appendChild(headingElement);
-    rootElement.appendChild(child2);
-    if (example) {
-        const exampleElement = createEl("div", "example-container");
-        const expressionElement = createEl("div", "example-expression", example.expression);
-        const resultElement = createEl("div", "example-result", example.result);
-        exampleElement.appendChild(expressionElement);
-        rootElement.appendChild(exampleElement);
-        rootElement.appendChild(resultElement);
-    }
-    return rootElement;
-};
-export { functionDocInfo };

package/src/column-expression-input/highlighting.js

@@ -1,18 +0,0 @@
-import { HighlightStyle, syntaxHighlighting, tags } from "@vuu-ui/vuu-codemirror";
-const myHighlightStyle = HighlightStyle.define([
-    {
-        tag: tags.attributeValue,
-        color: "var(--vuuFilterEditor-variableColor);font-weight: bold"
-    },
-    {
-        tag: tags.variableName,
-        color: "var(--vuuFilterEditor-variableColor)"
-    },
-    {
-        tag: tags.comment,
-        color: "green",
-        fontStyle: "italic"
-    }
-]);
-const vuuHighlighting = syntaxHighlighting(myHighlightStyle);
-export { vuuHighlighting };

package/src/column-expression-input/index.js

@@ -1,4 +0,0 @@
-export * from "./ColumnExpressionInput.js";
-export * from "./column-language-parser/index.js";
-export * from "./useColumnExpressionEditor.js";
-export * from "./useColumnExpressionSuggestionProvider.js";

package/src/column-expression-input/theme.js

@@ -1,57 +0,0 @@
-import { EditorView } from "@vuu-ui/vuu-codemirror";
-const vuuTheme = EditorView.theme({
-    "&": {
-        border: "solid 1px var(--salt-container-primary-borderColor)",
-        color: "var(--vuuFilterEditor-color)",
-        backgroundColor: "var(--vuuFilterEditor-background)"
-    },
-    ".cm-content": {
-        caretColor: "var(--vuuFilterEditor-cursorColor)"
-    },
-    "&.cm-focused .cm-cursor": {
-        borderLeftColor: "var(--vuuFilterEditor-cursorColor)"
-    },
-    "&.cm-focused .cm-selectionBackground, ::selection": {
-        backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
-    },
-    ".cm-selectionBackground, ::selection": {
-        backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
-    },
-    ".cm-scroller": {
-        fontFamily: "var(--vuuFilterEditor-fontFamily)"
-    },
-    ".cm-completionLabel": {
-        color: "var(--vuu-color-gray-50)"
-    },
-    ".cm-completionMatchedText": {
-        color: "var(--vuu-color-gray-80)",
-        fontWeight: 700,
-        textDecoration: "none"
-    },
-    ".cm-tooltip": {
-        background: "var(--vuuFilterEditor-tooltipBackground)",
-        border: "var(--vuuFilterEditor-tooltipBorder)",
-        borderRadius: "4px",
-        boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
-        "&.cm-tooltip-autocomplete > ul": {
-            fontFamily: "var(--vuuFilterEditor-fontFamily)",
-            fontSize: "var(--vuuFilterEditor-fontSize)",
-            maxHeight: "240px"
-        },
-        "&.cm-tooltip-autocomplete > ul > li": {
-            height: "var(--vuuFilterEditor-suggestion-height)",
-            padding: "0 3px",
-            lineHeight: "var(--vuuFilterEditor-suggestion-height)"
-        },
-        "&.cm-tooltip-autocomplete li[aria-selected]": {
-            background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
-            color: "var(--vuuFilterEditor-suggestion-selectedColor)"
-        },
-        "&.cm-tooltip-autocomplete li .cm-completionDetail": {
-            color: "var(--vuuFilterEditor-suggestion-detailColor)"
-        }
-    }
-}, {
-    dark: false
-});
-export { vuuTheme };

package/src/column-expression-input/useColumnAutoComplete.js

@@ -1,307 +0,0 @@
-import { booleanJoinSuggestions, getNamedParentNode, getPreviousNode, getValue, syntaxTree } from "@vuu-ui/vuu-codemirror";
-import { useCallback } from "react";
-import { ColumnNamedTerms, isCompleteExpression, isCompleteRelationalExpression, lastNamedChild } from "./column-language-parser/index.js";
-const applyPrefix = (completions, prefix)=>prefix ? completions.map((completion)=>({
-            ...completion,
-            apply: "function" == typeof completion.apply ? completion.apply : `${prefix}${completion.apply ?? completion.label}`
-        })) : completions;
-const isOperator = (node)=>void 0 === node ? false : [
-        "Times",
-        "Divide",
-        "Plus",
-        "Minus"
-    ].includes(node.name);
-const completionDone = (onSubmit)=>({
-        apply: ()=>{
-            onSubmit?.();
-        },
-        label: "Done",
-        boost: 10
-    });
-const getLastChild = (node, context)=>{
-    let { lastChild: childNode } = node;
-    const { pos } = context;
-    while(childNode){
-        const isBeforeCursor = childNode.from < pos;
-        if (isBeforeCursor && ColumnNamedTerms.includes(childNode.name)) {
-            if ("ParenthesizedExpression" === childNode.name) {
-                const expression = childNode.firstChild?.nextSibling;
-                if (expression) childNode = expression;
-            }
-            return childNode;
-        }
-        childNode = childNode.prevSibling;
-    }
-};
-const getFunctionName = (node, state)=>{
-    if ("ArgList" === node.name) {
-        const functionNode = node.prevSibling;
-        if (functionNode) return getValue(functionNode, state);
-    } else if ("OpenBrace" === node.name) {
-        const maybeFunction = node.parent?.prevSibling;
-        if (maybeFunction?.name === "Function") return getValue(maybeFunction, state);
-    }
-};
-const getRelationalOperator = (node, state)=>{
-    if ("RelationalExpression" === node.name) {
-        const lastNode = lastNamedChild(node);
-        if (lastNode?.name === "RelationalOperator") return getValue(lastNode, state);
-    } else {
-        const prevNode = node.prevSibling;
-        if (prevNode?.name === "RelationalOperator") return getValue(prevNode, state);
-    }
-};
-const getColumnName = (node, state)=>{
-    if ("RelationalExpression" === node.name) {
-        if (node.firstChild?.name === "Column") return getValue(node.firstChild, state);
-    } else {
-        const prevNode = node.prevSibling;
-        if (prevNode?.name === "Column") return getValue(prevNode, state);
-        if (prevNode?.name === "RelationalOperator") return getColumnName(prevNode, state);
-    }
-};
-const useColumnAutoComplete_makeSuggestions = async (context, suggestionProvider, suggestionType, optionalArgs = {})=>{
-    const options = await suggestionProvider.getSuggestions(suggestionType, optionalArgs);
-    const { startsWith = "" } = optionalArgs;
-    return {
-        from: context.pos - startsWith.length,
-        options
-    };
-};
-const handleConditionalExpression = (node, context, suggestionProvider, maybeComplete, onSubmit)=>{
-    const lastChild = getLastChild(node, context);
-    switch(lastChild?.name){
-        case "If":
-            return useColumnAutoComplete_makeSuggestions(context, suggestionProvider, "expression", {
-                prefix: "( "
-            });
-        case "OpenBrace":
-            return useColumnAutoComplete_makeSuggestions(context, suggestionProvider, "expression");
-        case "Condition":
-            return useColumnAutoComplete_makeSuggestions(context, suggestionProvider, "expression", {
-                prefix: ", "
-            });
-        case "CloseBrace":
-            if (maybeComplete) {
-                const options = [
-                    completionDone(onSubmit)
-                ];
-                return {
-                    from: context.pos,
-                    options
-                };
-            }
-    }
-};
-const promptToSave = (context, onSubmit)=>{
-    const options = [
-        completionDone(onSubmit)
-    ];
-    return {
-        from: context.pos,
-        options
-    };
-};
-const useColumnAutoComplete = (suggestionProvider, onSubmit)=>{
-    const makeSuggestions = useCallback(async (context, suggestionType, optionalArgs = {})=>{
-        const options = await suggestionProvider.getSuggestions(suggestionType, optionalArgs);
-        const { startsWith = "" } = optionalArgs;
-        return {
-            from: context.pos - startsWith.length,
-            options
-        };
-    }, [
-        suggestionProvider
-    ]);
-    return useCallback(async (context)=>{
-        const { state, pos } = context;
-        const word = context.matchBefore(/\w*/) ?? {
-            from: 0,
-            to: 0,
-            text: void 0
-        };
-        const tree = syntaxTree(state);
-        const nodeBefore = tree.resolveInner(pos, -1);
-        const text = state.doc.toString();
-        const maybeComplete = isCompleteExpression(text);
-        switch(nodeBefore.name){
-            case "If":
-                return makeSuggestions(context, "expression", {
-                    prefix: "( "
-                });
-            case "Condition":
-                {
-                    const lastChild = getLastChild(nodeBefore, context);
-                    if (lastChild?.name === "Column") {
-                        const prevChild = getPreviousNode(lastChild);
-                        if (prevChild?.name !== "RelationalOperator") return makeSuggestions(context, "condition-operator", {
-                            columnName: getValue(lastChild, state)
-                        });
-                    } else if (lastChild?.name === "RelationalOperator") return makeSuggestions(context, "expression");
-                }
-                break;
-            case "ConditionalExpression":
-                return handleConditionalExpression(nodeBefore, context, suggestionProvider);
-            case "RelationalExpression":
-                if (isCompleteRelationalExpression(nodeBefore)) return {
-                    from: context.pos,
-                    options: booleanJoinSuggestions.concat({
-                        label: ", <truthy expression>, <falsy expression>",
-                        apply: ", "
-                    })
-                };
-                {
-                    const operator = getRelationalOperator(nodeBefore, state);
-                    const columnName = getColumnName(nodeBefore, state);
-                    if (operator) return makeSuggestions(context, "expression");
-                    {
-                        const options = await suggestionProvider.getSuggestions("condition-operator", {
-                            columnName
-                        });
-                        return {
-                            from: context.pos,
-                            options
-                        };
-                    }
-                }
-            case "RelationalOperator":
-                return makeSuggestions(context, "expression");
-            case "String":
-                {
-                    const operator = getRelationalOperator(nodeBefore, state);
-                    const columnName = getColumnName(nodeBefore, state);
-                    const { from, to } = nodeBefore;
-                    if (to - from === 2 && context.pos === from + 1) {
-                        if (columnName && operator) return makeSuggestions(context, "columnValue", {
-                            columnName,
-                            operator,
-                            startsWith: word.text
-                        });
-                    } else if (to - from > 2 && context.pos === to) return makeSuggestions(context, "expression", {
-                        prefix: ", "
-                    });
-                }
-                break;
-            case "ArithmeticExpression":
-                {
-                    const lastChild = getLastChild(nodeBefore, context);
-                    if (lastChild?.name === "Column") return makeSuggestions(context, "expression");
-                    if (isOperator(lastChild)) {
-                        const operator = lastChild.name;
-                        return makeSuggestions(context, "column", {
-                            operator
-                        });
-                    }
-                }
-                break;
-            case "OpenBrace":
-                {
-                    const functionName = getFunctionName(nodeBefore, state);
-                    return makeSuggestions(context, "expression", {
-                        functionName
-                    });
-                }
-            case "ArgList":
-                {
-                    const functionName = getFunctionName(nodeBefore, state);
-                    const lastArgument = getLastChild(nodeBefore, context);
-                    const prefix = lastArgument?.name === "OpenBrace" || lastArgument?.name === "Comma" ? void 0 : ",";
-                    let options = await suggestionProvider.getSuggestions("expression", {
-                        functionName
-                    });
-                    options = prefix ? applyPrefix(options, ", ") : options;
-                    if (lastArgument?.name !== "OpenBrace" && lastArgument?.name !== "Comma") options = [
-                        {
-                            apply: ") ",
-                            boost: 10,
-                            label: "Done - no more arguments"
-                        }
-                    ].concat(options);
-                    return {
-                        from: context.pos,
-                        options
-                    };
-                }
-            case "Equal":
-                if ("=" === text.trim()) return makeSuggestions(context, "expression");
-                break;
-            case "ParenthesizedExpression":
-            case "ColumnDefinitionExpression":
-                if (0 === context.pos) return makeSuggestions(context, "expression");
-                {
-                    const lastChild = getLastChild(nodeBefore, context);
-                    if (lastChild?.name === "Column") {
-                        if (maybeComplete) {
-                            const options = [
-                                completionDone(onSubmit.current)
-                            ];
-                            const columnName = getValue(lastChild, state);
-                            const columnOptions = await suggestionProvider.getSuggestions("operator", {
-                                columnName
-                            });
-                            return {
-                                from: context.pos,
-                                options: options.concat(columnOptions)
-                            };
-                        }
-                    } else if (lastChild?.name === "CallExpression") {
-                        if (maybeComplete) return {
-                            from: context.pos,
-                            options: [
-                                completionDone(onSubmit.current)
-                            ]
-                        };
-                    } else if (lastChild?.name === "ArithmeticExpression") {
-                        if (maybeComplete) {
-                            let options = [
-                                completionDone(onSubmit.current)
-                            ];
-                            const lastExpressionChild = getLastChild(lastChild, context);
-                            if (lastExpressionChild?.name === "Column") {
-                                const columnName = getValue(lastExpressionChild, state);
-                                const suggestions = await suggestionProvider.getSuggestions("operator", {
-                                    columnName
-                                });
-                                options = options.concat(suggestions);
-                            }
-                            return {
-                                from: context.pos,
-                                options
-                            };
-                        }
-                    } else if (lastChild?.name === "ConditionalExpression") return handleConditionalExpression(lastChild, context, suggestionProvider, maybeComplete, onSubmit.current);
-                    break;
-                }
-            case "Column":
-                {
-                    const isPartialMatch = await suggestionProvider.isPartialMatch("expression", void 0, word.text);
-                    if (isPartialMatch) return makeSuggestions(context, "expression", {
-                        startsWith: word.text
-                    });
-                }
-                break;
-            case "Comma":
-                {
-                    const parentNode = getNamedParentNode(nodeBefore);
-                    if (parentNode?.name === "ConditionalExpression") return makeSuggestions(context, "expression");
-                }
-                break;
-            case "CloseBrace":
-                {
-                    const parentNode = getNamedParentNode(nodeBefore);
-                    if (parentNode?.name === "ConditionalExpression") return handleConditionalExpression(parentNode, context, suggestionProvider, maybeComplete, onSubmit.current);
-                    if (parentNode?.name === "ArgList") {
-                        if (maybeComplete) return promptToSave(context, onSubmit.current);
-                    }
-                }
-                break;
-            default:
-                if (nodeBefore?.prevSibling?.name === "FilterClause") console.log("looks like we ight be a or|and operator");
-        }
-    }, [
-        makeSuggestions,
-        onSubmit,
-        suggestionProvider
-    ]);
-};
-export { useColumnAutoComplete };

package/src/column-expression-input/useColumnExpressionEditor.js

@@ -1,133 +0,0 @@
-import { EditorState, EditorView, autocompletion, defaultKeymap, ensureSyntaxTree, keymap, minimalSetup, startCompletion } from "@vuu-ui/vuu-codemirror";
-import { createEl } from "@vuu-ui/vuu-utils";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { columnExpressionLanguageSupport } from "./column-language-parser/index.js";
-import { walkTree } from "./column-language-parser/ColumnExpressionTreeWalker.js";
-import { vuuHighlighting } from "./highlighting.js";
-import { vuuTheme } from "./theme.js";
-import { useColumnAutoComplete } from "./useColumnAutoComplete.js";
-const getView = (ref)=>{
-    if (void 0 == ref.current) throw Error("EditorView not defined");
-    return ref.current;
-};
-const getOptionClass = ()=>"vuuSuggestion";
-const noop = ()=>console.log("noooop");
-const hasExpressionType = (completion)=>"expressionType" in completion;
-const injectOptionContent = (completion)=>{
-    if (!hasExpressionType(completion)) return null;
-    {
-        const div = createEl("div", "expression-type-container");
-        const span = createEl("span", "expression-type", completion.expressionType);
-        div.appendChild(span);
-        return div;
-    }
-};
-const useColumnExpressionEditor = ({ onChange, onSubmitExpression, source, suggestionProvider })=>{
-    const editorRef = useRef(null);
-    const onSubmitRef = useRef(noop);
-    const viewRef = useRef(void 0);
-    const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
-    const [createState, clearInput, submit] = useMemo(()=>{
-        const parseExpression = ()=>{
-            const view = getView(viewRef);
-            const source = view.state.doc.toString();
-            const tree = ensureSyntaxTree(view.state, view.state.doc.length, 5000);
-            if (!tree) return [
-                "",
-                void 0
-            ];
-            {
-                const expression = walkTree(tree, source);
-                return [
-                    source,
-                    expression
-                ];
-            }
-        };
-        const clearInput = ()=>{
-            getView(viewRef).setState(createState());
-        };
-        const submitExpression = ()=>{
-            const [source, expression] = parseExpression();
-            onSubmitExpression?.(source, expression);
-        };
-        const showSuggestions = (key)=>keymap.of([
-                {
-                    key,
-                    run () {
-                        startCompletion(getView(viewRef));
-                        return true;
-                    }
-                }
-            ]);
-        const createState = ()=>EditorState.create({
-                doc: source,
-                extensions: [
-                    minimalSetup,
-                    autocompletion({
-                        addToOptions: [
-                            {
-                                render: injectOptionContent,
-                                position: 70
-                            }
-                        ],
-                        override: [
-                            completionFn
-                        ],
-                        optionClass: getOptionClass
-                    }),
-                    columnExpressionLanguageSupport(),
-                    keymap.of(defaultKeymap),
-                    showSuggestions("ArrowDown"),
-                    EditorView.updateListener.of((v)=>{
-                        const view = getView(viewRef);
-                        if (v.docChanged) {
-                            startCompletion(view);
-                            const source = view.state.doc.toString();
-                            onChange?.(source);
-                        }
-                    }),
-                    EditorState.transactionFilter.of((tr)=>tr.newDoc.lines > 1 ? [] : tr),
-                    vuuTheme,
-                    vuuHighlighting
-                ]
-            });
-        onSubmitRef.current = ()=>{
-            submitExpression();
-        };
-        return [
-            createState,
-            clearInput,
-            submitExpression
-        ];
-    }, [
-        completionFn,
-        onChange,
-        onSubmitExpression,
-        source
-    ]);
-    useEffect(()=>{
-        if (!editorRef.current) throw Error("editor not in dom");
-        viewRef.current = new EditorView({
-            state: createState(),
-            parent: editorRef.current
-        });
-        return ()=>{
-            viewRef.current?.destroy();
-        };
-    }, [
-        completionFn,
-        createState
-    ]);
-    const handleBlur = useCallback(()=>{
-        submit();
-    }, [
-        submit
-    ]);
-    return {
-        editorRef,
-        clearInput,
-        onBlur: handleBlur
-    };
-};
-export { useColumnExpressionEditor };