@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/src/core/components/SelectBox.tsx

@@ -1,188 +0,0 @@
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import { X, Check, ChevronsUpDownIcon } from "lucide-react";
-import clsx from "clsx";
-import { ComponentType, KeyboardEvent, ReactNode, SyntheticEvent, useState, useEffect, useRef } from "react";
-import { Button } from "./Button";
-import { Center } from "./Center";
-
-type OnChangeClearableSelectFn<T> = (option: T | undefined) => void;
-type OnChangeNonClearableSelectFn<T> = (option: T) => void;
-
-interface SelectBoxBaseProps<T> {
-    options: T[] | undefined
-    optionLabel?: (option: T) => ReactNode
-    value?: T
-    onChange: OnChangeNonClearableSelectFn<T>
-    className?: string
-    // compare for equality by field or comparison function
-    by?: (keyof T & string) | ((a: T, z: T) => boolean)
-    placeholder?: ReactNode
-    addNew?: () => void
-    addNewLabel?: string
-    disabled?: boolean
-    isClearable?: false
-    showFilter?: boolean | string
-    filterBy?: string | ((o: T) => string)
-    ClearIcon?: ComponentType<any>
-    clearTitle?: string | undefined
-    label?: string | undefined
-}
-interface ClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'isClearable' | 'onChange'> {
-    onChange: OnChangeClearableSelectFn<T>
-    isClearable: true
-}
-// interface NonClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'onChange'> {
-//     onChange: OnChangeNonClearableSelectFn<T>
-// }
-
-type SelectBoxProps<T> = ClearableSelectBoxProps<T> | SelectBoxBaseProps<T>
-
-function getFilterByFn<T>(filterBy?: string | ((o: T) => string)) {
-    if (!filterBy) {
-        return (o: T) => String(o).toLowerCase();
-    } else if (typeof filterBy === 'string') {
-        return (o: any) => String(o[filterBy]).toLowerCase();
-    } else {
-        return filterBy;
-    }
-}
-
-export function SelectBox<T>({ clearTitle, ClearIcon = X, showFilter, filterBy, isClearable, disabled, by, options, value, onChange, className, addNew, addNewLabel, placeholder, optionLabel = (option) => String(option), label }: SelectBoxProps<T>) {
-    const [filter, setFilter] = useState<string>();
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const [buttonWidth, setButtonWidth] = useState<number>();
-
-    useEffect(() => {
-        if (buttonRef.current) {
-            const resizeObserver = new ResizeObserver((entries) => {
-                setButtonWidth(entries[0].contentRect.width);
-            });
-            resizeObserver.observe(buttonRef.current);
-            return () => resizeObserver.disconnect();
-        }
-    }, []);
-
-    const onClear = (e: SyntheticEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isClearable) {
-            (onChange as any)(undefined);
-        }
-    }
-    const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFilter(e.target.value);
-    }
-    let filteredOptions = options || [];
-    if (showFilter === undefined) {
-        showFilter = filteredOptions?.length >= 10;
-    }
-    if (showFilter && filter) {
-        const filterLc = filter.toLowerCase();
-        const filterFn = getFilterByFn(filterBy);
-        filteredOptions = filteredOptions.filter(o => filterFn(o).includes(filterLc))
-    }
-    const onFilterKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        if (e.key !== "Escape"
-            && e.key !== "Enter"
-            && e.key !== "ArrowDown"
-            && e.key !== "ArrowUp") {
-            e.stopPropagation()
-        }
-    }
-    return (
-        <Listbox value={value ?? undefined} onChange={onChange} by={by} disabled={disabled}>
-            {() => (
-                <div className={'overflow-y-visible ' + className}>
-                    <div className="relative">
-                        <ListboxButton
-                            ref={buttonRef}
-                            className="relative w-full cursor-default rounded-md bg-white py-1.5 text-left text-gray-900 shadow-2xs ring-1 ring-inset ring-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-600 dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 sm:text-sm sm:leading-6 hover:cursor-pointer"
-                        >
-                            {label && <div className='w-full text-gray-500 text-left px-2'>{label}</div>}
-                            <span className="block truncate pl-3 pr-14">{value ? optionLabel(value) : placeholder}</span>
-                            {
-                                isClearable && value != null && <span className="absolute inset-y-0 right-0 mr-5 flex items-center pr-2" onClick={onClear}>
-                                    <ClearIcon title={clearTitle} className="size-5 text-gray-400 hover:text-red-500 cursor-pointer" aria-hidden="true" />
-                                </span>
-                            }
-                            {
-                                !disabled &&
-                                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                    <ChevronsUpDownIcon className="size-5 text-gray-400" aria-hidden="true" />
-                                </span>
-                            }
-                        </ListboxButton>
-                        {/*
-                        <Transition
-                            show={open}
-                            as={Fragment}
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                        >
-                            */}
-                        <ListboxOptions
-                            anchor="bottom"
-                            style={{ width: buttonWidth, zIndex: 100000000 }}
-                            className="absolute z-10 mt-1 overflow-auto rounded-md bg-white dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-gray-300 ring-opacity-5 focus:outline-hidden sm:text-sm"
-                        >
-                            {showFilter &&
-                                <div className="p-1">
-                                    <input type="text" value={filter || ''} onKeyDown={onFilterKeyDown} onChange={onFilterChange} className="w-full p-1 border border-gray-300 rounded-md dark:bg-slate-700 dark:text-slate-50" placeholder="Filter..." />
-                                </div>
-                            }
-                            <div className="overflow-y-auto max-h-60">
-                                {filteredOptions.map((option, i) =>
-                                    <ListOption key={i} option={option} optionLabel={optionLabel} className="hover:cursor-pointer"></ListOption>
-                                )}
-                            </div>
-                            {addNew &&
-                                <Center className="font-semibold py-2 border-t">
-                                    <Button variant='secondary' onClick={addNew}>{addNewLabel}</Button>
-                                </Center>
-                            }
-                        </ListboxOptions>
-
-                        {/*</Transition>*/}
-                    </div>
-                </div>
-            )
-            }
-        </Listbox >
-    )
-}
-
-
-export function ListOption<T>({ option, optionLabel, onClick, className }: { option: T, optionLabel: (option: T) => ReactNode, onClick?: () => void, value?: T, className?: string }) {
-    return (
-        <ListboxOption
-            className={({ active }) =>
-                clsx(
-                    active ? 'bg-indigo-600 text-white dark:bg-indigo-800 dark:text-white' : 'text-gray-900 dark:text-slate-50',
-                    'relative cursor-default select-none py-2 pl-3 pr-9',
-                    className
-                )
-            }
-            value={option}
-            onClick={onClick}
-        >
-            {({ selected, active }) => (
-                <>
-                    <div className={clsx(selected ? 'font-semibold' : 'font-inherit', 'block truncate')}>
-                        {optionLabel(option)}
-                    </div>
-
-                    {selected ? (
-                        <div
-                            className={clsx(
-                                active ? 'text-white' : 'text-indigo-600',
-                                'absolute inset-y-0 right-0 flex items-center pr-4'
-                            )}
-                        >
-                            <Check className="size-5" aria-hidden="true" />
-                        </div>
-                    ) : null}
-                </>
-            )}
-        </ListboxOption>)
-}

