network-terminal 1.0.1 → 1.0.3

package/standalone/main.tsx

@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { NetworkTerminal } from '../src';
+
+const styles = {
+  container: {
+    padding: '40px',
+    maxWidth: '800px',
+    margin: '0 auto',
+  },
+  header: {
+    marginBottom: '40px',
+  },
+  title: {
+    fontSize: '32px',
+    fontWeight: 'bold',
+    color: '#4ade80',
+    fontFamily: 'monospace',
+    marginBottom: '8px',
+  },
+  subtitle: {
+    color: '#94a3b8',
+    fontSize: '16px',
+  },
+  section: {
+    background: '#1e293b',
+    borderRadius: '12px',
+    padding: '24px',
+    marginBottom: '24px',
+  },
+  sectionTitle: {
+    fontSize: '18px',
+    fontWeight: '600',
+    marginBottom: '16px',
+    color: '#f1f5f9',
+  },
+  buttonGroup: {
+    display: 'flex',
+    gap: '12px',
+    flexWrap: 'wrap' as const,
+  },
+  button: {
+    padding: '10px 20px',
+    borderRadius: '8px',
+    border: 'none',
+    cursor: 'pointer',
+    fontWeight: '500',
+    fontSize: '14px',
+    transition: 'all 0.2s',
+  },
+  getButton: {
+    background: '#22c55e',
+    color: '#000',
+  },
+  postButton: {
+    background: '#3b82f6',
+    color: '#fff',
+  },
+  putButton: {
+    background: '#f59e0b',
+    color: '#000',
+  },
+  deleteButton: {
+    background: '#ef4444',
+    color: '#fff',
+  },
+  errorButton: {
+    background: '#6b7280',
+    color: '#fff',
+  },
+  inputGroup: {
+    display: 'flex',
+    gap: '12px',
+    marginBottom: '16px',
+  },
+  input: {
+    flex: 1,
+    padding: '10px 16px',
+    borderRadius: '8px',
+    border: '1px solid #374151',
+    background: '#0f172a',
+    color: '#e2e8f0',
+    fontSize: '14px',
+  },
+  hint: {
+    marginTop: '24px',
+    padding: '16px',
+    background: '#0f172a',
+    borderRadius: '8px',
+    borderLeft: '4px solid #4ade80',
+  },
+  hintText: {
+    color: '#94a3b8',
+    fontSize: '14px',
+    fontFamily: 'monospace',
+  },
+  kbd: {
+    background: '#374151',
+    padding: '2px 8px',
+    borderRadius: '4px',
+    fontSize: '12px',
+    color: '#4ade80',
+  },
+};
+
+function App() {
+  const [customUrl, setCustomUrl] = useState('https://jsonplaceholder.typicode.com/posts/1');
+
+  const makeRequest = async (method: string, url: string, body?: object) => {
+    try {
+      const options: RequestInit = {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      };
+      if (body) {
+        options.body = JSON.stringify(body);
+      }
+      await fetch(url, options);
+    } catch (error) {
+      console.error('Request failed:', error);
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <h1 style={styles.title}>&gt;_ Network Terminal</h1>
+        <p style={styles.subtitle}>Monitor your Fetch/XHR requests in real-time</p>
+      </div>
+
+      <div style={styles.section}>
+        <h2 style={styles.sectionTitle}>Quick Actions</h2>
+        <div style={styles.buttonGroup}>
+          <button
+            style={{ ...styles.button, ...styles.getButton }}
+            onClick={() => makeRequest('GET', 'https://jsonplaceholder.typicode.com/posts/1')}
+          >
+            GET Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.postButton }}
+            onClick={() =>
+              makeRequest('POST', 'https://jsonplaceholder.typicode.com/posts', {
+                title: 'Test Post',
+                body: 'This is a test post body',
+                userId: 1,
+              })
+            }
+          >
+            POST Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.putButton }}
+            onClick={() =>
+              makeRequest('PUT', 'https://jsonplaceholder.typicode.com/posts/1', {
+                id: 1,
+                title: 'Updated Title',
+                body: 'Updated body content',
+                userId: 1,
+              })
+            }
+          >
+            PUT Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.deleteButton }}
+            onClick={() => makeRequest('DELETE', 'https://jsonplaceholder.typicode.com/posts/1')}
+          >
+            DELETE Request
+          </button>
+          <button
+            style={{ ...styles.button, ...styles.errorButton }}
+            onClick={() => makeRequest('GET', 'https://jsonplaceholder.typicode.com/invalid-endpoint')}
+          >
+            404 Error
+          </button>
+        </div>
+      </div>
+
+      <div style={styles.section}>
+        <h2 style={styles.sectionTitle}>Custom Request</h2>
+        <div style={styles.inputGroup}>
+          <input
+            type="text"
+            value={customUrl}
+            onChange={(e) => setCustomUrl(e.target.value)}
+            placeholder="Enter URL..."
+            style={styles.input}
+          />
+          <button
+            style={{ ...styles.button, ...styles.getButton }}
+            onClick={() => makeRequest('GET', customUrl)}
+          >
+            Send GET
+          </button>
+        </div>
+      </div>
+
+      <div style={styles.hint}>
+        <p style={styles.hintText}>
+          Press <span style={styles.kbd}>Ctrl+Shift+N</span> to toggle the Network Terminal
+        </p>
+      </div>
+
+      <NetworkTerminal defaultVisible={true} position="bottom" maxLogs={50} />
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/standalone/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'network-terminal': path.resolve(__dirname, '../src'),
+    },
+  },
+});