gh-coderakr 0.0.0

package/dist/app.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    repo?: string;
+};
+export default function App({ repo }: Props): React.JSX.Element;
+export {};

package/dist/app.js

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import fetch from 'node-fetch';
+import { AppLayout } from './components/layout.js';
+import { Spinner } from './components/spinner.js';
+import { ErrorMessage } from './components/error-message.js';
+import { RepoDetails } from './components/repo-details.js';
+import { normalizeRepoInput } from './github.js';
+export default function App({ repo }) {
+    const initialTarget = repo ? normalizeRepoInput(repo) : '';
+    const [input, setInput] = useState('');
+    const [targetRepo, setTargetRepo] = useState(initialTarget);
+    const [data, setData] = useState();
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(false);
+    const [reloadToken, setReloadToken] = useState(0);
+    useEffect(() => {
+        if (!targetRepo || targetRepo.trim() === '') {
+            setLoading(false);
+            setData(undefined);
+            return;
+        }
+        let didCancel = false;
+        async function load() {
+            setLoading(true);
+            setError(undefined);
+            try {
+                const response = await fetch(`https://api.github.com/repos/${targetRepo}`, {
+                    headers: {
+                        Accept: 'application/vnd.github+json',
+                        'User-Agent': 'inkcli',
+                    },
+                });
+                if (!response.ok) {
+                    const message = response.status === 404 ? 'Repository not found.' : `GitHub API error: ${response.status} ${response.statusText}`;
+                    if (!didCancel) {
+                        setError(message);
+                        setData(undefined);
+                    }
+                    return;
+                }
+                const json = (await response.json());
+                if (!didCancel) {
+                    setData(json);
+                }
+            }
+            catch (error_) {
+                if (!didCancel) {
+                    setError(error_ instanceof Error ? error_.message : 'Unknown error while fetching repository.');
+                    setData(undefined);
+                }
+            }
+            finally {
+                if (!didCancel) {
+                    setLoading(false);
+                }
+            }
+        }
+        load();
+        return () => {
+            didCancel = true;
+        };
+    }, [targetRepo, reloadToken]);
+    const handleSubmit = (value) => {
+        const raw = value || input;
+        const normalized = normalizeRepoInput(raw);
+        if (!normalized) {
+            setError('Please enter a GitHub URL or owner/repo.');
+            setData(undefined);
+            return;
+        }
+        setError(undefined);
+        setTargetRepo(normalized);
+    };
+    useInput((inputKey, key) => {
+        if (key.escape || inputKey === 'q') {
+            process.exit(0);
+        }
+        if (inputKey === 'r') {
+            if (targetRepo && targetRepo.trim() !== '') {
+                setReloadToken(previous => previous + 1);
+            }
+        }
+    });
+    return (React.createElement(AppLayout, { title: "GitHub Repo Viewer", subtitle: "Enter URL or owner/repo, then press Enter", footer: React.createElement(Text, { color: "gray" }, "Keys: Enter=load   r=reload   q/Esc=quit   Ctrl+C=force quit") },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { color: "gray" },
+                "Input:",
+                ' '),
+            React.createElement(TextInput, { value: input, onChange: setInput, onSubmit: handleSubmit, showCursor: false, placeholder: "owner/repo or GitHub URL" })),
+        targetRepo && targetRepo.trim() !== '' && (React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { color: "gray" },
+                "Current:",
+                ' '),
+            React.createElement(Text, { color: "greenBright" }, targetRepo))),
+        React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+            loading && (React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Spinner, { label: `Fetching ${targetRepo} from GitHub...` }))),
+            error && React.createElement(ErrorMessage, { targetRepo: targetRepo, error: error }),
+            !loading && !error && data && React.createElement(RepoDetails, { repo: data }),
+            !loading && !error && !data && (React.createElement(Text, { color: "gray" }, "Paste a GitHub URL or owner/repo above and press Enter to load details.")))));
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import React from 'react';
+import { render } from 'ink';
+import meow from 'meow';
+import App from './app.js';
+const cli = meow(`
+	Usage
+	  $ inkcli <owner>/<repo>|<github-url>
+
+	Examples
+	  $ inkcli kubernetes/kubernetes
+	  $ inkcli coderakr/CarRental
+	  $ inkcli https://github.com/kubernetes/kubernetes
+	  $ inkcli https://api.github.com/repos/kubernetes/kubernetes
+
+	If no argument is provided, it defaults to kubernetes/kubernetes.
+`, {
+    importMeta: import.meta,
+});
+const [repo] = cli.input;
+render(React.createElement(App, { repo: repo }));

