Merge pull request #6242 from marmelab/crm

Add CRM example

Makefile

@@ -24,21 +24,27 @@ run-no-code: ## run the no-code example
 run-tutorial: ## run the tutorial example
 	@yarn -s run-tutorial
 
-run-demo: ## run the demo example
+run-demo: ## run the ecommerce example
 	@yarn -s run-demo
 
-run-demo-watch: ## run the demo example with watch on the ra dependencies
+run-demo-watch: ## run the ecommerce example and watch changes in ra dependencies
 	@yarn -s run-demo-watch
 
-build-demo: ## compile the demo example to static js
+build-demo: ## compile the ecommerce example to static js
 	@yarn -s build-demo
 
-run-graphql-demo: ## run the demo example
+run-graphql-demo: ## run the ecommerce example with a graphql backend
 	@yarn -s run-graphql-demo
 
-run-graphql-demo-watch: ## run the demo example with watch on the ra dependencies
+run-graphql-demo-watch: ## run the ecommerce example with a graphql backend and watch changes in ra dependencies
 	@yarn -s run-graphql-demo-watch
 
+run-crm: ## run the crm example
+	@yarn -s run-crm
+
+build-crm: ## run the crm example
+	@yarn -s build-crm
+
 build-ra-core:
 	@echo "Transpiling ra-core files...";
 	@cd ./packages/ra-core && yarn -s build

examples/crm/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/crm/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.eslintcache
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/crm/README.md

@@ -0,0 +1,52 @@
+# React-admin CRM
+
+This is a demo of the [react-admin](https://github.com/marmelab/react-admin) library for React.js. It's a CRM for a fake Web agency with a few sales. You can test it online at https://marmelab.com/react-admin-crm.
+
+https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4
+
+React-admin usually requires a REST/GraphQL server to provide data. In this demo however, the API is simulated by the browser (using [FakeRest](https://github.com/marmelab/FakeRest)). The source data is generated at runtime by a package called [data-generator](https://github.com/marmelab/react-admin/tree/master/examples/data-generator).
+
+To explore the source code, start with [src/App.tsx](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/App.tsx).
+
+**Note**: This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+
+## How to run
+
+After having cloned the react-admin repository, run the following commands at the react-admin root:
+
+```sh
+make install
+
+make build
+
+make run-crm
+```
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](#running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+### `npm run deploy`
+
+Deploy the build to GitHub gh-pages.

examples/crm/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "react-admin-crm",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@nivo/bar": "^0.67.0",
+    "@nivo/core": "^0.67.0",
+    "date-fns": "^2.19.0",
+    "faker": "~5.4.0",
+    "lodash": "~4.17.5",
+    "prop-types": "^15.7.2",
+    "ra-data-fakerest": "^3.13.4",
+    "react": "^17.0.0",
+    "react-admin": "^3.15.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^17.0.0",
+    "react-scripts": "^4.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/classnames": "^2.2.9",
+    "@types/faker": "^5.1.7",
+    "@types/jest": "^26.0.19",
+    "@types/lodash": "~4.14.168",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.9",
+    "@types/react-beautiful-dnd": "^13.0.0",
+    "source-map-explorer": "^2.0.0",
+    "typescript": "^4.0.2",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "homepage": "https://marmelab.com/react-admin-crm",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/crm/public/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Demo of the react-admin framework" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Atomic CRM</title>
+    <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>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/crm/public/logos/Readme.md

@@ -0,0 +1 @@
+Logos from https://uilogos.co/

examples/crm/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/crm/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/crm/src/App.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Admin, Resource, ListGuesser, defaultTheme } from 'react-admin';
+import {
+    unstable_createMuiStrictModeTheme,
+    createMuiTheme,
+} from '@material-ui/core/styles';
+
+import { dataProvider } from './dataProvider';
+import { authProvider } from './authProvider';
+import Layout from './Layout';
+import contacts from './contacts';
+import companies from './companies';
+import deals from './deals';
+import { Dashboard } from './dashboard/Dashboard';
+
+// FIXME MUI bug https://github.com/mui-org/material-ui/issues/13394
+const theme =
+    process.env.NODE_ENV !== 'production'
+        ? unstable_createMuiStrictModeTheme(defaultTheme)
+        : createMuiTheme(defaultTheme);
+
+const App = () => (
+    <Admin
+        dataProvider={dataProvider}
+        authProvider={authProvider}
+        layout={Layout}
+        dashboard={Dashboard}
+        theme={theme}
+    >
+        <Resource name="deals" {...deals} />
+        <Resource name="contacts" {...contacts} />
+        <Resource name="companies" {...companies} />
+        <Resource name="contactNotes" />
+        <Resource name="dealNotes" />
+        <Resource name="tasks" list={ListGuesser} />
+        <Resource name="sales" list={ListGuesser} />
+        <Resource name="tags" list={ListGuesser} />
+    </Admin>
+);
+
+export default App;

examples/crm/src/Header.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Tabs, Tab, Toolbar, AppBar, Box, Typography } from '@material-ui/core';
+import { Link, useRouteMatch } from 'react-router-dom';
+import { UserMenu, Logout, LoadingIndicator } from 'react-admin';
+
+const useStyles = makeStyles({
+    root: {
+        flexGrow: 1,
+    },
+    logo: {
+        width: 50,
+        height: 43.54,
+    },
+});
+
+const Header = () => {
+    const classes = useStyles();
+    const match = useRouteMatch(['/contacts', '/companies', '/deals']);
+    const currentPath = match?.path ?? '/';
+
+    return (
+        <nav className={classes.root}>
+            <AppBar position="static" color="primary">
+                <Toolbar variant="dense">
+                    <Box flex={1} display="flex" justifyContent="space-between">
+                        <Box display="flex" alignItems="center">
+                            <img
+                                className={classes.logo}
+                                src={
+                                    'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg'
+                                }
+                                alt="Bosch Logo"
+                            />
+                            <Typography component="span" variant="h5">
+                                Atomic CRM
+                            </Typography>
+                        </Box>
+                        <Box>
+                            <Tabs
+                                value={currentPath}
+                                aria-label="Navigation Tabs"
+                            >
+                                <Tab
+                                    label={'Dashboard'}
+                                    component={Link}
+                                    to="/"
+                                    value="/"
+                                />
+                                <Tab
+                                    label={'Contacts'}
+                                    component={Link}
+                                    to="/contacts"
+                                    value="/contacts"
+                                />
+                                <Tab
+                                    label={'Companies'}
+                                    component={Link}
+                                    to="/companies"
+                                    value="/companies"
+                                />
+                                <Tab
+                                    label={'Deals'}
+                                    component={Link}
+                                    to="/deals"
+                                    value="/deals"
+                                />
+                            </Tabs>
+                        </Box>
+                        <Box display="flex">
+                            <LoadingIndicator />
+                            <UserMenu logout={<Logout button />} />
+                        </Box>
+                    </Box>
+                </Toolbar>
+            </AppBar>
+        </nav>
+    );
+};
+
+export default Header;