@yargram/react 1.0.0

package/dist/hooks/useLogWindowShortcut.test.js

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useLogWindowShortcut } from './useLogWindowShortcut';
+describe('useLogWindowShortcut', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('returns isOpen false initially', () => {
+        const { result } = renderHook(() => useLogWindowShortcut());
+        expect(result.current.isOpen).toBe(false);
+        expect(result.current.escapeCount).toBe(0);
+    });
+    it('open() sets isOpen to true', () => {
+        const { result } = renderHook(() => useLogWindowShortcut());
+        act(() => {
+            result.current.open();
+        });
+        expect(result.current.isOpen).toBe(true);
+    });
+    it('close() sets isOpen to false', () => {
+        const { result } = renderHook(() => useLogWindowShortcut());
+        act(() => {
+            result.current.open();
+        });
+        act(() => {
+            result.current.close();
+        });
+        expect(result.current.isOpen).toBe(false);
+    });
+    it('toggle() flips isOpen', () => {
+        const { result } = renderHook(() => useLogWindowShortcut());
+        expect(result.current.isOpen).toBe(false);
+        act(() => {
+            result.current.toggle();
+        });
+        expect(result.current.isOpen).toBe(true);
+        act(() => {
+            result.current.toggle();
+        });
+        expect(result.current.isOpen).toBe(false);
+    });
+    it('opening after threshold Escape key presses', () => {
+        const { result } = renderHook(() => useLogWindowShortcut({ escapeCount: 3, resetAfterMs: 2000 }));
+        const dispatchEscape = () => {
+            window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        };
+        expect(result.current.isOpen).toBe(false);
+        act(() => {
+            dispatchEscape();
+        });
+        expect(result.current.escapeCount).toBe(1);
+        act(() => {
+            dispatchEscape();
+        });
+        expect(result.current.escapeCount).toBe(2);
+        act(() => {
+            dispatchEscape();
+        });
+        expect(result.current.isOpen).toBe(true);
+        expect(result.current.escapeCount).toBe(0);
+    });
+    it('resets escape count after resetAfterMs', () => {
+        const { result } = renderHook(() => useLogWindowShortcut({ escapeCount: 5, resetAfterMs: 500 }));
+        const dispatchEscape = () => {
+            window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        };
+        act(() => {
+            dispatchEscape();
+            dispatchEscape();
+        });
+        expect(result.current.escapeCount).toBe(2);
+        act(() => {
+            vi.advanceTimersByTime(600);
+        });
+        expect(result.current.escapeCount).toBe(0);
+    });
+    it('calls onTrigger when provided and threshold reached', () => {
+        const onTrigger = vi.fn();
+        const { result } = renderHook(() => useLogWindowShortcut({ escapeCount: 2, onTrigger }));
+        const dispatchEscape = () => {
+            window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        };
+        act(() => {
+            dispatchEscape();
+            dispatchEscape();
+        });
+        expect(onTrigger).toHaveBeenCalledTimes(1);
+        expect(result.current.isOpen).toBe(false);
+    });
+});

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { useApi, type RestApiContextValue, type GraphqlApiContextValue, } from './contexts/ApiContext';
+export { usePrinter } from './contexts/PrinterContext';
+export { YargramProvider, useYargram } from './contexts/YargramContext';
+export type { YargramProviderProps } from './contexts/YargramContext';
+export { gql } from '@apollo/client';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EACN,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,GAC5B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+// Api（provider: 'rest' | 'graphql' で REST: get/post/put/delete、GraphQL: ransack/handing）
+export { useApi, } from './contexts/ApiContext';
+// Printer
+export { usePrinter } from './contexts/PrinterContext';
+// 統合 Context（Api + Printer + LogWindow）
+export { YargramProvider, useYargram } from './contexts/YargramContext';
+export { gql } from '@apollo/client';

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/test/setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@yargram/react",
+  "version": "1.0.0",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.11.0",
+    "@auth0/auth0-react": "^2.13.0",
+    "@yargram/core": "workspace:*",
+    "graphql": "^16.8.0",
+    "lucide-react": "^0.460.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "jsdom": "^25.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.4.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vitest": "^2.1.6"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/components/LogWindow/LogEntryRow.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Info, AlertTriangle, CircleAlert } from 'lucide-react';
+import type { LogEntry as LogEntryType, LogLevel } from './types';
+import './LogWindow.css';
+
+type LogEntryRowProps = {
+  entry: LogEntryType;
+};
+
+const levelIcons: Record<LogLevel, React.ComponentType<{ size?: number | string; className?: string }>> = {
+  info: Info,
+  warn: AlertTriangle,
+  error: CircleAlert,
+};
+
+
+export function LogEntryRow({ entry }: LogEntryRowProps) {
+  const levelClass = `logWindowEntry${entry.level.charAt(0).toUpperCase() + entry.level.slice(1)}` as
+    | 'logWindowEntryInfo'
+    | 'logWindowEntryWarn'
+    | 'logWindowEntryError';
+  const iconClass = `logWindowEntryIcon${entry.level.charAt(0).toUpperCase() + entry.level.slice(1)}` as
+    | 'logWindowEntryIconInfo'
+    | 'logWindowEntryIconWarn'
+    | 'logWindowEntryIconError';
+
+  const IconComponent = levelIcons[entry.level];
+
+  return (
+    <div className={`logWindowEntry ${levelClass}`}>
+      <span className={`logWindowEntryIcon ${iconClass}`}>
+        <IconComponent size={12} />
+      </span>
+      <span className="logWindowEntryMessage">{entry.message}</span>
+      <span className="logWindowEntrySource">{entry.source}</span>
+    </div>
+  );
+}