epiq 0.0.1 → 0.0.3

package/dist/app.js

@@ -1,12 +1,19 @@
 import { Box } from 'ink';
 import React from 'react';
 import { BoardUI } from './board/components/Board.js';
+import { ContextBar } from './board/components/ContextBar.js';
 import { HelpUI } from './board/components/Help.js';
+import { Mode } from './navigation/model/action-map.model.js';
+import { navigationState } from './navigation/state/state.js';
 export default function App({ board }) {
     const width = process.stdout.columns || 120;
-    const swimlaneWidth = Math.floor(width / board.children.length);
-    const renderedWidth = swimlaneWidth * board.children.length;
+    const swimlaneMaxWidth = Math.floor(process.stdout.columns / 3);
+    const swimlaneDynamicWidth = Math.floor(width / board.children.length);
+    const renderedWidth = swimlaneDynamicWidth * board.children.length;
+    const swimlaneWidth = Math.min(renderedWidth, swimlaneMaxWidth);
     return (React.createElement(Box, { flexDirection: "column" },
-        React.createElement(BoardUI, { board: board, swimlaneWidth: swimlaneWidth }),
-        React.createElement(HelpUI, { width: renderedWidth })));
+        !(navigationState.mode === Mode.HELP) && (React.createElement(React.Fragment, null,
+            React.createElement(BoardUI, { board: board, swimlaneWidth: swimlaneWidth }),
+            React.createElement(ContextBar, { width: width }))),
+        navigationState.mode === Mode.HELP && React.createElement(HelpUI, { width: renderedWidth })));
 }

package/dist/board/components/Board.js

@@ -1,19 +1,11 @@
-import { Box, Text, useApp, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import React from 'react';
+import { navigationState } from '../../navigation/state/state.js';
 import { BoardContentUI } from './Swimlanes.js';
 export const BoardUI = ({ board, swimlaneWidth, }) => {
-    const { exit } = useApp();
-    useInput((input, key) => {
-        if (key.escape || input === 'q') {
-            exit();
-        }
-    });
     return (React.createElement(Box, { flexDirection: "column" },
-        React.createElement(Box, { padding: 1, justifyContent: "center" },
-            React.createElement(Text, null,
-                "--- ",
-                board.name,
-                " ---")),
+        React.createElement(Box, { paddingLeft: 1 },
+            React.createElement(Text, null, navigationState.breadCrumb.map(b => '  >  ' + b.name))),
         React.createElement(Box, { flexDirection: "row" },
             React.createElement(BoardContentUI, { items: board.children, width: swimlaneWidth }))));
 };

package/dist/board/components/CommandLine.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CommandLine: React.FC;

package/dist/board/components/CommandLine.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { getCommandLineInput } from '../../navigation/state/command-line.state.js';
+const roleColors = {
+    command: 'cyan',
+    argument: 'white',
+};
+export const CommandLine = () => {
+    const input = getCommandLineInput();
+    // Split only on the FIRST space
+    const [command, ...rest] = input.split(' ');
+    const argument = rest.join(' ');
+    return (React.createElement(Box, null,
+        React.createElement(Text, { color: "gray" }, ":"),
+        command && React.createElement(Text, { color: roleColors.command }, command),
+        argument && (React.createElement(Text, null,
+            ' ',
+            React.createElement(Text, { color: roleColors.argument }, "'" + argument + "'")))));
+};

package/dist/{components/Help.d.ts → board/components/ContextBar.d.ts}

@@ -1,4 +1,4 @@
 import React from 'react';
-export declare const HelpUI: React.FC<{
+export declare const ContextBar: React.FC<{
     width: number;
 }>;

package/dist/board/components/ContextBar.js

@@ -0,0 +1,8 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+import { Mode } from '../../navigation/model/action-map.model.js';
+import { navigationState } from '../../navigation/state/state.js';
+import { CommandLine } from './CommandLine.js';
+export const ContextBar = ({ width }) => (React.createElement(Box, { flexDirection: "column", paddingLeft: 1, paddingRight: 1, borderColor: "gray", borderStyle: "round", width: width },
+    React.createElement(Box, null, navigationState.mode === Mode.COMMAND_LINE ? (React.createElement(Box, null,
+        React.createElement(CommandLine, null))) : (React.createElement(Text, null, navigationState.availableHints.join('  '))))));

package/dist/board/components/Help.js

@@ -1,21 +1,28 @@
 import { Box, Text } from 'ink';
 import { navigationState } from '../../navigation/state/state.js';
 import React from 'react';
-export const HelpUI = ({ width }) => (React.createElement(Box, { flexDirection: "column", paddingLeft: 1, paddingRight: 1, borderColor: "gray", borderStyle: "round", width: width },
-    React.createElement(Box, null,
-        React.createElement(Text, { color: "gray" }, "H: help")),
-    navigationState.viewHelp
-        ? navigationState.availableActions
+import { Mode } from '../../navigation/model/action-map.model.js';
+export const HelpUI = ({ width }) => (React.createElement(Box, { flexDirection: "column", marginTop: 3, borderColor: "gray", borderStyle: "round", width: width, minHeight: 19 },
+    React.createElement(Box, { flexDirection: "column", width: width }, navigationState.mode === Mode.HELP
+        ? [
+            {
+                action: '',
+                description: '[COMMAND] DESCRIPTION',
+                mode: navigationState.mode,
+            },
+            ...navigationState.availableActions,
+        ]
             .filter(action => Boolean(action.description))
-            .filter(x => x.mode === navigationState.mode)
+            // .filter(x => x.mode === navigationState.mode)
             .map((action, index) => {
             const [leftRaw, rightRaw] = action.description.split(']');
             const left = leftRaw?.replace('[', '');
             const right = rightRaw?.trim(); // no extra space
             return (React.createElement(Box, { paddingLeft: 1, key: index, flexDirection: "row" },
-                React.createElement(Box, { width: 20 },
-                    React.createElement(Text, { color: "cyan" }, left)),
-                React.createElement(Box, { flexGrow: 1 },
-                    React.createElement(Text, { color: "white" }, right))));
+                React.createElement(Box, { key: index, flexDirection: "row", paddingBottom: index ? 0 : 1 },
+                    React.createElement(Box, { flexGrow: 1, width: 30 },
+                        React.createElement(Text, { color: index ? 'white' : 'gray' }, right)),
+                    React.createElement(Box, { width: 20 },
+                        React.createElement(Text, { color: index ? 'yellow' : 'gray' }, left)))));
         })
-        : null));
+        : null)));

