@vira-ui/cli 1.1.2 → 2.0.0
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 +454 -1029
- package/dist/go/appYaml.js +30 -30
- package/dist/go/backendEnvExample.js +17 -17
- package/dist/go/backendReadme.js +14 -14
- package/dist/go/channelHelpers.js +25 -25
- package/dist/go/configGo.js +258 -258
- package/dist/go/dbGo.js +43 -43
- package/dist/go/dbYaml.js +7 -7
- package/dist/go/dockerCompose.js +48 -48
- package/dist/go/dockerComposeProd.js +78 -78
- package/dist/go/dockerfile.js +15 -15
- package/dist/go/eventHandlerTemplate.js +22 -22
- package/dist/go/eventsAPI.js +411 -411
- package/dist/go/goMod.js +16 -16
- package/dist/go/kafkaGo.js +67 -67
- package/dist/go/kafkaYaml.js +6 -6
- package/dist/go/kanbanHandlers.js +216 -216
- package/dist/go/mainGo.js +558 -558
- package/dist/go/readme.js +27 -27
- package/dist/go/redisGo.js +31 -31
- package/dist/go/redisYaml.js +4 -4
- package/dist/go/registryGo.js +38 -38
- package/dist/go/sqlcYaml.js +13 -13
- package/dist/go/stateStore.js +115 -115
- package/dist/go/typesGo.js +11 -11
- package/dist/index.js +472 -24
- package/dist/react/envExample.js +3 -3
- package/dist/react/envLocal.js +1 -1
- package/dist/react/indexCss.js +17 -17
- package/dist/react/indexHtml.js +12 -12
- package/dist/react/kanbanAppTsx.js +29 -29
- package/dist/react/kanbanBoard.js +58 -58
- package/dist/react/kanbanCard.js +60 -60
- package/dist/react/kanbanColumn.js +62 -62
- package/dist/react/kanbanModels.js +32 -32
- package/dist/react/mainTsx.js +12 -12
- package/dist/react/viteConfig.js +27 -27
- package/package.json +47 -45
- package/dist/go/useViraState.js +0 -160
- package/dist/go/useViraStream.js +0 -167
package/dist/react/indexHtml.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.indexHtml = void 0;
|
|
4
|
-
exports.indexHtml = `<!DOCTYPE html>
|
|
5
|
-
<html lang="en">
|
|
6
|
-
<head>
|
|
7
|
-
<meta charset="UTF-8" />
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
-
<title>Vira App</title>
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<div id="root"></div>
|
|
13
|
-
<script type="module" src="/src/main.tsx"></script>
|
|
14
|
-
</body>
|
|
15
|
-
</html>
|
|
4
|
+
exports.indexHtml = `<!DOCTYPE html>
|
|
5
|
+
<html lang="en">
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="UTF-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
<title>Vira App</title>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div id="root"></div>
|
|
13
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
16
16
|
`;
|
|
@@ -2,33 +2,33 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.kanbanAppTsx = void 0;
|
|
4
4
|
// src/App.tsx - Kanban reference app (VRP + Vira UI/Core standards)
|
|
5
|
-
exports.kanbanAppTsx = `import { ViraProvider } from '@vira-ui/ui';
|
|
6
|
-
import { Box } from '@vira-ui/ui';
|
|
7
|
-
import { KanbanBoard } from './components/KanbanBoard';
|
|
8
|
-
import './index.css';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Kanban Reference App - Demonstrates Vira Framework standards:
|
|
12
|
-
*
|
|
13
|
-
* ✅ Uses @vira-ui/ui components (Card, Button, Flex, Box, Input, etc.)
|
|
14
|
-
* ✅ Uses @vira-ui/core services (createService/useService)
|
|
15
|
-
* ✅ Uses VRP for state (useViraState hook)
|
|
16
|
-
* ✅ Declarative style (no inline styles, no manual state management)
|
|
17
|
-
* ✅ Server-authoritative state (client is terminal)
|
|
18
|
-
* ✅ Auto-binding ready (action/model props)
|
|
19
|
-
*
|
|
20
|
-
* This is THE standard for Vira apps.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
export function App() {
|
|
24
|
-
const boardId = 'demo-board';
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<ViraProvider hideDataDesign={false} theme="default">
|
|
28
|
-
<Box design={{ height: '100vh', background: '#fafafa' }}>
|
|
29
|
-
<KanbanBoard boardId={boardId} />
|
|
30
|
-
</Box>
|
|
31
|
-
</ViraProvider>
|
|
32
|
-
);
|
|
33
|
-
}
|
|
5
|
+
exports.kanbanAppTsx = `import { ViraProvider } from '@vira-ui/ui';
|
|
6
|
+
import { Box } from '@vira-ui/ui';
|
|
7
|
+
import { KanbanBoard } from './components/KanbanBoard';
|
|
8
|
+
import './index.css';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Kanban Reference App - Demonstrates Vira Framework standards:
|
|
12
|
+
*
|
|
13
|
+
* ✅ Uses @vira-ui/ui components (Card, Button, Flex, Box, Input, etc.)
|
|
14
|
+
* ✅ Uses @vira-ui/core services (createService/useService)
|
|
15
|
+
* ✅ Uses VRP for state (useViraState hook)
|
|
16
|
+
* ✅ Declarative style (no inline styles, no manual state management)
|
|
17
|
+
* ✅ Server-authoritative state (client is terminal)
|
|
18
|
+
* ✅ Auto-binding ready (action/model props)
|
|
19
|
+
*
|
|
20
|
+
* This is THE standard for Vira apps.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
export function App() {
|
|
24
|
+
const boardId = 'demo-board';
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<ViraProvider hideDataDesign={false} theme="default">
|
|
28
|
+
<Box design={{ height: '100vh', background: '#fafafa' }}>
|
|
29
|
+
<KanbanBoard boardId={boardId} />
|
|
30
|
+
</Box>
|
|
31
|
+
</ViraProvider>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
34
|
`;
|
|
@@ -2,62 +2,62 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.kanbanBoard = void 0;
|
|
4
4
|
// src/components/KanbanBoard.tsx
|
|
5
|
-
exports.kanbanBoard = `import { Container, Flex, Input, Text, Box } from '@vira-ui/ui';
|
|
6
|
-
import { useKanbanBoard } from '../services/kanban';
|
|
7
|
-
import { KanbanColumn } from './KanbanColumn';
|
|
8
|
-
|
|
9
|
-
interface KanbanBoardProps {
|
|
10
|
-
boardId: string;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export function KanbanBoard({ boardId }: KanbanBoardProps) {
|
|
14
|
-
const board = useKanbanBoard(boardId);
|
|
15
|
-
|
|
16
|
-
if (!board.board) {
|
|
17
|
-
return (
|
|
18
|
-
<Box design={{ padding: 10, textAlign: 'center', color: '#999' }}>
|
|
19
|
-
<Text>Loading board...</Text>
|
|
20
|
-
</Box>
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<Container design={{ padding: 6, height: '100vh', display: 'flex', flexDirection: 'column' }}>
|
|
26
|
-
<Box design={{ marginBottom: 6 }}>
|
|
27
|
-
<Input
|
|
28
|
-
model={\`kanban.\${boardId}.title\`}
|
|
29
|
-
value={board.board.title}
|
|
30
|
-
onChange={(e) => board.updateBoardTitle(e.target.value)}
|
|
31
|
-
design={{
|
|
32
|
-
fontSize: '24px',
|
|
33
|
-
fontWeight: 'bold',
|
|
34
|
-
border: 'none',
|
|
35
|
-
borderBottom: '2px solid transparent',
|
|
36
|
-
padding: 1,
|
|
37
|
-
}}
|
|
38
|
-
onFocus={(e) => {
|
|
39
|
-
e.target.style.borderBottomColor = '#007bff';
|
|
40
|
-
}}
|
|
41
|
-
onBlur={(e) => {
|
|
42
|
-
e.target.style.borderBottomColor = 'transparent';
|
|
43
|
-
}}
|
|
44
|
-
/>
|
|
45
|
-
</Box>
|
|
46
|
-
<Flex
|
|
47
|
-
gap={4}
|
|
48
|
-
design={{
|
|
49
|
-
overflowX: 'auto',
|
|
50
|
-
flex: 1,
|
|
51
|
-
paddingBottom: 4,
|
|
52
|
-
}}
|
|
53
|
-
>
|
|
54
|
-
{board.board.columns
|
|
55
|
-
.sort((a, b) => a.order - b.order)
|
|
56
|
-
.map(column => (
|
|
57
|
-
<KanbanColumn key={column.id} column={column} boardId={boardId} />
|
|
58
|
-
))}
|
|
59
|
-
</Flex>
|
|
60
|
-
</Container>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
5
|
+
exports.kanbanBoard = `import { Container, Flex, Input, Text, Box } from '@vira-ui/ui';
|
|
6
|
+
import { useKanbanBoard } from '../services/kanban';
|
|
7
|
+
import { KanbanColumn } from './KanbanColumn';
|
|
8
|
+
|
|
9
|
+
interface KanbanBoardProps {
|
|
10
|
+
boardId: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export function KanbanBoard({ boardId }: KanbanBoardProps) {
|
|
14
|
+
const board = useKanbanBoard(boardId);
|
|
15
|
+
|
|
16
|
+
if (!board.board) {
|
|
17
|
+
return (
|
|
18
|
+
<Box design={{ padding: 10, textAlign: 'center', color: '#999' }}>
|
|
19
|
+
<Text>Loading board...</Text>
|
|
20
|
+
</Box>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<Container design={{ padding: 6, height: '100vh', display: 'flex', flexDirection: 'column' }}>
|
|
26
|
+
<Box design={{ marginBottom: 6 }}>
|
|
27
|
+
<Input
|
|
28
|
+
model={\`kanban.\${boardId}.title\`}
|
|
29
|
+
value={board.board.title}
|
|
30
|
+
onChange={(e) => board.updateBoardTitle(e.target.value)}
|
|
31
|
+
design={{
|
|
32
|
+
fontSize: '24px',
|
|
33
|
+
fontWeight: 'bold',
|
|
34
|
+
border: 'none',
|
|
35
|
+
borderBottom: '2px solid transparent',
|
|
36
|
+
padding: 1,
|
|
37
|
+
}}
|
|
38
|
+
onFocus={(e) => {
|
|
39
|
+
e.target.style.borderBottomColor = '#007bff';
|
|
40
|
+
}}
|
|
41
|
+
onBlur={(e) => {
|
|
42
|
+
e.target.style.borderBottomColor = 'transparent';
|
|
43
|
+
}}
|
|
44
|
+
/>
|
|
45
|
+
</Box>
|
|
46
|
+
<Flex
|
|
47
|
+
gap={4}
|
|
48
|
+
design={{
|
|
49
|
+
overflowX: 'auto',
|
|
50
|
+
flex: 1,
|
|
51
|
+
paddingBottom: 4,
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
{board.board.columns
|
|
55
|
+
.sort((a, b) => a.order - b.order)
|
|
56
|
+
.map(column => (
|
|
57
|
+
<KanbanColumn key={column.id} column={column} boardId={boardId} />
|
|
58
|
+
))}
|
|
59
|
+
</Flex>
|
|
60
|
+
</Container>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
63
|
`;
|
package/dist/react/kanbanCard.js
CHANGED
|
@@ -2,64 +2,64 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.kanbanCard = void 0;
|
|
4
4
|
// src/components/KanbanCard.tsx
|
|
5
|
-
exports.kanbanCard = `import { Card, Flex, Box, Text, Tag, Button } from '@vira-ui/ui';
|
|
6
|
-
import { useKanbanBoard } from '../services/kanban';
|
|
7
|
-
import { KanbanCard as CardType } from '../models/kanban';
|
|
8
|
-
|
|
9
|
-
interface KanbanCardProps {
|
|
10
|
-
card: CardType;
|
|
11
|
-
boardId: string;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export function KanbanCard({ card, boardId }: KanbanCardProps) {
|
|
15
|
-
const board = useKanbanBoard(boardId);
|
|
16
|
-
|
|
17
|
-
return (
|
|
18
|
-
<Card
|
|
19
|
-
design={{
|
|
20
|
-
marginBottom: 2,
|
|
21
|
-
cursor: 'pointer',
|
|
22
|
-
padding: 3,
|
|
23
|
-
}}
|
|
24
|
-
onClick={() => {
|
|
25
|
-
// Open card details (future: modal)
|
|
26
|
-
}}
|
|
27
|
-
>
|
|
28
|
-
<Text design={{ fontWeight: 600, fontSize: '14px', marginBottom: 1 }}>
|
|
29
|
-
{card.title}
|
|
30
|
-
</Text>
|
|
31
|
-
{card.description && (
|
|
32
|
-
<Text design={{ fontSize: '12px', color: '#666', marginBottom: 2 }}>
|
|
33
|
-
{card.description}
|
|
34
|
-
</Text>
|
|
35
|
-
)}
|
|
36
|
-
<Flex justify="space-between" align="center">
|
|
37
|
-
<Flex gap={1}>
|
|
38
|
-
{card.assignee && (
|
|
39
|
-
<Text design={{ fontSize: '11px', color: '#888' }}>@{card.assignee}</Text>
|
|
40
|
-
)}
|
|
41
|
-
{card.tags && card.tags.length > 0 && (
|
|
42
|
-
<Flex gap={1}>
|
|
43
|
-
{card.tags.map(tag => (
|
|
44
|
-
<Tag key={tag} design={{ fontSize: '10px' }}>
|
|
45
|
-
{tag}
|
|
46
|
-
</Tag>
|
|
47
|
-
))}
|
|
48
|
-
</Flex>
|
|
49
|
-
)}
|
|
50
|
-
</Flex>
|
|
51
|
-
<Button
|
|
52
|
-
preset="ghost"
|
|
53
|
-
design={{ padding: 1, minWidth: 'auto' }}
|
|
54
|
-
onClick={(e) => {
|
|
55
|
-
e.stopPropagation();
|
|
56
|
-
board.deleteCard(card.id);
|
|
57
|
-
}}
|
|
58
|
-
>
|
|
59
|
-
×
|
|
60
|
-
</Button>
|
|
61
|
-
</Flex>
|
|
62
|
-
</Card>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
5
|
+
exports.kanbanCard = `import { Card, Flex, Box, Text, Tag, Button } from '@vira-ui/ui';
|
|
6
|
+
import { useKanbanBoard } from '../services/kanban';
|
|
7
|
+
import { KanbanCard as CardType } from '../models/kanban';
|
|
8
|
+
|
|
9
|
+
interface KanbanCardProps {
|
|
10
|
+
card: CardType;
|
|
11
|
+
boardId: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export function KanbanCard({ card, boardId }: KanbanCardProps) {
|
|
15
|
+
const board = useKanbanBoard(boardId);
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<Card
|
|
19
|
+
design={{
|
|
20
|
+
marginBottom: 2,
|
|
21
|
+
cursor: 'pointer',
|
|
22
|
+
padding: 3,
|
|
23
|
+
}}
|
|
24
|
+
onClick={() => {
|
|
25
|
+
// Open card details (future: modal)
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
<Text design={{ fontWeight: 600, fontSize: '14px', marginBottom: 1 }}>
|
|
29
|
+
{card.title}
|
|
30
|
+
</Text>
|
|
31
|
+
{card.description && (
|
|
32
|
+
<Text design={{ fontSize: '12px', color: '#666', marginBottom: 2 }}>
|
|
33
|
+
{card.description}
|
|
34
|
+
</Text>
|
|
35
|
+
)}
|
|
36
|
+
<Flex justify="space-between" align="center">
|
|
37
|
+
<Flex gap={1}>
|
|
38
|
+
{card.assignee && (
|
|
39
|
+
<Text design={{ fontSize: '11px', color: '#888' }}>@{card.assignee}</Text>
|
|
40
|
+
)}
|
|
41
|
+
{card.tags && card.tags.length > 0 && (
|
|
42
|
+
<Flex gap={1}>
|
|
43
|
+
{card.tags.map(tag => (
|
|
44
|
+
<Tag key={tag} design={{ fontSize: '10px' }}>
|
|
45
|
+
{tag}
|
|
46
|
+
</Tag>
|
|
47
|
+
))}
|
|
48
|
+
</Flex>
|
|
49
|
+
)}
|
|
50
|
+
</Flex>
|
|
51
|
+
<Button
|
|
52
|
+
preset="ghost"
|
|
53
|
+
design={{ padding: 1, minWidth: 'auto' }}
|
|
54
|
+
onClick={(e) => {
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
board.deleteCard(card.id);
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
×
|
|
60
|
+
</Button>
|
|
61
|
+
</Flex>
|
|
62
|
+
</Card>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
65
|
`;
|
|
@@ -2,66 +2,66 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.kanbanColumn = void 0;
|
|
4
4
|
// src/components/KanbanColumn.tsx
|
|
5
|
-
exports.kanbanColumn = `import { Box, Flex, Text, Button, ScrollArea } from '@vira-ui/ui';
|
|
6
|
-
import { useKanbanBoard } from '../services/kanban';
|
|
7
|
-
import { KanbanColumn as ColumnType } from '../models/kanban';
|
|
8
|
-
import { KanbanCard } from './KanbanCard';
|
|
9
|
-
|
|
10
|
-
interface KanbanColumnProps {
|
|
11
|
-
column: ColumnType;
|
|
12
|
-
boardId: string;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export function KanbanColumn({ column, boardId }: KanbanColumnProps) {
|
|
16
|
-
const board = useKanbanBoard(boardId);
|
|
17
|
-
const cards = board.getColumnCards(column.id);
|
|
18
|
-
|
|
19
|
-
const handleAddCard = () => {
|
|
20
|
-
const title = prompt('Card title:');
|
|
21
|
-
if (title) {
|
|
22
|
-
board.createCard(column.id, title);
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<Box
|
|
28
|
-
design={{
|
|
29
|
-
background: '#f5f5f5',
|
|
30
|
-
borderRadius: 2,
|
|
31
|
-
padding: 4,
|
|
32
|
-
minWidth: '280px',
|
|
33
|
-
maxHeight: 'calc(100vh - 100px)',
|
|
34
|
-
display: 'flex',
|
|
35
|
-
flexDirection: 'column',
|
|
36
|
-
}}
|
|
37
|
-
>
|
|
38
|
-
<Text design={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>
|
|
39
|
-
{column.title}
|
|
40
|
-
</Text>
|
|
41
|
-
<ScrollArea
|
|
42
|
-
design={{
|
|
43
|
-
flex: 1,
|
|
44
|
-
marginBottom: 3,
|
|
45
|
-
}}
|
|
46
|
-
>
|
|
47
|
-
<Flex direction="column" gap={2}>
|
|
48
|
-
{cards.map(card => (
|
|
49
|
-
<KanbanCard key={card.id} card={card} boardId={boardId} />
|
|
50
|
-
))}
|
|
51
|
-
</Flex>
|
|
52
|
-
</ScrollArea>
|
|
53
|
-
<Button
|
|
54
|
-
preset="ghost"
|
|
55
|
-
design={{
|
|
56
|
-
width: '100%',
|
|
57
|
-
border: '1px dashed #ccc',
|
|
58
|
-
padding: 2,
|
|
59
|
-
}}
|
|
60
|
-
onClick={handleAddCard}
|
|
61
|
-
>
|
|
62
|
-
+ Add card
|
|
63
|
-
</Button>
|
|
64
|
-
</Box>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
5
|
+
exports.kanbanColumn = `import { Box, Flex, Text, Button, ScrollArea } from '@vira-ui/ui';
|
|
6
|
+
import { useKanbanBoard } from '../services/kanban';
|
|
7
|
+
import { KanbanColumn as ColumnType } from '../models/kanban';
|
|
8
|
+
import { KanbanCard } from './KanbanCard';
|
|
9
|
+
|
|
10
|
+
interface KanbanColumnProps {
|
|
11
|
+
column: ColumnType;
|
|
12
|
+
boardId: string;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export function KanbanColumn({ column, boardId }: KanbanColumnProps) {
|
|
16
|
+
const board = useKanbanBoard(boardId);
|
|
17
|
+
const cards = board.getColumnCards(column.id);
|
|
18
|
+
|
|
19
|
+
const handleAddCard = () => {
|
|
20
|
+
const title = prompt('Card title:');
|
|
21
|
+
if (title) {
|
|
22
|
+
board.createCard(column.id, title);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<Box
|
|
28
|
+
design={{
|
|
29
|
+
background: '#f5f5f5',
|
|
30
|
+
borderRadius: 2,
|
|
31
|
+
padding: 4,
|
|
32
|
+
minWidth: '280px',
|
|
33
|
+
maxHeight: 'calc(100vh - 100px)',
|
|
34
|
+
display: 'flex',
|
|
35
|
+
flexDirection: 'column',
|
|
36
|
+
}}
|
|
37
|
+
>
|
|
38
|
+
<Text design={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>
|
|
39
|
+
{column.title}
|
|
40
|
+
</Text>
|
|
41
|
+
<ScrollArea
|
|
42
|
+
design={{
|
|
43
|
+
flex: 1,
|
|
44
|
+
marginBottom: 3,
|
|
45
|
+
}}
|
|
46
|
+
>
|
|
47
|
+
<Flex direction="column" gap={2}>
|
|
48
|
+
{cards.map(card => (
|
|
49
|
+
<KanbanCard key={card.id} card={card} boardId={boardId} />
|
|
50
|
+
))}
|
|
51
|
+
</Flex>
|
|
52
|
+
</ScrollArea>
|
|
53
|
+
<Button
|
|
54
|
+
preset="ghost"
|
|
55
|
+
design={{
|
|
56
|
+
width: '100%',
|
|
57
|
+
border: '1px dashed #ccc',
|
|
58
|
+
padding: 2,
|
|
59
|
+
}}
|
|
60
|
+
onClick={handleAddCard}
|
|
61
|
+
>
|
|
62
|
+
+ Add card
|
|
63
|
+
</Button>
|
|
64
|
+
</Box>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
67
|
`;
|
|
@@ -2,36 +2,36 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.kanbanModels = void 0;
|
|
4
4
|
// src/models/kanban.ts
|
|
5
|
-
exports.kanbanModels = `// Kanban data models (shared with backend)
|
|
6
|
-
|
|
7
|
-
export interface KanbanCard {
|
|
8
|
-
id: string;
|
|
9
|
-
title: string;
|
|
10
|
-
description?: string;
|
|
11
|
-
columnId: string;
|
|
12
|
-
order: number;
|
|
13
|
-
assignee?: string;
|
|
14
|
-
tags?: string[];
|
|
15
|
-
createdAt: number;
|
|
16
|
-
updatedAt: number;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export interface KanbanColumn {
|
|
20
|
-
id: string;
|
|
21
|
-
title: string;
|
|
22
|
-
order: number;
|
|
23
|
-
cardIds: string[]; // ordered list
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export interface KanbanBoard {
|
|
27
|
-
id: string;
|
|
28
|
-
title: string;
|
|
29
|
-
columns: KanbanColumn[];
|
|
30
|
-
cards: Record<string, KanbanCard>; // cardId -> Card
|
|
31
|
-
createdAt: number;
|
|
32
|
-
updatedAt: number;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// VRP Channel types
|
|
36
|
-
export type KanbanChannel = \`kanban:\${string}\`;
|
|
5
|
+
exports.kanbanModels = `// Kanban data models (shared with backend)
|
|
6
|
+
|
|
7
|
+
export interface KanbanCard {
|
|
8
|
+
id: string;
|
|
9
|
+
title: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
columnId: string;
|
|
12
|
+
order: number;
|
|
13
|
+
assignee?: string;
|
|
14
|
+
tags?: string[];
|
|
15
|
+
createdAt: number;
|
|
16
|
+
updatedAt: number;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export interface KanbanColumn {
|
|
20
|
+
id: string;
|
|
21
|
+
title: string;
|
|
22
|
+
order: number;
|
|
23
|
+
cardIds: string[]; // ordered list
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export interface KanbanBoard {
|
|
27
|
+
id: string;
|
|
28
|
+
title: string;
|
|
29
|
+
columns: KanbanColumn[];
|
|
30
|
+
cards: Record<string, KanbanCard>; // cardId -> Card
|
|
31
|
+
createdAt: number;
|
|
32
|
+
updatedAt: number;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// VRP Channel types
|
|
36
|
+
export type KanbanChannel = \`kanban:\${string}\`;
|
|
37
37
|
`;
|
package/dist/react/mainTsx.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.mainTsx = void 0;
|
|
4
|
-
exports.mainTsx = `import React from 'react';
|
|
5
|
-
import ReactDOM from 'react-dom/client';
|
|
6
|
-
import { ViraProvider } from '@vira-ui/ui';
|
|
7
|
-
import { App } from './App';
|
|
8
|
-
|
|
9
|
-
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
10
|
-
<React.StrictMode>
|
|
11
|
-
<ViraProvider hideDataDesign={false} theme="default">
|
|
12
|
-
<App />
|
|
13
|
-
</ViraProvider>
|
|
14
|
-
</React.StrictMode>
|
|
15
|
-
);
|
|
4
|
+
exports.mainTsx = `import React from 'react';
|
|
5
|
+
import ReactDOM from 'react-dom/client';
|
|
6
|
+
import { ViraProvider } from '@vira-ui/ui';
|
|
7
|
+
import { App } from './App';
|
|
8
|
+
|
|
9
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
10
|
+
<React.StrictMode>
|
|
11
|
+
<ViraProvider hideDataDesign={false} theme="default">
|
|
12
|
+
<App />
|
|
13
|
+
</ViraProvider>
|
|
14
|
+
</React.StrictMode>
|
|
15
|
+
);
|
|
16
16
|
`;
|
package/dist/react/viteConfig.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.viteConfig = void 0;
|
|
4
|
-
exports.viteConfig = `import { defineConfig, loadEnv } from 'vite';
|
|
5
|
-
import react from '@vitejs/plugin-react';
|
|
6
|
-
|
|
7
|
-
export default defineConfig(({ mode }) => {
|
|
8
|
-
const env = loadEnv(mode, process.cwd(), '');
|
|
9
|
-
const API_URL = env.VITE_API_URL || 'http://localhost:8080';
|
|
10
|
-
|
|
11
|
-
return {
|
|
12
|
-
plugins: [react()],
|
|
13
|
-
server: {
|
|
14
|
-
proxy: {
|
|
15
|
-
'/api': {
|
|
16
|
-
target: API_URL,
|
|
17
|
-
changeOrigin: true,
|
|
18
|
-
},
|
|
19
|
-
'/ws': {
|
|
20
|
-
target: API_URL,
|
|
21
|
-
ws: true,
|
|
22
|
-
changeOrigin: true,
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
optimizeDeps: {
|
|
27
|
-
exclude: ['lucide-react'],
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
|
-
});
|
|
4
|
+
exports.viteConfig = `import { defineConfig, loadEnv } from 'vite';
|
|
5
|
+
import react from '@vitejs/plugin-react';
|
|
6
|
+
|
|
7
|
+
export default defineConfig(({ mode }) => {
|
|
8
|
+
const env = loadEnv(mode, process.cwd(), '');
|
|
9
|
+
const API_URL = env.VITE_API_URL || 'http://localhost:8080';
|
|
10
|
+
|
|
11
|
+
return {
|
|
12
|
+
plugins: [react()],
|
|
13
|
+
server: {
|
|
14
|
+
proxy: {
|
|
15
|
+
'/api': {
|
|
16
|
+
target: API_URL,
|
|
17
|
+
changeOrigin: true,
|
|
18
|
+
},
|
|
19
|
+
'/ws': {
|
|
20
|
+
target: API_URL,
|
|
21
|
+
ws: true,
|
|
22
|
+
changeOrigin: true,
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
optimizeDeps: {
|
|
27
|
+
exclude: ['lucide-react'],
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
31
|
`;
|