Merge pull request #8351 from marmelab/tutorial-vite

[Doc] Update the tutorial to use Vite instead of create-react-app
marmelab · Nov 8, 2022 · 202274e · 202274e
2 parents eb33ba4 + 788c774
commit 202274e
Show file tree

Hide file tree

Showing 26 changed files with 653 additions and 684 deletions.
diff --git a/docs/Tutorial.md b/docs/Tutorial.md
diff --git a/examples/tutorial/index.html b/examples/tutorial/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/examples/tutorial/package.json b/examples/tutorial/package.json
@@ -1,25 +1,24 @@
 {
-    "name": "tutorial",
-    "version": "4.0.0",
-    "private": true,
-    "dependencies": {
-        "@mui/icons-material": "^5.0.1",
-        "@mui/material": "^5.0.2",
-        "ra-data-json-server": "^4.0.0",
-        "react": "^17.0.0",
-        "react-admin": "^4.0.0",
-        "react-dom": "^17.0.0",
-        "react-scripts": "^5.0.0"
-    },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "eject": "react-scripts eject"
-    },
-    "browserslist": [
-        ">0.2%",
-        "not dead",
-        "not ie <= 11",
-        "not op_mini all"
-    ]
+  "name": "tutorial",
+  "version": "4.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ra-data-json-server": "^4.5.0",
+    "react": "^18.2.0",
+    "react-admin": "^4.5.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.22",
+    "@types/react-dom": "^18.0.7",
+    "@vitejs/plugin-react": "^2.2.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.0"
+  }
 }
diff --git a/examples/tutorial/public/index.html b/examples/tutorial/public/index.html
diff --git a/examples/tutorial/public/manifest.json b/examples/tutorial/public/manifest.json
diff --git a/examples/tutorial/src/App.css b/examples/tutorial/src/App.css
@@ -0,0 +1,41 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/examples/tutorial/src/App.js → examples/tutorial/src/App.tsx b/examples/tutorial/src/App.js → examples/tutorial/src/App.tsx
@@ -1,32 +1,35 @@
-import * as React from 'react';
+import { Admin, Resource } from 'react-admin';
+import jsonServerProvider from 'ra-data-json-server';
 import PostIcon from '@mui/icons-material/Book';
 import UserIcon from '@mui/icons-material/Group';
-import { Admin, Resource, ListGuesser } from 'react-admin';
-import jsonServerProvider from 'ra-data-json-server';
 
-import { PostList, PostEdit, PostCreate, PostShow } from './posts';
+import { PostList, PostEdit, PostCreate } from './posts';
 import { UserList } from './users';
-import Dashboard from './Dashboard';
-import authProvider from './authProvider';
+import { Dashboard } from './Dashboard';
+import { authProvider } from './authProvider';
+
+const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
 
 const App = () => (
     <Admin
-        dataProvider={jsonServerProvider(
-            'https://jsonplaceholder.typicode.com'
-        )}
         authProvider={authProvider}
+        dataProvider={dataProvider}
         dashboard={Dashboard}
     >
         <Resource
             name="posts"
-            icon={PostIcon}
             list={PostList}
             edit={PostEdit}
             create={PostCreate}
-            show={PostShow}
+            icon={PostIcon}
+        />
+        <Resource
+            name="users"
+            list={UserList}
+            icon={UserIcon}
+            recordRepresentation="name"
         />
-        <Resource name="users" icon={UserIcon} list={UserList} />
-        <Resource name="comments" list={ListGuesser} />
     </Admin>
 );
+
 export default App;
diff --git a/examples/tutorial/src/Dashboard.js b/examples/tutorial/src/Dashboard.js
diff --git a/examples/tutorial/src/Dashboard.tsx b/examples/tutorial/src/Dashboard.tsx
@@ -0,0 +1,8 @@
+import { Card, CardContent, CardHeader } from '@mui/material';
+
+export const Dashboard = () => (
+    <Card>
+        <CardHeader title="Welcome to the administration" />
+        <CardContent>Lorem ipsum sic dolor amet...</CardContent>
+    </Card>
+);
diff --git a/examples/tutorial/src/MyUrlField.tsx b/examples/tutorial/src/MyUrlField.tsx
@@ -0,0 +1,15 @@
+import { useRecordContext } from 'react-admin';
+import { Link } from '@mui/material';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const MyUrlField = ({ source }: { source: string }) => {
+    const record = useRecordContext();
+    return record ? (
+        <Link href={record[source]} sx={{ textDecoration: 'none' }}>
+            {record[source]}
+            <LaunchIcon sx={{ fontSize: 15, ml: 1 }} />
+        </Link>
+    ) : null;
+};
+
+export default MyUrlField;
diff --git a/examples/tutorial/src/assets/react.svg b/examples/tutorial/src/assets/react.svg
diff --git a/examples/tutorial/src/authProvider.js → examples/tutorial/src/authProvider.ts b/examples/tutorial/src/authProvider.js → examples/tutorial/src/authProvider.ts
@@ -1,6 +1,6 @@
-export default {
+export const authProvider = {
     // called when the user attempts to log in
-    login: ({ username }) => {
+    login: ({ username }: { username: string }) => {
         localStorage.setItem('username', username);
         // accept all username/password combinations
         return Promise.resolve();
@@ -11,7 +11,7 @@ export default {
         return Promise.resolve();
     },
     // called when the API returns an error
-    checkError: ({ status }) => {
+    checkError: ({ status }: { status: number }) => {
         if (status === 401 || status === 403) {
             localStorage.removeItem('username');
             return Promise.reject();

diff --git a/examples/tutorial/src/index.js b/examples/tutorial/src/index.js
diff --git a/examples/tutorial/src/index.module.css b/examples/tutorial/src/index.module.css
diff --git a/examples/tutorial/src/logo.svg b/examples/tutorial/src/logo.svg
diff --git a/examples/tutorial/src/main.tsx b/examples/tutorial/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);
diff --git a/examples/tutorial/src/posts.js b/examples/tutorial/src/posts.js