alnilam-cli
Version:
Git-native AI career coach that converts multi-year ambitions into weekly execution
85 lines (84 loc) • 4.95 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useResponsive = exports.Spacer = exports.Card = exports.Section = exports.Header = exports.Grid = exports.Row = exports.Column = exports.Layout = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const ink_1 = require("ink");
const Theme_js_1 = require("./Theme.js");
// Main responsive layout container
const Layout = ({ children, title, subtitle, width }) => {
return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", width: width, children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { title: title, subtitle: subtitle, separator: true }), (0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", flexGrow: 1, children: children })] }));
};
exports.Layout = Layout;
// Column layout for side-by-side components
const Column = ({ children, width, minWidth }) => {
return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", width: width, minWidth: minWidth, children: children }));
};
exports.Column = Column;
// Row layout for horizontal components
const Row = ({ children, gap = 1 }) => {
return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "row", gap: gap, children: children }));
};
exports.Row = Row;
// Responsive grid system for dashboard components
const Grid = ({ children, columns = 2, gap = 2 }) => {
const childArray = react_1.default.Children.toArray(children);
const rows = [];
// Split children into rows based on column count
for (let i = 0; i < childArray.length; i += columns) {
rows.push(childArray.slice(i, i + columns));
}
return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", gap: gap, children: rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "row", gap: gap, children: row.map((child, colIndex) => ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexGrow: 1, children: child }, colIndex))) }, rowIndex))) }));
};
exports.Grid = Grid;
// Header component with title and optional subtitle
const Header = ({ title, subtitle, separator = false }) => {
return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", marginBottom: 1, children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { bold: true, color: "blue", children: title }), subtitle && ((0, jsx_runtime_1.jsx)(ink_1.Text, { color: "gray", dimColor: true, children: subtitle })), separator && ((0, jsx_runtime_1.jsx)(ink_1.Box, { marginTop: 1, marginBottom: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { color: "gray", children: '─'.repeat(50) }) }))] }));
};
exports.Header = Header;
// Section container with optional title
const Section = ({ children, title, border = false, padding = 1 }) => {
return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", borderStyle: border ? 'single' : undefined, paddingX: padding, paddingY: padding, marginY: 1, children: [title && ((0, jsx_runtime_1.jsx)(ink_1.Box, { marginBottom: 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { bold: true, color: "blue", children: title }) })), children] }));
};
exports.Section = Section;
// Card component for grouping related information
const Card = ({ children, title, status, compact = false }) => {
const borderColor = status ?
(status === 'success' ? 'green' :
status === 'warning' ? 'yellow' :
status === 'danger' ? 'red' : 'blue') : 'gray';
return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", borderStyle: "single", borderColor: borderColor, paddingX: compact ? 1 : 2, paddingY: compact ? 0 : 1, marginY: compact ? 0 : 1, children: [title && ((0, jsx_runtime_1.jsx)(ink_1.Box, { marginBottom: compact ? 0 : 1, children: (0, jsx_runtime_1.jsx)(ink_1.Text, { bold: true, color: borderColor, children: title }) })), children] }));
};
exports.Card = Card;
// Spacer for adding consistent spacing
const Spacer = ({ size = 1 }) => {
return (0, jsx_runtime_1.jsx)(ink_1.Box, { height: size });
};
exports.Spacer = Spacer;
// Responsive hook to determine layout based on terminal width
const useResponsive = (terminalWidth = 100) => {
if (terminalWidth < Theme_js_1.breakpoints.small) {
return { size: 'small', columns: 1, showDetails: false };
}
else if (terminalWidth < Theme_js_1.breakpoints.medium) {
return { size: 'medium', columns: 2, showDetails: true };
}
else {
return { size: 'large', columns: 3, showDetails: true };
}
};
exports.useResponsive = useResponsive;
exports.default = {
Layout: exports.Layout,
Column: exports.Column,
Row: exports.Row,
Grid: exports.Grid,
Header: exports.Header,
Section: exports.Section,
Card: exports.Card,
Spacer: exports.Spacer,
useResponsive: exports.useResponsive
};