@shipfox/react-ui 0.28.0 → 0.30.0

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

@@ -0,0 +1,285 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { parse, removeBySource, stringify } from '@shipfox/shipql-parser';
+import { $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_NORMAL, createCommand, INSERT_PARAGRAPH_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
+import { useEffect, useRef } from 'react';
+import { handleArrowRightFromLeaf } from './handle-arrow-right-from-leaf.js';
+import { $createShipQLLeafNode, $isShipQLLeafNode, isGroupedCompound, isSimpleLeaf, leafSource } from './shipql-leaf-node.js';
+function collectLeaves(ast) {
+    // Simple terminals are always a single leaf chip.
+    if (isSimpleLeaf(ast)) {
+        return [
+            {
+                source: leafSource(ast),
+                node: ast
+            }
+        ];
+    }
+    // NOT: if the inner expression is a simple leaf or grouped compound,
+    // treat the whole NOT as a single chip. Otherwise recurse into expr.
+    if (ast.type === 'not') {
+        if (isSimpleLeaf(ast.expr) || isGroupedCompound(ast.expr)) {
+            return [
+                {
+                    source: ast.source,
+                    node: ast
+                }
+            ];
+        }
+        return collectLeaves(ast.expr);
+    }
+    // AND/OR: if the node is a grouped compound like `env:(prod OR staging)`,
+    // treat the whole thing as a single chip. Otherwise recurse both sides.
+    if (ast.type === 'and' || ast.type === 'or') {
+        if (isGroupedCompound(ast)) {
+            return [
+                {
+                    source: ast.source,
+                    node: ast
+                }
+            ];
+        }
+        return [
+            ...collectLeaves(ast.left),
+            ...collectLeaves(ast.right)
+        ];
+    }
+    return [];
+}
+function tokenize(fullText, leaves) {
+    const segments = [];
+    let remaining = fullText;
+    for (const { source, node } of leaves){
+        const idx = remaining.indexOf(source);
+        if (idx === -1) {
+            // Source not found in remaining text — bail and treat all as operator
+            return [
+                {
+                    kind: 'op',
+                    text: fullText
+                }
+            ];
+        }
+        if (idx > 0) segments.push({
+            kind: 'op',
+            text: remaining.slice(0, idx)
+        });
+        segments.push({
+            kind: 'leaf',
+            text: source,
+            node
+        });
+        remaining = remaining.slice(idx + source.length);
+    }
+    if (remaining.length > 0) segments.push({
+        kind: 'op',
+        text: remaining
+    });
+    return segments.filter((s)=>s.text.length > 0);
+}
+function needsRebuild(children, segments) {
+    if (children.length !== segments.length) return true;
+    for(let i = 0; i < children.length; i++){
+        const child = children[i];
+        const seg = segments[i];
+        if ($isShipQLLeafNode(child) !== (seg.kind === 'leaf')) return true;
+        if ($isTextNode(child) && child.getTextContent() !== seg.text) return true;
+    }
+    return false;
+}
+function getAbsoluteOffset(para, point) {
+    let offset = 0;
+    for (const child of para.getChildren()){
+        if (child.getKey() === point.key) return offset + point.offset;
+        if ($isTextNode(child)) offset += child.getTextContentSize();
+    }
+    return offset + point.offset;
+}
+// ─── Commands ─────────────────────────────────────────────────────────────────
+/** Payload: the Lexical node key of the leaf to remove. */ export const REMOVE_LEAF_COMMAND = createCommand('REMOVE_LEAF_COMMAND');
+// ─── Plugin ───────────────────────────────────────────────────────────────────
+const REBUILD_TAG = 'shipql-rebuild';
+export function ShipQLPlugin({ onLeafFocus }) {
+    const [editor] = useLexicalComposerContext();
+    // Keep latest callback accessible inside Lexical listeners without re-registering.
+    const onLeafFocusRef = useRef(onLeafFocus);
+    onLeafFocusRef.current = onLeafFocus;
+    // Track the key of the last focused leaf to avoid redundant callbacks.
+    const lastFocusedKeyRef = useRef(null);
+    useEffect(()=>{
+        // Block newlines — ShipQL is a single-line language.
+        const unregisterEnter = editor.registerCommand(KEY_ENTER_COMMAND, (event)=>{
+            event?.preventDefault();
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+        const unregisterParagraph = editor.registerCommand(INSERT_PARAGRAPH_COMMAND, ()=>true, COMMAND_PRIORITY_HIGH);
+        const unregisterArrowRight = editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, (event)=>handleArrowRightFromLeaf(event, editor), COMMAND_PRIORITY_NORMAL);
+        const unregisterRemoveLeaf = editor.registerCommand(REMOVE_LEAF_COMMAND, (nodeKey)=>{
+            editor.update(()=>{
+                const para = $getRoot().getFirstChild();
+                if (!para) return;
+                // Find the leaf node's source text from its key.
+                let targetSource = null;
+                for (const child of para.getChildren()){
+                    if ($isShipQLLeafNode(child) && child.getKey() === nodeKey) {
+                        targetSource = child.getTextContent();
+                        break;
+                    }
+                }
+                if (!targetSource) return;
+                // Parse, remove, re-stringify.
+                const fullText = para.getTextContent();
+                let ast = null;
+                try {
+                    ast = parse(fullText);
+                } catch  {
+                    return;
+                }
+                if (!ast) return;
+                const newAst = removeBySource(ast, targetSource);
+                const newText = stringify(newAst);
+                // Replace paragraph content — the update listener will re-tokenize.
+                para.clear();
+                if (newText) {
+                    para.append($createTextNode(newText));
+                }
+            });
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+        const unregisterUpdate = editor.registerUpdateListener(({ editorState, tags })=>{
+            // After our own rebuild we only need to refresh the leaf-focus callback.
+            if (tags.has(REBUILD_TAG)) {
+                editorState.read(()=>{
+                    const sel = $getSelection();
+                    if (!$isRangeSelection(sel)) return;
+                    const anchor = sel.anchor.getNode();
+                    const key = $isShipQLLeafNode(anchor) ? anchor.getKey() : null;
+                    if (key !== lastFocusedKeyRef.current) {
+                        lastFocusedKeyRef.current = key;
+                        onLeafFocusRef.current?.(key !== null && $isShipQLLeafNode(anchor) ? anchor.getShipQLNode() : null);
+                    }
+                });
+                return;
+            }
+            // ── Read current editor state ──────────────────────────────────────────
+            let shouldRebuild = false;
+            let nextSegments = [];
+            let savedOffset = -1;
+            editorState.read(()=>{
+                const para = $getRoot().getFirstChild();
+                if (!para) return;
+                const text = para.getTextContent();
+                const children = para.getChildren();
+                let ast = null;
+                try {
+                    ast = parse(text);
+                } catch  {
+                // parse error — fall through with ast = null
+                }
+                if (!ast) {
+                    // Clear all leaf highlights if any exist.
+                    if (children.some($isShipQLLeafNode)) {
+                        shouldRebuild = true;
+                        nextSegments = text ? [
+                            {
+                                kind: 'op',
+                                text
+                            }
+                        ] : [];
+                        const sel = $getSelection();
+                        if ($isRangeSelection(sel) && sel.anchor.type === 'text') {
+                            savedOffset = getAbsoluteOffset(para, sel.anchor);
+                        }
+                    }
+                    // Cursor left any leaf.
+                    if (lastFocusedKeyRef.current !== null) {
+                        lastFocusedKeyRef.current = null;
+                        onLeafFocusRef.current?.(null);
+                    }
+                    return;
+                }
+                const segments = tokenize(text, collectLeaves(ast));
+                if (needsRebuild(children, segments)) {
+                    shouldRebuild = true;
+                    nextSegments = segments;
+                    const sel = $getSelection();
+                    if ($isRangeSelection(sel) && sel.anchor.type === 'text') {
+                        savedOffset = getAbsoluteOffset(para, sel.anchor);
+                    }
+                } else {
+                    // No structural change — just update leaf-focus.
+                    const sel = $getSelection();
+                    if ($isRangeSelection(sel)) {
+                        const anchor = sel.anchor.getNode();
+                        const key = $isShipQLLeafNode(anchor) ? anchor.getKey() : null;
+                        if (key !== lastFocusedKeyRef.current) {
+                            lastFocusedKeyRef.current = key;
+                            onLeafFocusRef.current?.(key !== null && $isShipQLLeafNode(anchor) ? anchor.getShipQLNode() : null);
+                        }
+                    }
+                }
+            });
+            if (!shouldRebuild) return;
+            // ── Rebuild node structure ─────────────────────────────────────────────
+            editor.update(()=>{
+                const para = $getRoot().getFirstChild();
+                if (!para) return;
+                para.clear();
+                const newNodes = nextSegments.map((seg)=>seg.kind === 'leaf' ? $createShipQLLeafNode(seg.text, seg.node) : $createTextNode(seg.text));
+                for (const node of newNodes)para.append(node);
+                // Restore cursor to the same absolute character position.
+                if (savedOffset >= 0 && newNodes.length > 0) {
+                    let remaining = savedOffset;
+                    for (const node of newNodes){
+                        const len = $isTextNode(node) ? node.getTextContentSize() : 0;
+                        if (remaining <= len) {
+                            const sel = $createRangeSelection();
+                            sel.anchor.set(node.getKey(), remaining, 'text');
+                            sel.focus.set(node.getKey(), remaining, 'text');
+                            $setSelection(sel);
+                            break;
+                        }
+                        remaining -= len;
+                    }
+                }
+            }, {
+                tag: REBUILD_TAG
+            });
+        });
+        // Perform the initial tokenization pass directly. The update listener is
+        // registered after Lexical has already committed its initialConfig editorState
+        // (useEffect runs post-paint), so the listener never fires for the first render.
+        // We do the full rebuild here instead of relying on the listener being triggered.
+        editor.update(()=>{
+            const para = $getRoot().getFirstChild();
+            if (!para) return;
+            const text = para.getTextContent();
+            if (!text) return;
+            const children = para.getChildren();
+            let ast = null;
+            try {
+                ast = parse(text);
+            } catch  {
+                return;
+            }
+            if (!ast) return;
+            const segments = tokenize(text, collectLeaves(ast));
+            if (!needsRebuild(children, segments)) return;
+            para.clear();
+            for (const seg of segments){
+                para.append(seg.kind === 'leaf' ? $createShipQLLeafNode(seg.text, seg.node) : $createTextNode(seg.text));
+            }
+        });
+        return ()=>{
+            unregisterEnter();
+            unregisterParagraph();
+            unregisterArrowRight();
+            unregisterRemoveLeaf();
+            unregisterUpdate();
+        };
+    }, [
+        editor
+    ]);
+    return null;
+}
+
+//# sourceMappingURL=shipql-plugin.js.map

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

@@ -0,0 +1,3 @@
+import type { ShipQLEditorInnerProps } from './shipql-editor';
+export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder, className, disabled, mode, text, editorKey, isError, onTextChange, onClear, onToggleMode, }: ShipQLEditorInnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=shipql-editor-inner.d.ts.map

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { Input } from '../../components/input/index.js';
+import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/icon.js';
+import { LeafCloseOverlay } from './lexical/leaf-close-overlay.js';
+import { OnBlurPlugin } from './lexical/on-blur-plugin.js';
+import { OnTextChangePlugin } from './lexical/on-text-change-plugin.js';
+import { ShipQLLeafNode } from './lexical/shipql-leaf-node.js';
+import { ShipQLPlugin } from './lexical/shipql-plugin.js';
+const INPUT_CLASSES = 'block w-full rounded-6 bg-background-field-base py-2 pl-7 pr-58 sm:pr-64 text-md text-foreground-neutral-base caret-foreground-neutral-base outline-none focus:border-border-highlights-interactive shadow-button-neutral';
+const INPUT_ERROR_CLASSES = 'shadow-border-error';
+const BUTTON_CLASSES = 'shrink-0 text-foreground-neutral-subtle hover:text-foreground-neutral-base transition-all duration-150 flex justify-center items-center cursor-pointer w-28 sm:w-32 h-full';
+export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder, className, disabled, mode, text, editorKey, isError, onTextChange, onClear, onToggleMode }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-shipql-editor": true,
+        className: cn('relative', className),
+        children: [
+            mode === 'editor' ? /*#__PURE__*/ _jsxs(LexicalComposer, {
+                initialConfig: {
+                    namespace: 'ShipQLEditor',
+                    nodes: [
+                        ShipQLLeafNode
+                    ],
+                    onError: (error)=>{
+                        throw error;
+                    },
+                    editorState: text ? ()=>{
+                        const para = $createParagraphNode();
+                        para.append($createTextNode(text));
+                        $getRoot().append(para);
+                    } : undefined
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(PlainTextPlugin, {
+                        contentEditable: /*#__PURE__*/ _jsx(ContentEditable, {
+                            id: "shipql-editor",
+                            "aria-label": "ShipQL query editor",
+                            className: cn(INPUT_CLASSES, isError && INPUT_ERROR_CLASSES, disabled && 'pointer-events-none opacity-50')
+                        }),
+                        placeholder: placeholder ? /*#__PURE__*/ _jsx("div", {
+                            className: "pointer-events-none absolute left-0 top-0 select-none px-7 py-2 text-md text-foreground-neutral-muted",
+                            children: placeholder
+                        }) : null,
+                        ErrorBoundary: LexicalErrorBoundary
+                    }),
+                    /*#__PURE__*/ _jsx(ShipQLPlugin, {
+                        onLeafFocus: onLeafFocus
+                    }),
+                    /*#__PURE__*/ _jsx(OnBlurPlugin, {
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ _jsx(OnTextChangePlugin, {
+                        onTextChange: onTextChange
+                    }),
+                    /*#__PURE__*/ _jsx(HistoryPlugin, {}),
+                    !disabled && /*#__PURE__*/ _jsx(LeafCloseOverlay, {})
+                ]
+            }, editorKey) : /*#__PURE__*/ _jsx(Input, {
+                ref: (el)=>el?.focus(),
+                "aria-label": "ShipQL query editor",
+                className: cn(INPUT_CLASSES, disabled && 'pointer-events-none opacity-50'),
+                "aria-invalid": isError,
+                value: text,
+                onChange: (e)=>onTextChange(e.target.value),
+                placeholder: placeholder,
+                disabled: disabled
+            }),
+            !disabled && /*#__PURE__*/ _jsxs("div", {
+                className: "absolute right-0 top-0 flex h-28 items-center",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        "aria-label": "Clear query",
+                        className: cn(BUTTON_CLASSES, text.trim().length > 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'),
+                        onClick: onClear,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            name: "closeLine",
+                            size: 16
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        "aria-label": mode === 'editor' ? 'Switch to free text mode' : 'Switch to editor mode',
+                        className: cn(BUTTON_CLASSES, 'sm:border-l border-border-neutral-strong'),
+                        onClick: onToggleMode,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            name: mode === 'editor' ? 'edit2Line' : 'codeLine',
+                            size: 16
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=shipql-editor-inner.js.map

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

@@ -0,0 +1,21 @@
+import type { AstNode } from '@shipfox/shipql-parser';
+import type { LeafAstNode } from './lexical/shipql-leaf-node';
+export interface ShipQLEditorProps {
+    defaultValue?: string;
+    onChange?: (ast: AstNode) => void;
+    onLeafFocus?: (node: LeafAstNode | null) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export interface ShipQLEditorInnerProps extends ShipQLEditorProps {
+    mode: 'editor' | 'text';
+    text: string;
+    editorKey: number;
+    isError: boolean;
+    onTextChange: (text: string) => void;
+    onClear: () => void;
+    onToggleMode: () => void;
+}
+export declare function ShipQLEditor({ disabled, className, ...props }: ShipQLEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=shipql-editor.d.ts.map

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { parse } from '@shipfox/shipql-parser';
+import { lazy, Suspense, useCallback, useRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+function isParseError(text) {
+    if (!text.trim()) return false;
+    try {
+        return parse(text) === null;
+    } catch  {
+        return true;
+    }
+}
+const ShipQLEditorInner = /*#__PURE__*/ lazy(()=>import('./shipql-editor-inner.js'));
+export function ShipQLEditor({ disabled, className, ...props }) {
+    const [mode, setMode] = useState('editor');
+    const [text, setText] = useState(props.defaultValue ?? '');
+    const [editorKey, setEditorKey] = useState(0);
+    const [isError, setIsError] = useState(()=>isParseError(props.defaultValue ?? ''));
+    const textRef = useRef(text);
+    textRef.current = text;
+    const clearingRef = useRef(false);
+    const handleTextChange = useCallback((newText)=>{
+        if (clearingRef.current) {
+            if (newText.trim() === '') clearingRef.current = false;
+            return;
+        }
+        textRef.current = newText;
+        setText(newText);
+        setIsError(isParseError(newText));
+    }, []);
+    const handleClear = useCallback(()=>{
+        clearingRef.current = true;
+        setText('');
+        textRef.current = '';
+        setIsError(false);
+        setEditorKey((k)=>k + 1);
+    }, []);
+    const handleToggleMode = useCallback(()=>{
+        setMode((m)=>{
+            if (m === 'editor') {
+                setText(textRef.current);
+                return 'text';
+            }
+            setEditorKey((k)=>k + 1);
+            return 'editor';
+        });
+    }, []);
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx("div", {
+            className: cn('h-8 w-full animate-pulse rounded-6 bg-background-components-base', className)
+        }),
+        children: /*#__PURE__*/ _jsx(ShipQLEditorInner, {
+            ...props,
+            className: className,
+            disabled: disabled,
+            mode: mode,
+            text: text,
+            editorKey: editorKey,
+            isError: isError,
+            onTextChange: handleTextChange,
+            onClear: handleClear,
+            onToggleMode: handleToggleMode
+        })
+    });
+}
+
+//# sourceMappingURL=shipql-editor.js.map

package/dist/components/table/table.stories.data.js

@@ -62,16 +62,21 @@
     ];
     return Array.from({
         length: count
-    }, (_, i)=>({
+    }, (_, i)=>{
+        const total = 40 + (i * 7 + 3) % 80;
+        const failed = (i * 3 + 1) % 20;
+        const success = total - failed;
+        return {
             id: `job-${i + 1}`,
             name: jobNames[i % jobNames.length],
-            total: Math.floor(Math.random() * 100) + 20,
-            success: Math.floor(Math.random() * 80) + 10,
-            failed: Math.floor(Math.random() * 20),
+            total,
+            success,
+            failed,
             status: statuses[i % statuses.length],
             repository: repositories[i % repositories.length],
             branch: branches[i % branches.length]
-        }));
+        };
+    });
 };
 /**
  * Sample job data