projecthor
Version:
Save, manage, and run project setup commands automatically from the CLI.
78 lines (77 loc) • 4.62 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { Box, Text, useApp, useFocusManager, useInput } from 'ink';
import RequiredInput from './RequiredInput.js';
import { Task } from 'ink-task-list';
import TextInput from 'ink-text-input';
import { getProjects, saveProject } from './db.js';
import chalk from 'chalk';
import fs from 'fs';
export default function SaveInterface() {
const [project, setProject] = useState({
name: '',
folder: '',
setupCommands: [],
});
const [currentInput, setCurrentInput] = useState('name');
const [currentCommand, setCurrentCommand] = useState('');
const { focus } = useFocusManager();
const { exit } = useApp();
useEffect(() => {
focus(currentInput);
}, [currentInput]);
useInput(async (input, key) => {
if (input === 's' && key.ctrl) {
if (getProjects().some(p => p.name === project.name)) {
exit();
console.log(chalk.red.bold(`Project '${project.name}' already exist. Can't create another project instance.`));
}
else {
saveProject(project);
exit();
}
}
});
return (React.createElement(Box, { flexDirection: "column", paddingTop: 1 },
React.createElement(Box, { borderTop: false, borderLeft: false, borderRight: false, borderStyle: "single", justifyContent: "center" },
React.createElement(Text, { bold: true, backgroundColor: "blue" }, "SAVE PROJECT")),
React.createElement(Box, { flexDirection: "column" },
React.createElement(Box, { gap: 1, paddingX: 1, borderStyle: "single", borderTop: false, borderRight: false, borderLeft: false }, project.name ? (React.createElement(React.Fragment, null,
React.createElement(Text, { bold: true }, "Name: "),
React.createElement(Text, null, project.name),
React.createElement(Task, { state: "success", label: "" }))) : (React.createElement(RequiredInput, { label: "Name", placeholder: "project name", errorMessage: "Project name cannot be empty.", onSubmit: name => {
setProject(project => ({ ...project, name }));
setCurrentInput('folder');
} }))),
(currentInput === 'folder' || currentInput === 'commands') && (React.createElement(Box, { gap: 1, paddingX: 1, borderStyle: "single", borderTop: false, borderRight: false, borderLeft: false }, project.folder ? (React.createElement(React.Fragment, null,
React.createElement(Text, { bold: true }, "Folder: "),
React.createElement(Text, null, project.folder),
React.createElement(Task, { state: "success", label: "" }))) : (React.createElement(RequiredInput, { label: "Folder", placeholder: "project folder", errorMessage: "Project folder path cannot be empty.", onSubmit: (folder, setError) => {
if (!fs.existsSync(folder)) {
setError("This folder doesn't exist");
return;
}
setProject(project => ({ ...project, folder }));
setCurrentInput('commands');
} })))),
currentInput === 'commands' && (React.createElement(Box, { flexDirection: "column", paddingX: 1 },
React.createElement(Text, null, "Commands: "),
React.createElement(Box, { marginTop: 1, flexDirection: 'column' },
project.setupCommands.map((command, i) => (React.createElement(Text, { key: `${command}-${i}` },
"Command ",
i + 1,
" ",
React.createElement(Text, { color: "blue" }, command)))),
React.createElement(Box, null,
React.createElement(Text, null,
"Command ",
project.setupCommands.length + 1,
": "),
React.createElement(TextInput, { value: currentCommand, onChange: command => setCurrentCommand(command), onSubmit: command => {
setProject(project => ({
...project,
setupCommands: [...project.setupCommands, command],
}));
setCurrentCommand('');
} }))),
React.createElement(Text, { color: "gray" }, "('Ctrl + s' to save project)"))))));
}