@yargram/react 1.0.0

package/src/contexts/ApiContext.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ApiProvider, useApi } from './ApiContext';
+
+function Consumer() {
+  const api = useApi();
+  const [result, setResult] = React.useState<string>('');
+  const callGet = () => {
+    api.get('/test').then((r) => setResult(`${r.status}`)).catch(() => setResult('error'));
+  };
+  return (
+    <div>
+      <span data-testid="provider">{api.provider}</span>
+      <button type="button" onClick={callGet}>
+        GET
+      </button>
+      <span data-testid="result">{result}</span>
+    </div>
+  );
+}
+
+describe('ApiProvider (REST)', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      clone: () => ({ text: () => Promise.resolve('{}') }),
+    }));
+  });
+
+  it('provides REST api and useApi returns provider rest', () => {
+    render(
+      <ApiProvider provider="rest" baseUrl="https://api.example.com">
+        <Consumer />
+      </ApiProvider>
+    );
+    expect(screen.getByTestId('provider')).toHaveTextContent('rest');
+  });
+
+  it('get() calls fetch with correct url', async () => {
+    const user = userEvent.setup();
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      clone: () => ({ text: () => Promise.resolve('[]') }),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    render(
+      <ApiProvider provider="rest" baseUrl="https://api.example.com">
+        <Consumer />
+      </ApiProvider>
+    );
+    await user.click(screen.getByRole('button', { name: /get/i }));
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://api.example.com/test',
+      expect.objectContaining({ method: 'GET' })
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('200');
+  });
+
+  it('useApi throws when used outside provider', () => {
+    expect(() => render(<Consumer />)).toThrow('useApi must be used within ApiProvider');
+  });
+});

package/src/contexts/ApiContext.tsx

