@gomjellie/lazyapi 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 gomjellie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,162 @@
+# lazyapi
+
+![demo](https://github.com/user-attachments/assets/ed95f068-09da-4226-91fd-430027258b31)
+
+<div align="center">
+
+A **Vim-style TUI (Terminal User Interface)** tool for exploring Swagger/OpenAPI documents and testing APIs in the terminal
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
+[![Node Version](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen)](https://nodejs.org)
+
+</div>
+
+---
+
+## ✨ Features
+
+- 🎹 **Vim-style keyboard navigation** - Familiar keybindings like h, j, k, l
+- 📄 **Swagger 2.0 & OpenAPI 3.x support** - Supports both JSON/YAML formats
+- 🔌 **tRPC support** - Coming soon
+- 🎨 **Terminal-friendly UI** - Beautiful TUI with neon green theme
+- ⚡ **Fast API testing** - Execute APIs directly from the terminal
+- 🔍 **Search & filtering** - Quickly find endpoints
+- 📋 **Clipboard support** - Copy response results to clipboard
+
+## 📦 Installation
+
+```bash
+npm install -g @gomjellie/lazyapi
+```
+
+Or run the development version locally:
+
+```bash
+git clone https://github.com/gomjellie/lazyapi.git
+cd lazyapi
+pnpm install
+pnpm run dev examples/sample-api.json
+```
+
+## 🚀 Usage
+
+### Basic Usage
+
+```bash
+lazyapi <openapi-file>
+```
+
+### Examples
+
+```bash
+# JSON file
+lazyapi openapi.json
+
+# YAML file
+lazyapi swagger.yaml
+
+# URL (coming soon)
+lazyapi https://api.example.com/openapi.json
+```
+
+## ⌨️ Keyboard Shortcuts
+
+### List View
+
+<img width="819" height="351" alt="image" src="https://github.com/user-attachments/assets/03743827-7467-4336-b14f-436fdd56ac78" />
+
+| Key           | Description                                                    |
+| ------------- | -------------------------------------------------------------- |
+| `j`           | Move to next item                                              |
+| `k`           | Move to previous item                                          |
+| `g`           | Move to top of list                                            |
+| `G`           | Move to bottom of list                                         |
+| `:m<1-6>`     | Select Method (1:ALL, 2:GET, 3:POST, 4:PUT, 5:DELETE, 6:PATCH) |
+| `l` / `Enter` | View details of selected endpoint                              |
+| `/`           | Enter search mode                                              |
+| `:q`          | Quit                                                           |
+
+#### Search Mode
+
+| Key        | Description                                           |
+| ---------- | ----------------------------------------------------- |
+| Text input | Enter search query (searches path, description, tags) |
+| `Esc`      | Cancel search and return to NORMAL mode               |
+
+### Detail View
+
+<img width="818" height="351" alt="image" src="https://github.com/user-attachments/assets/1bdaff1b-7839-4128-a370-a906fb17692a" />
+
+#### NORMAL Mode
+
+| Key     | Description                    |
+| ------- | ------------------------------ |
+| `j`     | Move to next field             |
+| `k`     | Move to previous field         |
+| `i`     | Enter INSERT mode (edit field) |
+| `Enter` | Execute API request            |
+| `u`     | Return to list view            |
+
+#### INSERT Mode
+
+| Key        | Description           |
+| ---------- | --------------------- |
+| `Esc`      | Switch to NORMAL mode |
+| Text input | Edit field value      |
+
+### Result View
+
+| Key       | Description                               |
+| --------- | ----------------------------------------- |
+| `j` / `k` | Scroll response content                   |
+| `Tab`     | Switch to next tab (Body/Headers/Cookies) |
+| `y`       | Copy Body content to clipboard            |
+| `r`       | Re-run request                            |
+| `q` / `u` | Return to detail view                     |
+
+## 🛠️ Development
+
+### Requirements
+
+- Node.js >= 20.0.0
+- pnpm >= 8.0.0
+
+## 📝 Future Plans
+
+- [ ] Load OpenAPI documents from URL
+- [ ] Multiple environment support (dev, staging, prod)
+- [ ] Request history storage
+- [ ] Favorites feature
+- [ ] Custom theme support
+- [ ] Plugin system
+
+## 🤝 Contributing
+
+Contributions are always welcome! Please open an issue or submit a PR.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📄 License
+
+MIT License - see the LICENSE file for details.
+
+## 👤 Author
+
+**gomjellie**
+
+- GitHub: [@gomjellie](https://github.com/gomjellie)
+
+## 🙏 Acknowledgments
+
+- [Ink](https://github.com/vadimdemedes/ink) - React-based terminal UI library
+- [swagger-parser](https://github.com/APIDevTools/swagger-parser) - OpenAPI parser
+
+---
+
+<div align="center">
+Made with ❤️ by gomjellie
+</div>

package/dist/App.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 메인 애플리케이션 컴포넌트
+ */
+import React from 'react';
+interface AppProps {
+    filePath: string;
+}
+export default function App({ filePath }: AppProps): React.JSX.Element;
+export {};

package/dist/App.js

@@ -0,0 +1,65 @@
+/**
+ * 메인 애플리케이션 컴포넌트
+ */
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { Provider } from 'react-redux';
+import { store } from './store/index.js';
+import { useAppSelector, useAppDispatch } from './store/hooks.js';
+import { setDocument, setEndpoints, setLoading, setError } from './store/appSlice.js';
+import { OpenAPIParserService } from './services/openapi-parser.js';
+import ListView from './components/list-view/ListView.js';
+import DetailView from './components/detail-view/DetailView.js';
+import LoadingSpinner from './components/common/LoadingSpinner.js';
+import ErrorMessage from './components/common/ErrorMessage.js';
+function AppContent({ filePath }) {
+    const screen = useAppSelector((state) => state.app.screen);
+    const loading = useAppSelector((state) => state.app.loading);
+    const error = useAppSelector((state) => state.app.error);
+    const dispatch = useAppDispatch();
+    const [parser] = useState(() => new OpenAPIParserService());
+    const { stdout } = useStdout();
+    const terminalHeight = stdout?.rows || 24;
+    // OpenAPI 문서 로드
+    useEffect(() => {
+        const loadDocument = async () => {
+            dispatch(setLoading(true));
+            try {
+                const document = await parser.parseFromFile(filePath);
+                const endpoints = parser.extractEndpoints(document);
+                dispatch(setDocument(document));
+                dispatch(setEndpoints(endpoints));
+                dispatch(setLoading(false));
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : '알 수 없는 오류가 발생했습니다';
+                dispatch(setError(errorMessage));
+            }
+        };
+        loadDocument();
+    }, [filePath, parser, dispatch]);
+    // 로딩 상태
+    if (loading) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1, height: terminalHeight },
+            React.createElement(LoadingSpinner, { message: "OpenAPI \uBB38\uC11C\uB97C \uB85C\uB529\uD558\uB294 \uC911..." })));
+    }
+    // 에러 상태
+    if (error) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1, height: terminalHeight },
+            React.createElement(ErrorMessage, { message: error })));
+    }
+    // 화면 렌더링
+    switch (screen) {
+        case 'LIST':
+            return React.createElement(ListView, null);
+        case 'DETAIL':
+            return React.createElement(DetailView, null);
+        default:
+            return (React.createElement(Box, null,
+                React.createElement(Text, null, "\uC54C \uC218 \uC5C6\uB294 \uD654\uBA74 \uC0C1\uD0DC\uC785\uB2C8\uB2E4.")));
+    }
+}
+export default function App({ filePath }) {
+    return (React.createElement(Provider, { store: store },
+        React.createElement(AppContent, { filePath: filePath })));
+}

