@inspectr/ui 0.0.2 → 0.0.4

package/src/components/ResponseContent.jsx

@@ -1,89 +0,0 @@
-// src/components/ResponseContent.jsx
-import React, { useState } from 'react';
-import Editor from '@monaco-editor/react';
-
-const ResponseContent = ({ request }) => {
-    const [showResponseHeaders, setShowResponseHeaders] = useState(false);
-
-    const renderTableRows = (data) =>
-        Object.entries(data || {}).map(([key, value]) => (
-            <tr key={key}>
-                <td className="border border-slate-200 px-2 py-1 font-mono text-slate-500 text-xs">
-                    {key}
-                </td>
-                <td className="border border-slate-200 px-2 py-1 font-mono text-xs">{value}</td>
-            </tr>
-        ));
-
-    // Check if the response body has content.
-    const payload = request.response.payload;
-    const isEmptyPayload =
-        !payload ||
-        (typeof payload === 'object' && Object.keys(payload).length === 0) ||
-        (typeof payload === 'string' &&
-            (payload.trim() === '' || payload.trim() === '{}'));
-
-    const formatPayload = (payload) => {
-        try {
-            const parsed = JSON.parse(payload);
-            return JSON.stringify(parsed, null, 2);
-        } catch (e) {
-            return payload;
-        }
-    }
-
-    return (
-        <div>
-            {/* Response Headers Section */}
-            <div className="mb-4">
-                <button
-                    className="w-full p-2 text-left font-bold bg-gray-200"
-                    onClick={() => setShowResponseHeaders(!showResponseHeaders)}
-                >
-                    Headers ({Object.keys(request.response.headers || {}).length})
-                </button>
-                {showResponseHeaders && (
-                    <div className="p-0">
-                        <table className="w-full border-collapse border border-gray-300">
-                            <thead>
-                            <tr className="bg-gray-100">
-                                <th className="border border-slate-200 px-2 py-1 w-1/4 text-left">Header</th>
-                                <th className="border border-slate-200 px-2 py-1 text-left">Value</th>
-                            </tr>
-                            </thead>
-                            <tbody>{renderTableRows(request.response.headers)}</tbody>
-                        </table>
-                    </div>
-                )}
-            </div>
-
-            {/* Response Body Section */}
-            <div>
-                <button className="w-full p-2 text-left font-bold bg-gray-200">
-                    Response Body
-                </button>
-                {isEmptyPayload ? (
-                    <div className="hidden"></div>
-                ) : (
-                    <div className="bg-white rounded-b shadow p-0 h-100">
-                        <Editor
-                            height="100%"
-                            defaultLanguage="json"
-                            value={formatPayload(payload)}
-                            options={{
-                                readOnly: true,
-                                minimap: { enabled: false },
-                                automaticLayout: true,
-                                fontFamily: '"Cascadia Code", "Jetbrains Mono", "Fira Code", "Menlo", "Consolas", monospace',
-                                tabSize: 2,
-                                scrollBeyondLastLine: false
-                            }}
-                        />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default ResponseContent;

package/src/components/SSETest.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import useSSE from '../hooks/useSSE';
-
-const SSETest = () => {
-    const { data, error } = useSSE('http://localhost:4321/api/events');
-
-    console.log("test", "test")
-
-    return (
-        <div>
-            <h1>SSE Test Component</h1>
-            {error && <p style={{color: 'red'}}>Error: {error}</p>}
-            {data ? (
-                <pre>{JSON.stringify(data, null, 2)}</pre>
-            ) : (
-                <p>No data received yet</p>
-            )}
-        </div>
-    );
-};
-
-export default SSETest;

package/src/components/SettingsPanel.jsx

@@ -1,107 +0,0 @@
-// src/components/SettingsPanel.jsx
-import React, { useState, useEffect } from "react";
-import logo from "../assets/inspectr_logo_small.png";
-
-const SettingsPanel = ({ sseEndpoint, setSseEndpoint, isConnected }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [inputValue, setInputValue] = useState(sseEndpoint);
-
-    // Load stored value on mount
-    useEffect(() => {
-        if (typeof window !== "undefined") {
-            const storedEndpoint = localStorage.getItem("sseEndpoint");
-            if (!sseEndpoint && storedEndpoint) {
-                setInputValue(storedEndpoint);
-                setSseEndpoint(storedEndpoint);
-            }
-        }
-    }, [sseEndpoint, setSseEndpoint]);
-
-    const handleSave = () => {
-        if (typeof window !== "undefined") {
-            localStorage.setItem("sseEndpoint", inputValue);
-        }
-        setSseEndpoint(inputValue);
-        setIsOpen(false);
-    };
-
-    return (
-        <div className="fixed bottom-0 left-0 w-full">
-            {/* Bottom Panel */}
-            <div
-                className="flex items-center justify-between bg-gray-200 px-4 py-2 w-full cursor-pointer select-none"
-                onClick={() => setIsOpen((prev) => !prev)} // Toggle on click
-            >
-                {/* Connection Status Indicator */}
-                <div className="flex items-center gap-4">
-                    <span
-                        className={`px-2 py-1 rounded-full text-xs font-semibold flex items-center ${
-                            isConnected ? "bg-green-500" : "bg-red-500"
-                        }`}
-                    >
-                        <span
-                            className={`w-2 h-2 rounded-full mr-1 ${
-                                isConnected ? "bg-green-800" : "bg-red-800"
-                            }`}
-                        ></span>
-                        {isConnected ? "Connected" : "Disconnected"}
-                    </span>
-                </div>
-
-                {/* Inspectr Logo & Name */}
-                <a
-                    href="https://github.com/thim81/inspectr"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center gap-2"
-                >
-                    <img src={logo} alt="Inspectr Logo" className="h-6" />
-                    <span className="text-gray-700 font-semibold text-sm">Inspectr</span>
-                </a>
-            </div>
-
-            {/* Configuration Panel */}
-            <div
-                className={`bg-gray-100 border-t border-gray-300 transition-all duration-300 overflow-hidden ${
-                    isOpen ? "max-h-40 opacity-100 py-4" : "max-h-0 opacity-0 py-0"
-                }`}
-            >
-                <div className="px-6">
-                    {/* Title */}
-
-                    {/* Two-column Layout */}
-                    <div className="grid grid-cols-2 gap-4 items-center">
-                        {/* Left Column (Empty for now) */}
-                        <div><h2 className="text-lg font-semibold text-gray-800 mb-4">Configuration</h2></div>
-
-                        {/* Right Column (Label + Input in the same row) */}
-                        <div className="flex items-center gap-2">
-                            <label className="text-gray-700 font-semibold whitespace-nowrap">
-                                SSE Endpoint:
-                            </label>
-                            <input
-                                type="text"
-                                value={inputValue}
-                                onChange={(e) => setInputValue(e.target.value)}
-                                className="border p-2 rounded flex-1 bg-white"
-                                placeholder="Enter SSE Endpoint..."
-                            />
-                        </div>
-                    </div>
-
-                    {/* Apply Button */}
-                    <div className="flex justify-end mt-4">
-                        <button
-                            onClick={handleSave}
-                            className="bg-green-600 text-white px-4 py-2 rounded-md"
-                        >
-                            Apply
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default SettingsPanel;

package/src/components/index.js

@@ -1,10 +0,0 @@
-// src/components/index.js
-
-export { default as InspectrApp } from './InspectrApp.jsx';
-export { default as RequestContent } from './RequestContent.jsx';
-export { default as RequestDetail } from './RequestDetail.jsx';
-export { default as RequestDetailsPanel } from './RequestDetailsPanel.jsx';
-export { default as RequestList } from './RequestList.jsx';
-export { default as RequestListItem } from './RequestListItem.jsx';
-export { default as ResponseContent } from './ResponseContent.jsx';
-export { default as SettingsPanel } from './SettingsPanel.jsx';

package/src/index.js

@@ -1,2 +0,0 @@
-export * from './components/index.js';
-export * from './utils/getStatusClass.js';

package/src/styles/global.css

@@ -1,5 +0,0 @@
-@import "tailwindcss";
-
-@theme {
-    --font-sans: InterVariable, sans-serif;
-}

package/src/utils/getStatusClass.js

@@ -1,9 +0,0 @@
-// src/utils/getStatusClass.js
-
-export const getStatusClass = (status) => {
-    if (status >= 200 && status < 300) return 'bg-green-200 text-green-800';
-    if (status >= 300 && status < 400) return 'bg-blue-200 text-blue-800';
-    if (status >= 400 && status < 500) return 'bg-orange-600 text-orange-200';
-    if (status >= 500) return 'bg-red-800 text-red-100';
-    return 'bg-gray-200 text-gray-800';
-}