@@ -0,0 +1,155 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  type ApolloClient as ApolloClientType,
+  type NormalizedCacheObject,
+  type QueryOptions,
+  type MutationOptions,
+  type ApolloQueryResult,
+  type FetchResult,
+  type OperationVariables,
+} from '@apollo/client';
+
+export type ApiContextValue = RestApiContextValue | GraphqlApiContextValue;
+
+/** REST: useApi().get / .post / .put / .delete で LogWindow Network に反映 */
+export type RestApiContextValue = {
+  provider: 'rest';
+  get: (path: string, options?: RequestInit) => Promise<Response>;
+  post: (path: string, body?: BodyInit | Record<string, unknown>, options?: RequestInit) => Promise<Response>;
+  put: (path: string, body?: BodyInit | Record<string, unknown>, options?: RequestInit) => Promise<Response>;
+  delete: (path: string, options?: RequestInit) => Promise<Response>;
+};
+
+/** GraphQL: useApi().ransack (QUERY) / .handing (MUTATION) で LogWindow Network に反映 */
+export type GraphqlApiContextValue = {
+  provider: 'graphql';
+  /** QUERY（戻り値は ApolloQueryResult、必要なら as でキャスト） */
+  ransack: <TData = unknown, TVariables = unknown>(
+    options: QueryOptions<TVariables, TData>
+  ) => Promise<ApolloQueryResult<unknown>>;
+  /** MUTATION（戻り値は FetchResult、必要なら as でキャスト） */
+  handing: <TData = unknown, TVariables = unknown>(
+    options: MutationOptions<TData, TVariables>
+  ) => Promise<FetchResult<unknown>>;
+};
+
+export const ApiContext = createContext<ApiContextValue | null>(null);
+
+export type ApiProviderMode = 'rest' | 'graphql';
+
+type ApiProviderProps =
+  | {
+      provider: 'rest';
+      children: React.ReactNode;
+      baseUrl?: string;
+    }
+  | {
+      provider: 'graphql';
+      children: React.ReactNode;
+      uri?: string;
+      client?: ApolloClientType<NormalizedCacheObject>;
+    };
+
+function createApolloClient(uri: string) {
+  return new ApolloClient({
+    uri,
+    cache: new InMemoryCache(),
+  });
+}
+
+function resolveBody(body?: BodyInit | Record<string, unknown>): BodyInit | undefined {
+  if (body == null) return undefined;
+  if (typeof body === 'string' || body instanceof ArrayBuffer || ArrayBuffer.isView(body) || body instanceof FormData || body instanceof URLSearchParams) {
+    return body;
+  }
+  return JSON.stringify(body);
+}
+
+export function ApiProvider(props: ApiProviderProps) {
+  const { children } = props;
+  const isGraphql = props.provider === 'graphql';
+
+  const graphqlUri = props.provider === 'graphql' ? props.uri : undefined;
+  const graphqlClientProp = props.provider === 'graphql' ? props.client : undefined;
+  const graphqlClient = useMemo(() => {
+    if (!isGraphql) return null;
+    if (graphqlClientProp) return graphqlClientProp;
+    const endpoint =
+      graphqlUri ?? (typeof process !== 'undefined' ? process.env?.GRAPHQL_URI : '');
+    if (!endpoint) {
+      throw new Error(
+        'ApiProvider(provider="graphql") requires either "uri" prop or GRAPHQL_URI environment variable'
+      );
+    }
+    return createApolloClient(endpoint);
+  }, [isGraphql, graphqlUri, graphqlClientProp]);
+
+  const baseUrl = props.provider === 'rest' ? props.baseUrl : undefined;
+  const endpoint =
+    baseUrl ?? (typeof process !== 'undefined' ? process.env?.ENDPOINT_URL : '') ?? '';
+
+  const restValue = useMemo<RestApiContextValue | null>(() => {
+    if (isGraphql) return null;
+    const url = (path: string) => `${endpoint}${path}`;
+    return {
+      provider: 'rest',
+      get: (path, options) => fetch(url(path), { ...options, method: 'GET' }),
+      post: (path, body, options) =>
+        fetch(url(path), {
+          ...options,
+          method: 'POST',
+          body: resolveBody(body),
+          headers:
+            body != null && typeof body === 'object' && !(body instanceof FormData) && !(body instanceof URLSearchParams)
+              ? { 'Content-Type': 'application/json', ...options?.headers }
+              : options?.headers,
+        }),
+      put: (path, body, options) =>
+        fetch(url(path), {
+          ...options,
+          method: 'PUT',
+          body: resolveBody(body),
+          headers:
+            body != null && typeof body === 'object' && !(body instanceof FormData) && !(body instanceof URLSearchParams)
+              ? { 'Content-Type': 'application/json', ...options?.headers }
+              : options?.headers,
+        }),
+      delete: (path, options) => fetch(url(path), { ...options, method: 'DELETE' }),
+    };
+  }, [isGraphql, endpoint]);
+
+  if (isGraphql && graphqlClient) {
+    const graphqlValue: GraphqlApiContextValue = useMemo(
+      () => ({
+        provider: 'graphql',
+        ransack: (options) =>
+          graphqlClient.query(options as QueryOptions<OperationVariables, unknown>),
+        handing: (options) =>
+          graphqlClient.mutate(options as MutationOptions<unknown, OperationVariables>),
+      }),
+      [graphqlClient]
+    );
+    return (
+      <ApolloProvider client={graphqlClient}>
+        <ApiContext.Provider value={graphqlValue}>{children}</ApiContext.Provider>
+      </ApolloProvider>
+    );
+  }
+
+  if (restValue) {
+    return <ApiContext.Provider value={restValue}>{children}</ApiContext.Provider>;
+  }
+
+  return <>{children}</>;
+}
+
+export function useApi(): ApiContextValue {
+  const ctx = useContext(ApiContext);
+  if (!ctx) {
+    throw new Error('useApi must be used within ApiProvider or YargramProvider');
+  }
+  return ctx;
+}

package/src/contexts/PrinterContext.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { PrinterProvider, usePrinter } from './PrinterContext';
+
+function Consumer() {
+  const printer = usePrinter();
+  return (
+    <div>
+      <button type="button" onClick={() => printer.info('info message')}>
+        Info
+      </button>
+      <button type="button" onClick={() => printer.warn('warn message')}>
+        Warn
+      </button>
+      <button type="button" onClick={() => printer.error('error message')}>
+        Error
+      </button>
+    </div>
+  );
+}
+
+describe('PrinterProvider', () => {
+  it('renders children', () => {
+    render(
+      <PrinterProvider>
+        <Consumer />
+      </PrinterProvider>
+    );
+    expect(screen.getByRole('button', { name: /info/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /warn/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /error/i })).toBeInTheDocument();
+  });
+
+  it('usePrinter throws when used outside provider', () => {
+    expect(() => render(<Consumer />)).toThrow('usePrinter must be used within PrinterProvider');
+  });
+});

