├── .gitignore ├── README.md ├── index.html ├── package.json ├── prettier.config.js ├── public ├── favicon.ico └── manifest.json ├── src ├── App.tsx ├── data.json ├── dataProvider.ts ├── index.tsx ├── posts │ ├── PostCreate.tsx │ ├── PostEdit.tsx │ └── PostList.tsx └── vite-env.d.ts ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material UI - React-admin Example 2 | 3 | This example uses Material UI with [React-admin](https://marmelab.com/react-admin/), a frontend framework for building data-driven applications running in the browser on top of REST/GraphQL APIs. 4 | 5 | ## How to use 6 | 7 | [![Test on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/marmelab/material-ui-react-admin/tree/main/) [![Test on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/marmelab/material-ui-react-admin/tree/main/) 8 | 9 | Test it online: [https://marmelab.com/material-ui-react-admin/](https://marmelab.com/material-ui-react-admin/) 10 | 11 | or clone the repo: 12 | 13 | ```bash 14 | git clone --depth 1 git@github.com:marmelab/material-ui-react-admin.git 15 | cd material-ui-react-admin 16 | ``` 17 | 18 | Install it and run: 19 | 20 | ```bash 21 | npm install 22 | npm run dev 23 | ``` 24 | 25 | ## The Idea Behind This Example 26 | 27 | This example is a simple blog admin with posts and comments, built on top of a fake REST API running in the browser. It's fully functional: you can list, create, edit and delete posts and comments. 28 | 29 | It shows how react-admin builds up on Material UI to provide application building blocks: a datagrid, a form, a rich text editor, a theme switcher, etc. 30 | 31 | ## What's Next? 32 | 33 | - Explore the code of this example 34 | - Discover the [React-admin features](https://marmelab.com/react-admin/Features.html) 35 | - Bootstrap your own admin with [Create React Admin](https://marmelab.com/react-admin/CreateReactAdmin.html) 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | material-ui-react-admin 13 | 109 | 110 | 114 | 115 | 116 | 117 | 118 |
119 |
120 |
Loading...
121 |
122 |
123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-react-admin", 3 | "private": true, 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "serve": "vite preview", 8 | "type-check": "tsc --noEmit", 9 | "format": "prettier --write ./src", 10 | "deploy": "gh-pages -d dist" 11 | }, 12 | "dependencies": { 13 | "ra-data-fakerest": "^4.14.0", 14 | "ra-input-rich-text": "^4.14.0", 15 | "react": "^18.2.0", 16 | "react-admin": "^4.14.0", 17 | "react-dom": "^18.2.0" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^18.16.1", 21 | "@types/react": "^18.0.22", 22 | "@types/react-dom": "^18.0.7", 23 | "@typescript-eslint/eslint-plugin": "^5.60.1", 24 | "@typescript-eslint/parser": "^5.60.1", 25 | "@vitejs/plugin-react": "^4.0.1", 26 | "eslint": "^8.43.0", 27 | "eslint-config-prettier": "^8.8.0", 28 | "eslint-plugin-react": "^7.32.2", 29 | "eslint-plugin-react-hooks": "^4.6.0", 30 | "gh-pages": "^6.1.0", 31 | "prettier": "^2.8.8", 32 | "typescript": "^5.1.6", 33 | "vite": "^4.3.9" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSpacing: true, 4 | jsxSingleQuote: false, 5 | printWidth: 80, 6 | quoteProps: 'as-needed', 7 | rangeStart: 0, 8 | rangeEnd: Infinity, 9 | semi: true, 10 | singleQuote: true, 11 | tabWidth: 4, 12 | trailingComma: 'es5', 13 | useTabs: false, 14 | }; 15 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marmelab/material-ui-react-admin/5e6c4fba60cbbe7473746aab840483b78071ad83/public/favicon.ico -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "material-ui-react-admin", 3 | "name": "Material UI React Admin Example", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Admin, 3 | Resource, 4 | ListGuesser, 5 | EditGuesser, 6 | ShowGuesser, 7 | defaultLightTheme, 8 | defaultDarkTheme, 9 | } from 'react-admin'; 10 | import BookIcon from '@mui/icons-material/Book'; 11 | import ChatBubbleIcon from '@mui/icons-material/ChatBubble'; 12 | 13 | import dataProvider from './dataProvider'; 14 | import PostList from './posts/PostList'; 15 | import PostEdit from './posts/PostEdit'; 16 | import PostCreate from './posts/PostCreate'; 17 | 18 | function App() { 19 | return ( 20 | 25 | 34 | 41 | tag.name.en} /> 42 | 43 | ); 44 | } 45 | 46 | export default App; 47 | -------------------------------------------------------------------------------- /src/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "posts": [ 3 | { 4 | "id": 1, 5 | "title": "Accusantium qui nihil voluptatum quia voluptas maxime ab similique", 6 | "teaser": "In facilis aut aut odit hic doloribus. Fugit possimus perspiciatis sit molestias in. Sunt dignissimos sed quis at vitae veniam amet. Sint sunt perspiciatis quis doloribus aperiam numquam consequatur et. Blanditiis aut earum incidunt eos magnam et voluptatem. Minima iure voluptatum autem. At eaque sit aperiam minima aut in illum.", 7 | "body": "

Rerum velit quos est similique. Consectetur tempora eos ullam velit nobis sit debitis. Magni explicabo omnis delectus labore vel recusandae.

Aut a minus laboriosam harum placeat quas minima fuga. Quos nulla fuga quam officia tempore. Rerum occaecati ut eum et tempore. Nam ab repudiandae et nemo praesentium.

Cumque corporis officia occaecati ducimus sequi laborum omnis ut. Nam aspernatur veniam fugit. Nihil eum libero ea dolorum ducimus impedit sed. Quidem inventore porro corporis debitis eum in. Nesciunt unde est est qui nulla. Esse sunt placeat molestiae molestiae sed quia. Sunt qui quidem quos velit reprehenderit quos blanditiis ducimus. Sint et molestiae maxime ut consequatur minima. Quaerat rem voluptates voluptatem quos. Corporis perferendis in provident iure. Commodi odit exercitationem excepturi et deserunt qui.

Optio iste necessitatibus velit non. Neque sed occaecati culpa porro culpa. Quia quam in molestias ratione et necessitatibus consequatur. Est est tempora consequatur voluptatem vel. Mollitia tenetur non quis omnis perspiciatis deserunt sed necessitatibus. Ad rerum reiciendis sunt aspernatur.

Est ullam ut magni aspernatur. Eum et sed tempore modi.

Earum aperiam sit neque quo laborum suscipit unde. Expedita nostrum itaque non non adipisci. Ut delectus quis delectus est at sint. Iste hic qui ea eaque eaque sed id. Hic placeat rerum numquam id velit deleniti voluptatem. Illum adipisci voluptas adipisci ut alias. Earum exercitationem iste quidem eveniet aliquid hic reiciendis. Exercitationem est sunt in minima consequuntur. Aut quaerat libero dolorem.

", 8 | "views": 143, 9 | "average_note": 2.72198, 10 | "commentable": true, 11 | "published_at": "2023-08-08", 12 | "tags": [1, 3], 13 | "category": "tech", 14 | "subcategory": "computers" 15 | }, 16 | { 17 | "id": 2, 18 | "title": "Sint dignissimos in architecto aut", 19 | "teaser": "Quam earum itaque corrupti labore quas nihil sed. Dolores sunt culpa voluptates exercitationem eveniet totam rerum. Molestias perspiciatis rem numquam accusamus.", 20 | "body": "

Aliquam magni tempora quas enim. Perspiciatis libero corporis sunt eum nam. Molestias est sunt molestiae natus.

Blanditiis dignissimos autem culpa itaque. Explicabo perferendis ullam officia ut quia nemo. Eaque perspiciatis perspiciatis est hic non ullam et. Expedita exercitationem enim sit ut dolore.

Sed in sunt officia blanditiis ipsam maiores perspiciatis amet

Vero fugiat facere officiis aut quis rerum velit. Autem eius sint ullam. Nemo sunt molestiae nulla accusantium est voluptatem voluptas sed. In blanditiis neque libero voluptatem praesentium occaecati nulla libero. Perspiciatis eos voluptatem facere voluptatibus. Explicabo quo eveniet nihil culpa. Qui eos officia consequuntur sed esse praesentium dolorum. Eius perferendis qui quia autem nostrum sed. Illum in ex excepturi voluptas. Qui veniam sit alias delectus nihil. Impedit est ut alias illum repellendus qui.

Veniam est aperiam quisquam soluta. Magni blanditiis praesentium sed similique velit ipsam consequatur. Porro omnis magni sunt incidunt aspernatur ut.

", 21 | "views": 563, 22 | "average_note": 3.48121, 23 | "commentable": true, 24 | "published_at": "2023-08-14", 25 | "tags": [3, 5], 26 | "category": "lifestyle" 27 | }, 28 | { 29 | "id": 3, 30 | "title": "Perspiciatis adipisci vero qui ipsam iure porro", 31 | "teaser": "Ut ad consequatur esse illum. Ex dolore porro et ut sit. Commodi qui sed et voluptatibus laudantium.", 32 | "body": "

Voluptatibus fugit sit praesentium voluptas vero vel. Reprehenderit quam cupiditate deleniti ipsum nisi qui. Molestiae modi sequi vel quibusdam est aliquid doloribus. Necessitatibus et excepturi alias necessitatibus magnam ea.

Dolor illum dolores qui et pariatur inventore incidunt molestias. Exercitationem ipsum voluptatibus voluptatum velit sint vel qui. Odit mollitia minus vitae impedit voluptatem. Voluptas ullam temporibus inventore fugiat pariatur odit molestias.

Atque est qui alias eum. Quibusdam rem ut dolores voluptate totam. Sit cumque perferendis sed a iusto laudantium quae et. Voluptatibus vitae natus quia laboriosam et deserunt. Doloribus fuga aut quo tempora animi eaque consequatur laboriosam.

", 33 | "views": 467, 34 | "commentable": true, 35 | "published_at": "2023-08-29", 36 | "tags": [1, 2], 37 | "category": "tech" 38 | }, 39 | { 40 | "id": 4, 41 | "title": "Maiores et itaque aut perspiciatis", 42 | "teaser": "Et quo voluptas odit veniam omnis dolores. Odit commodi consequuntur necessitatibus dolorem officia. Reiciendis quas exercitationem libero sed. Itaque non facilis sit tempore aut doloribus.", 43 | "body": "

Sunt sunt aut est et consequatur ea dolores. Voluptatem rerum cupiditate dolore. Voluptas sit sapiente corrupti error ducimus. Qui enim aut possimus qui. Impedit voluptatem sed inventore iusto et ut et. Maxime sunt qui adipisci expedita quisquam. Velit ea ut in blanditiis eos doloribus.

Qui optio ad magnam eius. Est id velit ratione eum corrupti non vitae. Quam consequatur animi sed corrupti quae sed deserunt. Accusamus eius eos recusandae eum quia id.

Voluptas omnis omnis culpa est vel eum. Ut in tempore harum voluptates odit delectus sit et. Consequuntur quod nihil veniam natus placeat provident. Totam ut fuga vitae in. Possimus cumque quae voluptatem asperiores vitae officiis dolores. Qui autem eos dolores eius. Iure ut delectus quis voluptatem. Velit at incidunt minus laboriosam culpa. Pariatur ipsa ut enim dolor. Sed magni sunt molestiae voluptas ut illum. Sit consequuntur laborum aliquid delectus in. Consectetur dicta asperiores itaque aut mollitia. Minus praesentium officiis voluptas a officiis ad beatae.

", 44 | "views": 685, 45 | "average_note": 1.2319, 46 | "commentable": false, 47 | "published_at": "2023-09-02", 48 | "tags": [], 49 | "category": "lifestyle" 50 | }, 51 | { 52 | "id": 5, 53 | "title": "Sed quo et et fugiat modi", 54 | "teaser": "Consequuntur id aut soluta aspernatur sit. Aut doloremque recusandae sit saepe ut quas earum. Quae pariatur iure et ducimus non. Cupiditate dolorem itaque in sit.", 55 | "body": "

Aut molestiae quae explicabo voluptas. Assumenda ea ipsam quia. Rerum rerum magnam sunt doloremque dolorem nulla. Eveniet ut aliquam est dignissimos nisi molestias dicta. Dolorum et id esse illum. Ea omnis nesciunt tempore et aut. Ut ullam totam doloribus recusandae est natus voluptatum officiis. Ea quam eos velit ipsam non accusamus praesentium.

Animi et minima alias sint. Reiciendis qui ipsam autem fugit consequuntur veniam. Vel cupiditate voluptas enim dolore cum ad. Ut iusto eius et.

Quis praesentium aut aut aut voluptas et. Quam laudantium at laudantium amet. Earum quidem eos earum quaerat nihil libero quia sed.

Autem voluptatem nostrum ullam numquam quis. Et aut unde nesciunt officiis nam eos ut distinctio. Animi est explicabo voluptas officia quos necessitatibus. Omnis debitis unde et qui rerum. Nisi repudiandae autem mollitia dolorum veritatis aut. Rem temporibus labore repellendus enim consequuntur dicta autem. Illum illo inventore possimus officiis quidem.

Ullam accusantium eaque perspiciatis. Quidem dolor minus aut quidem. Praesentium earum beatae eos eligendi nostrum. Dolor nam quo aut.

Accusamus aut tempora omnis magni sit quos eos aut. Vitae ut inventore facere neque rerum. Qui esse rem cupiditate sit.

Est minus odio sint reprehenderit. Consectetur dolores eligendi et quaerat sint vel magni. Voluptatum hic cum placeat ad ea reiciendis laborum et. Eos ab id suscipit.

", 56 | "views": 559, 57 | "average_note": 3, 58 | "commentable": true, 59 | "published_at": "2023-09-07", 60 | "category": "tech" 61 | }, 62 | { 63 | "id": 6, 64 | "title": "Minima ea vero omnis odit officiis aut", 65 | "teaser": "Omnis rerum voluptatem illum. Amet totam minus id qui aspernatur. Adipisci commodi velit sapiente architecto et molestias. Maiores doloribus quis occaecati quidem laborum. Quae quia quaerat est itaque. Vero assumenda quia tempora libero dicta quis asperiores magnam. Necessitatibus accusantium saepe commodi ut.", 66 | "body": "

Sit autem rerum inventore repellendus. Enim placeat est ea dolor voluptas nisi alias. Repellat quam laboriosam repudiandae illum similique omnis non exercitationem. Modi mollitia omnis sed vel et expedita fugiat. Esse laboriosam doloribus deleniti atque quidem praesentium aliquid. Error animi ab excepturi quia. Et voluptates voluptatem et est quibusdam aspernatur. Fugiat consequatur veritatis commodi enim quaerat sint. Quis quae fuga exercitationem dolorem enim laborum numquam. Iste necessitatibus repellat in ea nihil et rem. Corporis dolores sed vitae consectetur dolores qui dicta. Laudantium et suscipit odit quidem qui. Provident libero eveniet distinctio debitis odio cum id dolorum. Consequuntur laboriosam qui ut magni sit dicta. Distinctio fugit voluptatibus voluptatem suscipit incidunt ut cupiditate. Magni harum in aut alias veniam. Eos aut impedit ut et. Iure aliquid adipisci aliquam et ab et qui. Itaque quod consequuntur dolore asperiores architecto neque. Exercitationem eum voluptas ut quis hic quo. Omnis quas porro laudantium. Qui magnam et totam quibusdam in quo. Impedit laboriosam eum sint soluta facere ut voluptatem.

", 67 | "views": 208, 68 | "average_note": 3.1214, 69 | "published_at": "2023-09-12", 70 | "tags": [1, 4], 71 | "category": "tech" 72 | }, 73 | { 74 | "id": 7, 75 | "title": "Illum veritatis corrupti exercitationem sed velit", 76 | "teaser": "Omnis hic quo aperiam fugiat iure amet est. Molestias ratione aut et dolor earum magnam placeat. Ad a quam ea amet hic omnis rerum.", 77 | "body": "

Omnis sunt maxime qui consequatur perspiciatis et dolor. Assumenda numquam sit rerum aut dolores. Repudiandae rerum et quisquam. Perferendis cupiditate sequi non similique eum accusamus voluptas.

Officiis in voluptatum culpa ut eaque laborum. Sit quos velit sed ad voluptates. Alias aut quo accusantium aut cumque perferendis. Numquam rerum vel et est delectus. Mollitia dolores voluptatum accusantium id rem. Autem dolorem similique earum. Deleniti qui iusto et vero. Enim quaerat ipsum omnis magni. Autem magnam vero nulla impedit distinctio. Sequi laudantium ut animi enim recusandae et voluptatum. Dicta architecto nostrum voluptas consequuntur ea. Porro odio illo praesentium qui. Quia sit sed labore porro. Minima odit nemo sint praesentium. Ea sapiente quis aut. Qui cumque aut repudiandae in. Ipsam mollitia ab vitae iusto maxime. Eaque qui impedit et ea dolor aut. Tenetur ut nihil sed. Eum doloremque harum ipsam vel eos ut enim.

", 78 | "views": 133, 79 | "average_note": null, 80 | "commentable": true, 81 | "published_at": "2023-09-13", 82 | "tags": [3, 4], 83 | "category": "tech" 84 | }, 85 | { 86 | "id": 8, 87 | "title": "Culpa possimus quibusdam nostrum enim tempore rerum odit excepturi", 88 | "teaser": "Qui quos exercitationem itaque quia. Repellat libero ut recusandae quidem repudiandae ipsam laudantium. Eveniet quos et quo omnis aut commodi incidunt.", 89 | "body": "

Laudantium voluptatem non facere officiis qui natus natus. Ex perspiciatis quia dolor earum. In rerum deleniti voluptas quo quia adipisci voluptatibus.

Mollitia eos quaerat ad. Et non aliquam velit. Doloremque repudiandae earum suscipit deleniti.

Debitis voluptatem possimus saepe. Rerum nam est neque voluptate quae ratione et quaerat. Fugiat et ullam adipisci numquam. Atque qui cum quae quod qui reprehenderit. Veritatis odio eligendi est odit minima ut dolores. Blanditiis aut rem aliquam nulla esse odit. Quibusdam quam natus eos tenetur nemo eligendi velit nam. Consequatur libero eius quia impedit neque fuga. Accusantium sunt accusantium eaque illum dicta. Expedita explicabo quia soluta.

Dolores aperiam rem velit id provident quo ea. Modi illum voluptate corrupti recusandae optio. Voluptatem architecto numquam reiciendis quo nostrum suscipit. Dolore repellat deleniti nihil omnis illum explicabo nihil. Alias maxime hic minus voluptas odio id dolorum. Neque perferendis repellendus autem consequatur consequatur doloribus. Sit aspernatur nisi aliquam rem voluptas occaecati.

In eveniet nostrum culpa totam officia doloremque. Fugiat maxime magni aut magnam praesentium vel facere. Tempora soluta possimus omnis modi et qui minus. Consequatur et suscipit autem quia nulla.

Qui eum aliquid inventore at. Qui provident perspiciatis sed eum eos sunt eveniet autem. Ducimus velit tenetur sed. Quas laboriosam dicta ipsa id fugiat. Hic nihil laboriosam atque natus. Quam natus esse est error molestiae nulla. Odit ut dolorem laborum quidem quis alias. Labore sint porro et reprehenderit ut dolorem vel dolorum. Dolores suscipit ut dolores possimus id dicta cupiditate. Est cum dolorum dolores ducimus quia reprehenderit. Iste suscipit molestias voluptatem molestiae. Nostrum modi dicta qui deleniti. Reprehenderit voluptatem soluta non in labore. Voluptatem ut illo illo harum voluptas cumque. Tempora illo distinctio qui aut.

Eaque voluptatem eos omnis qui dolor non possimus. Distinctio ratione facere doloremque rerum qui voluptas et. Cum incidunt numquam molestias et labore odio sunt aut. Aut pariatur dignissimos est atque.

", 90 | "views": 557, 91 | "average_note": null, 92 | "commentable": false, 93 | "published_at": "2023-10-21", 94 | "tags": [5, 1], 95 | "category": "lifestyle" 96 | }, 97 | { 98 | "id": 9, 99 | "title": "A voluptas eius eveniet ut commodi dolor", 100 | "teaser": "Sed necessitatibus nesciunt nesciunt aut non sunt. Quam ut in a sed ducimus eos qui sint. Commodi illo necessitatibus sint explicabo maiores. Maxime voluptates sit distinctio quo excepturi. Qui aliquid debitis repellendus distinctio et aut. Ex debitis et quasi id.", 101 | "body": "

Consequatur temporibus explicabo vel laudantium totam. Voluptates nihil numquam accusamus ut unde quo. Molestiae dolores quas sit aliquam. Sit et fuga necessitatibus natus fugit voluptas et. Esse vitae sed sit eius.

Accusantium aliquam accusamus illo eum. Excepturi molestiae et earum qui. Iste dolor eligendi est vero iure eos nesciunt. Qui aspernatur repellendus id rerum consequatur ut. Quis ab quos fugit dicta aut voluptas. Rerum aut esse dolor. Illo iste ullam possimus nam nam assumenda molestiae est.

In porro nesciunt cumque in sint vel architecto. Aliquam et in numquam quae explicabo. Deserunt suscipit sunt excepturi optio molestiae. Facilis saepe eaque commodi provident ad voluptates eligendi.

Magnam et neque ad sed qui laborum et. Aut dolorem maxime harum. Molestias aut facere vitae voluptatem.

Excepturi odit doloremque eos quisquam sunt. Veniam repudiandae nisi dolorum nam quos. Qui voluptatem enim enim. Dolorum eveniet eaque expedita est tempore. Expedita amet blanditiis esse qui. Nam dolor odio nihil nobis quas quia exercitationem. Iusto ut ut reiciendis sint laudantium et distinctio. Vitae architecto accusamus quos dolores laudantium doloribus alias. Est est esse autem repellat. Assumenda officia aperiam sequi facere distinctio ut. Magnam qui assumenda eligendi sint. Architecto autem harum qui ea quos ut nesciunt et. Optio quidem sit ex quos provident. Et dolor dicta et laudantium. Incidunt id quo enim atque molestiae quam repudiandae omnis. Sed nam voluptatem dolores natus quisquam. Sit nostrum voluptate sed asperiores. Saepe eaque et illum aperiam. Maxime tenetur sunt reiciendis.

Ducimus quia dolorem voluptas ea. Fuga eum architecto eius cum est quibusdam eligendi est. In ut aperiam ea ut.

", 102 | "views": 143, 103 | "average_note": 3.1214, 104 | "commentable": true, 105 | "published_at": "2023-10-29", 106 | "tags": [], 107 | "category": "tech" 108 | }, 109 | { 110 | "id": 10, 111 | "title": "Totam vel quasi a odio et nihil", 112 | "teaser": "Excepturi veritatis velit rerum nemo voluptatem illum tempora eos. Et impedit sed qui et iusto. A alias asperiores quia quo.", 113 | "body": "

Voluptas iure consequatur repudiandae quibusdam iure. Quibusdam consequatur sit cupiditate aut eum iure. Provident ut aut est itaque ut eligendi sunt.

Odio ipsa dolore rem occaecati voluptatum neque. Quia est minima totam est dicta aliquid sed. Doloribus ea eligendi qui odit. Consectetur aut illum aspernatur exercitationem ut. Distinctio sapiente doloribus beatae natus mollitia. Nostrum cum magni autem expedita natus est nulla totam.

Et possimus quia aliquam est molestiae eum. Dicta nostrum ea rerum omnis. Ut hic amet sequi commodi voluptatem ut. Nulla magni totam placeat asperiores error.

", 114 | "views": 721, 115 | "average_note": 4.121, 116 | "commentable": true, 117 | "published_at": "2023-11-01", 118 | "tags": [1, 4], 119 | "category": "lifestyle" 120 | }, 121 | { 122 | "id": 11, 123 | "title": "Omnis voluptate enim similique est possimus", 124 | "teaser": "Velit eos vero reprehenderit ut assumenda saepe qui. Quasi aut laboriosam quas voluptate voluptatem. Et eos officia repudiandae quaerat. Mollitia libero numquam laborum eos.", 125 | "body": "

Ut qui a quis culpa impedit. Harum quae sunt aspernatur dolorem minima et dolorum. Consequatur sunt eveniet sit perspiciatis fuga praesentium. Quam voluptatem a ullam accusantium debitis eum consectetur.

Voluptas rem impedit omnis maiores saepe. Eum consequatur ut et consequatur repellat. Quos dolorem dolorum nihil dolor sit optio velit. Quasi quaerat enim omnis ipsum.

Officia asperiores ut doloribus. Architecto iste quia illo non. Deleniti enim odio aut amet eveniet. Modi sint aut excepturi quisquam error sed officia. Nostrum enim repellendus inventore minus. Itaque vitae ipsam quasi. Qui provident vero ab facere. Sit enim provident doloremque minus quam. Voluptatem expedita est maiores nihil est voluptatem error. Asperiores ut a est ducimus hic optio. Natus omnis ullam consectetur ducimus nisi sint ducimus odit. Soluta cupiditate ipsam magnam.

Illum magni aut autem in sed iure. Ea explicabo ducimus officia corrupti ipsam minima minima. Nihil ab similique modi sunt unde nisi. Iusto quis iste ut aut earum magni. Nisi nisi minima sapiente quos aut libero maxime. Ut consequuntur sit vel odio suscipit fugiat tempore et. Et eveniet aut voluptatibus aliquid accusantium quis qui et. Veniam rem ut et. Vel officiis et voluptatum eaque ipsum sit. Sed iste rem ipsam dolor maiores. Et animi aspernatur aut error. Quisquam veritatis voluptatem magnam id. Blanditiis dolorem quo et voluptatum.

", 126 | "views": 294, 127 | "average_note": 3.12942, 128 | "commentable": true, 129 | "published_at": "2023-11-15", 130 | "tags": [4, 3], 131 | "category": "tech" 132 | }, 133 | { 134 | "id": 12, 135 | "title": "Qui tempore rerum et voluptates", 136 | "teaser": "Occaecati rem perferendis dolor aut numquam cupiditate. At tenetur dolores pariatur et libero asperiores porro voluptas. Officiis corporis sed eos repellendus perferendis distinctio hic consequatur.", 137 | "body": "

Praesentium corrupti minus molestias eveniet mollitia. Sit dolores est tenetur eos veritatis. Vero aut molestias provident ducimus odit optio.

Minima amet accusantium dolores et. Iste eos necessitatibus iure provident rerum repellendus reiciendis eos. Voluptate dolorem dolore aliquid sed maiores.

Ut quia excepturi quidem quidem. Cupiditate qui est rerum praesentium consequatur ad. Minima rem et est. Ut odio nostrum fugit laborum. Quis vitae occaecati tenetur earum non architecto.

Minima est nobis accusamus sunt explicabo fuga. Ut ut ut officia labore ratione animi saepe et.

Accusamus quae ex rerum est eos nesciunt et. Nemo nam consequatur earum necessitatibus et. Eum corporis corporis quia at nihil consectetur accusamus. Ea eveniet et culpa maxime.

Et et quisquam odio sapiente. Voluptas ducimus beatae ratione et soluta esse ut animi. Ipsa architecto veritatis cumque in.

Voluptatem dolore sint aliquam excepturi. Pariatur quisquam a eum. Aut et sit quis et dolorem omnis. Molestias id cupiditate error ab.

Odio ut deleniti incidunt vel dolores eligendi. Nemo aut commodi accusamus alias reprehenderit dolorum eaque. Iure fugit quis occaecati aspernatur tempora iste.

Omnis repellat et sequi numquam accusantium doloribus eum totam. Ab assumenda facere qui voluptate. Temporibus non ipsa officia. Corrupti omnis ut dolores velit aliquam ut omnis consequuntur.

", 138 | "views": 719, 139 | "average_note": 2, 140 | "commentable": true, 141 | "published_at": "2023-11-20", 142 | "tags": [], 143 | "category": "lifestyle" 144 | }, 145 | { 146 | "id": 13, 147 | "title": "Fusce massa lorem, pulvinar a posuere ut, accumsan ac nisi", 148 | "teaser": "Quam earum itaque corrupti labore quas nihil sed. Dolores sunt culpa voluptates exercitationem eveniet totam rerum. Molestias perspiciatis rem numquam accusamus.", 149 | "body": "

Curabitur eu odio ullamcorper, pretium sem at, blandit libero. Nulla sodales facilisis libero, eu gravida tellus ultrices nec. In ut gravida mi. Vivamus finibus tortor tempus egestas lacinia. Cras eu arcu nisl. Donec pretium dolor ipsum, eget feugiat urna iaculis ut.

Nullam lacinia accumsan diam, ac faucibus velit maximus ac. Donec eros ligula, ullamcorper sit amet varius eget, molestie nec sapien. Donec ac est non tellus convallis condimentum. Aliquam non vehicula mauris, ac rhoncus mi. Integer consequat ipsum a posuere ornare. Quisque mollis finibus libero scelerisque dapibus.

", 150 | "views": 222, 151 | "average_note": 4, 152 | "commentable": true, 153 | "published_at": "2023-11-25", 154 | "tags": [3, 5], 155 | "category": "lifestyle" 156 | } 157 | ], 158 | "comments": [ 159 | { 160 | "id": 1, 161 | "author": "Simon Kuhn", 162 | "post_id": 6, 163 | "body": "Queen, tossing her head through the wood. 'If it had lost something; and she felt sure it.", 164 | "created_at": "2023-09-13" 165 | }, 166 | { 167 | "id": 2, 168 | "author": "Kiley Pouros", 169 | "post_id": 9, 170 | "body": "White Rabbit: it was indeed: she was out of the ground--and I should frighten them out of its right paw round, 'lives a March Hare. 'Sixteenth,'.", 171 | "created_at": "2023-10-30" 172 | }, 173 | { 174 | "id": 3, 175 | "author": "Justina Hegmann", 176 | "post_id": 3, 177 | "body": "I'm not Ada,' she said, 'and see whether it's marked \"poison\" or.", 178 | "created_at": "2023-08-30" 179 | }, 180 | { 181 | "id": 4, 182 | "author": "Ms. Brionna Smitham MD", 183 | "post_id": 6, 184 | "body": "Dormouse. 'Fourteenth of March, I think I can say.' This was such a noise inside, no one else seemed inclined.", 185 | "created_at": "2023-09-14" 186 | }, 187 | { 188 | "id": 5, 189 | "author": "Edmond Schulist", 190 | "post_id": 1, 191 | "body": "I ought to tell me your history, you know,' the Hatter and the happy summer days. THE.", 192 | "created_at": "2023-09-10" 193 | }, 194 | { 195 | "id": 6, 196 | "author": "Danny Greenholt", 197 | "post_id": 6, 198 | "body": "Duchess asked, with another hedgehog, which seemed to be lost: away went Alice after it, never once considering how in the other. In the very tones of.", 199 | "created_at": "2023-09-13" 200 | }, 201 | { 202 | "id": 7, 203 | "author": "Luciano Berge", 204 | "post_id": 5, 205 | "body": "While the Panther were sharing a pie--' [later editions continued as follows.", 206 | "created_at": "2023-09-13" 207 | }, 208 | { 209 | "id": 8, 210 | "author": "Annamarie Mayer", 211 | "post_id": 5, 212 | "body": "I tell you, you coward!' and at once and put it more clearly,' Alice.", 213 | "created_at": "2023-09-17" 214 | }, 215 | { 216 | "id": 9, 217 | "author": "Breanna Gibson", 218 | "post_id": 2, 219 | "body": "THAT. Then again--\"BEFORE SHE HAD THIS FIT--\" you never tasted an egg!' 'I HAVE tasted eggs, certainly,' said Alice, as she spoke. Alice did not like to have it.", 220 | "created_at": "2023-08-23" 221 | }, 222 | { 223 | "id": 10, 224 | "author": "Logan Schowalter", 225 | "post_id": 3, 226 | "body": "I'd been the whiting,' said the Hatter, it woke up again with a T!' said the Gryphon. '--you advance twice--' 'Each with a growl, And concluded the banquet--] 'What IS the fun?' said.", 227 | "created_at": "2023-08-30" 228 | }, 229 | { 230 | "id": 11, 231 | "author": "Logan Schowalter", 232 | "post_id": 1, 233 | "body": "I don't want to be?' it asked. 'Oh, I'm not Ada,' she said, 'and see whether it's marked \"poison\" or not'; for she had asked it aloud; and in despair she put her hand on the end of the.", 234 | "created_at": "2023-10-25" 235 | } 236 | ], 237 | "tags": [ 238 | { 239 | "id": 1, 240 | "name": { 241 | "en": "Sport" 242 | }, 243 | "published": 1 244 | }, 245 | { 246 | "id": 2, 247 | "name": { 248 | "en": "Technology" 249 | }, 250 | "published": false 251 | }, 252 | { 253 | "id": 3, 254 | "name": { 255 | "en": "Code" 256 | }, 257 | "published": true 258 | }, 259 | { 260 | "id": 4, 261 | "name": { 262 | "en": "Photo" 263 | }, 264 | "published": false 265 | }, 266 | { 267 | "id": 5, 268 | "name": { 269 | "en": "Music" 270 | }, 271 | "published": 1 272 | }, 273 | { 274 | "id": 6, 275 | "name": { 276 | "en": "Parkour" 277 | }, 278 | "published": 1, 279 | "parent_id": 1 280 | }, 281 | { 282 | "id": 7, 283 | "name": { 284 | "en": "Crossfit" 285 | }, 286 | "published": 1, 287 | "parent_id": 1 288 | }, 289 | { 290 | "id": 8, 291 | "name": { 292 | "en": "Computing" 293 | }, 294 | "published": 1, 295 | "parent_id": 2 296 | }, 297 | { 298 | "id": 9, 299 | "name": { 300 | "en": "Nanoscience" 301 | }, 302 | "published": 1, 303 | "parent_id": 2 304 | }, 305 | { 306 | "id": 10, 307 | "name": { 308 | "en": "Blockchain" 309 | }, 310 | "published": 1, 311 | "parent_id": 2 312 | }, 313 | { 314 | "id": 11, 315 | "name": { 316 | "en": "Node" 317 | }, 318 | "published": 1, 319 | "parent_id": 3 320 | }, 321 | { 322 | "id": 12, 323 | "name": { 324 | "en": "React" 325 | }, 326 | "published": 1, 327 | "parent_id": 3 328 | }, 329 | { 330 | "id": 13, 331 | "name": { 332 | "en": "Nature" 333 | }, 334 | "published": 1, 335 | "parent_id": 4 336 | }, 337 | { 338 | "id": 14, 339 | "name": { 340 | "en": "People" 341 | }, 342 | "published": 1, 343 | "parent_id": 4 344 | }, 345 | { 346 | "id": 15, 347 | "name": { 348 | "en": "Animals" 349 | }, 350 | "published": 1, 351 | "parent_id": 13 352 | }, 353 | { 354 | "id": 16, 355 | "name": { 356 | "en": "Moutains" 357 | }, 358 | "published": 1, 359 | "parent_id": 13 360 | }, 361 | { 362 | "id": 17, 363 | "name": { 364 | "en": "Rap" 365 | }, 366 | "published": 1, 367 | "parent_id": 5 368 | }, 369 | { 370 | "id": 18, 371 | "name": { 372 | "en": "Rock" 373 | }, 374 | "published": 1, 375 | "parent_id": 5 376 | }, 377 | { 378 | "id": 19, 379 | "name": { 380 | "en": "World" 381 | }, 382 | "published": 1, 383 | "parent_id": 5 384 | } 385 | ] 386 | } 387 | -------------------------------------------------------------------------------- /src/dataProvider.ts: -------------------------------------------------------------------------------- 1 | import fakeRestDataProvider from 'ra-data-fakerest'; 2 | import data from './data.json'; 3 | 4 | const dataProvider = fakeRestDataProvider(data, true); 5 | 6 | export default dataProvider; 7 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | ReactDOM.createRoot(document.getElementById('root')!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /src/posts/PostCreate.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BooleanInput, 3 | DateInput, 4 | Create, 5 | ReferenceArrayInput, 6 | SimpleForm, 7 | TextInput, 8 | required, 9 | } from 'react-admin'; 10 | import { RichTextInput } from 'ra-input-rich-text'; 11 | import { Stack } from '@mui/material'; 12 | 13 | function PostCreate() { 14 | return ( 15 | 16 | 17 | 18 | 24 | 29 | 30 | 31 | 32 | 33 | 40 | 41 | 42 | ); 43 | } 44 | 45 | export default PostCreate; 46 | -------------------------------------------------------------------------------- /src/posts/PostEdit.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BooleanInput, 3 | DateInput, 4 | Edit, 5 | Labeled, 6 | NumberField, 7 | ReferenceArrayInput, 8 | ReferenceManyCount, 9 | ReferenceManyField, 10 | SimpleList, 11 | TabbedForm, 12 | TextInput, 13 | required, 14 | } from 'react-admin'; 15 | import { RichTextInput } from 'ra-input-rich-text'; 16 | import { Stack } from '@mui/material'; 17 | 18 | function PostEdit() { 19 | return ( 20 | 21 | 22 | 23 | 28 | 34 | 39 | 40 | 41 | 42 | 43 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 67 | } 68 | > 69 | 74 | 78 | new Date(record.created_at).toLocaleDateString() 79 | } 80 | /> 81 | 82 | 83 | 84 | 85 | ); 86 | } 87 | 88 | export default PostEdit; 89 | -------------------------------------------------------------------------------- /src/posts/PostList.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BooleanField, 3 | CreateButton, 4 | DatagridConfigurable, 5 | DateField, 6 | ExportButton, 7 | List, 8 | NumberField, 9 | ReferenceArrayField, 10 | SearchInput, 11 | SelectColumnsButton, 12 | TextField, 13 | TopToolbar, 14 | } from 'react-admin'; 15 | 16 | function PostList() { 17 | return ( 18 | ]} 21 | actions={ 22 | 23 | 24 | 25 | 26 | 27 | } 28 | > 29 | 30 | 31 | 32 | 33 | 34 | 35 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default PostList; 48 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | define: { 8 | 'process.env': process.env, 9 | }, 10 | server: { 11 | host: true, 12 | }, 13 | base: './', 14 | }); 15 | --------------------------------------------------------------------------------