Organize ink components

Author: Shellishack

npm-packages/cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pulse-editor/cli",
-	"version": "0.0.0",
+	"version": "0.0.1",
 	"license": "MIT",
 	"bin": {
 		"pulse": "./dist/cli.js"

npm-packages/cli/source/app.tsx

@@ -1,9 +1,11 @@
 import React, {useEffect, useState} from 'react';
-import {Text} from 'ink';
 import {Result} from 'meow';
-import {commandsManual} from './manual.js';
-import Login from './components/login.js';
-import {Flags} from './flags.js';
+import Login from './components/commands/login.js';
+import {Flags} from './lib/cli-flags.js';
+import Publish from './components/commands/publish.js';
+import Help from './components/commands/help.js';
+import Chat from './components/commands/chat.js';
+import Logout from './components/commands/logout.js';
 
 export default function App({cli}: {cli: Result<Flags>}) {
 	const [command, setCommand] = useState<string | undefined>(undefined);
@@ -13,35 +15,13 @@ export default function App({cli}: {cli: Result<Flags>}) {
 		setCommand(cmd);
 	}, [cli.input]);
 
-	if (!command) return null;
-	else if (command === 'help') {
-		const subCommand = cli.input[1];
-		if (!subCommand) {
-			return <Text>{cli.help}</Text>;
-		} else {
-			return <Text>{commandsManual[subCommand]}</Text>;
-		}
-	} else if (command === 'chat') {
-		const message = cli.input[1];
-		return (
-			<>
-				<Text>
-					Hello, <Text color="green">{message}</Text>
-				</Text>
-			</>
-		);
-	} else if (command === 'login') {
-		return <Login cli={cli} />;
-	} else if (command === 'logout') {
-		return <Text>Logout from the Pulse Editor Platform</Text>;
-	} else if (command === 'publish') {
-		return (
-			<Text>
-				Publish Pulse Editor Extension in current directory to the Pulse Editor
-				Platform
-			</Text>
-		);
-	}
-
-	return <Text>{cli.help}</Text>;
+	return (
+		<>
+			{command === 'help' && <Help cli={cli} />}
+			{command === 'chat' && <Chat cli={cli} />}
+			{command === 'login' && <Login cli={cli} />}
+			{command === 'logout' && <Logout cli={cli} />}
+			{command === 'publish' && <Publish cli={cli} />}
+		</>
+	);
 }

npm-packages/cli/source/cli.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import {render} from 'ink';
 import meow from 'meow';
 import App from './app.js';
-import {commandsManual} from './manual.js';
-import {flags} from './flags.js';
+import {commandsManual} from './lib/manual.js';
+import { flags } from './lib/cli-flags.js';
 
 const cli = meow(
 	`\

npm-packages/cli/source/components/commands/chat.tsx

@@ -0,0 +1,15 @@
+import {Result} from 'meow';
+import {Flags} from '../../lib/cli-flags.js';
+import React from 'react';
+import {Text} from 'ink';
+
+export default function Chat({cli}: {cli: Result<Flags>}) {
+	const message = cli.input[1];
+	return (
+		<>
+			<Text>
+				Hello, <Text color="green">{message}</Text>
+			</Text>
+		</>
+	);
+}

npm-packages/cli/source/components/commands/help.tsx

@@ -0,0 +1,23 @@
+import {Result} from 'meow';
+import React from 'react';
+import {Flags} from '../../lib/cli-flags.js';
+import {Text} from 'ink';
+import {commandsManual} from '../../lib/manual.js';
+import Header from '../header.js';
+
+export default function Help({cli}: {cli: Result<Flags>}) {
+	const subCommand = cli.input[1];
+
+	return (
+		<>
+			{subCommand ? (
+				<Text>{commandsManual[subCommand]}</Text>
+			) : (
+				<>
+					<Header />
+					<Text>{cli.help}</Text>
+				</>
+			)}
+		</>
+	);
+}

npm-packages/cli/source/components/login.tsx renamed to npm-packages/cli/source/components/commands/login.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {Box, Newline, Text, useApp} from 'ink';
 import SelectInput from 'ink-select-input';
-import {Flags} from '../flags.js';
+import {Flags} from '../../lib/cli-flags.js';
 import {Result} from 'meow';
 import TextInput, {UncontrolledTextInput} from 'ink-text-input';
 import Spinner from 'ink-spinner';

npm-packages/cli/source/components/commands/logout.tsx

@@ -0,0 +1,8 @@
+import {Result} from 'meow';
+import {Flags} from '../../lib/cli-flags.js';
+import React from 'react';
+import {Text} from 'ink';
+
+export default function Logout({cli}: {cli: Result<Flags>}) {
+	return <Text>Logout from the Pulse Editor Platform</Text>;
+}

npm-packages/cli/source/components/commands/publish.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Text} from 'ink';
+import {Result} from 'meow';
+import {Flags} from '../../lib/cli-flags.js';
+
+export default function Publish({cli}: {cli: Result<Flags>}) {
+	return (
+		<Text>
+			Publish Pulse Editor Extension in current directory to the Pulse Editor
+			Platform
+		</Text>
+	);
+}

npm-packages/cli/source/components/header.tsx

@@ -0,0 +1,12 @@
+import {Box, Text} from 'ink';
+import React from 'react';
+
+export default function Header() {
+	return (
+		<Box flexDirection="column" alignItems="center">
+			<Text color={'whiteBright'}>Pulse Editor CLI</Text>
+			<Text>Version: 0.0.1</Text>
+			<Text color={'blueBright'}>https://pulse-editor.com</Text>
+		</Box>
+	);
+}