package/src/core/components/tabs/Tabs.tsx

@@ -1,132 +0,0 @@
-import clsx from 'clsx';
-import { ComponentType, isValidElement, ReactNode, SyntheticEvent, useEffect, useState } from 'react';
-
-import { Tab, TabsContext, useTabs } from './TabsContext.js';
-
-function applyCurrentTab(tabs: Tab[], current?: string | (() => string)) {
-    const name = typeof current === 'function' ? current() : current;
-    let currentTab: Tab | null = null;
-    const newTabs = [];
-    for (const tab of tabs) {
-        const newTab = { ...tab };
-        newTab.current = false;
-        newTabs.push(newTab);
-        if (newTab.name === name) {
-            currentTab = newTab;
-        }
-    }
-    if (!currentTab) {
-        currentTab = newTabs[0];
-    }
-    currentTab.current = true;
-    return newTabs;
-}
-
-interface TabsProps {
-    current?: string | (() => string);
-    /**
-     * Return false to prevent the tab from being selected
-     * @param tab
-     * @returns
-     */
-    onSelect?: (tab: Tab) => void | boolean;
-    tabs: Tab[];
-    children: ReactNode | ReactNode[];
-    navigate?: (path: string) => void;
-}
-export function Tabs({ current, onSelect, tabs, children, navigate }: TabsProps) {
-    const [_tabs, _setTabs] = useState<Tab[]>([]);
-    useEffect(() => {
-        _setTabs(applyCurrentTab(tabs, current));
-    }, [current, tabs]);
-    const context = {
-        tabs: _tabs,
-        select: (tab: Tab) => {
-            if (onSelect) {
-                if (onSelect(tab) === false) {
-                    return;
-                }
-            }
-            if (tab.href) {
-                if (navigate) {
-                    navigate(tab.href);
-                } else {
-                    window.location.href = tab.href;
-                }
-            } else {
-                _setTabs([...applyCurrentTab(_tabs, tab.name)]);
-            }
-        }
-    };
-
-    return (
-        <TabsContext.Provider value={context}>
-            <div className="flex flex-col h-full">
-                {children}
-            </div>
-        </TabsContext.Provider>
-    );
-}
-
-interface TabsBarProps {
-    actions?: ReactNode | ReactNode[];
-    className?: string;
-}
-export function TabsBar({ actions, className }: TabsBarProps) {
-    const { tabs, select } = useTabs();
-    const _onClick = (e: SyntheticEvent, tab: Tab) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // ignore if disabled
-        !tab.disabled && select(tab);
-    };
-
-    return (
-        <div className="border-b flex items-start justify-between">
-            <nav className="flex space-x-4 px-4" aria-label="Tabs">
-                {tabs.map((tab) => {
-                    const cursor = tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer';
-                    return (
-                        <a
-                            key={tab.name}
-                            href={tab.href || '#' + tab.name}
-                            onClick={(e) => _onClick(e, tab)}
-                            className={clsx(
-                                tab.current
-                                    ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-50'
-                                    : 'border-transparent text-gray-500 dark:text-slate-300 hover:border-slate-400 hover:text-gray-700 dark:hover:border-slate-200 dark:hover:text-gray-200 ',
-                                className,
-                                'whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium',
-                                cursor
-                            )}
-                            aria-current={tab.current ? 'page' : undefined}
-                        >
-                            {tab.label}
-                        </a>
-                    );
-                })}
-            </nav>
-            <div className="flex gap-x-1">{actions}</div>
-        </div>
-    );
-}
-
-interface TabsPanelProps { }
-export function TabsPanel({ }: TabsPanelProps) {
-    const { tabs } = useTabs();
-    const content = tabs.find((t) => t.current)?.content;
-    if (!content) {
-        return null;
-    }
-
-    if (isValidElement(content)) {
-        return <div className="h-full overflow-y-auto flex-1">{content}</div>;
-    }
-
-    const Component = content as unknown as ComponentType;
-    return (
-        <div className="h-full overflow-y-auto flex-1">
-            <Component />
-        </div>
-    );
-}

