@godxjp/ui 19.1.0 → 19.3.1

package/docs/providers/format-date.tsx

@@ -0,0 +1,230 @@
+import { AppProvider } from "@godxjp/ui/app";
+import { formatDate } from "@godxjp/ui/datetime";
+import { Text } from "@godxjp/ui/general";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Descriptions,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * formatDate · MANDATORY date/time display function from @godxjp/ui/datetime.
+ * Reads locale, timezone, dateFormat, and timeFormat from AppProvider context.
+ * NEVER call date-fns or Intl.DateTimeFormat directly; use formatDate instead.
+ * Composed only from real @godxjp/ui components. All inputs are fixed ISO strings.
+ */
+
+const ISO_DATE = "2024-04-12";
+const ISO_DATETIME = "2024-04-12T09:30:00+09:00";
+const HH_MM = "09:30";
+const PAST_DATETIME = "2024-01-15T14:45:00+09:00";
+const NULL_VALUE = null;
+
+export default function Demo() {
+  return (
+    <AppProvider
+      defaultLocale="ja"
+      defaultTimezone="Asia/Tokyo"
+      defaultDateFormat="iso"
+      defaultTimeFormat="24h"
+      persist={false}
+    >
+      <PageContainer
+        title="formatDate"
+        subtitle="日付・時刻・相対表示の統一フォーマット関数 · AppProvider コンテキストを自動参照"
+      >
+        <Flex direction="col" gap="lg">
+          {/* Overview */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>概要</CardTitle>
+              <CardDescription>
+                formatDate は @godxjp/ui/datetime からインポートする関数。 AppProvider の locale /
+                timezone / dateFormat / timeFormat を読み取り、 null / undefined を渡すと em-dash
+                (&mdash;) を返す。 date-fns や Intl.DateTimeFormat を直接呼ばないこと。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Text as="p" tone="muted">
+                このデモは{" "}
+                <Text as="code" mono size="xs">
+                  defaultLocale=&quot;ja&quot; defaultTimezone=&quot;Asia/Tokyo&quot;
+                  defaultDateFormat=&quot;iso&quot; defaultTimeFormat=&quot;24h&quot;
+                </Text>{" "}
+                の AppProvider でラップされている。
+              </Text>
+            </CardContent>
+          </Card>
+
+          {/* kind: "date" */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>kind: &quot;date&quot; · 日付のみ</CardTitle>
+              <CardDescription>
+                ISO yyyy-MM-dd を渡すと auto で &quot;date&quot; と判定されるが、 kind:
+                &quot;date&quot; を明示すると ISO datetime 文字列でも日付部分だけを表示できる。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions columns={2}>
+                <Descriptions.Item label="入力値" mono>
+                  {ISO_DATE}
+                </Descriptions.Item>
+                <Descriptions.Item label="kind">&quot;date&quot;</Descriptions.Item>
+                <Descriptions.Item label="出力" mono span={2}>
+                  {formatDate(ISO_DATE, { kind: "date" })}
+                </Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+          </Card>
+
+          {/* kind: "time" */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>kind: &quot;time&quot; · 時刻のみ</CardTitle>
+              <CardDescription>
+                HH:mm 文字列は auto-detection で &quot;time&quot; と判定される。 AppProvider の
+                timeFormat (24h / 12h) に従い出力が切り替わる。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions columns={2}>
+                <Descriptions.Item label="入力値" mono>
+                  {HH_MM}
+                </Descriptions.Item>
+                <Descriptions.Item label="kind">&quot;time&quot;</Descriptions.Item>
+                <Descriptions.Item label="出力 (24h)" mono span={2}>
+                  {formatDate(HH_MM, { kind: "time" })}
+                </Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+          </Card>
+
+          {/* kind: "datetime" */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>kind: &quot;datetime&quot; · 日時</CardTitle>
+              <CardDescription>
+                ISO datetime 文字列を渡すと auto-detection で &quot;datetime&quot; と判定される。
+                取引タイムスタンプや更新日時の表示に使用する。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions columns={2}>
+                <Descriptions.Item label="入力値" mono span={2}>
+                  {ISO_DATETIME}
+                </Descriptions.Item>
+                <Descriptions.Item label="kind">&quot;datetime&quot;</Descriptions.Item>
+                <Descriptions.Item label="出力" mono>
+                  {formatDate(ISO_DATETIME, { kind: "datetime" })}
+                </Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+          </Card>
+
+          {/* kind: "long" */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>kind: &quot;long&quot; · 長形式 (PPP)</CardTitle>
+              <CardDescription>
+                モーダルや詳細パネルで年月日を読みやすく表示するときに使う。
+                ロケールに合わせた月名や曜日を含む完全形式で出力される。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions columns={2}>
+                <Descriptions.Item label="入力値" mono>
+                  {ISO_DATE}
+                </Descriptions.Item>
+                <Descriptions.Item label="kind">&quot;long&quot;</Descriptions.Item>
+                <Descriptions.Item label="出力" mono span={2}>
+                  {formatDate(ISO_DATE, { kind: "long" })}
+                </Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+          </Card>
+
+          {/* kind: "relative" */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>kind: &quot;relative&quot; · 相対表示</CardTitle>
+              <CardDescription>
+                アクティビティフィードや監査ログで &quot;3日前&quot; のような相対表現を出力する。
+                ロケールに応じた文字列 (ja: &quot;3日前&quot; / en: &quot;3 days ago&quot;) になる。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions columns={2}>
+                <Descriptions.Item label="入力値" mono span={2}>
+                  {PAST_DATETIME}
+                </Descriptions.Item>
+                <Descriptions.Item label="kind">&quot;relative&quot;</Descriptions.Item>
+                <Descriptions.Item label="出力" mono>
+                  {formatDate(PAST_DATETIME, { kind: "relative" })}
+                </Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+          </Card>
+
+          {/* null / undefined handling */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>null / undefined · em-dash フォールバック</CardTitle>
+              <CardDescription>
+                null / undefined / 空文字を渡すと em-dash (&mdash;) を返す。
+                呼び出し前に三項演算子でガードする必要はない。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions columns={2}>
+                <Descriptions.Item label="入力値" mono>
+                  null
+                </Descriptions.Item>
+                <Descriptions.Item label="kind">(省略)</Descriptions.Item>
+                <Descriptions.Item label="出力" mono span={2}>
+                  {formatDate(NULL_VALUE)}
+                </Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+          </Card>
+
+          {/* Summary table */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>kind オプション一覧</CardTitle>
+              <CardDescription>
+                各 kind と対応する入力・出力の早見表。auto は入力値の形式から自動判定する。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions columns={3}>
+                <Descriptions.Item label='kind: "date"' mono>
+                  {formatDate(ISO_DATE, { kind: "date" })}
+                </Descriptions.Item>
+                <Descriptions.Item label='kind: "time"' mono>
+                  {formatDate(HH_MM, { kind: "time" })}
+                </Descriptions.Item>
+                <Descriptions.Item label='kind: "datetime"' mono>
+                  {formatDate(ISO_DATETIME, { kind: "datetime" })}
+                </Descriptions.Item>
+                <Descriptions.Item label='kind: "long"' mono>
+                  {formatDate(ISO_DATE, { kind: "long" })}
+                </Descriptions.Item>
+                <Descriptions.Item label='kind: "relative"' mono>
+                  {formatDate(PAST_DATETIME, { kind: "relative" })}
+                </Descriptions.Item>
+                <Descriptions.Item label='kind: "auto" (省略時)' mono>
+                  {formatDate(ISO_DATE)}
+                </Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppProvider>
+  );
+}

package/docs/query/button-refetch.tsx

@@ -0,0 +1,160 @@
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+
+import {
+  Badge,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { ButtonRefetch } from "@godxjp/ui/query";
+
+/**
+ * ButtonRefetch · a Refresh button wired directly to a useQuery result: it spins
+ * and auto-disables while query.isFetching and calls query.refetch() on click.
+ * Never pass onClick/disabled yourself. Composed from real @godxjp/ui +
+ * @tanstack/react-query.
+ */
+const queryClient = new QueryClient();
+
+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} /> },
+];
+
+/** Each card owns its own query so the matrices never refetch in lockstep. */
+function useInvoiceQuery(key: string) {
+  return useQuery({ queryKey: [key], queryFn: async () => invoices });
+}
+
+function Block() {
+  const query = useInvoiceQuery("br-invoices");
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>請求書 一覧</CardTitle>
+        <CardDescription>The header Refresh button is bound to the query.</CardDescription>
+        <CardAction>
+          <ButtonRefetch query={query} label="更新" />
+        </CardAction>
+      </CardHeader>
+      <CardContent flush>
+        <DataTable
+          data={query.data ?? []}
+          columns={columns}
+          getRowId={(r) => r.id}
+          loading={query.isPending}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+function VariantBlock() {
+  const query = useInvoiceQuery("br-variants");
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>variant</CardTitle>
+        <CardDescription>
+          Button の構造バリアントをそのまま受け取る。既定は outline · ページヘッダーでは outline か
+          ghost を使い、default は主要操作のために空けておく。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Flex direction="row" gap="sm" wrap>
+          <ButtonRefetch query={query} variant="default" label="default" />
+          <ButtonRefetch query={query} variant="secondary" label="secondary" />
+          <ButtonRefetch query={query} variant="outline" label="outline" />
+          <ButtonRefetch query={query} variant="dashed" label="dashed" />
+          <ButtonRefetch query={query} variant="ghost" label="ghost" />
+          <ButtonRefetch query={query} variant="destructive" label="destructive" />
+          <ButtonRefetch query={query} variant="link" label="link" />
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+function SizeBlock() {
+  const query = useInvoiceQuery("br-sizes");
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>size</CardTitle>
+        <CardDescription>
+          テキスト付きの 5 段階と、正方形のアイコンのみ 4 段階。アイコンのみの場合は label
+          を外し、aria-label で名前を与える。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Flex direction="col" gap="md">
+          <Flex direction="row" gap="sm" wrap>
+            <ButtonRefetch query={query} size="xs" label="xs" />
+            <ButtonRefetch query={query} size="sm" label="sm" />
+            <ButtonRefetch query={query} size="md" label="md" />
+            <ButtonRefetch query={query} size="default" label="default" />
+            <ButtonRefetch query={query} size="lg" label="lg" />
+          </Flex>
+          <Flex direction="row" gap="sm" wrap>
+            <ButtonRefetch query={query} size="icon-xs" label={null} aria-label="更新 icon-xs" />
+            <ButtonRefetch query={query} size="icon-sm" label={null} aria-label="更新 icon-sm" />
+            <ButtonRefetch query={query} size="icon" label={null} aria-label="更新 icon" />
+            <ButtonRefetch query={query} size="icon-lg" label={null} aria-label="更新 icon-lg" />
+          </Flex>
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ShapeBlock() {
+  const query = useInvoiceQuery("br-shapes");
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>shape</CardTitle>
+        <CardDescription>
+          角の形状。既定は制御半径 · pill は完全な丸み · sharp は直角で、隣接するツールバーの
+          角に合わせる。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Flex direction="row" gap="sm" wrap>
+          <ButtonRefetch query={query} shape="default" label="default" />
+          <ButtonRefetch query={query} shape="pill" label="pill" />
+          <ButtonRefetch query={query} shape="sharp" label="sharp" />
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function Demo() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PageContainer
+        title="ButtonRefetch"
+        subtitle="Refresh button bound to a useQuery · spins while fetching"
+      >
+        <Flex direction="col" gap="lg">
+          <Block />
+          <VariantBlock />
+          <SizeBlock />
+          <ShapeBlock />
+        </Flex>
+      </PageContainer>
+    </QueryClientProvider>
+  );
+}

package/docs/query/data-state.tsx

@@ -0,0 +1,192 @@
+import { QueryClient, QueryClientProvider, useQuery } 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 { Flex, PageContainer } from "@godxjp/ui/layout";
+import { 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>
+  );
+}
+
+function LoadingBlock() {
+  const query = useQuery({
+    queryKey: ["ds-loading"],
+    queryFn: () => new Promise<Invoice[]>(() => {}),
+  });
+  return (
+    <DataState query={query} skeleton={<SkeletonTable />}>
+      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+    </DataState>
+  );
+}
+
+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 AuthErrorBlock() {
+  // A 401 / expired token never resolves by retrying — DataState offers session renewal instead.
+  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 (skeleton)</CardTitle>
+              <CardDescription>The skeleton prop renders during the pending phase.</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}>Error · auth (session renewal)</CardTitle>
+              <CardDescription>
+                A 401 / expired token routes to session renewal via `onAuthError`, never a blind
+                retry, and never surfaces the raw token message.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AuthErrorBlock />
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </QueryClientProvider>
+  );
+}

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

@@ -0,0 +1,93 @@
+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="アクティビティがありません" />}
+    >
+      {(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 「もっと見る」 to append the next page.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Block />
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </QueryClientProvider>
+  );
+}