Merge pull request #9 from DewyKB/rm/react-admin

Initial react-admin app, with basic config and an initial data model
DewyKB · Jan 23, 2024 · 1b3da43 · 1b3da43
2 parents 4d278d5 + 510dab7
commit 1b3da43
Show file tree

Hide file tree

Showing 16 changed files with 5,843 additions and 0 deletions.
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,35 @@
+# test-admin
+
+## Installation
+
+Install the application dependencies by running:
+
+```sh
+npm install
+```
+
+## Development
+
+Start the application in development mode by running:
+
+```sh
+npm run dev
+```
+
+## Production
+
+Build the application in production mode by running:
+
+```sh
+npm run build
+```
+
+## DataProvider
+
+The included data provider use [FakeREST](https://github.com/marmelab/fakerest) to simulate a backend.
+You'll find a `data.json` file in the `src` directory that includes some fake data for testing purposes.
+
+It includes two resources, posts and comments.
+Posts have the following properties: `id`, `title` and `content`.
+Comments have the following properties: `id`, `post_id` and `content`.
+
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,125 @@
+<!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>test-admin</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"
+        />
+    </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="/src/index.tsx"></script>
+</html>