package/src/contexts/PrinterContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { createPrinter, type Env } from '@yargram/core';
+
+export type Printer = ReturnType<typeof createPrinter>;
+
+type PrinterContextValue = {
+  printer: Printer;
+};
+
+const PrinterContext = createContext<PrinterContextValue | null>(null);
+
+export type PrinterProviderProps = {
+  children: React.ReactNode;
+  env?: Env;
+  /** 指定時は createPrinter(env) の代わりにこの printer を利用（YargramProvider で addLogEntry 連携用） */
+  printer?: Printer;
+};
+
+export function PrinterProvider({ children, env = 'local', printer: printerProp }: PrinterProviderProps) {
+  const defaultPrinter = useMemo(() => createPrinter(env), [env]);
+  const printer = printerProp ?? defaultPrinter;
+  const value = useMemo(() => ({ printer }), [printer]);
+
+  return (
+    <PrinterContext.Provider value={value}>{children}</PrinterContext.Provider>
+  );
+}
+
+export function usePrinter(): Printer {
+  const ctx = useContext(PrinterContext);
+  if (!ctx) {
+    throw new Error('usePrinter must be used within PrinterProvider');
+  }
+  return ctx.printer;
+}

package/src/contexts/YargramContext.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { gql } from '@apollo/client';
+import { YargramProvider, useYargram } from './YargramContext';
+import { usePrinter } from './PrinterContext';
+import { useApi } from './ApiContext';
+
+function DemoContent() {
+  const { openLogWindow } = useYargram();
+  const printer = usePrinter();
+  const api = useApi();
+
+  const addInfo = () => printer.info('Info from usePrinter');
+  const addWarn = () => printer.warn('Warn from usePrinter');
+  const addError = () => printer.error('Error from usePrinter');
+
+  if (api.provider === 'rest') {
+    return (
+      <div style={{ padding: 24, fontFamily: 'sans-serif' }}>
+        <h3>YargramProvider デモ (REST)</h3>
+        <p>Escape キーを 5 回押すとログウィンドウが開きます。</p>
+        <p style={{ fontSize: 12, color: '#666', marginTop: 8 }}>
+          usePrinter().info / warn / error → Log タブ。useApi().get / post / put / delete → Network タブに反映。
+        </p>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 16 }}>
+          <button type="button" onClick={addInfo}>Log: Info</button>
+          <button type="button" onClick={addWarn}>Log: Warn</button>
+          <button type="button" onClick={addError}>Log: Error</button>
+          <button type="button" onClick={() => api.get('/posts').then((res) => printer.info(`Response: ${res.status} ${res.statusText}`)).catch((err) => printer.error(`Error: ${err.message}`))}>
+            Network: GET /posts
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              api
+                .post('/posts', { title: 'Storybook post', body: 'Body from demo', userId: 1 })
+                .then((res) => printer.info(`Response: ${res.status} ${res.statusText}`))
+                .catch((err) => printer.error(`Error: ${err.message}`))
+            }
+          >
+            Network: POST /posts
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              api
+                .put('/posts/1', { id: 1, title: 'Updated title', body: 'Updated body', userId: 1 })
+                .then((res) => printer.info(`Response: ${res.status} ${res.statusText}`))
+                .catch((err) => printer.error(`Error: ${err.message}`))
+            }
+          >
+            Network: PUT /posts/1
+          </button>
+          <button type="button" onClick={() => api.delete('/posts/1').then((res) => printer.info(`Response: ${res.status} ${res.statusText}`)).catch(() => {})}>
+            Network: DELETE /posts/1
+          </button>
+          <button type="button" onClick={openLogWindow}>ログウィンドウを開く</button>
+        </div>
+      </div>
+    );
+  }
+
+  const runQuery = () => {
+    api
+      .ransack({
+        query: gql`
+          query GetUser { user(id: "1") { id name } }
+        `,
+      })
+      .catch((err) => printer.error(`Error: ${err.message}`));
+  };
+  const runMutation = () => {
+    api
+      .handing({
+        mutation: gql`
+          mutation UpdateUser { updateUser(id: "1", name: "x") { id name } }
+        `,
+      })
+      .catch((err) => printer.error(`Error: ${err.message}`));
+  };
+
+  return (
+    <div style={{ padding: 24, fontFamily: 'sans-serif' }}>
+      <h3>YargramProvider デモ (GraphQL)</h3>
+      <p>useApi().ransack (QUERY) / .handing (MUTATION) で Network タブに反映。</p>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 16 }}>
+        <button type="button" onClick={addInfo}>Log: Info</button>
+        <button type="button" onClick={runQuery}>Network: ransack (QUERY)</button>
+        <button type="button" onClick={runMutation}>Network: handing (MUTATION)</button>
+        <button type="button" onClick={openLogWindow}>ログウィンドウを開く</button>
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof YargramProvider> = {
+  title: 'Contexts/YargramProvider',
+  component: YargramProvider,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof YargramProvider>;
+
+/** Api (REST) + Printer + LogWindow（Escape 5回で表示）。REST は JSONPlaceholder /posts を使用 */
+export const Default: Story = {
+  render: () => (
+    <YargramProvider
+      api={{ provider: 'rest', baseUrl: 'https://jsonplaceholder.typicode.com' }}
+      printer={{ env: 'local' }}
+      logWindow={{}}
+    >
+      <DemoContent />
+    </YargramProvider>
+  ),
+};
+
+/**
+ * 本番時のみ認証（auth: true）。
+ * storybookSimulateProduction: true で Storybook 内だけ本番扱いし、ログイン画面を表示。
+ * 本番ビルド時は NODE_ENV=production で同様にログイン要求。
+ */
+export const WithAuthProductionOnly: Story = {
+  render: () => (
+    <YargramProvider
+      api={{ provider: 'rest', baseUrl: 'https://jsonplaceholder.typicode.com' }}
+      printer={{ env: 'local' }}
+      logWindow={{}}
+      auth={{ storybookSimulateProduction: true }}
+    >
+      <DemoContent />
+    </YargramProvider>
+  ),
+};
+
+/** GraphQL: useApi().ransack (QUERY) / .handing (MUTATION) → Network */
+export const GraphQL: Story = {
+  render: () => (
+    <YargramProvider
+      api={{ provider: 'graphql', uri: 'https://api.example.com/graphql' }}
+      printer={{ env: 'local' }}
+      logWindow={{}}
+    >
+      <DemoContent />
+    </YargramProvider>
+  ),
+};

package/src/contexts/YargramContext.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { YargramProvider, useYargram } from './YargramContext';
+import { usePrinter } from './PrinterContext';
+import { useApi } from './ApiContext';
+
+vi.mock('react-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-dom')>('react-dom');
+  return {
+    ...actual,
+    createPortal: (children: React.ReactNode) => children,
+  };
+});
+
+function Consumer() {
+  const yargram = useYargram();
+  const printer = usePrinter();
+  const api = useApi();
+  return (
+    <div>
+      <span data-testid="is-open">{String(yargram.isLogWindowOpen)}</span>
+      <span data-testid="log-entries-count">{yargram.logEntries.length}</span>
+      <button type="button" onClick={yargram.openLogWindow}>
+        Open
+      </button>
+      <button type="button" onClick={yargram.closeLogWindow} data-testid="close-log-window-btn">
+        Close
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          printer.info('hello');
+          yargram.addLogEntry({ level: 'info', message: 'manual', source: 'test' });
+        }}
+      >
+        Add log
+      </button>
+    </div>
+  );
+}
+
+describe('YargramProvider', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, status: 200, statusText: 'OK', clone: () => ({ text: () => Promise.resolve('{}') }) }));
+  });
+
+  it('renders children and provides useYargram', () => {
+    render(
+      <YargramProvider
+        api={{ provider: 'rest', baseUrl: 'https://api.example.com' }}
+        logWindow={{}}
+      >
+        <Consumer />
+      </YargramProvider>
+    );
+    expect(screen.getByTestId('is-open')).toHaveTextContent('false');
+    expect(screen.getByTestId('log-entries-count')).toHaveTextContent('0');
+  });
+
+  it('openLogWindow sets isLogWindowOpen to true', async () => {
+    const user = userEvent.setup();
+    render(
+      <YargramProvider
+        api={{ provider: 'rest', baseUrl: 'https://api.example.com' }}
+        logWindow={{}}
+      >
+        <Consumer />
+      </YargramProvider>
+    );
+    await user.click(screen.getByRole('button', { name: /open/i }));
+    expect(screen.getByTestId('is-open')).toHaveTextContent('true');
+  });
+
+  it('addLogEntry adds to logEntries', async () => {
+    const user = userEvent.setup();
+    render(
+      <YargramProvider
+        api={{ provider: 'rest', baseUrl: 'https://api.example.com' }}
+        logWindow={{}}
+      >
+        <Consumer />
+      </YargramProvider>
+    );
+    expect(screen.getByTestId('log-entries-count')).toHaveTextContent('0');
+    await user.click(screen.getByRole('button', { name: /add log/i }));
+    expect(screen.getByTestId('log-entries-count')).toHaveTextContent('2');
+  });
+
+  it('closeLogWindow sets isLogWindowOpen to false', async () => {
+    const user = userEvent.setup();
+    render(
+      <YargramProvider
+        api={{ provider: 'rest', baseUrl: 'https://api.example.com' }}
+        logWindow={{}}
+      >
+        <Consumer />
+      </YargramProvider>
+    );
+    await user.click(screen.getByRole('button', { name: /open/i }));
+    expect(screen.getByTestId('is-open')).toHaveTextContent('true');
+    await user.click(screen.getByTestId('close-log-window-btn'));
+    expect(screen.getByTestId('is-open')).toHaveTextContent('false');
+  });
+});