@godxjp/ui 31.31.8 → 32.0.1

package/docs/query/data-state.tsx

@@ -1,262 +0,0 @@
-import { useState } from "react";
-import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  EmptyState,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { SkeletonTable } from "@godxjp/ui/feedback";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { AuthExpiryProvider, DataState } from "@godxjp/ui/query";
-
-/**
- * DataState · drives skeleton / error / empty / success for ONE useQuery block.
- * It IS the conditional; never branch on isPending/isError yourself. Composed
- * only from real @godxjp/ui components + @tanstack/react-query.
- */
-const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-
-type Invoice = { id: string; partner: string; status: "active" | "pending" };
-
-const invoices: Invoice[] = [
-  { id: "INV-0312", partner: "株式会社ベトヤ", status: "active" },
-  { id: "INV-0311", partner: "ハノイ物流", status: "pending" },
-];
-
-const columns: ColumnDef<Invoice>[] = [
-  { key: "id", header: "請求書番号" },
-  { key: "partner", header: "取引先" },
-  { key: "status", header: "状態", render: (row) => <Badge status={row.status} /> },
-];
-
-function SuccessBlock() {
-  const query = useQuery({ queryKey: ["ds-success"], queryFn: async () => invoices });
-  return (
-    <DataState
-      query={query}
-      skeleton={<SkeletonTable />}
-      isEmpty={(d) => d.length === 0}
-      empty={<EmptyState title="データがありません" />}
-    >
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
-  );
-}
-
-/** Loads for 2s and comes back empty — the whole lifecycle: skeleton → EmptyState. */
-const LOAD_MS = 2000;
-
-function LoadingBlock() {
-  const client = useQueryClient();
-  const query = useQuery({
-    queryKey: ["ds-loading"],
-    queryFn: () => new Promise<Invoice[]>((resolve) => setTimeout(() => resolve([]), LOAD_MS)),
-  });
-  return (
-    <Flex direction="col" gap="sm">
-      <DataState
-        query={query}
-        skeleton={<SkeletonTable rows={4} columns={3} />}
-        isEmpty={(d) => d.length === 0}
-        empty={<EmptyState title="No invoices" description="No invoice matches the filter." />}
-      >
-        {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-      </DataState>
-      {/* resetQueries puts the query back to pending, so the skeleton plays again. */}
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => void client.resetQueries({ queryKey: ["ds-loading"] })}
-      >
-        Load again
-      </Button>
-    </Flex>
-  );
-}
-
-function ErrorBlock() {
-  const query = useQuery<Invoice[]>({
-    queryKey: ["ds-error"],
-    queryFn: async () => {
-      throw new Error("サーバーエラー (503) · 取得に失敗しました");
-    },
-  });
-  return (
-    <DataState query={query} skeleton={<SkeletonTable />}>
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
-  );
-}
-
-function PrerequisiteBlock() {
-  // A tenant-scoped query stays disabled until an organization is selected (`enabled:false`).
-  // It reads as pending with fetchStatus "idle" — DataState shows the prerequisite, not a skeleton.
-  const query = useQuery<Invoice[]>({
-    queryKey: ["ds-prerequisite"],
-    queryFn: async () => invoices,
-    enabled: false,
-  });
-  return (
-    <DataState
-      query={query}
-      skeleton={<SkeletonTable />}
-      prerequisite={
-        <EmptyState
-          title="組織を選択してください"
-          description="表示するデータを絞り込むために組織を選択してください。"
-        />
-      }
-    >
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
-  );
-}
-
-function ExpiredSessionQuery({ queryKey }: { queryKey: string }) {
-  const query = useQuery<Invoice[]>({
-    queryKey: [queryKey],
-    queryFn: async () => {
-      throw Object.assign(new Error("Access token expired"), { status: 401 });
-    },
-  });
-  return (
-    <DataState query={query} skeleton={<SkeletonTable rows={3} />}>
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
-  );
-}
-
-function AuthExpiryBlock() {
-  // The app root owns session expiry (gh#1022). A real app redirects to the IdP here:
-  //   window.location.assign(`/auth/login?return_to=${encodeURIComponent(location.href)}`)
-  // Two queries 401 at once — the handler still runs exactly once, and no alert is painted.
-  const [calls, setCalls] = useState(0);
-  return (
-    <AuthExpiryProvider onAuthExpired={() => setCalls((n) => n + 1)}>
-      <Flex direction="col" gap="md">
-        <Text size="sm" tone="muted">
-          onAuthExpired calls: {calls}
-        </Text>
-        <ExpiredSessionQuery queryKey="ds-auth-expiry-a" />
-        <ExpiredSessionQuery queryKey="ds-auth-expiry-b" />
-      </Flex>
-    </AuthExpiryProvider>
-  );
-}
-
-function AuthErrorBlock() {
-  // Without an AuthExpiryProvider: the proportionate fallback — a neutral sign-in prompt.
-  const query = useQuery<Invoice[]>({
-    queryKey: ["ds-auth-error"],
-    queryFn: async () => {
-      throw new Error("Access token invalid");
-    },
-  });
-  return (
-    <DataState
-      query={query}
-      skeleton={<SkeletonTable />}
-      onAuthError={() => window.location.assign("/login")}
-    >
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
-  );
-}
-
-export default function Demo() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <PageContainer
-        title="DataState"
-        subtitle="useQuery lifecycle · skeleton / error / empty / success in one widget"
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Success</CardTitle>
-              <CardDescription>
-                Resolved data renders through the children function.
-              </CardDescription>
-            </CardHeader>
-            <CardContent flush>
-              <SuccessBlock />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Loading → empty</CardTitle>
-              <CardDescription>
-                The skeleton (animated) renders while pending; when the data arrives empty the
-                skeleton goes away and the `empty` slot renders.
-              </CardDescription>
-            </CardHeader>
-            <CardContent flush>
-              <LoadingBlock />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Prerequisite (disabled query)</CardTitle>
-              <CardDescription>
-                An `enabled:false` query is unstarted, not loading. The prerequisite slot renders
-                instead of an endless skeleton.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <PrerequisiteBlock />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Error · transient (retry)</CardTitle>
-              <CardDescription>
-                A 5xx/network failure is retryable, so AlertQueryError offers Retry automatically.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <ErrorBlock />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Session expired · AuthExpiryProvider (recommended)</CardTitle>
-              <CardDescription>
-                Mount `AuthExpiryProvider` once at the app root. A 401 calls `onAuthExpired`
-                automatically, once for any number of simultaneous 401s, while each DataState keeps
-                its skeleton and announces the redirect to sign-in through a live region.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <AuthExpiryBlock />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Session expired · fallback without a provider</CardTitle>
-              <CardDescription>
-                Without a provider a 401 renders a neutral, width-capped sign-in prompt whose button
-                calls `onAuthError`. It never offers a blind retry or shows the raw token message.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <AuthErrorBlock />
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </QueryClientProvider>
-  );
-}