package/dist/cli.d.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+/**
+ * CLI 엔트리 포인트
+ */
+export {};

package/dist/cli.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+/**
+ * CLI 엔트리 포인트
+ */
+import React from 'react';
+import { render } from 'ink';
+import path from 'path';
+import App from './App.js';
+// 명령줄 인자 파싱
+const args = process.argv.slice(2);
+if (args.length === 0) {
+    console.error('사용법: swagger-cli <file>');
+    console.error('');
+    console.error('예시:');
+    console.error('  swagger-cli openapi.json');
+    console.error('  swagger-cli swagger.yaml');
+    process.exit(1);
+}
+const filePath = path.resolve(process.cwd(), args[0]);
+// 터미널 클리어하여 깨끗한 화면에서 시작
+console.clear();
+// 앱 렌더링
+const { waitUntilExit } = render(React.createElement(App, { filePath: filePath }), {
+    // stdout을 명시적으로 지정하여 출력 위치 고정
+    stdout: process.stdout,
+    stdin: process.stdin,
+    // exitOnCtrlC를 true로 설정하여 Ctrl+C로 종료 가능
+    exitOnCtrlC: true,
+    // 콘솔 패치를 활성화하여 console.log 등이 화면을 방해하지 않도록
+    patchConsole: true,
+});
+waitUntilExit()
+    .then(() => {
+    process.exit(0);
+})
+    .catch((error) => {
+    console.error('애플리케이션 오류:', error.message);
+    process.exit(1);
+});

