@yargram/react 1.0.0

package/src/components/LogWindow/LogWindowEscapeDemo.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { LogWindow } from './LogWindow';
+import { useLogWindowShortcut } from '../../hooks/useLogWindowShortcut';
+import type { LogEntry, NetworkEntry } from './types';
+import './LogWindow.css';
+
+const demoStyles: React.CSSProperties = {
+  position: 'relative',
+  minHeight: 300,
+  padding: 24,
+  background: 'var(--logw-bg, #1e1e1e)',
+  borderRadius: 8,
+  color: 'var(--logw-text, #d4d4d4)',
+  fontFamily: 'ui-monospace, monospace',
+};
+
+const overlayStyles: React.CSSProperties = {
+  position: 'fixed',
+  inset: 0,
+  background: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 9999,
+  padding: 24,
+  boxSizing: 'border-box',
+};
+
+const instructionStyles: React.CSSProperties = {
+  marginBottom: 16,
+  fontSize: 14,
+  color: 'var(--logw-text-muted, #858585)',
+};
+
+const countStyles: React.CSSProperties = {
+  fontSize: 12,
+  marginTop: 8,
+  padding: '6px 12px',
+  background: 'rgba(255,255,255,0.08)',
+  borderRadius: 4,
+  display: 'inline-block',
+};
+
+const ESCAPE_COUNT = 5;
+
+export type LogWindowEscapeDemoProps = {
+  entries?: LogEntry[];
+  networkEntries?: NetworkEntry[];
+};
+
+/**
+ * Escape を 5 回押すとログウィンドウを表示するデモ。
+ * Storybook でテスト用に利用。
+ */
+export function LogWindowEscapeDemo({
+  entries = [],
+  networkEntries = [],
+}: LogWindowEscapeDemoProps) {
+  const { isOpen, close, escapeCount: count } = useLogWindowShortcut({
+    escapeCount: ESCAPE_COUNT,
+    resetAfterMs: 1500,
+    closeOnEscape: true,
+  });
+
+  return (
+    <div style={demoStyles}>
+      <div style={instructionStyles}>
+        <strong>Escape キーを {ESCAPE_COUNT} 回押すとログウィンドウが開きます。</strong>
+      </div>
+      <div style={countStyles}>
+        Escape: {count} / {ESCAPE_COUNT}
+      </div>
+
+      {isOpen &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            style={overlayStyles}
+            role="presentation"
+          >
+            <div onClick={(e) => e.stopPropagation()}>
+              <LogWindow
+                entries={entries}
+                networkEntries={networkEntries}
+                draggable
+                animateOnOpen
+                onClose={close}
+                defaultPosition={{
+                  x: typeof window !== 'undefined' ? Math.max(0, (window.innerWidth - 696) / 2) : 100,
+                  y: typeof window !== 'undefined' ? Math.max(0, (window.innerHeight - 466) / 2) : 100,
+                }}
+              />
+            </div>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+}

package/src/components/LogWindow/NetworkEntryRow.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { Globe, Database, ChevronRight, ChevronDown } from 'lucide-react';
+import type { NetworkEntry } from './types';
+import './LogWindow.css';
+
+type NetworkEntryRowProps = {
+  entry: NetworkEntry;
+};
+
+function getStatusColor(status?: number): string {
+  if (status == null) return 'var(--logw-text-muted)';
+  if (status >= 200 && status < 300) return '#4ec9b0';
+  if (status >= 400) return '#f14c4c';
+  return 'var(--logw-text-muted)';
+}
+
+export function NetworkEntryRow({ entry }: NetworkEntryRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const statusColor = getStatusColor(entry.status);
+  const statusText = entry.statusText ?? (entry.status != null ? String(entry.status) : '—');
+  const hasDetails = Boolean(entry.request ?? entry.response);
+
+  const handleToggle = () => {
+    if (hasDetails) setExpanded((e) => !e);
+  };
+
+  const header = (
+    <div
+      className={`logWindowNetworkEntry ${hasDetails ? 'logWindowNetworkEntryClickable' : ''}`}
+      onClick={hasDetails ? handleToggle : undefined}
+      onKeyDown={
+        hasDetails
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleToggle();
+              }
+            }
+          : undefined
+      }
+      role={hasDetails ? 'button' : undefined}
+      tabIndex={hasDetails ? 0 : undefined}
+      aria-expanded={hasDetails ? expanded : undefined}
+    >
+      <span className="logWindowNetworkEntryChevron">
+        {hasDetails ? (
+          expanded ? (
+            <ChevronDown size={14} aria-hidden />
+          ) : (
+            <ChevronRight size={14} aria-hidden />
+          )
+        ) : null}
+      </span>
+      <span
+        className={`logWindowNetworkEntryIcon ${entry.type === 'graphql' ? 'logWindowNetworkEntryIconGraphql' : ''}`}
+        title={entry.type === 'rest' ? 'REST' : 'GraphQL'}
+      >
+        {entry.type === 'rest' ? <Globe size={12} /> : <Database size={12} />}
+      </span>
+      {entry.type === 'rest' ? (
+        <>
+          <span className="logWindowNetworkEntryMethod">{entry.method}</span>
+          <span className="logWindowNetworkEntryUrl">{entry.url}</span>
+        </>
+      ) : (
+        <span className="logWindowNetworkEntryOperation">
+          {entry.operationName ?? '(anonymous)'}
+        </span>
+      )}
+      <span className="logWindowNetworkEntryStatus" style={{ color: statusColor }}>
+        {statusText}
+      </span>
+    </div>
+  );
+
+  return (
+    <div className="logWindowNetworkEntryAccordion">
+      {header}
+      {hasDetails && (entry.request != null || entry.response != null) && (
+        <div
+          className={`logWindowNetworkEntryDetailsWrapper ${expanded ? 'logWindowNetworkEntryDetailsWrapperExpanded' : ''}`}
+          aria-hidden={!expanded}
+        >
+          <div className="logWindowNetworkEntryDetails">
+            {entry.request != null && (
+              <div className="logWindowNetworkEntryDetailSection">
+                <div className="logWindowNetworkEntryDetailLabel">Request</div>
+                <pre className="logWindowNetworkEntryDetailContent">{entry.request}</pre>
+              </div>
+            )}
+            {entry.response != null && (
+              <div className="logWindowNetworkEntryDetailSection">
+                <div className="logWindowNetworkEntryDetailLabel">Response</div>
+                <pre className="logWindowNetworkEntryDetailContent">{entry.response}</pre>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/LogWindow/index.ts

@@ -0,0 +1,13 @@
+export { LogWindow } from './LogWindow';
+export { LogWindowEscapeDemo } from './LogWindowEscapeDemo';
+export type { LogWindowProps } from './LogWindow';
+export { LogEntryRow } from './LogEntryRow';
+export { NetworkEntryRow } from './NetworkEntryRow';
+export type {
+  LogEntry,
+  LogLevel,
+  LogWindowTab,
+  NetworkEntry,
+  NetworkEntryRest,
+  NetworkEntryGraphql,
+} from './types';

package/src/components/LogWindow/types.ts

@@ -0,0 +1,40 @@
+export type LogLevel = 'info' | 'warn' | 'error';
+
+export type LogEntry = {
+  id: string;
+  level: LogLevel;
+  message: string;
+  source: string;
+};
+
+export type LogWindowTab = 'logs' | 'networks';
+
+/** REST API のネットワークエントリ */
+export type NetworkEntryRest = {
+  id: string;
+  type: 'rest';
+  method: string;
+  url: string;
+  status?: number;
+  statusText?: string;
+  /** アコーディオン展開時の Request 表示用 */
+  request?: string;
+  /** アコーディオン展開時の Response 表示用 */
+  response?: string;
+};
+
+/** GraphQL のネットワークエントリ */
+export type NetworkEntryGraphql = {
+  id: string;
+  type: 'graphql';
+  operationName?: string;
+  url: string;
+  status?: number;
+  statusText?: string;
+  /** アコーディオン展開時の Request 表示用 */
+  request?: string;
+  /** アコーディオン展開時の Response 表示用 */
+  response?: string;
+};
+
+export type NetworkEntry = NetworkEntryRest | NetworkEntryGraphql;

package/src/components/LoginWindow/LoginForm.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LoginForm } from './LoginForm';
+
+describe('LoginForm', () => {
+  it('renders password input and submit button', () => {
+    const onLogin = vi.fn();
+    render(<LoginForm onLogin={onLogin} />);
+    expect(screen.getByPlaceholderText('••••••••')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /log in/i })).toBeInTheDocument();
+  });
+
+  it('submit button is disabled when password is empty', () => {
+    const onLogin = vi.fn();
+    render(<LoginForm onLogin={onLogin} />);
+    expect(screen.getByRole('button', { name: /log in/i })).toBeDisabled();
+  });
+
+  it('calls onLogin with password on submit', async () => {
+    const user = userEvent.setup();
+    const onLogin = vi.fn().mockResolvedValue(undefined);
+    render(<LoginForm onLogin={onLogin} />);
+    await user.type(screen.getByPlaceholderText('••••••••'), 'secret');
+    await user.click(screen.getByRole('button', { name: /log in/i }));
+    expect(onLogin).toHaveBeenCalledWith('secret');
+  });
+
+  it('shows custom title when provided', () => {
+    render(<LoginForm onLogin={vi.fn()} title="Sign in" />);
+    expect(screen.getByText('Sign in')).toBeInTheDocument();
+  });
+
+  it('shows custom submit label when provided', () => {
+    render(<LoginForm onLogin={vi.fn()} submitLabel="Submit" />);
+    expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument();
+  });
+});

package/src/components/LoginWindow/LoginForm.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useCallback } from 'react';
+import { Lock, LogIn } from 'lucide-react';
+import './LoginWindow.css';
+
+export type LoginFormProps = {
+  onLogin: (password: string) => Promise<void>;
+  title?: string;
+  submitLabel?: string;
+  errorMessage?: string;
+  onClearError?: () => void;
+};
+
+/** ログイン用フォーム（LogWindow 内などに埋め込む用。オーバーレイなし） */
+export function LoginForm({
+  onLogin,
+  title = 'Login',
+  submitLabel = 'Log in',
+  errorMessage,
+  onClearError,
+}: LoginFormProps) {
+  const [password, setPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      onClearError?.();
+      if (!password) return;
+      setIsSubmitting(true);
+      onLogin(password)
+        .then(() => {
+          setPassword('');
+        })
+        .catch(() => {})
+        .finally(() => {
+          setIsSubmitting(false);
+        });
+    },
+    [onLogin, password, onClearError]
+  );
+
+  return (
+    <div className="loginFormWrap">
+      {title && (
+        <div className="loginFormHeader">
+          <Lock size={18} className="loginFormHeaderIcon" aria-hidden />
+          <h3 className="loginFormTitle">{title}</h3>
+        </div>
+      )}
+      <form onSubmit={handleSubmit} className="loginWindowForm">
+        <label className="loginWindowLabel">
+          <Lock size={16} className="loginWindowLabelIcon" aria-hidden />
+          <span>Password</span>
+          <input
+            type="password"
+            className="loginWindowInput"
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              onClearError?.();
+            }}
+            autoComplete="current-password"
+            placeholder="••••••••"
+            disabled={isSubmitting}
+          />
+        </label>
+        <button
+          type="submit"
+          className="loginWindowSubmit"
+          disabled={isSubmitting || !password}
+        >
+          <LogIn size={16} aria-hidden />
+          {isSubmitting ? '...' : submitLabel}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/components/LoginWindow/LoginWindow.css

@@ -0,0 +1,198 @@
+/* ログインウィンドウオーバーレイ（全画面・フェード） */
+.loginWindowOverlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99999;
+  animation: loginWindowOverlayFadeIn 0.25s ease-out forwards;
+}
+
+@keyframes loginWindowOverlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.loginWindow {
+  --loginw-bg: linear-gradient(135deg, #1e1e1e 0%, #252526 100%);
+  --loginw-header-bg: #252526;
+  --loginw-border: #3c3c3c;
+  --loginw-text: #d4d4d4;
+  --loginw-text-muted: #858585;
+  --loginw-input-bg: #2d2d2d;
+  --loginw-focus: #3794ff;
+  --loginw-error-bg: rgba(241, 76, 76, 0.15);
+  --loginw-error-text: #f14c4c;
+  width: 100%;
+  max-width: 380px;
+  background: var(--loginw-bg);
+  border: 1px solid var(--loginw-border);
+  border-radius: 10px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+  animation: loginWindowFadeIn 0.25s ease-out forwards;
+}
+
+@keyframes loginWindowFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.loginWindowHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 24px;
+  background: var(--loginw-header-bg);
+  border-bottom: 1px solid var(--loginw-border);
+  border-radius: 10px 10px 0 0;
+}
+
+.loginWindowHeaderIcon {
+  color: var(--loginw-focus);
+  flex-shrink: 0;
+}
+
+.loginWindowTitle {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--loginw-text);
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+
+.loginWindowForm {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.loginWindowError {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--loginw-error-text);
+  background: var(--loginw-error-bg);
+  border-radius: 6px;
+  border: 1px solid rgba(241, 76, 76, 0.3);
+}
+
+.loginWindowLabel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: #fff;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+
+.loginWindowLabel span {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.loginWindowLabelIcon {
+  color: var(--loginw-text-muted);
+  flex-shrink: 0;
+}
+
+.loginWindowInput {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--loginw-text);
+  background: var(--loginw-input-bg);
+  border: 1px solid #ffffff8d;
+  border-radius: 6px;
+  box-sizing: border-box;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.loginWindowInput::placeholder {
+  color: rgb(110, 110, 110);
+}
+
+.loginWindowInput:hover {
+  border-color: #505050;
+}
+
+.loginWindowInput:focus {
+  outline: none;
+  border-color: var(--loginw-focus);
+  box-shadow: 0 0 0 2px rgba(55, 148, 255, 0.25);
+}
+
+.loginWindowInput:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.loginWindowSubmit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  color: #fff;
+  background: var(--loginw-focus);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.loginWindowSubmit:hover:not(:disabled) {
+  background: #2a7fd4;
+}
+
+.loginWindowSubmit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* LogWindow 内埋め込み用（LoginForm） */
+.loginFormWrap {
+  padding: 16px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.loginFormHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--loginw-border, #3c3c3c);
+}
+
+.loginFormHeaderIcon {
+  color: var(--loginw-focus, #3794ff);
+  flex-shrink: 0;
+}
+
+.loginFormTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--loginw-text, #d4d4d4);
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}

package/src/components/LoginWindow/LoginWindow.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useCallback } from 'react';
+import { Lock, LogIn } from 'lucide-react';
+import './LoginWindow.css';
+
+export type LoginWindowProps = {
+  /** ログイン送信。成功で resolve、失敗で reject（メッセージは errorMessage で表示） */
+  onLogin: (password: string) => Promise<void>;
+  /** ウィンドウタイトル */
+  title?: string;
+  /** 送信ボタンラベル */
+  submitLabel?: string;
+  /** エラー表示用（onLogin が reject したとき） */
+  errorMessage?: string;
+  /** エラーをクリアする（入力変更時などに親から渡す） */
+  onClearError?: () => void;
+};
+
+export function LoginWindow({
+  onLogin,
+  title = 'Login',
+  submitLabel = 'Log in',
+  errorMessage,
+  onClearError,
+}: LoginWindowProps) {
+  const [password, setPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      onClearError?.();
+      if (!password) return;
+      setIsSubmitting(true);
+      onLogin(password)
+        .then(() => {
+          setPassword('');
+        })
+        .catch(() => {})
+        .finally(() => {
+          setIsSubmitting(false);
+        });
+    },
+    [onLogin, password, onClearError]
+  );
+
+  return (
+    <div className="loginWindowOverlay" role="dialog" aria-modal="true" aria-labelledby="loginWindowTitle">
+      <div className="loginWindow">
+        <div className="loginWindowHeader">
+          <Lock size={20} className="loginWindowHeaderIcon" aria-hidden />
+          <h2 id="loginWindowTitle" className="loginWindowTitle">
+            {title}
+          </h2>
+        </div>
+        <form onSubmit={handleSubmit} className="loginWindowForm">
+          {errorMessage && (
+            <div className="loginWindowError" role="alert">
+              {errorMessage}
+            </div>
+          )}
+          <label className="loginWindowLabel">
+            <Lock size={16} className="loginWindowLabelIcon" aria-hidden />
+            <span>Password</span>
+            <input
+              type="password"
+              className="loginWindowInput"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                onClearError?.();
+              }}
+              autoComplete="current-password"
+              placeholder="••••••••"
+              disabled={isSubmitting}
+              autoFocus
+            />
+          </label>
+          <button
+            type="submit"
+            className="loginWindowSubmit"
+            disabled={isSubmitting || !password}
+          >
+            <LogIn size={16} aria-hidden />
+            {isSubmitting ? '...' : submitLabel}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/components/LoginWindow/index.ts

@@ -0,0 +1,2 @@
+export { LoginWindow } from './LoginWindow';
+export type { LoginWindowProps } from './LoginWindow';