package/dist/board/components/Swimlane.js

@@ -2,9 +2,12 @@ import { Box, Text } from 'ink';
 import React from 'react';
 import { ScrollBoxUI } from './ScrollBox.js';
 import { TicketListItemUI } from './TicketListItem.js';
+import { navigationState } from '../../navigation/state/state.js';
 export const SwimlaneUI = ({ item, width }) => {
-    return (React.createElement(Box, { flexDirection: "column", width: width, borderStyle: "round", borderColor: item.isSelected ? 'cyan' : 'gray', paddingRight: 1, paddingLeft: 1, paddingBottom: 1, minHeight: 15 },
-        React.createElement(Box, { borderStyle: "round", borderColor: 'gray', justifyContent: "center" },
+    const color = navigationState.currentNode?.id === item.id ? 'cyan' : 'gray';
+    return (React.createElement(Box, { flexDirection: "column", width: width, borderStyle: "round", borderColor: item.isSelected ? 'cyan' : 'gray', paddingRight: 1, paddingLeft: 1, minHeight: 15, height: 20 },
+        React.createElement(Box, { borderStyle: "round", borderColor: color, justifyContent: "center" },
             React.createElement(Text, { bold: true }, item.name)),
-        React.createElement(ScrollBoxUI, { selectedIndex: item.children.findIndex(x => x.isSelected), width: width, size: 10, children: item.children.map((ticket, index) => (React.createElement(TicketListItemUI, { key: index, width: width, ticket: ticket }))) })));
+        React.createElement(Box, { padding: 1 },
+            React.createElement(ScrollBoxUI, { selectedIndex: item.children.findIndex(x => x.isSelected), width: width, size: 10, children: item.children.map((ticket, index) => (React.createElement(TicketListItemUI, { key: index, width: width, ticket: ticket }))) }))));
 };

package/dist/board/components/Swimlanes.js

@@ -16,5 +16,5 @@ export const BoardContentUI = ({ items, width }) => {
     return (React.createElement(Box, { flexDirection: "row" },
         isSwimlaneContext &&
             items.map((lane, index) => (React.createElement(SwimlaneUI, { key: index, width: width, item: lane }))),
-        isTicketContext && navigationState.currentNode && (React.createElement(TicketUI, { width: width * items.length, item: navigationState.currentNode }))));
+        isTicketContext && navigationState.currentNode && (React.createElement(TicketUI, { width: width * items.length, item: navigationState.breadCrumb[navigationState.breadCrumb.length - 1] }))));
 };

package/dist/board/components/TextInput.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TextInput: React.FC<{
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+}>;

package/dist/board/components/TextInput.js

