@shipfox/react-ui 0.28.0 → 0.30.0

package/dist/components/dashboard/pages/analytics-page.js

@@ -61,20 +61,14 @@ const performanceData = [
         dataD: 160
     }
 ];
-function generateDurationData() {
-    const count = 40;
-    const data = [];
-    for(let i = 0; i < count; i++){
-        const baseValue = 80 + Math.random() * 120;
-        const spike = i % 8 === 0 ? Math.random() * 300 : 0;
-        data.push({
-            label: String(i + 1),
-            value: Math.round(baseValue + spike)
-        });
-    }
-    return data;
-}
-const durationData = generateDurationData();
+// Deterministic bar chart data — sine-wave base with periodic spikes.
+// Avoids Math.random() so the chart renders identically on every run.
+const durationData = Array.from({
+    length: 40
+}, (_, i)=>({
+        label: String(i + 1),
+        value: Math.round(80 + 60 * (Math.sin(i * 1.3 + 0.5) + 1) + (i % 8 === 0 ? 180 : 0))
+    }));
 const KPI_VALUE_REGEX = /^([^\d]*)([\d.,]+)([^\d]*)$/;
 function parseKpiValue(value) {
     if (typeof value === 'number') {
@@ -113,7 +107,7 @@ function renderKpiValue(value) {
                 parsed.prefix,
                 /*#__PURE__*/ _jsx(CountUp, {
                     to: parsed.numericValue,
-                    from: 0,
+                    from: parsed.numericValue,
                     duration: 0.5,
                     className: "inline"
                 }),

package/dist/components/date-picker/date-picker.js

@@ -114,6 +114,7 @@ export const DatePicker = /*#__PURE__*/ forwardRef(({ className, variant, size,
                 align: "start",
                 children: /*#__PURE__*/ _jsx(Calendar, {
                     mode: "single",
+                    defaultMonth: date,
                     selected: date,
                     onSelect: handleSelect,
                     disabled: disabledDates,

package/dist/components/index.d.ts

@@ -35,6 +35,7 @@ export * from './search';
 export * from './select';
 export * from './sheet';
 export * from './shiny-text';
+export * from './shipql-editor';
 export * from './skeleton';
 export * from './slider';
 export * from './table';

package/dist/components/index.js

@@ -35,6 +35,7 @@ export * from './search/index.js';
 export * from './select/index.js';
 export * from './sheet/index.js';
 export * from './shiny-text/index.js';
+export * from './shipql-editor/index.js';
 export * from './skeleton/index.js';
 export * from './slider/index.js';
 export * from './table/index.js';

package/dist/components/shipql-editor/index.d.ts

@@ -0,0 +1,3 @@
+export type { LeafAstNode } from './lexical/shipql-leaf-node';
+export * from './shipql-editor';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/shipql-editor/index.js

@@ -0,0 +1,3 @@
+export * from './shipql-editor.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/shipql-editor/lexical/handle-arrow-right-from-leaf.d.ts

@@ -0,0 +1,9 @@
+import { type LexicalEditor } from 'lexical';
+/**
+ * Handles the right-arrow key when the cursor is on a leaf at the end of the
+ * input. Moves the cursor out of the leaf (appending a space node if needed),
+ * mirroring the behaviour of pressing space. Returns false when the conditions
+ * are not met so the event falls through to Lexical's default handling.
+ */
+export declare function handleArrowRightFromLeaf(event: KeyboardEvent | null, editor: LexicalEditor): boolean;
+//# sourceMappingURL=handle-arrow-right-from-leaf.d.ts.map

package/dist/components/shipql-editor/lexical/handle-arrow-right-from-leaf.js

@@ -0,0 +1,46 @@
+import { $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isRangeSelection, $isTextNode, $setSelection } from 'lexical';
+import { $isShipQLLeafNode } from './shipql-leaf-node.js';
+/**
+ * Handles the right-arrow key when the cursor is on a leaf at the end of the
+ * input. Moves the cursor out of the leaf (appending a space node if needed),
+ * mirroring the behaviour of pressing space. Returns false when the conditions
+ * are not met so the event falls through to Lexical's default handling.
+ */ export function handleArrowRightFromLeaf(event, editor) {
+    let shouldHandle = false;
+    editor.getEditorState().read(()=>{
+        const sel = $getSelection();
+        if (!$isRangeSelection(sel)) return;
+        const anchor = sel.anchor.getNode();
+        if (!$isShipQLLeafNode(anchor)) return;
+        const next = anchor.getNextSibling();
+        // Only take over when the leaf is the last meaningful node in the input.
+        if (!next || $isTextNode(next) && next.getTextContentSize() === 0) {
+            shouldHandle = true;
+        }
+    });
+    if (!shouldHandle) return false;
+    event?.preventDefault();
+    editor.update(()=>{
+        const sel = $getSelection();
+        if (!$isRangeSelection(sel)) return;
+        const anchor = sel.anchor.getNode();
+        if (!$isShipQLLeafNode(anchor)) return;
+        const para = $getRoot().getFirstChild();
+        if (!para) return;
+        const next = anchor.getNextSibling();
+        const newSel = $createRangeSelection();
+        if (next && $isTextNode(next)) {
+            newSel.anchor.set(next.getKey(), 0, 'text');
+            newSel.focus.set(next.getKey(), 0, 'text');
+        } else {
+            const spaceNode = $createTextNode(' ');
+            para.append(spaceNode);
+            newSel.anchor.set(spaceNode.getKey(), 1, 'text');
+            newSel.focus.set(spaceNode.getKey(), 1, 'text');
+        }
+        $setSelection(newSel);
+    });
+    return true;
+}
+
+//# sourceMappingURL=handle-arrow-right-from-leaf.js.map

package/dist/components/shipql-editor/lexical/leaf-close-overlay.d.ts

@@ -0,0 +1,2 @@
+export declare function LeafCloseOverlay(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=leaf-close-overlay.d.ts.map

package/dist/components/shipql-editor/lexical/leaf-close-overlay.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Button } from '../../button/button.js';
+import { REMOVE_LEAF_COMMAND } from './shipql-plugin.js';
+const LEAF_ACTIVE_CLASSES = 'ring-1 ring-border-highlights-interactive rounded-r-none';
+export function LeafCloseOverlay() {
+    const [editor] = useLexicalComposerContext();
+    const [hovered, setHovered] = useState(null);
+    const containerRef = useRef(null);
+    const lastPosRef = useRef({
+        top: 0,
+        left: 0
+    });
+    const activeLeafElRef = useRef(null);
+    const activateLeaf = useCallback((el)=>{
+        if (activeLeafElRef.current && activeLeafElRef.current !== el) {
+            for (const cls of LEAF_ACTIVE_CLASSES.split(' ')){
+                activeLeafElRef.current.classList.remove(cls);
+            }
+        }
+        if (el) {
+            for (const cls of LEAF_ACTIVE_CLASSES.split(' ')){
+                el.classList.add(cls);
+            }
+        }
+        activeLeafElRef.current = el;
+    }, []);
+    const resolvePosition = useCallback((leafRect)=>{
+        const container = containerRef.current?.parentElement;
+        if (!container) return null;
+        const containerRect = container.getBoundingClientRect();
+        return {
+            top: leafRect.top - containerRect.top - 1,
+            left: leafRect.right - containerRect.left - 1
+        };
+    }, []);
+    const handleMouseOver = useCallback((e)=>{
+        if (containerRef.current?.contains(e.target)) return;
+        const target = e.target.closest('[data-shipql-leaf]');
+        if (target) {
+            const key = target.getAttribute('data-shipql-key');
+            if (key) {
+                activateLeaf(target);
+                const pos = resolvePosition(target.getBoundingClientRect());
+                if (pos) {
+                    lastPosRef.current = pos;
+                    setHovered({
+                        key,
+                        ...pos
+                    });
+                }
+                return;
+            }
+        }
+        activateLeaf(null);
+        setHovered(null);
+    }, [
+        activateLeaf,
+        resolvePosition
+    ]);
+    const handleMouseLeave = useCallback(()=>{
+        activateLeaf(null);
+        setHovered(null);
+    }, [
+        activateLeaf
+    ]);
+    useEffect(()=>{
+        const rootElement = editor.getRootElement();
+        if (!rootElement) return;
+        const container = rootElement.closest('[data-shipql-editor]');
+        const target = container ?? rootElement;
+        target.addEventListener('mouseover', handleMouseOver);
+        target.addEventListener('mouseleave', handleMouseLeave);
+        return ()=>{
+            target.removeEventListener('mouseover', handleMouseOver);
+            target.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, [
+        editor,
+        handleMouseOver,
+        handleMouseLeave
+    ]);
+    const { top, left } = hovered ?? lastPosRef.current;
+    return /*#__PURE__*/ _jsx("div", {
+        ref: containerRef,
+        children: /*#__PURE__*/ _jsx(Button, {
+            variant: "danger",
+            size: "xs",
+            iconLeft: "closeLine",
+            "aria-label": "Remove filter",
+            className: cn('absolute z-10 min-w-0! p-0! shadow-none! h-23!', 'bg-background-highlight-interactive!', 'overflow-hidden rounded-l-none! rounded-r-6!', 'transition-[width,opacity] duration-150 ease-out', hovered ? 'w-23! opacity-100!' : 'w-0! opacity-0!'),
+            style: {
+                top,
+                left
+            },
+            onMouseDown: (e)=>{
+                e.preventDefault();
+                if (hovered) {
+                    activateLeaf(null);
+                    editor.dispatchCommand(REMOVE_LEAF_COMMAND, hovered.key);
+                    setHovered(null);
+                }
+            }
+        })
+    });
+}
+
+//# sourceMappingURL=leaf-close-overlay.js.map

package/dist/components/shipql-editor/lexical/on-blur-plugin.d.ts

@@ -0,0 +1,7 @@
+import type { AstNode } from '@shipfox/shipql-parser';
+interface OnBlurPluginProps {
+    onChange?: (ast: AstNode) => void;
+}
+export declare function OnBlurPlugin({ onChange }: OnBlurPluginProps): null;
+export {};
+//# sourceMappingURL=on-blur-plugin.d.ts.map

package/dist/components/shipql-editor/lexical/on-blur-plugin.js

@@ -0,0 +1,27 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { parse } from '@shipfox/shipql-parser';
+import { $getRoot, BLUR_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';
+import { useEffect, useRef } from 'react';
+export function OnBlurPlugin({ onChange }) {
+    const [editor] = useLexicalComposerContext();
+    // Keep latest callback accessible without re-registering the command.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(()=>{
+        return editor.registerCommand(BLUR_COMMAND, ()=>{
+            const text = editor.getEditorState().read(()=>$getRoot().getTextContent());
+            try {
+                const ast = parse(text);
+                if (ast) onChangeRef.current?.(ast);
+            } catch  {
+            // Invalid query — do not call onChange.
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+    }, [
+        editor
+    ]);
+    return null;
+}
+
+//# sourceMappingURL=on-blur-plugin.js.map

package/dist/components/shipql-editor/lexical/on-text-change-plugin.d.ts

@@ -0,0 +1,6 @@
+interface OnTextChangePluginProps {
+    onTextChange: (text: string) => void;
+}
+export declare function OnTextChangePlugin({ onTextChange }: OnTextChangePluginProps): null;
+export {};
+//# sourceMappingURL=on-text-change-plugin.d.ts.map

package/dist/components/shipql-editor/lexical/on-text-change-plugin.js

@@ -0,0 +1,21 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot } from 'lexical';
+import { useEffect, useRef } from 'react';
+export function OnTextChangePlugin({ onTextChange }) {
+    const [editor] = useLexicalComposerContext();
+    const callbackRef = useRef(onTextChange);
+    callbackRef.current = onTextChange;
+    useEffect(()=>{
+        return editor.registerUpdateListener(({ editorState })=>{
+            editorState.read(()=>{
+                const text = $getRoot().getTextContent();
+                callbackRef.current(text);
+            });
+        });
+    }, [
+        editor
+    ]);
+    return null;
+}
+
+//# sourceMappingURL=on-text-change-plugin.js.map

package/dist/components/shipql-editor/lexical/shipql-leaf-node.d.ts

@@ -0,0 +1,31 @@
+import { type AstNode } from '@shipfox/shipql-parser';
+import { type EditorConfig, type NodeKey, type SerializedTextNode, TextNode } from 'lexical';
+export type LeafAstNode = AstNode;
+export declare function isSimpleLeaf(ast: AstNode): boolean;
+export declare function isGroupedCompound(ast: AstNode): boolean;
+/** Returns true if a NOT node wraps a simple leaf or grouped compound (single chip). */
+export declare function isNotLeaf(ast: AstNode): boolean;
+type SerializedShipQLLeafNode = SerializedTextNode & {
+    type: 'shipql-leaf';
+};
+export declare class ShipQLLeafNode extends TextNode {
+    __shipqlNode: LeafAstNode;
+    constructor(text: string, shipqlNode: LeafAstNode, key?: NodeKey);
+    static getType(): string;
+    static clone(node: ShipQLLeafNode): ShipQLLeafNode;
+    static importJSON(serialized: SerializedShipQLLeafNode): ShipQLLeafNode;
+    exportJSON(): SerializedShipQLLeafNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
+    isSimpleText(): boolean;
+    canInsertTextAfter(): boolean;
+    canInsertTextBefore(): boolean;
+    getShipQLNode(): LeafAstNode;
+}
+export declare function $isShipQLLeafNode(node: unknown): node is ShipQLLeafNode;
+export declare function $createShipQLLeafNode(text: string, shipqlNode: LeafAstNode): ShipQLLeafNode;
+/** Returns true if the AST node qualifies as a visual leaf chip in the editor. */
+export declare function isAstLeafNode(ast: AstNode): ast is LeafAstNode;
+export declare function leafSource(node: LeafAstNode): string;
+export {};
+//# sourceMappingURL=shipql-leaf-node.d.ts.map

package/dist/components/shipql-editor/lexical/shipql-leaf-node.js

@@ -0,0 +1,124 @@
+import { parse, stringify } from '@shipfox/shipql-parser';
+import { TextNode } from 'lexical';
+const LEAF_BASE_CLASSES = 'whitespace-nowrap rounded-4 mx-1.5 px-4 py-2 text-foreground-neutral-base cursor-text transition-[background-color,box-shadow] duration-150 ease-out';
+const LEAF_NORMAL_CLASSES = 'bg-background-button-neutral-default hover:ring-1 hover:ring-border-highlights-interactive shadow-button-neutral';
+const LEAF_ERROR_CLASSES = 'bg-tag-error-bg hover:bg-tag-error-bg-hover';
+export function isSimpleLeaf(ast) {
+    return ast.type === 'match' || ast.type === 'range' || ast.type === 'text';
+}
+/**
+ * Returns true if an and/or node represents a grouped compound like
+ * `env:(prod OR staging)` or `tag:(web AND api)` — i.e. a facet
+ * followed by parenthesised values joined by AND/OR.
+ */ const GROUPED_COMPOUND_RE = /^-?[a-zA-Z_][\w.]*:\(.*\)$/;
+export function isGroupedCompound(ast) {
+    if (ast.type !== 'and' && ast.type !== 'or') return false;
+    return GROUPED_COMPOUND_RE.test(ast.source);
+}
+/** Returns true if a NOT node wraps a simple leaf or grouped compound (single chip). */ export function isNotLeaf(ast) {
+    if (ast.type !== 'not') return false;
+    return isSimpleLeaf(ast.expr) || isGroupedCompound(ast.expr);
+}
+function isValidLeafText(text) {
+    if (!text.trim()) return false;
+    try {
+        const ast = parse(text);
+        if (ast === null) return false;
+        return isSimpleLeaf(ast) || isNotLeaf(ast) || isGroupedCompound(ast);
+    } catch  {
+        return false;
+    }
+}
+export class ShipQLLeafNode extends TextNode {
+    constructor(text, shipqlNode, key){
+        super(text, key);
+        this.__shipqlNode = shipqlNode;
+    }
+    static getType() {
+        return 'shipql-leaf';
+    }
+    static clone(node) {
+        return new ShipQLLeafNode(node.__text, node.__shipqlNode, node.__key);
+    }
+    static importJSON(serialized) {
+        const text = serialized.text;
+        let shipqlNode;
+        try {
+            const ast = parse(text);
+            if (ast !== null && isAstLeafNode(ast)) {
+                shipqlNode = ast;
+            } else {
+                shipqlNode = {
+                    type: 'text',
+                    value: text,
+                    source: text
+                };
+            }
+        } catch  {
+            shipqlNode = {
+                type: 'text',
+                value: text,
+                source: text
+            };
+        }
+        const node = new ShipQLLeafNode(text, shipqlNode);
+        node.setFormat(serialized.format);
+        node.setDetail(serialized.detail);
+        node.setMode(serialized.mode);
+        node.setStyle(serialized.style);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'shipql-leaf'
+        };
+    }
+    createDOM(config) {
+        const element = super.createDOM(config);
+        const valid = isValidLeafText(this.__text);
+        for (const cls of LEAF_BASE_CLASSES.split(' '))element.classList.add(cls);
+        for (const cls of (valid ? LEAF_NORMAL_CLASSES : LEAF_ERROR_CLASSES).split(' '))element.classList.add(cls);
+        element.setAttribute('data-shipql-leaf', 'true');
+        element.setAttribute('data-shipql-key', this.__key);
+        return element;
+    }
+    updateDOM(prevNode, dom, config) {
+        const result = super.updateDOM(prevNode, dom, config);
+        if (prevNode.__text !== this.__text) {
+            const prevValid = isValidLeafText(prevNode.__text);
+            const nextValid = isValidLeafText(this.__text);
+            if (prevValid !== nextValid) {
+                for (const cls of (prevValid ? LEAF_NORMAL_CLASSES : LEAF_ERROR_CLASSES).split(' '))dom.classList.remove(cls);
+                for (const cls of (nextValid ? LEAF_NORMAL_CLASSES : LEAF_ERROR_CLASSES).split(' '))dom.classList.add(cls);
+            }
+        }
+        return result;
+    }
+    isSimpleText() {
+        return false;
+    }
+    canInsertTextAfter() {
+        return false;
+    }
+    canInsertTextBefore() {
+        return false;
+    }
+    getShipQLNode() {
+        return this.getLatest().__shipqlNode;
+    }
+}
+export function $isShipQLLeafNode(node) {
+    return node instanceof ShipQLLeafNode;
+}
+export function $createShipQLLeafNode(text, shipqlNode) {
+    return new ShipQLLeafNode(text, shipqlNode);
+}
+/** Returns true if the AST node qualifies as a visual leaf chip in the editor. */ export function isAstLeafNode(ast) {
+    return isSimpleLeaf(ast) || isNotLeaf(ast) || isGroupedCompound(ast);
+}
+export function leafSource(node) {
+    return node.source ?? stringify(node);
+}
+
+//# sourceMappingURL=shipql-leaf-node.js.map

package/dist/components/shipql-editor/lexical/shipql-plugin.d.ts

@@ -0,0 +1,9 @@
+import { type LeafAstNode } from './shipql-leaf-node';
+/** Payload: the Lexical node key of the leaf to remove. */
+export declare const REMOVE_LEAF_COMMAND: import("lexical").LexicalCommand<string>;
+interface ShipQLPluginProps {
+    onLeafFocus?: (node: LeafAstNode | null) => void;
+}
+export declare function ShipQLPlugin({ onLeafFocus }: ShipQLPluginProps): null;
+export {};
+//# sourceMappingURL=shipql-plugin.d.ts.map