[Storybook]: Add react-query-devtools to all stories.

Author: zolex

src/stories/Basic.stories.tsx

@@ -3,13 +3,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 import { HydraAdmin, type HydraAdminProps } from '../hydra';
 import { OpenApiAdmin } from '../openapi';
+import DevtoolsLayout from './layout/DevtoolsLayout';
 
 /**
  * # Basic `<HydraAdmin>` component
  * The `<HydraAdmin>` component without any parameter.
  */
 const Basic = ({ entrypoint }: BasicProps) => (
-  <HydraAdmin entrypoint={entrypoint} />
+  <HydraAdmin entrypoint={entrypoint} layout={DevtoolsLayout} />
 );
 
 interface BasicProps extends Pick<HydraAdminProps, 'entrypoint'> {}

src/stories/Basic.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { HydraAdmin, type HydraAdminProps } from '../hydra';
+import DevtoolsLayout from './layout/DevtoolsLayout';
 
 /**
  * # Basic `<HydraAdmin>` component
  * The `<HydraAdmin>` component without any parameter.
  */
 const Basic = ({ entrypoint }: BasicProps) => (
-  <HydraAdmin entrypoint={entrypoint} />
+  <HydraAdmin entrypoint={entrypoint} layout={DevtoolsLayout} />
 );
 
 export default Basic;

src/stories/auth/Admin.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { HydraAdmin, type HydraAdminProps } from '../../hydra';
 import authProvider from './basicAuth';
+import DevtoolsLayout from '../layout/DevtoolsLayout';
 
 /**
  * # Protected `<HydraAdmin>`
@@ -9,7 +10,12 @@ import authProvider from './basicAuth';
  * Login with: john/123
  */
 const Admin = ({ entrypoint }: JwtAuthProps) => (
-  <HydraAdmin entrypoint={entrypoint} authProvider={authProvider} requireAuth />
+  <HydraAdmin
+    entrypoint={entrypoint}
+    authProvider={authProvider}
+    requireAuth
+    layout={DevtoolsLayout}
+  />
 );
 
 export default Admin;

src/stories/custom/AdvancedCustomization.stories.tsx

@@ -10,7 +10,6 @@ import {
   DateField,
   Edit,
   Labeled,
-  Layout,
   List,
   NumberField,
   ReferenceArrayField,
@@ -34,6 +33,7 @@ import ResourceGuesser from '../../core/ResourceGuesser';
 import FieldGuesser from '../../field/FieldGuesser';
 import { HydraAdmin } from '../../hydra';
 import InputGuesser from '../../input/InputGuesser';
+import DevtoolsLayout from '../layout/DevtoolsLayout';
 
 export default {
   title: 'Admin/Custom/AdvancedCustomization',
@@ -222,7 +222,7 @@ const ReviewList = () => (
 export const AdvancedCustomization = () => (
   <HydraAdmin
     entrypoint={process.env.ENTRYPOINT}
-    layout={Layout}
+    layout={DevtoolsLayout}
     theme={defaultLightTheme}
     darkTheme={defaultDarkTheme}>
     <ResourceGuesser

src/stories/custom/UsingGuessers.stories.tsx

@@ -9,6 +9,7 @@ import FieldGuesser from '../../field/FieldGuesser';
 import EditGuesser from '../../edit/EditGuesser';
 import InputGuesser from '../../input/InputGuesser';
 import CreateGuesser from '../../create/CreateGuesser';
+import DevtoolsLayout from '../layout/DevtoolsLayout';
 
 export default {
   title: 'Admin/Custom/UsingGuessers',
@@ -98,7 +99,7 @@ const ReviewList = () => (
 );
 
 export const UsingGuessers = () => (
-  <HydraAdmin entrypoint={process.env.ENTRYPOINT}>
+  <HydraAdmin entrypoint={process.env.ENTRYPOINT} layout={DevtoolsLayout}>
     <ResourceGuesser
       name="books"
       list={BookList}

src/stories/layout/DevtoolsLayout.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useQueryClient } from '@tanstack/react-query';
+import { Layout, type LayoutProps } from 'react-admin';
+
+const DevtoolsLayout = ({ children, ...props }: LayoutProps) => {
+  const client = useQueryClient();
+  return (
+    <Layout {...props}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} client={client} />
+    </Layout>
+  );
+};
+
+export default DevtoolsLayout;