package/docs/query/infinite-query-state.tsx

@@ -1,97 +0,0 @@
-import { QueryClient, QueryClientProvider, useInfiniteQuery } from "@tanstack/react-query";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  EmptyState,
-  Timeline,
-  type TimelineItem,
-} from "@godxjp/ui/data-display";
-import { SkeletonTable } from "@godxjp/ui/feedback";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { InfiniteQueryState, flattenItemPages } from "@godxjp/ui/query";
-
-/**
- * InfiniteQueryState · useInfiniteQuery widget: flattens pages, renders the
- * skeleton/empty/error states, and a built-in load-more footer. Use
- * flattenItemPages for `{ items }` pages. Composed from real @godxjp/ui +
- * @tanstack/react-query.
- */
-const queryClient = new QueryClient();
-
-type Activity = { id: string; text: string; actor: string; time: string };
-const feed: Activity[] = [
-  { id: "a1", text: "請求書 INV-0312 を承認", actor: "経理 田中", time: "10:24" },
-  { id: "a2", text: "仕訳 #2024-0312 を作成", actor: "システム", time: "10:20" },
-  { id: "a3", text: "請求書 INV-0312 を発行", actor: "営業 グエン", time: "09:50" },
-  { id: "a4", text: "受注 ORD-0455 を登録", actor: "営業 グエン", time: "09:30" },
-  { id: "a5", text: "取引先 BTY-0012 を更新", actor: "管理 佐藤", time: "09:10" },
-];
-
-const PAGE = 3;
-
-function Block() {
-  const query = useInfiniteQuery({
-    queryKey: ["activity-feed"],
-    queryFn: async ({ pageParam }) => {
-      const start = pageParam;
-      return {
-        items: feed.slice(start, start + PAGE),
-        nextCursor: start + PAGE < feed.length ? start + PAGE : null,
-      };
-    },
-    initialPageParam: 0,
-    getNextPageParam: (last) => last.nextCursor,
-  });
-
-  return (
-    <InfiniteQueryState<{ items: Activity[]; nextCursor: number | null }, Activity[]>
-      query={query}
-      skeleton={<SkeletonTable />}
-      flatten={flattenItemPages}
-      isEmpty={(items) => items.length === 0}
-      empty={<EmptyState title="アクティビティがありません" />}
-      loadMoreLabel="Show older activity"
-    >
-      {(items) => (
-        <Timeline
-          items={items.map<TimelineItem>((a, i) => ({
-            title: a.text,
-            location: a.actor,
-            time: a.time,
-            current: i === 0,
-          }))}
-        />
-      )}
-    </InfiniteQueryState>
-  );
-}
-
-export default function Demo() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <PageContainer
-        title="InfiniteQueryState"
-        subtitle="useInfiniteQuery · flatten pages + load-more footer"
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>アクティビティ</CardTitle>
-              <CardDescription>
-                Click “Show older activity” to append the next page. loadMoreLabel renames the
-                built-in button; its pending state stays the component&apos;s.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Block />
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </QueryClientProvider>
-  );
-}