@@ -0,0 +1,9 @@
+import { Text } from 'ink';
+import React from 'react';
+// const onChange = (_value: string) => {
+// 	// No-op for now
+// };
+// const onSubmit = (_value: string) => {
+// 	// No-op for now
+// };
+export const TextInput = ({ value }) => React.createElement(Text, null, value);

package/dist/board/components/TicketListItem.js

@@ -1,12 +1,13 @@
 import { Box, Text } from 'ink';
 import React from 'react';
+import { Mode } from '../../navigation/model/action-map.model.js';
 import { navigationState } from '../../navigation/state/state.js';
 const truncateWithEllipsis = (str, width) => str.length >= width ? str.slice(0, width - 3) + '...' : str;
 export const TicketListItemUI = ({ width, ticket }) => (React.createElement(Box, { borderBottom: true },
-    React.createElement(Text, { color: ticket.isSelected && navigationState.mode === 'move'
-            ? 'white'
+    React.createElement(Text, { color: ticket.isSelected && navigationState.mode === Mode.MOVE
+            ? 'cyan'
             : ticket.isSelected
                 ? 'cyan'
-                : navigationState.mode === 'move'
+                : navigationState.mode === Mode.MOVE
                     ? 'gray'
-                    : 'white' }, truncateWithEllipsis(ticket.id + ' - ' + ticket.name, width - 6))));
+                    : 'white' }, truncateWithEllipsis(ticket.name, width - 6))));

package/dist/board/components/TicketUI.js

@@ -1,9 +1,8 @@
 import { Box, Text } from 'ink';
 import React from 'react';
-export const TicketUI = ({ item, width }) => {
-    return (React.createElement(Box, { flexDirection: "row", padding: 1, paddingLeft: 2, borderStyle: 'round', width: width, minHeight: 16, borderColor: 'gray' },
-        React.createElement(Box, { flexDirection: "row" },
-            React.createElement(Box, { width: 20 },
-                React.createElement(Text, { color: 'cyan' }, 'Description: ')),
-            React.createElement(Text, null, item.name))));
-};
+export const TicketUI = ({ item, width }) => (React.createElement(Box, { flexDirection: "column", padding: 1, paddingLeft: 2, borderStyle: "round", width: width, minHeight: 16, borderColor: "gray" }, item.children.map(child => (React.createElement(Box, { key: child.id, flexDirection: "row", borderStyle: 'round', borderColor: child.isSelected ? 'cyan' : 'gray', paddingLeft: 1 },
+    React.createElement(Box, { width: 30 },
+        React.createElement(Text, { color: "cyan" },
+            child.name,
+            ":")),
+    React.createElement(Text, null, child.description))))));

package/dist/board/hints/hints.d.ts

@@ -0,0 +1,7 @@
+export declare const Hints: {
+    readonly [x: string]: readonly [] | readonly [":h Help", "hjkl: move between swimlanes", "e: enter swimlane", "q: exit"] | readonly ["hjkl: move between tickets", "e: view ticket details", "i: edit", "y: select for yank/move", "q: exit"] | readonly ["q: exit", "I: edit field"] | readonly ["hjkl: move selection", "y: confirm move/yank", "q: exit"];
+    readonly BOARD: readonly [];
+    readonly SWIMLANE: readonly [":h Help", "hjkl: move between swimlanes", "e: enter swimlane", "q: exit"];
+    readonly TICKET_LIST_ITEM: readonly ["hjkl: move between tickets", "e: view ticket details", "i: edit", "y: select for yank/move", "q: exit"];
+    readonly TICKET: readonly ["q: exit", "I: edit field"];
+};

package/dist/board/hints/hints.js

@@ -0,0 +1,29 @@
+import { Mode } from '../../navigation/model/action-map.model.js';
+import { BoardItemTypes } from '../model/board.model.js';
+export const Hints = {
+    [BoardItemTypes.BOARD]: [],
+    [BoardItemTypes.SWIMLANE]: [
+        ':h Help',
+        'hjkl: move between swimlanes',
+        'e: enter swimlane',
+        'q: exit',
+    ],
+    [BoardItemTypes.TICKET_LIST_ITEM]: [
+        'hjkl: move between tickets',
+        'e: view ticket details',
+        'i: edit',
+        'y: select for yank/move',
+        'q: exit',
+    ],
+    [BoardItemTypes.TICKET]: ['q: exit', 'I: edit field'],
+    [BoardItemTypes.SWIMLANE + Mode.MOVE]: [
+        'hjkl: move selection',
+        'y: confirm move/yank',
+        'q: exit',
+    ],
+    [BoardItemTypes.TICKET_LIST_ITEM + Mode.MOVE]: [
+        'hjkl: move selection',
+        'y: confirm move/yank',
+        'q: exit',
+    ],
+};