chore: add material ui vite example (#6005)

examples/invoicer/README.md

@@ -58,18 +58,34 @@ npm create refine-app@latest -- --example invoicer
 
 ![Login Page](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/login-page.png)
 
+ <br />
+
 ![Accounts List](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/accounts-list.png)
-
+
+ <br />
+
 ![New Account](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/accounts-new.png)
-
+
+ <br />
+
 ![Edit Account](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/accounts-edit.png)
-
+
+ <br />
+
 ![Clients List](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/clients-list.png)
-
+
+ <br />
+
 ![Invoices List](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/invoices-list.png)
-
+
+ <br />
+
 ![New Invoice](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/invoices-new.png)
-
+
+ <br />
+
 ![Show Invoice](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/invoices-show.png)
-
+
+ <br />
+
 ![PDF Export](https://refine.ams3.cdn.digitaloceanspaces.com/blog/invoicer/pdf-export.png)

examples/with-material-ui-vite/.gitignore

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

examples/with-material-ui-vite/.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+strict-peer-dependencies=false

examples/with-material-ui-vite/Dockerfile

@@ -0,0 +1,37 @@
+# This Dockerfile uses `serve` npm package to serve the static files with node process.
+# You can find the Dockerfile for nginx in the following link:
+# https://github.com/refinedev/dockerfiles/blob/main/vite/Dockerfile.nginx
+FROM refinedev/node:18 AS base
+
+FROM base as deps
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base as builder
+
+ENV NODE_ENV production
+
+COPY --from=deps /app/refine/node_modules ./node_modules
+
+COPY . .
+
+RUN npm run build
+
+FROM base as runner
+
+ENV NODE_ENV production
+
+RUN npm install -g serve
+
+COPY --from=builder /app/refine/dist ./
+
+USER refine
+
+CMD ["serve"]

examples/with-material-ui-vite/README.MD

@@ -0,0 +1,67 @@
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
+</a>
+
+</br>
+</br>
+
+<div align="center">
+    <a href="https://refine.dev">Home Page</a> |
+    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/examples/">Examples</a> |
+    <a href="https://refine.dev/blog/">Blog</a> |
+    <a href="https://refine.dev/docs/">Documentation</a>
+</div>
+</div>
+
+</br>
+
+
+<div align="center">Build your React-based internal tools, admin panels, dashboards, B2B apps with flexibility in mind.
+An open-source, headless React meta-framework, developed with a commitment to best practices, flexibility, minimal tech debt, and team alignment, could be a perfect fit for dynamic environments.
+
+<br />
+<br />
+
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+</div>
+
+## Material UI Refine Example with Vite
+
+Refine has a built-in integration with [Material UI](https://mui.com/material-ui/getting-started/), and this example demonstrates how to use it.
+
+The example includes list, create, edit, and delete pages for the `posts` and `category` resources, as well as a functional login page and dark mode.
+
+For more information on how to use Material UI with Refine, please refer to the [Material UI integration guide](https://refine.dev/docs/ui-integrations/material-ui/introduction/).
+
+
+
+
+
+## Try this example on your local
+
+```bash
+npm create refine-app@latest -- --example with-material-ui-vite
+```
+
+## Try this example on CodeSandbox
+
+<br/>
+
+[![Open with-material-ui-vite example from Refine](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/with-material-ui-vite?view=preview&theme=dark&codemirror=1)
+
+
+## Screenshots
+
+![Login](https://refine.ams3.cdn.digitaloceanspaces.com/example-readmes/with-material-ui-vite/login.png "Login")
+
+<br />
+
+![Posts Page](https://refine.ams3.cdn.digitaloceanspaces.com/example-readmes/with-material-ui-vite/posts.png "Post")
+
+<br />
+
+![Create Page](https://refine.ams3.cdn.digitaloceanspaces.com/example-readmes/with-material-ui-vite/create.png "Create")

examples/with-material-ui-vite/index.html

@@ -0,0 +1,41 @@
+<!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" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="refine | Build your React-based CRUD applications, without constraints."
+    />
+    <meta
+      data-rh="true"
+      property="og:image"
+      content="https://refine.dev/img/refine_social.png"
+    />
+    <meta
+      data-rh="true"
+      name="twitter:image"
+      content="https://refine.dev/img/refine_social.png"
+    />
+    <title>
+      Refine - Build your React-based CRUD applications, without constraints.
+    </title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+    <!--
+      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 dev` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/with-material-ui-vite/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "with-material-ui-vite",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && refine build",
+    "dev": "refine dev",
+    "preview": "refine start",
+    "refine": "refine"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.3",
+    "@mui/lab": "^5.0.0-alpha.85",
+    "@mui/material": "^5.14.2",
+    "@mui/x-data-grid": "^6.6.0",
+    "@refinedev/cli": "^2.16.21",
+    "@refinedev/core": "^4.47.1",
+    "@refinedev/devtools": "^1.1.32",
+    "@refinedev/kbar": "^1.3.6",
+    "@refinedev/mui": "^5.14.4",
+    "@refinedev/react-hook-form": "^4.8.14",
+    "@refinedev/react-router-v6": "^4.5.5",
+    "@refinedev/simple-rest": "^5.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.30.0",
+    "react-router-dom": "^6.8.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.16.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/parser": "5.48.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.24.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
+  },
+  "refine": {
+    "projectId": "EeHbXW-UB0cNm-ODd29d"
+  }
+}