package/dist/components/error-message.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ErrorMessageProps = {
+    targetRepo?: string;
+    error: string;
+};
+export declare function ErrorMessage({ targetRepo, error }: ErrorMessageProps): React.JSX.Element;
+export {};

package/dist/components/error-message.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+export function ErrorMessage({ targetRepo, error }) {
+    return (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+        React.createElement(Text, { color: "redBright" }, "\u2716 Failed to load repository"),
+        targetRepo && (React.createElement(Text, { color: "gray" },
+            "Target: ",
+            targetRepo)),
+        React.createElement(Text, { color: "red" }, error)));
+}

package/dist/components/layout.d.ts

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from 'react';
+type AppLayoutProps = {
+    title: string;
+    subtitle?: string;
+    footer?: ReactNode;
+    children: ReactNode;
+};
+export declare function AppLayout({ title, subtitle, footer, children }: AppLayoutProps): React.JSX.Element;
+export {};

package/dist/components/layout.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+export function AppLayout({ title, subtitle, footer, children }) {
+    return (React.createElement(Box, { paddingX: 1, paddingY: 1 },
+        React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyanBright", paddingX: 2, paddingY: 1 },
+            React.createElement(Box, { marginBottom: 1, justifyContent: "space-between" },
+                React.createElement(Text, { color: "cyanBright" }, title),
+                subtitle && (React.createElement(Text, { color: "gray" }, subtitle))),
+            React.createElement(Box, { flexDirection: "column" }, children),
+            footer && (React.createElement(Box, { marginTop: 1 }, footer)))));
+}

package/dist/components/repo-details.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { GithubRepo } from '../github.js';
+type RepoDetailsProps = {
+    repo: GithubRepo;
+};
+export declare function RepoDetails({ repo }: RepoDetailsProps): React.JSX.Element;
+export {};

package/dist/components/repo-details.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+export function RepoDetails({ repo }) {
+    const createdAt = new Date(repo.created_at);
+    const updatedAt = new Date(repo.updated_at);
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "gray" },
+                    "Name:",
+                    ' '),
+                React.createElement(Text, { color: "greenBright" }, repo.full_name)),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "gray" },
+                    "Owner:",
+                    ' '),
+                React.createElement(Text, { color: "magentaBright" }, repo.owner.login)),
+            repo.description && (React.createElement(Text, { wrap: "truncate" },
+                React.createElement(Text, { color: "gray" },
+                    "Description:",
+                    ' '),
+                repo.description))),
+        React.createElement(Box, { flexDirection: "row", marginBottom: 1, flexWrap: "wrap" },
+            React.createElement(Box, { flexDirection: "column", marginRight: 4 },
+                React.createElement(Text, { color: "yellowBright" }, "\u2605 Stars:"),
+                React.createElement(Text, null, repo.stargazers_count)),
+            React.createElement(Box, { flexDirection: "column", marginRight: 4 },
+                React.createElement(Text, { color: "cyanBright" }, "\u2442 Forks:"),
+                React.createElement(Text, null, repo.forks_count)),
+            React.createElement(Box, { flexDirection: "column", marginRight: 4 },
+                React.createElement(Text, { color: "redBright" }, "\u26A0 Issues:"),
+                React.createElement(Text, null, repo.open_issues_count)),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "blueBright" }, "\uD83D\uDC41 Watchers:"),
+                React.createElement(Text, null, repo.watchers_count))),
+        React.createElement(Box, { flexDirection: "row", marginBottom: 1, flexWrap: "wrap" },
+            React.createElement(Box, { marginRight: 4 },
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "gray" },
+                        "Language:",
+                        ' '),
+                    repo.language ?? 'N/A')),
+            React.createElement(Box, { marginRight: 4 },
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "gray" },
+                        "License:",
+                        ' '),
+                    repo.license?.name ?? 'Unlicensed')),
+            React.createElement(Box, null,
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "gray" },
+                        "Default branch:",
+                        ' '),
+                    repo.default_branch))),
+        React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "gray" },
+                    "Created:",
+                    ' '),
+                createdAt.toLocaleString()),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "gray" },
+                    "Last updated:",
+                    ' '),
+                updatedAt.toLocaleString())),
+        React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "gray" },
+                    "GitHub:",
+                    ' '),
+                React.createElement(Text, { color: "blueBright" }, repo.html_url)),
+            repo.homepage && (React.createElement(Text, null,
+                React.createElement(Text, { color: "gray" },
+                    "Homepage:",
+                    ' '),
+                React.createElement(Text, { color: "greenBright" }, repo.homepage)))),
+        repo.topics && repo.topics.length > 0 && (React.createElement(Box, { flexDirection: "row", flexWrap: "wrap" },
+            React.createElement(Text, { color: "gray" },
+                "Topics:",
+                ' '),
+            React.createElement(Box, { marginLeft: 1, flexDirection: "row", flexWrap: "wrap" }, repo.topics.map(topic => (React.createElement(Box, { key: topic, marginRight: 1 },
+                React.createElement(Text, { color: "black", backgroundColor: "gray" },
+                    ' ',
+                    topic,
+                    ' ')))))))));
+}

