@shepai/cli 1.110.1 → 1.110.2-pr343.55002ac

package/dist/src/presentation/web/components/ui/code-block.stories.js

@@ -0,0 +1,89 @@
+import { CodeBlock } from './code-block.js';
+const sampleTsx = `import { useState } from 'react';
+import { Button } from '../ui/button.js';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex items-center gap-2">
+      <span>{count}</span>
+      <Button onClick={() => setCount(count + 1)}>Increment</Button>
+    </div>
+  );
+}`;
+const sampleCss = `body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}`;
+const meta = {
+    title: 'Primitives/CodeBlock',
+    component: CodeBlock,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+/** Default — single code block with syntax highlighting. */
+export const Default = {
+    args: {
+        language: 'tsx',
+        filename: 'Counter.tsx',
+        code: sampleTsx,
+    },
+};
+/** Highlighted lines to draw attention to specific code. */
+export const HighlightedLines = {
+    args: {
+        language: 'tsx',
+        filename: 'Counter.tsx',
+        code: sampleTsx,
+        highlightLines: [4, 5, 6],
+    },
+};
+/** Tabbed code view with multiple files. */
+export const WithTabs = {
+    args: {
+        language: 'tsx',
+        filename: 'App.tsx',
+        tabs: [
+            { name: 'Counter.tsx', code: sampleTsx, language: 'tsx' },
+            { name: 'styles.css', code: sampleCss, language: 'css' },
+        ],
+    },
+};
+/** JSON content. */
+export const JsonContent = {
+    args: {
+        language: 'json',
+        filename: 'package.json',
+        code: JSON.stringify({ name: '@my/package', version: '1.0.0', dependencies: { react: '^18.0.0' } }, null, 2),
+    },
+};
+const sampleDiff = `  import { useState } from 'react';
+  import { Button } from '../ui/button.js';
++ import { Input } from '../ui/input.js';
++ import { Label } from '../ui/label.js';
+
+- export function LoginForm() {
++ export function LoginForm({ onSubmit }: LoginFormProps) {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
++   const [isLoading, setIsLoading] = useState(false);`;
+/** Diff-style highlighting with green (added) and red (removed) backgrounds. */
+export const DiffHighlighting = {
+    args: {
+        language: 'tsx',
+        filename: 'login-form.tsx',
+        code: sampleDiff,
+        addedLines: [3, 4, 7, 10],
+        removedLines: [6],
+    },
+};

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/** A node in the file tree data model. */
+export interface TreeViewElement {
+    id: string;
+    name: string;
+    type?: 'file' | 'folder';
+    isSelectable?: boolean;
+    children?: TreeViewElement[];
+    /** Optional custom icon for file nodes. */
+    icon?: React.ReactNode;
+    /** Optional badge/suffix rendered after the name (e.g. "+5 -2" for diffs). */
+    badge?: React.ReactNode;
+}
+export interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+    elements: TreeViewElement[];
+    initialSelectedId?: string;
+    initialExpandedItems?: string[];
+    indicator?: boolean;
+    onSelectChange?: (id: string) => void;
+}
+export declare function Tree({ elements, initialSelectedId, initialExpandedItems, indicator, onSelectChange, className, ...props }: TreeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/file-tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,0CAA0C;AAC1C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAoBD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAaD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,iBAAiB,EACjB,oBAAoB,EACpB,SAAgB,EAChB,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CA2CX"}

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

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { FileIcon, FolderIcon, FolderOpenIcon, ChevronRight } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+const TreeContext = React.createContext(undefined);
+function useTree() {
+    const ctx = React.useContext(TreeContext);
+    if (!ctx)
+        throw new Error('useTree must be used within a Tree');
+    return ctx;
+}
+function collectFolderIds(elements) {
+    const ids = [];
+    for (const el of elements) {
+        if (el.children && el.children.length > 0) {
+            ids.push(el.id);
+            ids.push(...collectFolderIds(el.children));
+        }
+    }
+    return ids;
+}
+export function Tree({ elements, initialSelectedId, initialExpandedItems, indicator = true, onSelectChange, className, ...props }) {
+    const [selectedId, setSelectedId] = React.useState(initialSelectedId);
+    const [expandedItems, setExpandedItems] = React.useState(() => initialExpandedItems ?? collectFolderIds(elements));
+    const handleSelect = React.useCallback((id) => {
+        setSelectedId(id);
+        onSelectChange?.(id);
+    }, [onSelectChange]);
+    const handleExpand = React.useCallback((id) => {
+        setExpandedItems((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]);
+    }, []);
+    const ctx = React.useMemo(() => ({ selectedId, expandedItems, handleSelect, handleExpand, indicator }), [selectedId, expandedItems, handleSelect, handleExpand, indicator]);
+    return (_jsx(TreeContext.Provider, { value: ctx, children: _jsx("div", { className: cn('relative overflow-hidden rounded-md', className), ...props, children: _jsx(ScrollArea, { className: "h-full", children: _jsx(AccordionPrimitive.Root, { type: "multiple", value: expandedItems, onValueChange: setExpandedItems, className: "flex flex-col gap-px", children: elements.map((el) => (_jsx(TreeNode, { element: el, depth: 0 }, el.id))) }) }) }) }));
+}
+/* ─── Internal recursive node ─── */
+function TreeNode({ element, depth }) {
+    const isFolder = element.type === 'folder' || (element.children && element.children.length > 0);
+    if (isFolder) {
+        return _jsx(FolderNode, { element: element, depth: depth });
+    }
+    return _jsx(FileNode, { element: element, depth: depth, fileIcon: element.icon });
+}
+function FolderNode({ element, depth }) {
+    const { selectedId, expandedItems, handleSelect, indicator } = useTree();
+    const isSelected = selectedId === element.id;
+    const isOpen = expandedItems.includes(element.id);
+    return (_jsxs(AccordionPrimitive.Item, { value: element.id, className: "relative", children: [indicator && depth > 0 ? (_jsx("span", { className: "bg-muted absolute top-0 left-3 h-full w-px", style: { marginLeft: `${(depth - 1) * 16}px` } })) : null, _jsxs(AccordionPrimitive.Trigger, { className: cn('hover:bg-muted/80 flex w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-xs', isSelected && 'bg-muted'), style: { paddingLeft: `${depth * 16 + 8}px` }, onClick: (e) => {
+                    if (element.isSelectable !== false) {
+                        e.stopPropagation();
+                        handleSelect(element.id);
+                    }
+                }, children: [_jsx(ChevronRight, { className: cn('text-muted-foreground h-3 w-3 shrink-0 transition-transform duration-150', isOpen && 'rotate-90') }), isOpen ? (_jsx(FolderOpenIcon, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" })) : (_jsx(FolderIcon, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" })), _jsx("span", { className: "text-foreground truncate", children: element.name })] }), _jsx(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", children: element.children?.map((child) => (_jsx(TreeNode, { element: child, depth: depth + 1 }, child.id))) })] }));
+}
+function FileNode({ element, depth, fileIcon, }) {
+    const { selectedId, handleSelect, indicator } = useTree();
+    const isSelected = selectedId === element.id;
+    return (_jsxs("div", { className: "relative", children: [indicator && depth > 0 ? (_jsx("span", { className: "bg-muted absolute top-0 left-3 h-full w-px", style: { marginLeft: `${(depth - 1) * 16}px` } })) : null, _jsxs("button", { type: "button", className: cn('hover:bg-muted/80 flex w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-xs', isSelected && 'bg-accent text-accent-foreground'), style: { paddingLeft: `${depth * 16 + 8 + 16}px` }, onClick: () => element.isSelectable !== false && handleSelect(element.id), children: [fileIcon ?? _jsx(FileIcon, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: element.name }), element.badge ? _jsx("span", { className: "shrink-0", children: element.badge }) : null] })] }));
+}

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 — hierarchical file tree with diff badges. */
+export declare const Default: Story;
+/** Without indicator lines. */
+export declare const NoIndicator: Story;
+/** Flat file list (no folders). */
+export declare const FlatList: Story;
+/** Single file. */
+export declare const SingleFile: 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;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AA6EnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAqB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,yDAAyD;AACzD,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,mBAAmB;AACnB,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC"}

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilePlus, FileEdit, FileMinus } from 'lucide-react';
+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',
+                        icon: _jsx(FileEdit, { className: "h-3.5 w-3.5 shrink-0 text-amber-600" }),
+                        badge: (_jsxs("span", { className: "flex items-center gap-1 text-[10px]", children: [_jsx("span", { className: "text-green-600", children: "+12" }), _jsx("span", { className: "text-red-600", children: "-3" })] })),
+                    },
+                    {
+                        id: 'src/components/input.tsx',
+                        name: 'input.tsx',
+                        type: 'file',
+                        icon: _jsx(FilePlus, { className: "h-3.5 w-3.5 shrink-0 text-green-600" }),
+                        badge: _jsx("span", { className: "text-[10px] text-green-600", children: "+45" }),
+                    },
+                ],
+            },
+            {
+                id: 'src/lib',
+                name: 'lib',
+                type: 'folder',
+                children: [
+                    {
+                        id: 'src/lib/utils.ts',
+                        name: 'utils.ts',
+                        type: 'file',
+                        icon: _jsx(FileEdit, { className: "h-3.5 w-3.5 shrink-0 text-amber-600" }),
+                        badge: (_jsxs("span", { className: "flex items-center gap-1 text-[10px]", children: [_jsx("span", { className: "text-green-600", children: "+5" }), _jsx("span", { className: "text-red-600", children: "-2" })] })),
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 'package.json',
+        name: 'package.json',
+        type: 'file',
+        icon: _jsx(FileEdit, { className: "h-3.5 w-3.5 shrink-0 text-amber-600" }),
+        badge: (_jsxs("span", { className: "flex items-center gap-1 text-[10px]", children: [_jsx("span", { className: "text-green-600", children: "+1" }), _jsx("span", { className: "text-red-600", children: "-1" })] })),
+    },
+    {
+        id: 'old-file.ts',
+        name: 'old-file.ts',
+        type: 'file',
+        icon: _jsx(FileMinus, { className: "h-3.5 w-3.5 shrink-0 text-red-600" }),
+        badge: _jsx("span", { className: "text-[10px] text-red-600", children: "-20" }),
+    },
+];
+const meta = {
+    title: 'Primitives/FileTree',
+    component: Tree,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 280,
+                height: 400,
+                border: '1px solid var(--color-border)',
+                borderRadius: 8,
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/** Default — hierarchical file tree with diff badges. */
+export const Default = {
+    args: {
+        elements: sampleElements,
+        initialSelectedId: 'src/components/button.tsx',
+    },
+};
+/** Without indicator lines. */
+export const NoIndicator = {
+    args: {
+        elements: sampleElements,
+        indicator: false,
+    },
+};
+/** Flat file list (no folders). */
+export const FlatList = {
+    args: {
+        elements: [
+            { id: 'README.md', name: 'README.md', type: 'file' },
+            { id: 'index.ts', name: 'index.ts', type: 'file' },
+            { id: 'package.json', name: 'package.json', type: 'file' },
+        ],
+    },
+};
+/** Single file. */
+export const SingleFile = {
+    args: {
+        elements: [
+            {
+                id: 'app.tsx',
+                name: 'app.tsx',
+                type: 'file',
+                icon: _jsx(FilePlus, { className: "h-3.5 w-3.5 shrink-0 text-green-600" }),
+                badge: _jsx("span", { className: "text-[10px] text-green-600", children: "+100" }),
+            },
+        ],
+    },
+};