package/dist/components/common/ErrorMessage.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 에러 메시지 컴포넌트
+ */
+import React from 'react';
+interface ErrorMessageProps {
+    message: string;
+    details?: string;
+}
+export default function ErrorMessage({ message, details }: ErrorMessageProps): React.JSX.Element;
+export {};

package/dist/components/common/ErrorMessage.js

@@ -0,0 +1,17 @@
+/**
+ * 에러 메시지 컴포넌트
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+export default function ErrorMessage({ message, details }) {
+    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", padding: 1, marginY: 1 },
+        React.createElement(Box, { marginBottom: details ? 1 : 0 },
+            React.createElement(Text, { bold: true, color: "red" },
+                "\u2716 \uC624\uB958:",
+                ' '),
+            React.createElement(Text, { color: "red" }, message)),
+        details && (React.createElement(Box, { marginLeft: 2 },
+            React.createElement(Text, { dimColor: true }, details))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true }, "q \uD0A4\uB97C \uB20C\uB7EC \uC885\uB8CC\uD558\uAC70\uB098 Ctrl+C\uB97C \uB20C\uB7EC\uC8FC\uC138\uC694."))));
+}

package/dist/components/common/KeybindingFooter.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 하단 키바인딩 가이드 컴포넌트
+ */
+import React from 'react';
+export interface KeyBinding {
+    key: string;
+    description: string;
+}
+interface KeybindingFooterProps {
+    bindings: KeyBinding[];
+    mode?: string;
+    additionalInfo?: string;
+    commandInput?: string;
+    onCommandChange?: (value: string) => void;
+    onCommandSubmit?: (value: string) => void;
+}
+export default function KeybindingFooter({ bindings, mode, additionalInfo, commandInput, onCommandChange, onCommandSubmit, }: KeybindingFooterProps): React.JSX.Element;
+export {};

package/dist/components/common/KeybindingFooter.js

@@ -0,0 +1,20 @@
+/**
+ * 하단 키바인딩 가이드 컴포넌트
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+export default function KeybindingFooter({ bindings, mode, additionalInfo, commandInput = '', onCommandChange, onCommandSubmit, }) {
+    return (React.createElement(Box, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: "green", paddingX: 1, paddingTop: 0 },
+        mode && (React.createElement(Box, { marginRight: 2 },
+            React.createElement(Text, { bold: true, color: "black", backgroundColor: "green" }, ' ' + mode + ' '))),
+        mode === 'COMMAND' && onCommandChange && onCommandSubmit ? (React.createElement(Box, { flexGrow: 1 },
+            React.createElement(Text, { color: "yellow" }, ":"),
+            React.createElement(TextInput, { value: commandInput, onChange: onCommandChange, onSubmit: onCommandSubmit }))) : (React.createElement(Box, { flexGrow: 1, gap: 3, flexWrap: "wrap" }, bindings.map((binding, index) => (React.createElement(Box, { key: `${binding.key}-${binding.description}-${index}` },
+            React.createElement(Text, { bold: true, color: "green" }, binding.key),
+            React.createElement(Text, null,
+                " ",
+                binding.description)))))),
+        additionalInfo && (React.createElement(Box, null,
+            React.createElement(Text, { dimColor: true }, additionalInfo)))));
+}

package/dist/components/common/LoadingSpinner.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 로딩 스피너 컴포넌트
+ */
+import React from 'react';
+interface LoadingSpinnerProps {
+    message?: string;
+}
+export default function LoadingSpinner({ message }: LoadingSpinnerProps): React.JSX.Element;
+export {};

package/dist/components/common/LoadingSpinner.js

@@ -0,0 +1,15 @@
+/**
+ * 로딩 스피너 컴포넌트
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+export default function LoadingSpinner({ message = '로딩 중...' }) {
+    return (React.createElement(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: 10 },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { color: "green" },
+                React.createElement(Spinner, { type: "dots" })),
+            React.createElement(Text, { color: "green", bold: true },
+                ' ',
+                message))));
+}

package/dist/components/common/SearchInput.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 자동완성 기능이 있는 검색 입력 컴포넌트
+ */
+import React from 'react';
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    suggestions?: string[];
+    placeholder?: string;
+    focus?: boolean;
+    onSubmit?: () => void;
+}
+export default function SearchInput({ value, onChange, suggestions, placeholder, focus, onSubmit, }: SearchInputProps): React.JSX.Element;
+export {};

package/dist/components/common/SearchInput.js

