@elaraai/east-ui-components 0.0.1-beta.0 → 0.0.1-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +128 -0
- package/dist/collections/gantt/EventAxis.d.ts +14 -0
- package/dist/collections/gantt/EventAxis.d.ts.map +1 -0
- package/dist/collections/gantt/GanttEventRow.d.ts +20 -0
- package/dist/collections/gantt/GanttEventRow.d.ts.map +1 -0
- package/dist/collections/gantt/GanttMilestone.d.ts +16 -0
- package/dist/collections/gantt/GanttMilestone.d.ts.map +1 -0
- package/dist/collections/gantt/GanttTask.d.ts +17 -0
- package/dist/collections/gantt/GanttTask.d.ts.map +1 -0
- package/dist/collections/gantt/index.d.ts +65 -0
- package/dist/collections/gantt/index.d.ts.map +1 -0
- package/dist/collections/table/index.d.ts +36 -1
- package/dist/collections/table/index.d.ts.map +1 -1
- package/dist/component.d.ts.map +1 -1
- package/dist/index.cjs +5176 -270
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5236 -330
- package/dist/index.js.map +1 -1
- package/dist/typography/text/index.d.ts.map +1 -1
- package/dist/utils/RowSortManager.d.ts +68 -0
- package/dist/utils/RowSortManager.d.ts.map +1 -0
- package/dist/utils/RowStateManager.d.ts +42 -0
- package/dist/utils/RowStateManager.d.ts.map +1 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.d.ts.map +1 -0
- package/package.json +5 -3
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# East UI Components
|
|
2
|
+
|
|
3
|
+
> React rendering components for East UI
|
|
4
|
+
|
|
5
|
+
[](LICENSE.md)
|
|
6
|
+
[](https://nodejs.org)
|
|
7
|
+
|
|
8
|
+
**East UI Components** provides React components that render [East UI](https://www.npmjs.com/package/@elaraai/east-ui) data structures. It bridges the gap between East UI's declarative component definitions and interactive React applications using [Chakra UI v3](https://chakra-ui.com/).
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- **🎨 Chakra UI v3** - Modern, accessible component rendering
|
|
13
|
+
- **📦 All East UI Components** - Full support for layout, forms, charts, overlays, and more
|
|
14
|
+
- **🔄 State Management** - React hooks for East state operations
|
|
15
|
+
- **📊 Recharts Integration** - Charts rendered using Recharts library
|
|
16
|
+
- **🎯 Type-Safe** - Full TypeScript support
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @elaraai/east-ui-components @elaraai/east-ui @elaraai/east
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Quick Start
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import React from "react";
|
|
28
|
+
import { Provider } from "@chakra-ui/react";
|
|
29
|
+
import { East } from "@elaraai/east";
|
|
30
|
+
import { Stack, Text, Button, UIComponentType } from "@elaraai/east-ui";
|
|
31
|
+
import { EastUIComponent, system } from "@elaraai/east-ui-components";
|
|
32
|
+
|
|
33
|
+
// Define your East UI component
|
|
34
|
+
const MyUI = East.function([], UIComponentType, $ => {
|
|
35
|
+
return Stack.Root([
|
|
36
|
+
Text.Root("Hello from East UI!", { fontSize: "xl" }),
|
|
37
|
+
Button.Root("Click Me", { variant: "solid", colorPalette: "blue" }),
|
|
38
|
+
], { gap: "4" });
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
// Compile and get the UI IR
|
|
42
|
+
const compiled = East.compile(MyUI.toIR());
|
|
43
|
+
const uiData = compiled();
|
|
44
|
+
|
|
45
|
+
// Render in React
|
|
46
|
+
function App() {
|
|
47
|
+
return (
|
|
48
|
+
<Provider value={system}>
|
|
49
|
+
<EastUIComponent ir={uiData} />
|
|
50
|
+
</Provider>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## State Management
|
|
56
|
+
|
|
57
|
+
East UI Components provides hooks for managing state in East applications:
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { useEastStore, useEastState } from "@elaraai/east-ui-components";
|
|
61
|
+
import { State } from "@elaraai/east-ui";
|
|
62
|
+
|
|
63
|
+
// In your East function
|
|
64
|
+
const MyComponent = East.function([], UIComponentType, $ => {
|
|
65
|
+
const count = $.let(State.read("counter", IntegerType, 0n));
|
|
66
|
+
return Button.Root(
|
|
67
|
+
East.str`Count: ${count}`,
|
|
68
|
+
{ onClick: State.write("counter", count.add(1n)) }
|
|
69
|
+
);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
// In your React app
|
|
73
|
+
function App() {
|
|
74
|
+
const store = useEastStore();
|
|
75
|
+
const [count] = useEastState(store, "counter", 0n);
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<Provider value={system}>
|
|
79
|
+
<EastUIComponent ir={uiData} store={store} />
|
|
80
|
+
<p>Current count: {count}</p>
|
|
81
|
+
</Provider>
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Supported Components
|
|
87
|
+
|
|
88
|
+
All East UI components are supported:
|
|
89
|
+
|
|
90
|
+
| Category | Components |
|
|
91
|
+
|----------|------------|
|
|
92
|
+
| **Layout** | Box, Stack, HStack, VStack, Grid, Splitter, Separator |
|
|
93
|
+
| **Typography** | Text |
|
|
94
|
+
| **Buttons** | Button, IconButton |
|
|
95
|
+
| **Forms** | Input (String, Integer, Float, DateTime), Select, Checkbox, Switch, Slider, Textarea, TagsInput, FileUpload, Field, Fieldset |
|
|
96
|
+
| **Collections** | Table, DataList, TreeView |
|
|
97
|
+
| **Charts** | Area, Bar, Line, Pie, Radar, Scatter, Sparkline, BarList, BarSegment |
|
|
98
|
+
| **Display** | Badge, Tag, Avatar, Stat, Icon |
|
|
99
|
+
| **Feedback** | Alert, Progress |
|
|
100
|
+
| **Disclosure** | Accordion, Tabs, Carousel |
|
|
101
|
+
| **Overlays** | Dialog, Drawer, Popover, Tooltip, Menu, HoverCard, ToggleTip, ActionBar |
|
|
102
|
+
| **Container** | Card |
|
|
103
|
+
|
|
104
|
+
## Development
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
npm run build # Build library
|
|
108
|
+
npm run dev # Start development server
|
|
109
|
+
npm run lint # Check code quality
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## License
|
|
113
|
+
|
|
114
|
+
Dual-licensed:
|
|
115
|
+
- **Open Source**: [AGPL-3.0](LICENSE.md) - Free for open source use
|
|
116
|
+
- **Commercial**: Available for proprietary use - contact support@elara.ai
|
|
117
|
+
|
|
118
|
+
## Links
|
|
119
|
+
|
|
120
|
+
- **Website**: [https://elaraai.com/](https://elaraai.com/)
|
|
121
|
+
- **East UI**: [https://www.npmjs.com/package/@elaraai/east-ui](https://www.npmjs.com/package/@elaraai/east-ui)
|
|
122
|
+
- **East Repository**: [https://github.com/elaraai/East](https://github.com/elaraai/East)
|
|
123
|
+
- **Issues**: [https://github.com/elaraai/east-ui/issues](https://github.com/elaraai/east-ui/issues)
|
|
124
|
+
- **Email**: support@elara.ai
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
*Developed by [Elara AI Pty Ltd](https://elaraai.com/) - Powering the computational layer of AI-driven business optimization.*
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2025 Elara AI Pty Ltd
|
|
3
|
+
* Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
|
|
4
|
+
*/
|
|
5
|
+
export interface EventAxisProps {
|
|
6
|
+
startDate: Date;
|
|
7
|
+
endDate: Date;
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
}
|
|
11
|
+
export declare const generateDateTicks: (startDate: Date, endDate: Date, maxTicks?: number) => Date[];
|
|
12
|
+
export declare const getDatePosition: (date: Date, startDate: Date, endDate: Date, width: number) => number;
|
|
13
|
+
export declare const EventAxis: ({ startDate, endDate, width, height, }: EventAxisProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=EventAxis.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EventAxis.d.ts","sourceRoot":"","sources":["../../../src/collections/gantt/EventAxis.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AASD,eAAO,MAAM,iBAAiB,GAAI,WAAW,IAAI,EAAE,SAAS,IAAI,EAAE,WAAU,MAAU,KAAG,IAAI,EAa5F,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,EAAE,WAAW,IAAI,EAAE,SAAS,IAAI,EAAE,OAAO,MAAM,KAAG,MAK3F,CAAC;AAKF,eAAO,MAAM,SAAS,GAAI,wCAKvB,cAAc,4CA8ChB,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2025 Elara AI Pty Ltd
|
|
3
|
+
* Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
|
|
4
|
+
*/
|
|
5
|
+
import type { ValueTypeOf } from "@elaraai/east";
|
|
6
|
+
import type { Gantt } from "@elaraai/east-ui";
|
|
7
|
+
export type GanttEventValue = ValueTypeOf<typeof Gantt.Types.Event>;
|
|
8
|
+
export type GanttRowValue = ValueTypeOf<typeof Gantt.Types.Row>;
|
|
9
|
+
export interface GanttEventRowProps {
|
|
10
|
+
events: GanttEventValue[];
|
|
11
|
+
rowIndex: number;
|
|
12
|
+
y: number;
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
startDate: Date;
|
|
16
|
+
endDate: Date;
|
|
17
|
+
onEventClick?: ((event: GanttEventValue, rowIndex: number, eventIndex: number) => void) | undefined;
|
|
18
|
+
}
|
|
19
|
+
export declare const GanttEventRow: ({ events, rowIndex, y, width, height, startDate, endDate, onEventClick, }: GanttEventRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
//# sourceMappingURL=GanttEventRow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GanttEventRow.d.ts","sourceRoot":"","sources":["../../../src/collections/gantt/GanttEventRow.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI9C,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACpE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACvG;AA2CD,eAAO,MAAM,aAAa,GAAI,2EAS3B,kBAAkB,4CAsCpB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2025 Elara AI Pty Ltd
|
|
3
|
+
* Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
|
|
4
|
+
*/
|
|
5
|
+
import type { ValueTypeOf } from "@elaraai/east";
|
|
6
|
+
import type { Gantt } from "@elaraai/east-ui";
|
|
7
|
+
export type GanttMilestoneValue = ValueTypeOf<typeof Gantt.Types.Milestone>;
|
|
8
|
+
export interface GanttMilestoneProps {
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
height: number;
|
|
12
|
+
value: GanttMilestoneValue;
|
|
13
|
+
onClick?: () => void;
|
|
14
|
+
}
|
|
15
|
+
export declare const GanttMilestone: ({ x, y, height, value, onClick, }: GanttMilestoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=GanttMilestone.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GanttMilestone.d.ts","sourceRoot":"","sources":["../../../src/collections/gantt/GanttMilestone.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AAE5E,MAAM,WAAW,mBAAmB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,mBAAmB,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAQD,eAAO,MAAM,cAAc,GAAI,mCAM5B,mBAAmB,4CAsErB,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2025 Elara AI Pty Ltd
|
|
3
|
+
* Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
|
|
4
|
+
*/
|
|
5
|
+
import type { ValueTypeOf } from "@elaraai/east";
|
|
6
|
+
import type { Gantt } from "@elaraai/east-ui";
|
|
7
|
+
export type GanttTaskValue = ValueTypeOf<typeof Gantt.Types.Task>;
|
|
8
|
+
export interface GanttTaskProps {
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
width: number;
|
|
12
|
+
height: number;
|
|
13
|
+
value: GanttTaskValue;
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const GanttTask: ({ x, y, width, height, value, onClick, }: GanttTaskProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
//# sourceMappingURL=GanttTask.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GanttTask.d.ts","sourceRoot":"","sources":["../../../src/collections/gantt/GanttTask.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAElE,MAAM,WAAW,cAAc;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,GAAI,0CAOvB,cAAc,4CA4FhB,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2025 Elara AI Pty Ltd
|
|
3
|
+
* Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
|
|
4
|
+
*/
|
|
5
|
+
import { type TableRootProps } from "@chakra-ui/react";
|
|
6
|
+
import { type ValueTypeOf } from "@elaraai/east";
|
|
7
|
+
import { Gantt } from "@elaraai/east-ui";
|
|
8
|
+
import { type GanttEventValue } from "./GanttEventRow";
|
|
9
|
+
/** East Gantt Root value type */
|
|
10
|
+
export type GanttRootValue = ValueTypeOf<typeof Gantt.Types.Root>;
|
|
11
|
+
/** East Gantt Column value type */
|
|
12
|
+
export type GanttColumnValue = ValueTypeOf<typeof Gantt.Types.Column>;
|
|
13
|
+
/** East Gantt Cell value type */
|
|
14
|
+
export type GanttCellValue = ValueTypeOf<typeof Gantt.Types.Cell>;
|
|
15
|
+
/** East Gantt Row value type */
|
|
16
|
+
export type GanttRowValue = ValueTypeOf<typeof Gantt.Types.Row>;
|
|
17
|
+
export type SortDirection = "asc" | "desc";
|
|
18
|
+
export interface ColumnSort {
|
|
19
|
+
columnKey: string;
|
|
20
|
+
direction: SortDirection;
|
|
21
|
+
}
|
|
22
|
+
declare module "@tanstack/react-table" {
|
|
23
|
+
interface ColumnMeta<TData, TValue> {
|
|
24
|
+
print?: (value: unknown) => string;
|
|
25
|
+
columnKey?: string;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Converts an East UI Gantt Root value to Chakra UI TableRoot props.
|
|
30
|
+
*/
|
|
31
|
+
export declare function toChakraTableRoot(value: GanttRootValue): TableRootProps;
|
|
32
|
+
export interface EastChakraGanttProps {
|
|
33
|
+
value: GanttRootValue;
|
|
34
|
+
/** Height of the gantt container (required for virtualization) */
|
|
35
|
+
height?: string | number;
|
|
36
|
+
/** Estimated row height for virtualization */
|
|
37
|
+
rowHeight?: number;
|
|
38
|
+
/** Number of rows to render outside visible area */
|
|
39
|
+
overscan?: number;
|
|
40
|
+
/** Callback when sort changes */
|
|
41
|
+
onSortChange?: (sorts: ColumnSort[]) => void;
|
|
42
|
+
/** Enable multi-column sorting */
|
|
43
|
+
enableMultiSort?: boolean;
|
|
44
|
+
/** Maximum number of sort columns */
|
|
45
|
+
maxSortColumns?: number;
|
|
46
|
+
/** Loading delay before showing row content (ms) */
|
|
47
|
+
loadingDelay?: number;
|
|
48
|
+
/** Enable column resizing */
|
|
49
|
+
enableColumnResizing?: boolean;
|
|
50
|
+
/** Callback when an event is clicked */
|
|
51
|
+
onEventClick?: (event: GanttEventValue, rowIndex: number, eventIndex: number) => void;
|
|
52
|
+
/** Initial size of the table panel (0-100) */
|
|
53
|
+
tablePanelSize?: number;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Renders an East UI Gantt value using Chakra UI components.
|
|
57
|
+
* Features:
|
|
58
|
+
* - Row virtualization for large datasets
|
|
59
|
+
* - Column sorting with multi-sort support
|
|
60
|
+
* - Column resizing
|
|
61
|
+
* - Resizable splitter between table and timeline
|
|
62
|
+
* - SVG-based task and milestone rendering
|
|
63
|
+
*/
|
|
64
|
+
export declare const EastChakraGantt: import("react").NamedExoticComponent<EastChakraGanttProps>;
|
|
65
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collections/gantt/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EASH,KAAK,cAAc,EACtB,MAAM,kBAAkB,CAAC;AAc1B,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAKzC,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKtE,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAElE,mCAAmC;AACnC,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AAEtE,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAElE,gCAAgC;AAChC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAGhE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3C,MAAM,WAAW,UAAU;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,aAAa,CAAC;CAC5B;AAGD,OAAO,QAAQ,uBAAuB,CAAC;IAEnC,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM;QAC9B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;QACnC,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB;CACJ;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAYvE;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,cAAc,CAAC;IACtB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtF,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,4DA4nB8B,CAAC"}
|
|
@@ -9,16 +9,51 @@ import { Table } from "@elaraai/east-ui";
|
|
|
9
9
|
export type TableRootValue = ValueTypeOf<typeof Table.Types.Root>;
|
|
10
10
|
/** East Table Column value type */
|
|
11
11
|
export type TableColumnValue = ValueTypeOf<typeof Table.Types.Column>;
|
|
12
|
+
/** East Table Cell value type */
|
|
13
|
+
export type TableCellValue = ValueTypeOf<typeof Table.Types.Cell>;
|
|
14
|
+
/** East Table Row value type */
|
|
15
|
+
export type TableRowValue = Map<string, TableCellValue>;
|
|
16
|
+
export type SortDirection = 'asc' | 'desc';
|
|
17
|
+
export interface ColumnSort {
|
|
18
|
+
columnKey: string;
|
|
19
|
+
direction: SortDirection;
|
|
20
|
+
}
|
|
21
|
+
declare module '@tanstack/react-table' {
|
|
22
|
+
interface ColumnMeta<TData, TValue> {
|
|
23
|
+
print?: (value: unknown) => string;
|
|
24
|
+
columnKey?: string;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
12
27
|
/**
|
|
13
28
|
* Converts an East UI Table Root value to Chakra UI TableRoot props.
|
|
14
|
-
* Pure function - easy to test independently.
|
|
15
29
|
*/
|
|
16
30
|
export declare function toChakraTableRoot(value: TableRootValue): TableRootProps;
|
|
17
31
|
export interface EastChakraTableProps {
|
|
18
32
|
value: TableRootValue;
|
|
33
|
+
/** Height of the table container (required for virtualization) */
|
|
34
|
+
height?: string | number;
|
|
35
|
+
/** Estimated row height for virtualization */
|
|
36
|
+
rowHeight?: number;
|
|
37
|
+
/** Number of rows to render outside visible area */
|
|
38
|
+
overscan?: number;
|
|
39
|
+
/** Callback when sort changes */
|
|
40
|
+
onSortChange?: (sorts: ColumnSort[]) => void;
|
|
41
|
+
/** Enable multi-column sorting */
|
|
42
|
+
enableMultiSort?: boolean;
|
|
43
|
+
/** Maximum number of sort columns */
|
|
44
|
+
maxSortColumns?: number;
|
|
45
|
+
/** Loading delay before showing row content (ms) */
|
|
46
|
+
loadingDelay?: number;
|
|
47
|
+
/** Enable column resizing */
|
|
48
|
+
enableColumnResizing?: boolean;
|
|
19
49
|
}
|
|
20
50
|
/**
|
|
21
51
|
* Renders an East UI Table value using Chakra UI Table components.
|
|
52
|
+
* Features:
|
|
53
|
+
* - Row virtualization for large datasets
|
|
54
|
+
* - Column sorting with multi-sort support
|
|
55
|
+
* - Column resizing
|
|
56
|
+
* - Row loading state indicators
|
|
22
57
|
*/
|
|
23
58
|
export declare const EastChakraTable: import("react").NamedExoticComponent<EastChakraTableProps>;
|
|
24
59
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collections/table/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collections/table/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAOH,KAAK,cAAc,EACtB,MAAM,kBAAkB,CAAC;AAc1B,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAQzC,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAElE,mCAAmC;AACnC,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AAEtE,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAElE,gCAAgC;AAChC,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;AAGxD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3C,MAAM,WAAW,UAAU;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,aAAa,CAAC;CAC5B;AAGD,OAAO,QAAQ,uBAAuB,CAAC;IAEnC,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM;QAC9B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;QACnC,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB;CAEJ;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAYvE;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,cAAc,CAAC;IACtB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,4DA+X8B,CAAC"}
|
package/dist/component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA+DnD,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;CACvC;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,gEAkF4B,CAAC"}
|