package/src/core/components/tabs/TabsContext.ts

@@ -1,25 +0,0 @@
-import { ReactNode, createContext, useContext } from "react";
-
-export interface Tab {
-    name: string;
-    current?: boolean;
-    href?: string;
-    label: ReactNode;
-    content: ReactNode;
-    disabled?: boolean;
-}
-
-export interface TabsContextProps {
-    tabs: Tab[];
-    select: (tab: Tab) => void;
-}
-
-export function useTabs() {
-    return useContext(TabsContext);
-}
-
-const TabsContext = createContext<TabsContextProps>({} as TabsContextProps);
-
-export {
-    TabsContext
-};

package/src/core/components/tabs/index.ts

@@ -1,2 +0,0 @@
-export * from "./Tabs.js";
-export * from "./TabsContext.js";

package/src/features/agent/CHART_INSTRUCTIONS.md

@@ -1,228 +0,0 @@
-# Chart Creation Instructions for AI Agents
-
-This document provides instructions for AI agents on how to create interactive charts that will be rendered in the UI.
-
-## Overview
-
-You can create charts by including a special markdown code block with the language `chart`. The UI will automatically detect and render these as interactive Recharts visualizations.
-
-## Basic Format
-
-```markdown
-\`\`\`chart
-{
-  "version": "1.0",
-  "library": "recharts",
-  "chart": "bar" | "line" | "composed",
-  "title": "Chart Title",
-  "description": "Optional description",
-  "data": [ /* array of data objects */ ],
-  "xKey": "fieldName",
-  "series": [ /* array of series configurations */ ],
-  "yAxis": { /* optional axis labels */ },
-  "options": { /* optional chart options */ }
-}
-\`\`\`
-```
-
-## Chart Types
-
-### 1. Bar Chart
-Used for comparing values across categories.
-
-```chart
-{
-  "version": "1.0",
-  "chart": "bar",
-  "title": "Revenue by Quarter",
-  "data": [
-    { "quarter": "Q1", "revenue": 100000 },
-    { "quarter": "Q2", "revenue": 150000 },
-    { "quarter": "Q3", "revenue": 120000 }
-  ],
-  "xKey": "quarter",
-  "series": [
-    { "key": "revenue", "label": "Revenue", "type": "bar" }
-  ]
-}
-```
-
-### 2. Line Chart
-Used for showing trends over time.
-
-```chart
-{
-  "version": "1.0",
-  "chart": "line",
-  "title": "Performance Over Time",
-  "data": [
-    { "period": "2024-Q1", "tvpi": 1.2, "dpi": 0.3 },
-    { "period": "2024-Q2", "tvpi": 1.5, "dpi": 0.5 },
-    { "period": "2024-Q3", "tvpi": 1.8, "dpi": 0.7 }
-  ],
-  "xKey": "period",
-  "series": [
-    { "key": "tvpi", "label": "TVPI", "color": "#4f46e5", "dot": false },
-    { "key": "dpi", "label": "DPI", "color": "#16a34a", "dot": false }
-  ],
-  "yAxis": {
-    "left": { "label": "Multiple (x)" }
-  }
-}
-```
-
-### 3. Composed Chart
-Used for mixing bar and line charts (e.g., bars for cashflows, line for net).
-
-```chart
-{
-  "version": "1.0",
-  "chart": "composed",
-  "title": "Cashflow Timeline",
-  "data": [
-    { "period": "2024-Q1", "calls": 1000000, "distributions": 500000, "netCashflow": -500000 },
-    { "period": "2024-Q2", "calls": 800000, "distributions": 1200000, "netCashflow": 400000 }
-  ],
-  "xKey": "period",
-  "series": [
-    { "key": "calls", "label": "Calls", "type": "bar", "color": "#ef4444" },
-    { "key": "distributions", "label": "Distributions", "type": "bar", "color": "#22c55e" },
-    { "key": "netCashflow", "label": "Net CF", "type": "line", "color": "#0ea5e9", "yAxisId": "right", "dot": false }
-  ],
-  "yAxis": {
-    "left": { "label": "Amount" },
-    "right": { "label": "Net" }
-  },
-  "options": {
-    "referenceZero": true
-  }
-}
-```
-
-## Series Configuration
-
-Each series can have:
-
-- `key`: (required) The field name in the data
-- `label`: Display name for the legend
-- `type`: "bar" or "line" (for composed charts)
-- `color`: Hex color code (e.g., "#4f46e5")
-- `yAxisId`: "left" (default) or "right" for dual Y-axis
-- `stackId`: Group bars for stacking
-- `dot`: true/false - show dots on line charts
-
-## Options
-
-- `stacked`: true/false - Stack bars in bar charts
-- `referenceZero`: true/false - Show a reference line at y=0
-- `collapsible`: true/false - Allow users to collapse the chart (default: true)
-- `collapseInitially`: true/false - Start in collapsed state
-
-## Number Formatting
-
-Numbers are automatically formatted:
-- 1,000 → 1K
-- 1,000,000 → 1M
-- 1,000,000,000 → 1B
-
-## Pre-built Chart Builders (TypeScript)
-
-If you're writing TypeScript code, you can use these helper functions:
-
-```typescript
-import {
-  buildCashflowComposedChart,
-  buildPerformanceLineChart,
-  buildScenarioComparisonBarChart,
-  toChartMarkdown
-} from '@vertesia/ui/features';
-
-// Example: Create a cashflow chart
-const chart = buildCashflowComposedChart({
-  title: 'Fund Cashflow',
-  rows: [
-    { period: '2024-Q1', calls: 1000000, distributions: 500000 },
-    { period: '2024-Q2', calls: 800000, distributions: 1200000 }
-  ]
-});
-
-// Convert to markdown
-const markdown = toChartMarkdown(chart);
-```
-
-### Available Builders
-
-1. `buildCashflowComposedChart` - Calls/Distributions + Net CF
-2. `buildPerformanceLineChart` - TVPI/DPI/RVPI J-curve
-3. `buildScenarioComparisonBarChart` - Side-by-side comparison
-4. `buildScenarioDeltaPercentChart` - % change visualization
-5. `buildTvpiOverlayChart` - TVPI comparison between scenarios
-6. `buildNavLineChart` - NAV over time
-
-## Best Practices
-
-1. **Use appropriate chart types**:
-   - Bar charts for comparisons
-   - Line charts for trends
-   - Composed charts for mixed metrics
-
-2. **Keep data concise**:
-   - Limit to 20-30 data points for readability
-   - Use aggregation for large datasets
-
-3. **Color consistency**:
-   - Use the default color palette for consistency
-   - Red (#ef4444) for negative/costs
-   - Green (#22c55e) for positive/gains
-   - Blue (#0ea5e9) for neutral metrics
-
-4. **Add context**:
-   - Always include a descriptive title
-   - Add a description when the chart needs explanation
-   - Use axis labels for clarity
-
-5. **Dual Y-axis**:
-   - Use when comparing metrics with different scales
-   - Example: Amount (left) vs Count (right)
-
-## Example: Complete Workflow
-
-When a user asks "Show me the fund performance":
-
-1. Fetch or calculate the data
-2. Format it as a chart spec
-3. Include it in your response:
-
-```markdown
-Here's the fund performance over time:
-
-\`\`\`chart
-{
-  "version": "1.0",
-  "chart": "line",
-  "title": "Fund Performance",
-  "data": [
-    { "period": "2024-Q1", "tvpi": 1.2 },
-    { "period": "2024-Q2", "tvpi": 1.5 }
-  ],
-  "xKey": "period",
-  "series": [
-    { "key": "tvpi", "label": "TVPI", "color": "#4f46e5" }
-  ]
-}
-\`\`\`
-
-The fund shows strong performance with TVPI increasing from 1.2x to 1.5x.
-```
-
-## Common Pitfalls
-
-❌ **Don't** include line breaks in the JSON
-❌ **Don't** use single quotes in JSON (use double quotes)
-❌ **Don't** forget to specify the chart type
-❌ **Don't** mix up xKey with data field names
-
-✅ **Do** validate your JSON before including it
-✅ **Do** include descriptive labels
-✅ **Do** test with sample data first
-✅ **Do** provide context around the chart