jdf2e · oasis-cloud · Nov 27, 2024
diff --git a/README.md b/README.md
@@ -1,20 +1,32 @@
 # NutUI 示例
 
-本目录下包含 NutUI Vue 版本的相关示例
+本目录下包含 NutUI Vue 和 NutUID React 版本的相关示例
 
 ## 目录结构
 
 ```bash
-├── vite            NutUI + Vite
-├── rsbuild         NutUI + Rsbuild
-├── vue-cli         NutUI + Vue CLI
-├──
-├── taro            NutUI + Taro
-├── taro-tsx        NutUI + Taro + TSX
-├──
-├── cdn             NutUI CDN
-├──
-├── vite-jdt        NutUI JDT 主题
-├── taro-jdt        NutUI + Taro JDT 主题
+├── nutui
+  ├── v4
+    ├── vite            NutUI + Vite
+    ├── rsbuild         NutUI + Rsbuild
+    ├── vue-cli         NutUI + Vue CLI
+    ├──
+    ├── taro            NutUI + Taro
+    ├── taro-tsx        NutUI + Taro + TSX
+    ├──
+    ├── cdn             NutUI CDN
+    ├──
+    ├── vite-jdt        NutUI JDT 主题
+    ├── taro-jdt        NutUI + Taro JDT 主题
+
+```
+
+```bash
+├── nutui-react
+  ├── v2
+    ├── create-app      NutUI React + Create React App
+    ├── rsbuild         NutUI React + Rsbuild
+    ├── next            NutUI React + Next.js
+    ├── vite            NutUI React + Vite
 
 ```
diff --git a/rsbuild/src/index.css → nutui-react/v2/create-app/README.md b/rsbuild/src/index.css → nutui-react/v2/create-app/README.md
diff --git a/nutui-react/v2/create-app/craco.config.js b/nutui-react/v2/create-app/craco.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  babel: {
+    plugins: [
+      [
+        "import",
+        {
+          "libraryName": "@nutui/nutui-react",
+          "libraryDirectory": "dist/esm",
+          "style": "css",
+          "camel2DashComponentName": false
+        },
+        "nutui-react"
+      ]
+    ]
+  },
+};
diff --git a/nutui-react/v2/create-app/package.json b/nutui-react/v2/create-app/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@nutui/nutui-cra-demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@nutui/icons-react": "^1.0.1",
+    "@nutui/nutui-react": "^2.4.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@craco/craco": "^7.1.0",
+    "babel-plugin-import": "^1.13.8"
+  }
+}
diff --git a/nutui-react/v2/create-app/public/favicon.ico b/nutui-react/v2/create-app/public/favicon.ico
diff --git a/nutui-react/v2/create-app/public/index.html b/nutui-react/v2/create-app/public/index.html
@@ -0,0 +1,43 @@
+<!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="Web site created using create-react-app"
+    />
+    <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>React App</title>
+  </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>
diff --git a/nutui-react/v2/create-app/public/logo192.png b/nutui-react/v2/create-app/public/logo192.png
diff --git a/nutui-react/v2/create-app/public/logo512.png b/nutui-react/v2/create-app/public/logo512.png
diff --git a/nutui-react/v2/create-app/public/manifest.json b/nutui-react/v2/create-app/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"
+}
diff --git a/nutui-react/v2/create-app/public/robots.txt b/nutui-react/v2/create-app/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/nutui-react/v2/create-app/src/App.css b/nutui-react/v2/create-app/src/App.css
@@ -0,0 +1,28 @@
+.indexHeader {
+  display: flex;
+  align-items: center;
+  padding: 0 34px;
+  height: 117px;
+}
+
+.image {
+  width: 67px;
+  height: 67px;
+  margin-right: 18px;
+  flex-shrink: 0;
+}
+
+.nut-img {
+  width: 100%;
+  height: 100%;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+}
+
+.flexCenter {
+  display: flex;
+  justify-content: center;
+}
diff --git a/nutui-react/v2/create-app/src/App.js b/nutui-react/v2/create-app/src/App.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import './App.css'
+import { Star } from '@nutui/icons-react'
+import { Row, Col, Image, Button } from '@nutui/nutui-react'
+
+const Home = () => {
+  return (
+    <div>
+      <div className="indexHeader">
+        <Image className="image" src="https://nutui.jd.com/h5/react/2x/demo-2.0.14/logo-red.png"></Image>
+        <div className="info">
+          <h1>NutUI-React</h1>
+          <p>京东风格的轻量级移动端 React 组件库</p>
+        </div>
+      </div>
+
+      <Row>
+        <Col span={1} />
+        <Col className="flexCenter" span={22}>
+          <Button type='primary' block icon={<Star />} onClick={() => {
+            window.location.href = "https://github.com/jdf2e/nutui-react"
+          }}> Star </Button>
+        </Col>
+        <Col span={1} />
+      </Row>
+    </div>
+  )
+}
+
+export default Home
diff --git a/nutui-react/v2/create-app/src/App.test.js b/nutui-react/v2/create-app/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/nutui-react/v2/create-app/src/index.css b/nutui-react/v2/create-app/src/index.css
@@ -0,0 +1,33 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  height: 48px;
+  line-height: 48px;
+  font-size: 26px;
+  color: #333;
+}
+
+p {
+  height: 18px;
+  line-height: 18px;
+  font-size: 13px;
+  color: #9a9b9d;
+  white-space: nowrap;
+}
diff --git a/nutui-react/v2/create-app/src/index.js b/nutui-react/v2/create-app/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/nutui-react/v2/create-app/src/logo.svg b/nutui-react/v2/create-app/src/logo.svg
diff --git a/nutui-react/v2/create-app/src/reportWebVitals.js b/nutui-react/v2/create-app/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/nutui-react/v2/create-app/src/setupTests.js b/nutui-react/v2/create-app/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/nutui-react/v2/next/.babelrc b/nutui-react/v2/next/.babelrc
@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [[
+    "import",
+    {
+      "libraryName": "@nutui/nutui-react",
+      "libraryDirectory": "dist/esm",
+      "style": "css",
+      "camel2DashComponentName": false
+    },
+    "nutui-react"
+  ]]
+}
diff --git a/nutui-react/v2/next/.gitignore b/nutui-react/v2/next/.gitignore
@@ -0,0 +1,2 @@
+.next
+node_modules
diff --git a/nutui-react/v2/next/README.md b/nutui-react/v2/next/README.md
@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/nutui-react/v2/next/next-env.d.ts b/nutui-react/v2/next/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/nutui-react/v2/next/next.config.js b/nutui-react/v2/next/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['@nutui/nutui-react', '@nutui/icons-react'],
+}
+
+module.exports = nextConfig