@shepai/cli 1.135.3-pr425.d3fbb75 → 1.135.3-pr443.1bf56b0

package/dist/src/presentation/web/components/ui/file-tree.js

@@ -0,0 +1,194 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useState, } from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+const TreeContext = createContext(null);
+const useTree = () => {
+    const context = useContext(TreeContext);
+    if (!context) {
+        throw new Error('useTree must be used within a TreeProvider');
+    }
+    return context;
+};
+const isFolderElement = (element) => {
+    if (element.type) {
+        return element.type === 'folder';
+    }
+    return Array.isArray(element.children);
+};
+const mergeExpandedItems = (currentItems, nextItems) => [
+    ...new Set([...(currentItems ?? []), ...nextItems]),
+];
+const treeCollator = new Intl.Collator('en', {
+    numeric: true,
+    sensitivity: 'base',
+});
+const defaultTreeComparator = (a, b) => {
+    const aIsFolder = isFolderElement(a);
+    const bIsFolder = isFolderElement(b);
+    if (aIsFolder !== bIsFolder) {
+        return aIsFolder ? -1 : 1;
+    }
+    return treeCollator.compare(a.name, b.name);
+};
+const getTreeComparator = (sort) => {
+    if (sort === 'none') {
+        return undefined;
+    }
+    if (sort === 'default') {
+        return defaultTreeComparator;
+    }
+    return sort;
+};
+const sortTreeElements = (elements, sort) => {
+    const comparator = getTreeComparator(sort);
+    const nextElements = elements.map((element) => {
+        if (!Array.isArray(element.children)) {
+            return element;
+        }
+        return {
+            ...element,
+            children: sortTreeElements(element.children, sort),
+        };
+    });
+    if (!comparator) {
+        return nextElements;
+    }
+    return [...nextElements].sort(comparator);
+};
+const renderTreeElements = (elements, sort) => sortTreeElements(elements, sort).map((element) => {
+    if (isFolderElement(element)) {
+        return (_jsx(Folder, { value: element.id, element: element.name, isSelectable: element.isSelectable, children: Array.isArray(element.children) ? renderTreeElements(element.children, sort) : null }, element.id));
+    }
+    return (_jsx(File, { value: element.id, isSelectable: element.isSelectable, children: _jsx("span", { children: element.name }) }, element.id));
+});
+const Tree = forwardRef(({ className, elements, initialSelectedId, initialExpandedItems, children, indicator = true, openIcon, closeIcon, sort = 'default', dir, ...props }, ref) => {
+    const [selectedId, setSelectedId] = useState(initialSelectedId);
+    const [expandedItems, setExpandedItems] = useState(initialExpandedItems);
+    const selectItem = useCallback((id) => {
+        setSelectedId(id);
+    }, []);
+    const handleExpand = useCallback((id) => {
+        setExpandedItems((prev) => {
+            if (prev?.includes(id)) {
+                return prev.filter((item) => item !== id);
+            }
+            return [...(prev ?? []), id];
+        });
+    }, []);
+    const expandSpecificTargetedElements = useCallback((elements, selectId) => {
+        if (!elements || !selectId)
+            return;
+        const findParent = (currentElement, currentPath = []) => {
+            const isSelectable = currentElement.isSelectable ?? true;
+            const newPath = [...currentPath, currentElement.id];
+            if (currentElement.id === selectId) {
+                if (isSelectable) {
+                    setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+                }
+                else {
+                    if (newPath.includes(currentElement.id)) {
+                        newPath.pop();
+                        setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+                    }
+                }
+                return;
+            }
+            if (Array.isArray(currentElement.children) && currentElement.children.length > 0) {
+                currentElement.children.forEach((child) => {
+                    findParent(child, newPath);
+                });
+            }
+        };
+        elements.forEach((element) => {
+            findParent(element);
+        });
+    }, []);
+    useEffect(() => {
+        if (initialSelectedId) {
+            expandSpecificTargetedElements(elements, initialSelectedId);
+        }
+    }, [initialSelectedId, elements, expandSpecificTargetedElements]);
+    const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+    const treeChildren = children ?? (elements ? renderTreeElements(elements, sort) : null);
+    return (_jsx(TreeContext.Provider, { value: {
+            selectedId,
+            expandedItems,
+            handleExpand,
+            selectItem,
+            setExpandedItems,
+            indicator,
+            openIcon,
+            closeIcon,
+            direction,
+        }, children: _jsx("div", { className: cn('size-full', className), children: _jsx(ScrollArea, { ref: ref, className: "relative h-full px-2", dir: dir, children: _jsx(AccordionPrimitive.Root, { ...props, type: "multiple", value: expandedItems, className: "flex flex-col gap-1", dir: dir, children: treeChildren }) }) }) }));
+});
+Tree.displayName = 'Tree';
+const TreeIndicator = forwardRef(({ className, ...props }, ref) => {
+    const { direction } = useTree();
+    return (_jsx("div", { dir: direction, ref: ref, className: cn('bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5', className), ...props }));
+});
+TreeIndicator.displayName = 'TreeIndicator';
+const Folder = forwardRef(({ className, element, value, isSelectable = true, isSelect, children, ...props }, ref) => {
+    const { direction, handleExpand, expandedItems, indicator, selectedId, selectItem, openIcon, closeIcon, } = useTree();
+    const isSelected = isSelect ?? selectedId === value;
+    return (_jsxs(AccordionPrimitive.Item, { ref: ref, ...props, value: value, className: "relative h-full overflow-hidden", children: [_jsxs(AccordionPrimitive.Trigger, { className: cn('flex items-center gap-1 rounded-md text-sm', className, {
+                    'bg-muted rounded-md': isSelected && isSelectable,
+                    'cursor-pointer': isSelectable,
+                    'cursor-not-allowed opacity-50': !isSelectable,
+                }), disabled: !isSelectable, onClick: () => {
+                    selectItem(value);
+                    handleExpand(value);
+                }, children: [expandedItems?.includes(value)
+                        ? (openIcon ?? _jsx(FolderOpenIcon, { className: "size-4" }))
+                        : (closeIcon ?? _jsx(FolderIcon, { className: "size-4" })), _jsx("span", { children: element })] }), _jsxs(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm", children: [element && indicator ? _jsx(TreeIndicator, { "aria-hidden": "true" }) : null, _jsx(AccordionPrimitive.Root, { dir: direction, type: "multiple", className: "ml-5 flex flex-col gap-1 py-1 rtl:mr-5", value: expandedItems, children: children })] })] }));
+});
+Folder.displayName = 'Folder';
+const File = forwardRef(({ value, className, handleSelect, onClick, isSelectable = true, isSelect, fileIcon, children, ...props }, ref) => {
+    const { direction, selectedId, selectItem } = useTree();
+    const isSelected = isSelect ?? selectedId === value;
+    return (_jsxs("button", { ref: ref, type: "button", disabled: !isSelectable, className: cn('flex w-fit items-center gap-1 rounded-md pr-1 text-sm duration-200 ease-in-out rtl:pr-0 rtl:pl-1', {
+            'bg-muted': isSelected && isSelectable,
+        }, isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50', direction === 'rtl' ? 'rtl' : 'ltr', className), onClick: (event) => {
+            selectItem(value);
+            handleSelect?.(value);
+            onClick?.(event);
+        }, ...props, children: [fileIcon ?? _jsx(FileIcon, { className: "size-4" }), children] }));
+});
+File.displayName = 'File';
+const CollapseButton = forwardRef(({ className, elements, expandAll = false, children, ...props }, ref) => {
+    const { expandedItems, setExpandedItems } = useTree();
+    const expendAllTree = useCallback((elements) => {
+        const expandedElementIds = [];
+        const expandTree = (element) => {
+            const isSelectable = element.isSelectable ?? true;
+            if (isSelectable && element.children && element.children.length > 0) {
+                expandedElementIds.push(element.id);
+                for (const child of element.children) {
+                    expandTree(child);
+                }
+            }
+        };
+        for (const element of elements) {
+            expandTree(element);
+        }
+        return [...new Set(expandedElementIds)];
+    }, []);
+    const closeAll = useCallback(() => {
+        setExpandedItems?.([]);
+    }, [setExpandedItems]);
+    useEffect(() => {
+        if (expandAll) {
+            setExpandedItems?.(expendAllTree(elements));
+        }
+    }, [expandAll, elements, expendAllTree, setExpandedItems]);
+    return (_jsxs(Button, { variant: "ghost", className: cn('absolute right-2 bottom-1 h-8 w-fit p-1', className), onClick: expandedItems && expandedItems.length > 0
+            ? closeAll
+            : () => setExpandedItems?.(expendAllTree(elements)), ref: ref, ...props, children: [children, _jsx("span", { className: "sr-only", children: "Toggle" })] }));
+});
+CollapseButton.displayName = 'CollapseButton';
+export { CollapseButton, File, Folder, Tree };

package/dist/src/presentation/web/components/ui/file-tree.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tree } from './file-tree.js';
+declare const meta: Meta<typeof Tree>;
+export default meta;
+type Story = StoryObj<typeof Tree>;
+/** Default file tree with folders expanded. */
+export declare const Default: Story;
+/** Collapsed tree — no items initially expanded. */
+export declare const Collapsed: Story;
+/** Single file — no folders. */
+export declare const SingleFile: Story;
+/** Deeply nested structure. */
+export declare const DeepNesting: Story;
+//# sourceMappingURL=file-tree.stories.d.ts.map

package/dist/src/presentation/web/components/ui/file-tree.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/file-tree.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAwB,MAAM,aAAa,CAAC;AAkCzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAc3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,+CAA+C;AAC/C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC"}

package/dist/src/presentation/web/components/ui/file-tree.stories.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tree } from './file-tree.js';
+const sampleElements = [
+    {
+        id: 'src',
+        name: 'src',
+        type: 'folder',
+        children: [
+            {
+                id: 'src/components',
+                name: 'components',
+                type: 'folder',
+                children: [
+                    { id: 'src/components/button.tsx', name: 'button.tsx', type: 'file' },
+                    { id: 'src/components/input.tsx', name: 'input.tsx', type: 'file' },
+                    { id: 'src/components/dialog.tsx', name: 'dialog.tsx', type: 'file' },
+                ],
+            },
+            {
+                id: 'src/lib',
+                name: 'lib',
+                type: 'folder',
+                children: [
+                    { id: 'src/lib/utils.ts', name: 'utils.ts', type: 'file' },
+                    { id: 'src/lib/cn.ts', name: 'cn.ts', type: 'file' },
+                ],
+            },
+            { id: 'src/index.ts', name: 'index.ts', type: 'file' },
+        ],
+    },
+    { id: 'package.json', name: 'package.json', type: 'file' },
+    { id: 'tsconfig.json', name: 'tsconfig.json', type: 'file' },
+];
+const meta = {
+    title: 'UI/FileTree',
+    component: Tree,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '400px', width: '300px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/** Default file tree with folders expanded. */
+export const Default = {
+    args: {
+        elements: sampleElements,
+        initialExpandedItems: ['src', 'src/components', 'src/lib'],
+    },
+};
+/** Collapsed tree — no items initially expanded. */
+export const Collapsed = {
+    args: {
+        elements: sampleElements,
+    },
+};
+/** Single file — no folders. */
+export const SingleFile = {
+    args: {
+        elements: [{ id: 'readme.md', name: 'readme.md', type: 'file' }],
+    },
+};
+/** Deeply nested structure. */
+export const DeepNesting = {
+    args: {
+        elements: [
+            {
+                id: 'a',
+                name: 'a',
+                type: 'folder',
+                children: [
+                    {
+                        id: 'a/b',
+                        name: 'b',
+                        type: 'folder',
+                        children: [
+                            {
+                                id: 'a/b/c',
+                                name: 'c',
+                                type: 'folder',
+                                children: [{ id: 'a/b/c/file.ts', name: 'file.ts', type: 'file' }],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        initialExpandedItems: ['a', 'a/b', 'a/b/c'],
+    },
+};

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -7,7 +7,7 @@ export const CANVAS_LAYOUT_DEFAULTS = {
 };
 /** Known node-type dimensions for the canvas node types */
 const NODE_DIMENSIONS = {
-    featureNode: { width: 388, height: 140 },
+    featureNode: { width: 288, height: 140 },
     repositoryNode: { width: 400, height: 140 },
 };
 function getNodeSize(node, defaultSize) {