package/docs/query/mutation-feedback.tsx

@@ -1,128 +0,0 @@
-import { useEffect } from "react";
-
-import { QueryClient, QueryClientProvider, useMutation } from "@tanstack/react-query";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Input } from "@godxjp/ui/data-entry";
-import { FormFieldControl, FormRoot, useZodForm } from "@godxjp/ui/form";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { AlertMutationFeedback } from "@godxjp/ui/query";
-import { z } from "zod";
-
-/**
- * AlertMutationFeedback · inline mutation error below a form's submit. Renders
- * NOTHING while idle/successful; surfaces the error + a retry when useMutation
- * fails. Composed from real @godxjp/ui + @tanstack/react-query. (This demo fires
- * the mutation once on mount so the error state is visible.) Inside a FormRoot
- * that received `errors`, a 400/422 validation error is skipped by default —
- * the fields already show the bag — while a 5xx still renders the alert.
- */
-const queryClient = new QueryClient();
-
-function Block() {
-  const mutation = useMutation({
-    mutationFn: async () => {
-      throw new Error("保存に失敗しました (422) · 取引先コードが重複しています");
-    },
-  });
-
-  useEffect(() => {
-    mutation.mutate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>取引先の登録</CardTitle>
-        <CardDescription>The feedback sits between the form and the submit button.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Flex direction="col" gap="md">
-          <FormField id="code" label="取引先コード">
-            <Input id="code" defaultValue="BTY-0012" />
-          </FormField>
-          <AlertMutationFeedback mutation={mutation} onRetry={() => mutation.mutate()} />
-          <Flex direction="row" wrap justify="end" gap="sm">
-            <Button variant="outline" type="button">
-              キャンセル
-            </Button>
-            <Button type="submit" disabled={mutation.isPending} onClick={() => mutation.mutate()}>
-              保存
-            </Button>
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-type SaveError = Error & { status: number; errors?: Record<string, string[]> };
-
-function saveError(status: number, message: string, errors?: Record<string, string[]>) {
-  return Object.assign(new Error(message), { status, errors }) as SaveError;
-}
-
-const schema = z.object({ code: z.string() });
-
-function InFormBlock() {
-  const form = useZodForm(schema, { defaultValues: { code: "BTY-0012" } });
-  const mutation = useMutation<void, SaveError, number>({
-    mutationFn: async (status) => {
-      throw status === 422
-        ? saveError(422, "The given data was invalid.", {
-            code: ["取引先コードが重複しています"],
-          })
-        : saveError(500, "サーバーエラーが発生しました (500)");
-    },
-  });
-
-  useEffect(() => {
-    mutation.mutate(422);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>取引先の登録 · FormRoot errors</CardTitle>
-        <CardDescription>
-          A 422 shows on the field only; a 500 still renders the alert.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FormRoot form={form} errors={mutation.error?.errors} onSubmit={() => mutation.mutate(422)}>
-          <FormFieldControl name="code" label="取引先コード">
-            {(field) => <Input {...field} value={String(field.value ?? "")} />}
-          </FormFieldControl>
-          <AlertMutationFeedback mutation={mutation} onRetry={() => mutation.mutate(500)} />
-          <Flex direction="row" wrap justify="end" gap="sm">
-            <Button variant="outline" type="button" onClick={() => mutation.mutate(500)}>
-              500 を再現
-            </Button>
-            <Button type="submit" loading={mutation.isPending}>
-              保存
-            </Button>
-          </Flex>
-        </FormRoot>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function Demo() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <PageContainer
-        title="AlertMutationFeedback"
-        subtitle="Inline useMutation error + retry, below a submit button"
-      >
-        <Flex direction="col" gap="lg">
-          <Block />
-          <InFormBlock />
-        </Flex>
-      </PageContainer>
-    </QueryClientProvider>
-  );
-}

package/docs/query/touch-actions.tsx

@@ -1,68 +0,0 @@
-import { useState } from "react";
-import {
-  AlertMutationFeedback,
-  ButtonRefetch,
-  DataState,
-  InfiniteQueryState,
-} from "@godxjp/ui/query";
-import { PageContainer } from "@godxjp/ui/layout";
-
-export default function Demo() {
-  const [retry, setRetry] = useState(0);
-  const [more, setMore] = useState(0);
-  const [mutation, setMutation] = useState(0);
-  const [refresh, setRefresh] = useState(0);
-  const errorQuery = {
-    isPending: false,
-    isError: true,
-    isFetching: false,
-    error: new Error("503 Service unavailable"),
-    refetch: async () => ({}),
-  } as never;
-  const infinite = {
-    isPending: false,
-    isError: false,
-    isFetching: false,
-    isFetchingNextPage: false,
-    data: { pages: [{ items: ["one"] }], pageParams: [0] },
-    hasNextPage: true,
-    fetchNextPage: async () => {
-      setMore((n) => n + 1);
-      return {} as never;
-    },
-  } as never;
-  return (
-    <PageContainer title="Query touch actions">
-      <DataState query={errorQuery} skeleton={null} onRetry={() => setRetry((n) => n + 1)}>
-        {() => null}
-      </DataState>
-      <output aria-label="Retry result">{retry}</output>
-      <InfiniteQueryState
-        query={infinite}
-        skeleton={null}
-        flatten={(data: { pages: { items: string[] }[] }) => data.pages.flatMap((p) => p.items)}
-      >
-        {() => null}
-      </InfiniteQueryState>
-      <output aria-label="Load more result">{more}</output>
-      <AlertMutationFeedback
-        mutation={{ isPending: false, isError: true, error: new Error("503") } as never}
-        onRetry={() => setMutation((n) => n + 1)}
-      />
-      <output aria-label="Mutation result">{mutation}</output>
-      <ButtonRefetch
-        query={
-          {
-            isFetching: false,
-            refetch: async () => {
-              setRefresh((n) => n + 1);
-              return {} as never;
-            },
-          } as never
-        }
-        label="Refresh touch"
-      />
-      <output aria-label="Refresh result">{refresh}</output>
-    </PageContainer>
-  );
-}