package/dist/components/spinner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type SpinnerProps = {
+    label?: string;
+};
+export declare function Spinner({ label }: SpinnerProps): React.JSX.Element;
+export {};

package/dist/components/spinner.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+export function Spinner({ label }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame(previous => (previous + 1) % SPINNER_FRAMES.length);
+        }, 80);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+    return (React.createElement(Box, null,
+        React.createElement(Text, { color: "cyan" },
+            SPINNER_FRAMES[frame],
+            " ",
+            label)));
+}

package/dist/github.d.ts

@@ -0,0 +1,22 @@
+export type GithubRepo = {
+    full_name: string;
+    description: string | null;
+    html_url: string;
+    homepage: string | null;
+    language: string | null;
+    stargazers_count: number;
+    forks_count: number;
+    open_issues_count: number;
+    watchers_count: number;
+    created_at: string;
+    updated_at: string;
+    default_branch: string;
+    license: {
+        name: string;
+    } | null;
+    owner: {
+        login: string;
+    };
+    topics?: string[];
+};
+export declare function normalizeRepoInput(raw?: string): string;

package/dist/github.js

@@ -0,0 +1,29 @@
+export function normalizeRepoInput(raw) {
+    if (!raw) {
+        return '';
+    }
+    const input = raw.trim();
+    if (input === '') {
+        return '';
+    }
+    if (input.startsWith('http://') || input.startsWith('https://')) {
+        try {
+            const url = new URL(input);
+            const host = url.hostname.toLowerCase();
+            const segments = url.pathname.split('/').filter(Boolean);
+            if (host === 'github.com' && segments.length >= 2) {
+                return `${segments[0]}/${segments[1]}`;
+            }
+            if (host === 'api.github.com') {
+                const startIndex = segments[0] === 'repos' ? 1 : 0;
+                if (segments.length >= startIndex + 2) {
+                    return `${segments[startIndex]}/${segments[startIndex + 1]}`;
+                }
+            }
+        }
+        catch {
+            // Ignore malformed URLs and fall through.
+        }
+    }
+    return input;
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+	"description": "Beautiful GitHub repo CLI built with Ink",
+	"author": "Ayush Kumar",
+	"keywords": [
+		"cli",
+		"ink",
+		"github",
+		"tui"
+	],
+	"name": "gh-coderakr",
+	"version": "0.0.0",
+	"license": "MIT",
+	"bin": "dist/cli.js",
+	"type": "module",
+	"engines": {
+		"node": ">=16"
+	},
+	"scripts": {
+		"build": "tsc",
+		"dev": "tsc --watch",
+		"test": "prettier --check . && xo && ava"
+	},
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"ink": "^4.1.0",
+		"meow": "^11.0.0",
+		"react": "^18.2.0",
+		"node-fetch": "^3.3.2",
+		"ink-text-input": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sindresorhus/tsconfig": "^3.0.1",
+		"@types/react": "^18.0.32",
+		"@vdemedes/prettier-config": "^2.0.1",
+		"ava": "^5.2.0",
+		"chalk": "^5.2.0",
+		"eslint-config-xo-react": "^0.27.0",
+		"eslint-plugin-react": "^7.32.2",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"ink-testing-library": "^3.0.0",
+		"prettier": "^2.8.7",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.0.3",
+		"xo": "^0.53.1"
+	},
+	"ava": {
+		"extensions": {
+			"ts": "module",
+			"tsx": "module"
+		},
+		"nodeArguments": [
+			"--loader=ts-node/esm"
+		]
+	},
+	"xo": {
+		"extends": "xo-react",
+		"prettier": true,
+		"rules": {
+			"react/prop-types": "off"
+		}
+	},
+	"prettier": "@vdemedes/prettier-config"
+}

package/readme.md

@@ -0,0 +1,25 @@
+# inkcli
+
+> This readme is automatically generated by [create-ink-app](https://github.com/vadimdemedes/create-ink-app)
+
+## Install
+
+```bash
+$ npm install --global inkcli
+```
+
+## CLI
+
+```
+$ inkcli --help
+
+  Usage
+    $ inkcli
+
+  Options
+    --name  Your name
+
+  Examples
+    $ inkcli --name=Jane
+    Hello, Jane
+```