docs: upgrade next.js

.eslintrc.cjs

@@ -1,11 +1,7 @@
 module.exports = {
-  extends: [require.resolve('@umijs/fabric/dist/eslint')],
+  extends: [require.resolve('@micro-web/standard/eslint.cjs')],
   rules: {
-    'arrow-body-style': 0,
-    'jsx-a11y/label-has-for': 0,
-    'no-confusing-arrow': 0,
-    'no-nested-ternary': 0,
-    'no-console': 2,
-    'react/no-this-in-sfc': 0,
+    'no-return-assign': 0,
+    'no-restricted-globals': 0,
   },
 };

.prettierignore

@@ -0,0 +1,31 @@
+**/*.svg
+package.json
+
+/dist
+/node_modules
+.dockerignore
+.DS_Store
+.eslintignore
+*.jpg
+*.ico
+*.png
+*.toml
+docker
+.editorconfig
+Dockerfile*
+.gitignore
+.prettierignore
+LICENSE
+.eslintcache
+*.lock
+yarn-error.log
+.history
+CNAME
+*.gif
+.idea
+.vscode
+.npmrc
+*.local
+stats_rollup.html
+.env
+.husky

.stylelintrc.cjs

@@ -1,3 +1 @@
-const fabric = require('@umijs/fabric');
-
-module.exports = fabric.stylelint;
+module.exports = require('@micro-web/standard/stylelint.cjs');

package.json

@@ -24,15 +24,15 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "@umijs/fabric": "^2.10.1",
+    "@micro-web/standard": "^1.2.2",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "husky": "^7.0.4",
     "lint-staged": "^12.3.3",
-    "next": "^12.0.8",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "^4.5.5"
+    "next": "^14.0.4",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.5"
   }
 }

packages/example/components/doc-components.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from "react";
 import photo1 from '../images/1.jpg';
 import photo2 from '../images/2.jpg';
 import photo3 from '../images/3.jpg';
@@ -8,7 +8,7 @@ import photo6 from '../images/6.jpg';
 
 export const photoImages = [photo1.src, photo2.src, photo3.src, photo4.src, photo5.src, photo6.src];
 
-export const ImageList: React.FC = ({ children }) => {
+export const ImageList = ({ children }: PropsWithChildren) => {
   return <div className="flex flex-wrap items-center my-6">{children}</div>;
 };
 
@@ -37,7 +37,7 @@ export const Button = React.forwardRef<HTMLDivElement, ButtonProps>(({ primary,
   );
 });
 
-export const Overlay: React.FC = ({ children }) => {
+export const Overlay= ({ children }: PropsWithChildren) => {
   return (
     <div className="absolute left-0 bottom-0 p-2 w-full min-h-24 text-sm text-slate-300 z-50 bg-black/50">
       {children}

packages/example/middleware.tsx

@@ -0,0 +1 @@
+export { locales as middleware } from 'nextra/locales';

packages/example/next.config.js

@@ -2,16 +2,22 @@ const nextra = require('nextra');
 
 const withNextra = nextra({
   theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.js',
-  unstable_stork: false,
-  unstable_contentDump: true,
+  themeConfig: './theme.config.jsx',
+  staticImage: true,
+  flexsearch: {
+    codeblocks: false,
+  },
+  defaultShowCopyCode: true,
 });
 
 module.exports = withNextra({
   i18n: {
     locales: ['zh-CN', 'en-US'],
     defaultLocale: 'zh-CN',
   },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   redirects: () => {
     return [
       {

packages/example/package.json

@@ -7,19 +7,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "mac-scrollbar": "^0.9.6",
-    "next": "^12.0.8",
-    "nextra": "^2.0.0-alpha.24",
-    "nextra-theme-docs": "^2.0.0-alpha.23",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "mac-scrollbar": "^0.13.6",
+    "next": "^14.0.4",
+    "nextra": "^2.13.2",
+    "nextra-theme-docs": "^2.13.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-photo-view": "link:../react-photo-view"
   },
   "devDependencies": {
-    "@types/node": "^16.11.26",
-    "@types/react": "^17.0.39",
-    "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.6",
-    "tailwindcss": "^3.0.23"
+    "@types/node": "^18.19.3",
+    "@types/react": "^18.2.45",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0"
   }
 }

packages/example/pages/_meta.en-US.json

@@ -0,0 +1,11 @@
+{
+  "index": {
+    "title": "Introduction",
+    "type": "page",
+    "display": "hidden"
+  },
+  "docs": {
+    "title": "Docs",
+    "type": "page"
+  }
+}

packages/example/pages/_meta.zh-CN.json

@@ -0,0 +1,11 @@
+{
+  "index": {
+    "title": "简介",
+    "type": "page",
+    "display": "hidden"
+  },
+  "docs": {
+    "title": "文档",
+    "type": "page"
+  }
+}

packages/example/pages/docs/api.en-US.mdx

@@ -29,15 +29,15 @@ title: API
 
 ## PhotoView
 
-| Name     | Description                               | Type                                                | Default Value |
-| -------- | ----------------------------------------- | --------------------------------------------------- | ------------- |
-| src      | Image src                                 | string                                              |
-| render   | Custom rendering, lower priority than src | \(props: PhotoRenderParams\) => React\.ReactNode |
-| overlay  | Overlay                                   | React\.ReactNode                                    |
-| width    | Custom render node width                  | number                                              |
-| height   | Custom render node height                 | number                                              |
-| children | Child nodes, usually thumbnails           | React\.ReactElement                                 |
-| triggers | The trigger mode which executes opening image action        | Array\<\"onClick\" \| \"onDoubleClick\"\>                            | [\"onClick\"]          |
+| Name     | Description                                          | Type                                                | Default Value |
+| -------- | ---------------------------------------------------- | --------------------------------------------------- | ------------- |
+| src      | Image src                                            | string                                              |
+| render   | Custom rendering, lower priority than src            | \(props: PhotoRenderParams\) =&gt; React\.ReactNode |
+| overlay  | Overlay                                              | React\.ReactNode                                    |
+| width    | Custom render node width                             | number                                              |
+| height   | Custom render node height                            | number                                              |
+| children | Child nodes, usually thumbnails                      | React\.ReactElement                                 |
+| triggers | The trigger mode which executes opening image action | Array\<\"onClick\" \| \"onDoubleClick\"\>           | [\"onClick\"] |
 
 ## DataType
 

packages/example/pages/docs/api.zh-CN.mdx

@@ -37,7 +37,7 @@ title: API
 | width    | 自定义渲染节点宽度          | number                                              |
 | height   | 自定义渲染节点高度          | number                                              |
 | children | 子节点，一般为缩略图        | React\.ReactElement                                 |
-| triggers | 触发打开图片的方式        | Array\<\"onClick\" \| \"onDoubleClick\"\>                            | [\"onClick\"]          |
+| triggers | 触发打开图片的方式          | Array\<\"onClick\" \| \"onDoubleClick\"\>           | [\"onClick\"] |
 
 ## DataType
 

packages/example/pages/docs/change-log.en-US.mdx

@@ -4,8 +4,8 @@ title: Change Log
 
 ## 1.2.4
 
-feat: The PhotoView subcomponent supports exporting refs
-fix: The isActive attribute judgment issue
+1. feat: The PhotoView subcomponent supports exporting refs
+2. fix: The isActive attribute judgment issue
 
 ## 1.2.3
 

packages/example/pages/docs/change-log.zh-CN.mdx

@@ -4,8 +4,8 @@ title: Change Log
 
 ## 1.2.4
 
-feat: PhotoView 子组件支持导出 ref
-fix: isActive 属性判断问题
+1. feat: PhotoView 子组件支持导出 ref
+2. fix: isActive 属性判断问题
 
 ## 1.2.3
 

packages/example/pages/docs/getting-started.en-US.mdx

@@ -2,7 +2,7 @@
 title: Getting Started
 ---
 
-import Callout from 'nextra-theme-docs/callout';
+import { Callout } from 'nextra/components';
 
 import DocBasic from '../../components/doc-basic';
 import DocMotion from '../../components/doc-motion';

packages/example/pages/docs/getting-started.zh-CN.mdx

@@ -2,7 +2,7 @@
 title: Getting Started
 ---
 
-import Callout from 'nextra-theme-docs/callout';
+import { Callout } from 'nextra/components';
 
 import DocBasic from '../../components/doc-basic';
 import DocMotion from '../../components/doc-motion';

packages/example/pages/index.en-US.mdx

@@ -2,8 +2,8 @@
 title: An exquisite React photo preview component
 ---
 
-import Callout from 'nextra-theme-docs/callout';
-import Bleed from 'nextra-theme-docs/bleed';
+import { Callout } from 'nextra/components';
+import { Bleed } from 'nextra-theme-docs';
 import Features from '../components/features';
 
 import Index from '../components/doc-index';
@@ -57,40 +57,24 @@ It has very perfect details and features:
 
 ## About
 
-<p className="flex flex-wrap">
-  <img
-    alt="stars"
-    src="https://badgen.net/github/stars/MinJieLiu/react-photo-view"
-    className="mr-2 mb-2"
-  />
-  <img
-    alt="version"
-    src="https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square"
-    className="mr-2 mb-2"
-  />
+<p className="flex flex-wrap mt-6">
+  <img alt="stars" src="https://badgen.net/github/stars/MinJieLiu/react-photo-view" className="mr-2 mb-2" />
+  <img alt="version" src="https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square" className="mr-2 mb-2" />
   <img
     alt="downloads"
     src="http://img.shields.io/npm/dm/react-photo-view.svg?style=flat-square"
     className="mr-2 mb-2"
   />
   <img alt="license" src="https://badgen.net/npm/license/react-photo-view" className="mr-2 mb-2" />
-  <img
-    alt="min"
-    src="https://badgen.net/bundlephobia/min/react-photo-view?label=minified"
-    className="mr-2 mb-2"
-  />
-  <img
-    alt="gzip"
-    src="https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip"
-    className="mr-2 mb-2"
-  />
+  <img alt="min" src="https://badgen.net/bundlephobia/min/react-photo-view?label=minified" className="mr-2 mb-2" />
+  <img alt="gzip" src="https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip" className="mr-2 mb-2" />
 </p>
 
 `react-photo-view` created by [MinJieLiu](https:github.comMinJieLiu)
 
 <Callout emoji="😄">
   <span>Click a Star to not get lost 👉 </span>
-  <a className="inline-block" href="https://github.com/MinJieLiu/react-photo-view" target="_blank">
+  <a className="inline-block underline" href="https://github.com/MinJieLiu/react-photo-view" target="_blank">
     Star
   </a>
   <span> Thanks for the support!</span>

packages/example/pages/index.zh-CN.mdx

@@ -2,8 +2,8 @@
 title: 一款超精致的 React 图片预览组件
 ---
 
-import Callout from 'nextra-theme-docs/callout';
-import Bleed from 'nextra-theme-docs/bleed';
+import { Callout } from 'nextra/components';
+import { Bleed } from 'nextra-theme-docs';
 import Features from '../components/features';
 
 import Index from '../components/doc-index';
@@ -57,40 +57,24 @@ export default function App() {
 
 ## 关于
 
-<p className="flex flex-wrap">
-  <img
-    alt="stars"
-    src="https://badgen.net/github/stars/MinJieLiu/react-photo-view"
-    className="mr-2 mb-2"
-  />
-  <img
-    alt="version"
-    src="https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square"
-    className="mr-2 mb-2"
-  />
+<p className="flex flex-wrap mt-6">
+  <img alt="stars" src="https://badgen.net/github/stars/MinJieLiu/react-photo-view" className="mr-2 mb-2" />
+  <img alt="version" src="https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square" className="mr-2 mb-2" />
   <img
     alt="downloads"
     src="http://img.shields.io/npm/dm/react-photo-view.svg?style=flat-square"
     className="mr-2 mb-2"
   />
   <img alt="license" src="https://badgen.net/npm/license/react-photo-view" className="mr-2 mb-2" />
-  <img
-    alt="min"
-    src="https://badgen.net/bundlephobia/min/react-photo-view?label=minified"
-    className="mr-2 mb-2"
-  />
-  <img
-    alt="gzip"
-    src="https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip"
-    className="mr-2 mb-2"
-  />
+  <img alt="min" src="https://badgen.net/bundlephobia/min/react-photo-view?label=minified" className="mr-2 mb-2" />
+  <img alt="gzip" src="https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip" className="mr-2 mb-2" />
 </p>
 
 `react-photo-view` 由 [MinJieLiu](https://github.com/MinJieLiu) 创建
 
 <Callout emoji="😄">
   <span>点个 Star 不迷路 👉 </span>
-  <a className="inline-block" href="https://github.com/MinJieLiu/react-photo-view" target="_blank">
+  <a className="inline-block underline" href="https://github.com/MinJieLiu/react-photo-view" target="_blank">
     去 Star
   </a>
   <span> 感谢支持！</span>