@@ -0,0 +1,72 @@
+/**
+ * 자동완성 기능이 있는 검색 입력 컴포넌트
+ */
+import React, { useState, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { useInput } from 'ink';
+export default function SearchInput({ value, onChange, suggestions = [], placeholder = '', focus = true, onSubmit, }) {
+    const [suggestionIndex, setSuggestionIndex] = useState(0);
+    const [lastTypedValue, setLastTypedValue] = useState(value);
+    // 현재 입력값과 매칭되는 모든 suggestions 찾기
+    const matchingSuggestions = useMemo(() => {
+        if (!lastTypedValue || suggestions.length === 0) {
+            return [];
+        }
+        return suggestions.filter((suggestion) => suggestion.toLowerCase().startsWith(lastTypedValue.toLowerCase()) &&
+            suggestion.toLowerCase() !== lastTypedValue.toLowerCase());
+    }, [lastTypedValue, suggestions]);
+    // 현재 선택된 suggestion
+    const currentSuggestion = useMemo(() => {
+        if (matchingSuggestions.length === 0)
+            return null;
+        return matchingSuggestions[suggestionIndex % matchingSuggestions.length];
+    }, [matchingSuggestions, suggestionIndex]);
+    // Ghost text 계산
+    const ghostText = useMemo(() => {
+        if (!currentSuggestion || !lastTypedValue)
+            return '';
+        return currentSuggestion.slice(lastTypedValue.length);
+    }, [currentSuggestion, lastTypedValue]);
+    // 키 입력 처리
+    useInput((input, key) => {
+        if (!focus)
+            return;
+        if (key.tab) {
+            // Tab: ghost text를 자동완성하고 다음 suggestion으로 이동
+            if (currentSuggestion && ghostText) {
+                onChange(currentSuggestion);
+                setLastTypedValue(lastTypedValue); // 타이핑한 부분은 유지
+                setSuggestionIndex((prev) => prev + 1);
+            }
+        }
+        else if (key.return) {
+            // Enter: 부모에게 알림 (INSERT 모드 종료)
+            if (onSubmit) {
+                onSubmit();
+            }
+        }
+        else if (key.backspace || key.delete) {
+            // Backspace/Delete
+            if (value.length > 0) {
+                const newValue = value.slice(0, -1);
+                onChange(newValue);
+                setLastTypedValue(newValue);
+                setSuggestionIndex(0);
+            }
+        }
+        else if (key.escape) {
+            // Escape: 입력 취소 (부모가 처리)
+        }
+        else if (!key.ctrl && !key.meta && input) {
+            // 일반 문자 입력
+            const newValue = value + input;
+            onChange(newValue);
+            setLastTypedValue(newValue);
+            setSuggestionIndex(0);
+        }
+    }, { isActive: focus });
+    return (React.createElement(Box, null,
+        React.createElement(Text, { backgroundColor: focus ? 'green' : undefined }, value),
+        ghostText && (React.createElement(Text, { dimColor: true, color: "gray" }, ghostText)),
+        !value && !ghostText && placeholder && (React.createElement(Text, { dimColor: true, color: "gray" }, placeholder))));
+}

package/dist/components/common/StatusBar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 상단 상태 바 컴포넌트
+ */
+import React from 'react';
+import { AppMode } from '../../types/app-state.js';
+interface StatusBarProps {
+    title: string;
+    version?: string;
+    currentPath?: string;
+    mode: AppMode;
+    status?: string;
+}
+export default function StatusBar({ title, version, currentPath, mode, status }: StatusBarProps): React.JSX.Element;
+export {};

package/dist/components/common/StatusBar.js

@@ -0,0 +1,36 @@
+/**
+ * 상단 상태 바 컴포넌트
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+export default function StatusBar({ title, version, currentPath, mode, status }) {
+    const getModeColor = () => {
+        switch (mode) {
+            case 'INSERT':
+                return 'yellow';
+            case 'SEARCH':
+                return 'cyan';
+            default:
+                return 'green';
+        }
+    };
+    return (React.createElement(Box, { borderStyle: "single", borderTop: false, borderLeft: false, borderRight: false, borderColor: "green", paddingX: 1, paddingBottom: 0 },
+        React.createElement(Box, { flexGrow: 1 },
+            React.createElement(Text, { bold: true, color: "green" },
+                "\u25A0 ",
+                title),
+            version && React.createElement(Text, { dimColor: true },
+                " v",
+                version),
+            currentPath && React.createElement(Text, { dimColor: true },
+                " | ",
+                currentPath)),
+        React.createElement(Box, { gap: 2 },
+            status && React.createElement(Text, { color: "green" },
+                "\u25CF ",
+                status),
+            React.createElement(Text, { bold: true, color: getModeColor() },
+                "[",
+                mode,
+                "]"))));
+}

package/dist/components/detail-view/DetailView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * API 상세 화면
+ */
+import React from 'react';
+export default function DetailView(): React.JSX.Element;