Merge pull request #67 from marmelab/typescript

Convert to TypeScript
marmelab · May 3, 2024 · a9e14f4 · a9e14f4
2 parents c046d67 + 65e381c
commit a9e14f4
Show file tree

Hide file tree

Showing 26 changed files with 7,256 additions and 1,739 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -26,6 +26,18 @@ jobs:
       run: npx @biomejs/biome lint src
     - name: Format Check
       run: npx @biomejs/biome format src
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: Use Node.js LTS
+      uses: actions/setup-node@v1
+      with:
+        node-version: '18.x'
+    - uses: bahmutov/npm-install@v1
+    - name: Typecheck
+      run: npx tsc
   unit-test:
     runs-on: ubuntu-latest
     steps:

diff --git a/Makefile b/Makefile
@@ -10,6 +10,9 @@ build-dev:
 build:
 	@NODE_ENV=production npm run build
 
+run:
+	@NODE_ENV=development npm run dev
+
 watch:
 	@NODE_ENV=development npm run build --watch
 

diff --git a/README.md b/README.md
@@ -349,7 +349,7 @@ restServer.setDefaultQuery(function(resourceName) {
     if (resourceName == 'books') return { filter: { published: true } }
     return {};
 })
-// enable batch request handler, i.e. allow API clients to query several resourecs into a single request
+// enable batch request handler, i.e. allow API clients to query several resources into a single request
 // see [Facebook's Batch Requests philosophy](https://developers.facebook.com/docs/graph-api/making-multiple-requests) for more details.
 restServer.setBatchUrl('/batch');
 
@@ -377,6 +377,8 @@ server.respondWith(restServer2.getHandler());
 ```sh
 # Install dependencies
 make install
+# Run the demo
+make run
 # Watch source files and recompile dist/FakeRest.js when anything is modified
 make watch
 # Run tests

diff --git a/biome.json b/biome.json
@@ -16,7 +16,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
     }
   }
 }
diff --git a/example/App.tsx b/example/App.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Admin, ListGuesser, Resource } from 'react-admin';
+import { dataProvider } from './dataProvider';
+
+export const App = () => {
+    return (
+        <Admin dataProvider={dataProvider}>
+            <Resource name="books" list={ListGuesser} />
+            <Resource name="authors" list={ListGuesser} />
+        </Admin>
+    );
+};
diff --git a/example/dataProvider.ts b/example/dataProvider.ts
@@ -0,0 +1,30 @@
+import fetchMock from 'fetch-mock';
+import FakeRest from 'fakerest';
+import simpleRestProvider from 'ra-data-simple-rest';
+
+const data = {
+    authors: [
+        { id: 0, first_name: 'Leo', last_name: 'Tolstoi' },
+        { id: 1, first_name: 'Jane', last_name: 'Austen' },
+    ],
+    books: [
+        { id: 0, author_id: 0, title: 'Anna Karenina' },
+        { id: 1, author_id: 0, title: 'War and Peace' },
+        { id: 2, author_id: 1, title: 'Pride and Prejudice' },
+        { id: 3, author_id: 1, title: 'Sense and Sensibility' },
+    ],
+    settings: {
+        language: 'english',
+        preferred_format: 'hardback',
+    },
+};
+const restServer = new FakeRest.FetchServer('http://localhost:3000');
+if (window) {
+    // @ts-ignore
+    window.restServer = restServer; // give way to update data in the console
+}
+restServer.init(data);
+restServer.toggleLogging(); // logging is off by default, enable it
+fetchMock.mock('begin:http://localhost:3000', restServer.getHandler());
+
+export const dataProvider = simpleRestProvider('http://localhost:3000');
diff --git a/example/index.tsx b/example/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { App } from './App';
+
+ReactDom.render(<App />, document.getElementById('root'));
diff --git a/index.html b/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+        />
+        <meta name="theme-color" content="#000000" />
+        <link rel="manifest" href="./manifest.json" />
+        <link rel="shortcut icon" href="./favicon.ico" />
+        <title>FakeRest Demo</title>
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+                font-family: sans-serif;
+            }
+
+            .loader-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background-color: #fafafa;
+            }
+
+            /* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */
+
+            .loader,
+            .loader:before,
+            .loader:after {
+                border-radius: 50%;
+            }
+
+            .loader {
+                color: #283593;
+                font-size: 11px;
+                text-indent: -99999em;
+                margin: 55px auto;
+                position: relative;
+                width: 10em;
+                height: 10em;
+                box-shadow: inset 0 0 0 1em;
+                -webkit-transform: translateZ(0);
+                -ms-transform: translateZ(0);
+                transform: translateZ(0);
+            }
+
+            .loader:before,
+            .loader:after {
+                position: absolute;
+                content: '';
+            }
+
+            .loader:before {
+                width: 5.2em;
+                height: 10.2em;
+                background: #fafafa;
+                border-radius: 10.2em 0 0 10.2em;
+                top: -0.1em;
+                left: -0.1em;
+                -webkit-transform-origin: 5.2em 5.1em;
+                transform-origin: 5.2em 5.1em;
+                -webkit-animation: load2 2s infinite ease 1.5s;
+                animation: load2 2s infinite ease 1.5s;
+            }
+
+            .loader:after {
+                width: 5.2em;
+                height: 10.2em;
+                background: #fafafa;
+                border-radius: 0 10.2em 10.2em 0;
+                top: -0.1em;
+                left: 5.1em;
+                -webkit-transform-origin: 0px 5.1em;
+                transform-origin: 0px 5.1em;
+                -webkit-animation: load2 2s infinite ease;
+                animation: load2 2s infinite ease;
+            }
+
+            @-webkit-keyframes load2 {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+                }
+            }
+
+            @keyframes load2 {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+                }
+            }
+        </style>
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+            rel="stylesheet"
+        />
+        <link href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;900&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;600;700&display=swap" rel="stylesheet">
+    </head>
+
+    <body>
+        <noscript> You need to enable JavaScript to run this app. </noscript>
+        <div id="root">
+            <div class="loader-container">
+                <div class="loader">Loading...</div>
+            </div>
+        </div>
+    </body>
+    <script type="module" src="/example/index.tsx"></script>
+</html>