feat(docs): upgrade live-preview examples to react router v7 (#6621)

refinedev · Jan 2, 2025 · 74ed9a3 · 74ed9a3
1 parent 914d4a9
commit 74ed9a3
Show file tree

Hide file tree

Showing 21 changed files with 264 additions and 85 deletions.
diff --git a/documentation/docs/advanced-tutorials/forms/custom-form-validation.md b/documentation/docs/advanced-tutorials/forms/custom-form-validation.md
@@ -40,6 +40,8 @@ Now let's prepare a rule that checks if the titles of the posts are unique. We h
 ```
 
 ```tsx live hideCode url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { useForm, Create, CreateButton } from "@refinedev/antd";
 import { Form, Input } from "antd";
@@ -61,10 +63,14 @@ interface PostUniqueCheckRequestQuery {
 // highlight-end
 
 const PostCreate: React.FC = () => {
-  const { formProps, saveButtonProps } = useForm<IPost>();
+  const { formProps, saveButtonProps } = useForm<IPost>({
+    defaultFormValues: {
+      title: "Test",
+    },
+  });
 
   // highlight-next-line
-  const [title, setTitle] = useState("");
+  const [title, setTitle] = useState("Test");
 
   // highlight-start
   const apiUrl = useApiUrl();
@@ -100,7 +106,8 @@ const PostCreate: React.FC = () => {
             },
             {
               validator: async (_, value) => {
-                if (!value) return;
+                if (!value)
+                  return Promise.reject(new Error("Please enter a title"));
                 const { data } = await refetch();
                 if (data && data.data.isAvailable) {
                   return Promise.resolve();
@@ -124,21 +131,30 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <CreateButton />
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 

diff --git a/documentation/docs/data/hooks/use-infinite-list/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-infinite-list/_basic-usage-live-preview.md
@@ -55,10 +55,18 @@ setRefineProps({
   resources: [
     {
       name: "posts",
-      list: PostList,
+      list: "/posts",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-infinite-list/_filtering-live-preview.md b/documentation/docs/data/hooks/use-infinite-list/_filtering-live-preview.md
@@ -88,10 +88,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-infinite-list/_sorting-live-preview.md b/documentation/docs/data/hooks/use-infinite-list/_sorting-live-preview.md
@@ -83,10 +83,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-list/_basic-usage-live-preview.md
@@ -51,10 +51,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_filtering-live-preview.md b/documentation/docs/data/hooks/use-list/_filtering-live-preview.md
@@ -77,10 +77,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_pagination-live-preview.md b/documentation/docs/data/hooks/use-list/_pagination-live-preview.md
@@ -81,10 +81,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-list/_sorting-live-preview.md b/documentation/docs/data/hooks/use-list/_sorting-live-preview.md
@@ -73,10 +73,18 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
 
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-many/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-many/_basic-usage-live-preview.md
@@ -54,7 +54,7 @@ const ProductList: React.FC = () => {
 
       <button
         onClick={() => {
-          setIds((prev) => [...prev, Math.floor(Math.random() * 1000) + 1]);
+          setIds((prev) => [...prev, Math.floor(Math.random() * 150) + 1]);
         }}
       >
         Add new product
@@ -68,9 +68,17 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-one/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-one/_basic-usage-live-preview.md
@@ -59,9 +59,17 @@ setRefineProps({
   resources: [
     {
       name: "products",
-      list: ProductList,
+      list: "/products",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/products" element={<ProductList />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-select/_basic-usage-live-preview.md b/documentation/docs/data/hooks/use-select/_basic-usage-live-preview.md
@@ -1,5 +1,5 @@
-```tsx live url=http://localhost:3000/products previewHeight=200px
-setInitialRoutes(["/posts/create"]);
+```tsx live url=http://localhost:3000/categories previewHeight=200px
+setInitialRoutes(["/categories"]);
 // visible-block-start
 import { useSelect } from "@refinedev/core";
 
@@ -8,7 +8,7 @@ interface ICategory {
   title: string;
 }
 
-const ProductCreate: React.FC = () => {
+const Categpries: React.FC = () => {
   const { options } = useSelect<ICategory>({
     resource: "categories",
   });
@@ -30,10 +30,18 @@ const ProductCreate: React.FC = () => {
 setRefineProps({
   resources: [
     {
-      name: "posts",
-      create: ProductCreate,
+      name: "categories",
+      list: "/categories",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<Categpries />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-select/_default-value-live-preview.md b/documentation/docs/data/hooks/use-select/_default-value-live-preview.md
@@ -1,5 +1,5 @@
-```tsx live url=http://localhost:3000/products previewHeight=200px hideCode
-setInitialRoutes(["/posts/create"]);
+```tsx live url=http://localhost:3000/categories previewHeight=200px hideCode
+setInitialRoutes(["/categories"]);
 // visible-block-start
 import { useSelect } from "@refinedev/core";
 
@@ -8,11 +8,11 @@ interface ICategory {
   title: string;
 }
 
-const ProductCreate: React.FC = () => {
+const Categories: React.FC = () => {
   const { options } = useSelect<ICategory>({
     resource: "categories",
     // highlight-next-line
-    defaultValue: 20,
+    defaultValue: 3,
   });
 
   return (
@@ -32,10 +32,18 @@ const ProductCreate: React.FC = () => {
 setRefineProps({
   resources: [
     {
-      name: "posts",
-      create: ProductCreate,
+      name: "categories",
+      list: "/categories",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<Categories />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
diff --git a/documentation/docs/data/hooks/use-select/_on-search-live-preview.md b/documentation/docs/data/hooks/use-select/_on-search-live-preview.md
@@ -1,5 +1,5 @@
-```tsx live url=http://localhost:3000/products previewHeight=200px hideCode
-setInitialRoutes(["/posts/create"]);
+```tsx live url=http://localhost:3000/categories previewHeight=200px hideCode
+setInitialRoutes(["/categories"]);
 // visible-block-start
 import { useSelect } from "@refinedev/core";
 
@@ -8,7 +8,7 @@ interface ICategory {
   title: string;
 }
 
-const ProductCreate: React.FC = () => {
+const Categories: React.FC = () => {
   const { options, onSearch } = useSelect<ICategory>({
     resource: "categories",
     // highlight-start
@@ -43,10 +43,18 @@ const ProductCreate: React.FC = () => {
 setRefineProps({
   resources: [
     {
-      name: "posts",
-      create: ProductCreate,
+      name: "categories",
+      list: "/categories",
     },
   ],
 });
-render(<RefineHeadlessDemo />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineHeadlessDemo>
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<Categories />} />
+      </ReactRouter.Routes>
+    </RefineHeadlessDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```