Copy updated umijs example from vercel/vercel (#1045)

### Description

Copying the update over from
vercel/vercel#12868.

### Demo URL


https://vercel.com/austin-merricks-projects/umijs/B7cFNqhyxAy5omTFHerXNw97bj1L

### Type of Change

- [ ] New Example
- [X] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?

framework-boilerplates/umijs/.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.com/
+

framework-boilerplates/umijs/.umirc.ts

@@ -1,25 +1,9 @@
-import { IConfig } from 'umi-types';
+import { defineConfig } from "umi";
 
-// ref: https://umijs.org/config/
-const config: IConfig = {
-  treeShaking: true,
-  plugins: [
-    // ref: https://umijs.org/plugin/umi-plugin-react.html
-    [
-      'umi-plugin-react',
-      {
-        antd: false,
-        dva: false,
-        dynamicImport: false,
-        title: 'umijs',
-        dll: false,
-
-        routes: {
-          exclude: [/components\//],
-        },
-      },
-    ],
+export default defineConfig({
+  routes: [
+    { path: "/", component: "index" },
+    { path: "/docs", component: "docs" },
   ],
-};
-
-export default config;
+  npmClient: 'npm',
+});

framework-boilerplates/umijs/README.md

@@ -8,14 +8,14 @@ This directory is a brief example of a [UmiJS](https://umijs.org/) app that can
 
 Deploy your own UmiJS project with Vercel.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/framework-boilerplates/umijs&template=umijs)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/umijs&template=umijs)
 
 _Live Example: https://umijs-template.vercel.app_
 
 ### How We Created This Example
 
-To get started with UmiJS deployed with Vercel, you can use the [Umi CLI](https://github.com/umijs/create-umi) to initialize the project:
+To get started with UmiJS deployed with Vercel, you can use the [Umi CLI](https://umijs.org/docs/guides/getting-started) to initialize the project:
 
 ```shell
-$ yarn create umi app-name
+$ npm create-umi@latest
 ```

framework-boilerplates/umijs/package.json

@@ -1,51 +1,18 @@
 {
   "private": true,
   "scripts": {
-    "start": "umi dev",
-    "dev": "umi dev --port $PORT",
+    "dev": "umi dev",
     "build": "umi build",
-    "test": "umi test",
-    "lint:es": "eslint --ext .js src mock tests",
-    "lint:ts": "tslint \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "precommit": "lint-staged"
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "start": "npm run dev"
   },
   "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "umi": "^4.4.4"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.12",
-    "@types/react": "^16.7.18",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-test-renderer": "^16.0.3",
-    "babel-eslint": "^9.0.0",
-    "eslint": "^5.4.0",
-    "eslint-config-umi": "^1.4.0",
-    "eslint-plugin-flowtype": "^2.50.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.2.2",
-    "react-test-renderer": "^16.7.0",
-    "tslint": "^5.12.0",
-    "tslint-eslint-rules": "^5.4.0",
-    "tslint-react": "^3.6.0",
-    "umi": "^2.7.0",
-    "umi-plugin-react": "^1.8.0",
-    "umi-types": "^0.2.0"
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "tslint --fix",
-      "git add"
-    ],
-    "*.{js,jsx}": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
-  "engines": {
-    "node": "16.x"
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.0.3"
   }
 }

framework-boilerplates/umijs/src/layouts/index.less

@@ -0,0 +1,10 @@
+.navs {
+  ul {
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+  li {
+    margin-right: 1em;
+  }
+}

framework-boilerplates/umijs/src/layouts/index.tsx

@@ -1,13 +1,21 @@
-import React from 'react';
-import styles from './index.css';
+import { Link, Outlet } from 'umi';
+import styles from './index.less';
 
-const BasicLayout: React.FC = props => {
+export default function Layout() {
   return (
-    <div className={styles.normal}>
-      <h1 className={styles.title}>Yay! Welcome to umi!</h1>
-      {props.children}
+    <div className={styles.navs}>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/docs">Docs</Link>
+        </li>
+        <li>
+          <a href="https://github.com/umijs/umi">Github</a>
+        </li>
+      </ul>
+      <Outlet />
     </div>
   );
-};
-
-export default BasicLayout;
+}

framework-boilerplates/umijs/src/pages/docs.tsx

@@ -0,0 +1,9 @@
+const DocsPage = () => {
+  return (
+    <div>
+      <p>This is umi docs.</p>
+    </div>
+  );
+};
+
+export default DocsPage;

framework-boilerplates/umijs/src/pages/index.tsx

@@ -1,19 +1,15 @@
-import React from 'react';
-import styles from './index.css';
+import yayJpg from '../assets/yay.jpg';
 
-
-export default function() {
+export default function HomePage() {
   return (
-    <div className={styles.normal}>
-      <div className={styles.welcome} />
-      <ul className={styles.list}>
-        <li>To get started, edit <code>src/pages/index.js</code> and save to reload.</li>
-        <li>
-          <a href="https://umijs.org/guide/getting-started.html">
-            Getting Started
-          </a>
-        </li>
-      </ul>
+    <div>
+      <h2>Yay! Welcome to umi!</h2>
+      <p>
+        <img src={yayJpg} width="388" />
+      </p>
+      <p>
+        To get started, edit <code>pages/index.tsx</code> and save to reload.
+      </p>
     </div>
   );
 }

framework-boilerplates/umijs/tsconfig.json

@@ -1,17 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "jsx": "react",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "strict": true,
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "allowSyntheticDefaultImports": true
-  }
+  "extends": "./src/.umi/tsconfig.json"
 }

framework-boilerplates/umijs/typings.d.ts

@@ -1,2 +1 @@
-declare module '*.css';
-declare module '*.png';
+import 'umi/typings';