@yargram/react 1.0.0

package/src/components/LogWindow/LogWindow.stories.tsx

@@ -0,0 +1,206 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LogWindow } from './LogWindow';
+import { LogWindowEscapeDemo } from './LogWindowEscapeDemo';
+import type { LogEntry, NetworkEntryRest, NetworkEntryGraphql } from './types';
+
+const sampleEntries: LogEntry[] = [
+  {
+    id: '1',
+    level: 'info',
+    message: 'Hello!!',
+    source: 'ArticleContainer.tsx:32',
+  },
+  {
+    id: '2',
+    level: 'warn',
+    message: 'Hello!!',
+    source: 'ArticleContainer.tsx:32',
+  },
+  {
+    id: '3',
+    level: 'error',
+    message: 'Hello!!',
+    source: 'ArticleContainer.tsx:32',
+  },
+];
+
+const sampleNetworkRest: NetworkEntryRest[] = [
+  {
+    id: 'r1',
+    type: 'rest',
+    method: 'GET',
+    url: '/api/users',
+    status: 200,
+    statusText: 'OK',
+    request: 'GET /api/users HTTP/1.1\nAccept: application/json',
+    response: '{\n  "data": [\n    { "id": "1", "name": "Alice" },\n    { "id": "2", "name": "Bob" }\n  ]\n}',
+  },
+  {
+    id: 'r2',
+    type: 'rest',
+    method: 'POST',
+    url: '/api/auth/login',
+    status: 201,
+    statusText: 'Created',
+    request: 'POST /api/auth/login HTTP/1.1\nContent-Type: application/json\n\n{"email":"user@example.com","password":"***"}',
+    response: '{\n  "token": "eyJhbGciOiJIUzI1NiIs...",\n  "user": { "id": "1", "email": "user@example.com" }\n}',
+  },
+  {
+    id: 'r3',
+    type: 'rest',
+    method: 'GET',
+    url: '/api/articles/123',
+    status: 404,
+    statusText: 'Not Found',
+    request: 'GET /api/articles/123 HTTP/1.1',
+    response: '{\n  "error": "Not Found",\n  "message": "Article 123 does not exist"\n}',
+  },
+];
+
+const sampleNetworkGraphql: NetworkEntryGraphql[] = [
+  {
+    id: 'g1',
+    type: 'graphql',
+    operationName: 'GetUser',
+    url: '/graphql',
+    status: 200,
+    statusText: 'OK',
+    request: 'query GetUser($id: ID!) {\n  user(id: $id) {\n    id\n    name\n    email\n  }\n}\n\nVariables: { "id": "1" }',
+    response: '{\n  "data": {\n    "user": {\n      "id": "1",\n      "name": "Alice",\n      "email": "alice@example.com"\n    }\n  }\n}',
+  },
+  {
+    id: 'g2',
+    type: 'graphql',
+    operationName: 'ListArticles',
+    url: '/graphql',
+    status: 200,
+    statusText: 'OK',
+    request: 'query ListArticles {\n  articles {\n    id\n    title\n    publishedAt\n  }\n}',
+    response: '{\n  "data": {\n    "articles": [\n      { "id": "1", "title": "Hello", "publishedAt": "2024-01-01" }\n    ]\n  }\n}',
+  },
+  {
+    id: 'g3',
+    type: 'graphql',
+    operationName: 'CreatePost',
+    url: '/graphql',
+    status: 400,
+    statusText: 'Bad Request',
+    request: 'mutation CreatePost($input: CreatePostInput!) {\n  createPost(input: $input) { id }\n}',
+    response: '{\n  "errors": [\n    { "message": "Validation error: title is required" }\n  ]\n}',
+  },
+];
+
+const meta: Meta<typeof LogWindow> = {
+  title: 'Components/LogWindow',
+  component: LogWindow,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    defaultTab: {
+      control: 'radio',
+      options: ['logs', 'networks'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LogWindow>;
+
+export const Default: Story = {
+  args: {
+    entries: sampleEntries,
+    defaultTab: 'logs',
+  },
+};
+
+export const InfoOnly: Story = {
+  args: {
+    entries: [
+      { id: '1', level: 'info', message: 'Application started', source: 'App.tsx:12' },
+      { id: '2', level: 'info', message: 'User logged in', source: 'Auth.tsx:45' },
+    ],
+  },
+};
+
+export const ManyEntries: Story = {
+  args: {
+    entries: [
+      ...sampleEntries,
+      { id: '4', level: 'info', message: 'Fetching data...', source: 'useApi.ts:18' },
+      { id: '5', level: 'warn', message: 'Deprecated API used', source: 'legacy.ts:3' },
+      { id: '6', level: 'error', message: 'Network request failed', source: 'api.ts:92' },
+    ],
+    height: 280,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    entries: [],
+  },
+};
+
+export const NetworksTab: Story = {
+  args: {
+    entries: sampleEntries,
+    defaultTab: 'networks',
+  },
+};
+
+/** Networks タブで REST API リクエストを表示 */
+export const NetworkREST: Story = {
+  args: {
+    networkEntries: sampleNetworkRest,
+    defaultTab: 'networks',
+  },
+};
+
+/** Networks タブで GraphQL リクエストを表示 */
+export const NetworkGraphQL: Story = {
+  args: {
+    networkEntries: sampleNetworkGraphql,
+    defaultTab: 'networks',
+  },
+};
+
+/** REST と GraphQL の両方のネットワークエントリを表示 */
+export const NetworkMixed: Story = {
+  args: {
+    networkEntries: [
+      ...sampleNetworkRest,
+      ...sampleNetworkGraphql,
+    ],
+    defaultTab: 'networks',
+  },
+};
+
+/**
+ * ヘッダーをドラッグしてウィンドウを自由に移動できます。
+ * タブ（Logs / Networks）をクリックしてもドラッグは開始されません。
+ */
+export const Draggable: Story = {
+  args: {
+    entries: sampleEntries,
+    networkEntries: [...sampleNetworkRest, ...sampleNetworkGraphql],
+    draggable: true,
+    defaultPosition: { x: 80, y: 80 },
+  },
+};
+
+/**
+ * Escape キーを 5 回押すとログウィンドウがオーバーレイで開きます。
+ * テスト手順: ストーリーを開き、Escape を 5 回連続で押す（約 1.5 秒以内に次のキーを押す）。
+ * ログウィンドウ表示中に Escape を 1 回押すか、背景をクリックすると閉じます。
+ * 開いたウィンドウはヘッダーをドラッグして移動できます。
+ */
+export const EscapeToOpen: Story = {
+  render: () => (
+    <LogWindowEscapeDemo
+      entries={sampleEntries}
+      networkEntries={[...sampleNetworkRest, ...sampleNetworkGraphql]}
+    />
+  ),
+};

package/src/components/LogWindow/LogWindow.test.tsx

@@ -0,0 +1,68 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LogWindow } from './LogWindow';
+
+describe('LogWindow', () => {
+  it('renders with empty entries by default', () => {
+    render(<LogWindow />);
+    expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /networks/i })).toBeInTheDocument();
+  });
+
+  it('renders log entries', () => {
+    const entries = [
+      { id: '1', level: 'info' as const, message: 'Test message', source: 'app' },
+      { id: '2', level: 'warn' as const, message: 'Warning', source: 'app' },
+    ];
+    render(<LogWindow entries={entries} />);
+    expect(screen.getByText('Test message')).toBeInTheDocument();
+    expect(screen.getByText('Warning')).toBeInTheDocument();
+  });
+
+  it('renders network entries in Networks tab', async () => {
+    const user = userEvent.setup();
+    const networkEntries = [
+      {
+        id: 'n1',
+        type: 'rest' as const,
+        method: 'GET',
+        url: 'https://api.example.com/posts',
+        status: 200,
+        statusText: 'OK',
+        request: 'GET /posts',
+        response: '[]',
+      },
+    ];
+    render(<LogWindow networkEntries={networkEntries} />);
+    const networksTab = screen.getByRole('button', { name: /networks/i });
+    await user.click(networksTab);
+    expect(screen.getByText(/GET.*posts/i)).toBeInTheDocument();
+  });
+
+  it('shows login form when showLogin is true and onLogin provided', () => {
+    const onLogin = vi.fn().mockResolvedValue(undefined);
+    render(
+      <LogWindow showLogin loginTitle="Sign in" onLogin={onLogin} />
+    );
+    expect(screen.getByPlaceholderText('••••••••')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /log in/i })).toBeInTheDocument();
+    expect(screen.getAllByText('Sign in').length).toBeGreaterThan(0);
+  });
+
+  it('when showLogin, does not show Logs/Networks tabs', () => {
+    render(<LogWindow showLogin onLogin={async () => {}} />);
+    expect(screen.queryByRole('button', { name: /^logs$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^networks$/i })).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<LogWindow onClose={onClose} />);
+    const closeBtn = screen.getByRole('button', { name: /close/i });
+    await user.click(closeBtn);
+    await new Promise((r) => setTimeout(r, 250));
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/src/components/LogWindow/LogWindow.tsx

@@ -0,0 +1,379 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { Terminal, Wifi, X, Download, FileJson, FileText, LogOut } from 'lucide-react';
+import type { LogEntry, LogWindowTab, NetworkEntry } from './types';
+import { LogEntryRow } from './LogEntryRow';
+import { NetworkEntryRow } from './NetworkEntryRow';
+import { LoginForm } from '../LoginWindow/LoginForm';
+import '../LoginWindow/LoginWindow.css';
+import './LogWindow.css';
+
+function escapeCsvCell(value: string): string {
+  if (/[",\n\r]/.test(value)) return `"${value.replace(/"/g, '""')}"`;
+  return value;
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export type LogWindowProps = {
+  /** 表示するログエントリの配列 */
+  entries?: LogEntry[];
+  /** Networks タブで表示するネットワークエントリ（REST / GraphQL） */
+  networkEntries?: NetworkEntry[];
+  /** アクティブなタブ（未指定時は 'logs'） */
+  defaultTab?: LogWindowTab;
+  /** タブ切り替え時のコールバック */
+  onTabChange?: (tab: LogWindowTab) => void;
+  /** 高さ（CSS 値）。未指定時は max-height: 320px */
+  height?: string | number;
+  className?: string;
+  /** true のときヘッダーをドラッグしてウィンドウを移動できる */
+  draggable?: boolean;
+  /** draggable 時の初期位置（未指定時は { x: 100, y: 100 }） */
+  defaultPosition?: { x: number; y: number };
+  /** true のとき表示時に Windows 風のスケール＋フェードインアニメーションを行う */
+  animateOnOpen?: boolean;
+  /** 右上の赤ボタンで閉じる際に呼ばれる。指定時は赤ボタンが閉じるボタンになる */
+  onClose?: () => void;
+  /** 指定時はヘッダーにログアウトボタンを表示（認証連携用） */
+  onLogout?: () => void;
+  /** true のときボディにパスワード（ログイン）画面を表示（production/staging 用） */
+  showLogin?: boolean;
+  /** ログイン画面のタイトル */
+  loginTitle?: string;
+  /** ログイン送信 */
+  onLogin?: (password: string) => Promise<void>;
+  /** ログイン失敗メッセージ */
+  loginError?: string;
+  /** ログインエラーをクリア */
+  onClearLoginError?: () => void;
+};
+
+const CLOSE_ANIMATION_MS = 200;
+
+export function LogWindow({
+  entries = [],
+  networkEntries = [],
+  defaultTab = 'logs',
+  onTabChange,
+  height,
+  className = '',
+  draggable = false,
+  defaultPosition,
+  animateOnOpen = false,
+  onClose,
+  onLogout,
+  showLogin = false,
+  loginTitle = 'Login',
+  onLogin,
+  loginError,
+  onClearLoginError,
+}: LogWindowProps) {
+  const [activeTab, setActiveTab] = useState<LogWindowTab>(defaultTab);
+  const [isClosing, setIsClosing] = useState(false);
+  const [unreadLogsCount, setUnreadLogsCount] = useState(0);
+  const [unreadNetworksCount, setUnreadNetworksCount] = useState(0);
+  const [exportDialogOpen, setExportDialogOpen] = useState(false);
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const prevEntriesLengthRef = useRef(entries.length);
+  const prevNetworkEntriesLengthRef = useRef(networkEntries.length);
+  const [position, setPosition] = useState<{ x: number; y: number }>(() =>
+    draggable ? defaultPosition ?? { x: 100, y: 100 } : { x: 0, y: 0 }
+  );
+  const dragStartRef = useRef<{ x: number; y: number; clientX: number; clientY: number } | null>(null);
+
+  useEffect(() => {
+    const prevLogs = prevEntriesLengthRef.current;
+    const prevNetworks = prevNetworkEntriesLengthRef.current;
+    if (entries.length > prevLogs && activeTab === 'networks') {
+      setUnreadLogsCount((c) => c + (entries.length - prevLogs));
+    }
+    prevEntriesLengthRef.current = entries.length;
+    if (networkEntries.length > prevNetworks && activeTab === 'logs') {
+      setUnreadNetworksCount((c) => c + (networkEntries.length - prevNetworks));
+    }
+    prevNetworkEntriesLengthRef.current = networkEntries.length;
+  }, [entries.length, networkEntries.length, activeTab]);
+
+  const handleTab = (tab: LogWindowTab) => {
+    setActiveTab(tab);
+    if (tab === 'logs') setUnreadLogsCount(0);
+    if (tab === 'networks') setUnreadNetworksCount(0);
+    onTabChange?.(tab);
+  };
+
+  const handleHeaderMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!draggable || e.button !== 0) return;
+      e.preventDefault();
+      dragStartRef.current = {
+        x: position.x,
+        y: position.y,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      };
+    },
+    [draggable, position]
+  );
+
+  useEffect(() => {
+    if (!draggable) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (dragStartRef.current == null) return;
+      setPosition({
+        x: dragStartRef.current.x + (e.clientX - dragStartRef.current.clientX),
+        y: dragStartRef.current.y + (e.clientY - dragStartRef.current.clientY),
+      });
+    };
+
+    const handleMouseUp = () => {
+      dragStartRef.current = null;
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [draggable]);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    };
+  }, []);
+
+  const handleCloseClick = useCallback(() => {
+    if (!onClose || isClosing) return;
+    setIsClosing(true);
+    closeTimeoutRef.current = setTimeout(() => {
+      closeTimeoutRef.current = null;
+      onClose();
+    }, CLOSE_ANIMATION_MS);
+  }, [onClose, isClosing]);
+
+  const handleExportCsv = useCallback(() => {
+    const header = 'level,message,source\n';
+    const rows = entries.map((e) =>
+      [e.level, escapeCsvCell(e.message), escapeCsvCell(e.source)].join(',')
+    );
+    const csv = header + rows.join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+    downloadBlob(blob, `logs-${Date.now()}.csv`);
+    setExportDialogOpen(false);
+  }, [entries]);
+
+  const handleExportJson = useCallback(() => {
+    const data = { logs: entries, networks: networkEntries };
+    const json = JSON.stringify(data, null, 2);
+    const blob = new Blob([json], { type: 'application/json;charset=utf-8' });
+    downloadBlob(blob, `logs-${Date.now()}.json`);
+    setExportDialogOpen(false);
+  }, [entries, networkEntries]);
+
+  const bodyStyle = height != null ? { maxHeight: typeof height === 'number' ? `${height}px` : height } : undefined;
+
+  const rootStyle: React.CSSProperties | undefined = draggable
+    ? {
+        position: 'fixed',
+        left: position.x,
+        top: position.y,
+        zIndex: 10000,
+      }
+    : undefined;
+
+  const rootClassName = [
+    'logWindow',
+    animateOnOpen && !isClosing ? 'logWindowOpenAnimation' : '',
+    isClosing ? 'logWindowCloseAnimation' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+
+  const innerClassName = [
+    'logWindowInner',
+    showLogin && loginError ? 'logWindowLoginError' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+
+  return (
+    <div
+      className={rootClassName.trim()}
+      {...(rootStyle != null ? { style: rootStyle } : {})}
+    >
+      <div className={innerClassName}>
+      <header
+        className={`logWindowHeader ${draggable ? 'logWindowHeaderDraggable' : ''} ${showLogin ? 'logWindowHeaderLoginOnly' : ''}`}
+        onMouseDown={handleHeaderMouseDown}
+        role={draggable ? 'button' : undefined}
+        tabIndex={draggable ? 0 : undefined}
+        aria-label={draggable ? 'Move window' : undefined}
+      >
+        {!showLogin && (
+          <div className="logWindowTabs">
+            <button
+              type="button"
+              className={`logWindowTab ${activeTab === 'logs' ? 'logWindowTabActive' : ''}`}
+              onClick={() => handleTab('logs')}
+              onMouseDown={(e) => draggable && e.stopPropagation()}
+              aria-pressed={activeTab === 'logs'}
+            >
+              <Terminal className="logWindowTabIcon logWindowTabIconTerminal" size={14} aria-hidden />
+              Logs
+              {activeTab !== 'logs' && unreadLogsCount > 0 && (
+                <span className="logWindowTabBadge" aria-label={`New logs: ${unreadLogsCount}`}>
+                  {unreadLogsCount > 99 ? '99+' : unreadLogsCount}
+                </span>
+              )}
+            </button>
+            <button
+              type="button"
+              className={`logWindowTab ${activeTab === 'networks' ? 'logWindowTabActive' : ''}`}
+              onClick={() => handleTab('networks')}
+              onMouseDown={(e) => draggable && e.stopPropagation()}
+              aria-pressed={activeTab === 'networks'}
+            >
+              <Wifi className="logWindowTabIcon logWindowTabIconWifi" size={14} aria-hidden />
+              Networks
+              {activeTab !== 'networks' && unreadNetworksCount > 0 && (
+                <span className="logWindowTabBadge" aria-label={`New networks: ${unreadNetworksCount}`}>
+                  {unreadNetworksCount > 99 ? '99+' : unreadNetworksCount}
+                </span>
+              )}
+            </button>
+          </div>
+        )}
+        {showLogin && <span className="logWindowHeaderLoginTitle">{loginTitle}</span>}
+        {onLogout && !showLogin && (
+          <button
+            type="button"
+            className="logWindowLogoutButton"
+            onClick={onLogout}
+            aria-label="Log out"
+            title="Log out"
+          >
+            <LogOut size={14} aria-hidden />
+            <span>Log out</span>
+          </button>
+        )}
+        {onClose ? (
+          <button
+            type="button"
+            className="logWindowCloseButton"
+            onClick={handleCloseClick}
+            disabled={isClosing}
+            aria-label="close"
+            title="close"
+          >
+            <X size={16} fill="currentColor" aria-hidden />
+          </button>
+        ) : (
+          <span className="logWindowIndicator" title="Recording / Active">
+            <X size={16} fill="currentColor" aria-hidden />
+          </span>
+        )}
+      </header>
+      <div className="logWindowBody" style={bodyStyle}>
+        {showLogin && onLogin ? (
+          <LoginForm
+            title={loginTitle}
+            onLogin={onLogin}
+            errorMessage={loginError}
+            onClearError={onClearLoginError}
+          />
+        ) : (
+          <div
+            className="logWindowBodySlider"
+            style={{
+              transform: activeTab === 'logs' ? 'translateX(0)' : 'translateX(-50%)',
+            }}
+          >
+            <div className="logWindowBodyPanel">
+              {entries.map((entry) => (
+                <LogEntryRow key={entry.id} entry={entry} />
+              ))}
+            </div>
+            <div className="logWindowBodyPanel">
+              {networkEntries.length > 0 ? (
+                networkEntries.map((entry) => (
+                  <NetworkEntryRow key={entry.id} entry={entry} />
+                ))
+              ) : (
+                <div className="logWindowEntry logWindowEntryInfo" style={{ color: 'var(--logw-text-muted)' }}>
+                  Network requests will appear here.
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {!showLogin && (
+      <footer className="logWindowFooter">
+        <button
+          type="button"
+          className="logWindowExportButton"
+          onClick={() => setExportDialogOpen(true)}
+          aria-haspopup="dialog"
+          aria-expanded={exportDialogOpen}
+        >
+          <Download size={14} aria-hidden />
+          Export
+        </button>
+      </footer>
+      )}
+      {exportDialogOpen && (
+        <div
+          className="logWindowExportOverlay"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="logWindowExportDialogTitle"
+        >
+          <div className="logWindowExportDialog">
+            <h3 id="logWindowExportDialogTitle" className="logWindowExportDialogTitle">
+              Export format
+            </h3>
+            <p className="logWindowExportDialogDescription">CSV でエクスポートしますか、JSON でエクスポートしますか？</p>
+            <div className="logWindowExportDialogActions">
+              <button
+                type="button"
+                className="logWindowExportFormatButton"
+                onClick={handleExportCsv}
+              >
+                <FileText size={18} aria-hidden />
+                CSV
+              </button>
+              <button
+                type="button"
+                className="logWindowExportFormatButton"
+                onClick={handleExportJson}
+              >
+                <FileJson size={18} aria-hidden />
+                JSON
+              </button>
+            </div>
+            <button
+              type="button"
+              className="logWindowExportDialogCancel"
+              onClick={() => setExportDialogOpen(false)}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+      </div>
+    </div>
+  );
+}