example: added Ant Design Pro Layout less (#12408)

examples/with-antd-mobile/README.md → examples/with-ant-design-mobile/README.md

@@ -6,7 +6,7 @@ This example features how you use [antd-mobile](https://github.com/ant-design/an
 
 Deploy the example using [Vercel](https://vercel.com):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-antd-mobile)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-mobile)
 
 ## How to use
 
@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com):
 Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npm init next-app --example with-antd-mobile with-antd-mobile-app
+npm init next-app --example with-ant-design-mobile with-ant-design-mobile-app
 # or
-yarn create next-app --example with-antd-mobile with-antd-mobile-app
+yarn create next-app --example with-ant-design-mobile with-ant-design-mobile-app
 ```
 
 ### Download manually
@@ -25,8 +25,8 @@ yarn create next-app --example with-antd-mobile with-antd-mobile-app
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-antd-mobile
-cd with-antd-mobile
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ant-design-mobile
+cd with-ant-design-mobile
 ```
 
 Install it and run:

examples/with-antd-mobile/package.json → examples/with-ant-design-mobile/package.json

 {
-  "name": "with-antd-mobile",
+  "name": "with-ant-design-mobile",
   "version": "1.1.0",
   "dependencies": {
     "@zeit/next-css": "1.0.1",

examples/with-ant-design-pro-layout-less/.babelrc

+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": true
+      }
+    ]
+  ]
+}
\ No newline at end of file

examples/with-ant-design-pro-layout-less/README.md

+# Ant Design Pro Layout example
+
+This example shows how to use Next.js along with [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout) of React. This is intended to show the integration of this UI toolkit with the Framework.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-pro-layout-less)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npm init next-app --example with-ant-design-pro-layout-less with-ant-design-app
+# or
+yarn create next-app --example with-ant-design-pro-layout-less with-ant-design-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ant-design-pro-layout-less
+cd with-ant-design-pro-layout-less
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-ant-design-pro-layout-less/assets/antd-custom.less

+@primary-color: #52c41a;
+
+@layout-header-height: 40px;
+@border-radius-base: 2px;

examples/with-ant-design-pro-layout-less/layouts/main.tsx

+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+
+import {
+  SmileOutlined,
+  SettingOutlined,
+  PlaySquareOutlined,
+} from '@ant-design/icons'
+
+import { Route, MenuDataItem } from '@ant-design/pro-layout/lib/typings'
+import { SiderMenuProps } from '@ant-design/pro-layout/lib/SiderMenu/SiderMenu'
+
+const ProLayout = dynamic(() => import('@ant-design/pro-layout'), {
+  ssr: false,
+})
+
+const ROUTES: Route = {
+  path: '/',
+  routes: [
+    {
+      path: '/',
+      name: 'Welcome',
+      icon: <SmileOutlined />,
+      routes: [
+        {
+          path: '/welcome',
+          name: 'Account Settings',
+          icon: <SettingOutlined />,
+        },
+      ],
+    },
+    {
+      path: '/example',
+      name: 'Example Page',
+      icon: <PlaySquareOutlined />,
+    },
+  ],
+}
+
+const menuHeaderRender = (
+  logoDom: React.ReactNode,
+  titleDom: React.ReactNode,
+  props: SiderMenuProps
+) => (
+  <Link href="/">
+    <a>
+      {logoDom}
+      {!props?.collapsed && titleDom}
+    </a>
+  </Link>
+)
+
+const menuItemRender = (options: MenuDataItem, element: React.ReactNode) => (
+  <Link href={options.path}>
+    <a>{element}</a>
+  </Link>
+)
+
+export default ({ children }) => (
+  <ProLayout
+    style={{ minHeight: '100vh' }}
+    route={ROUTES}
+    menuItemRender={menuItemRender}
+    menuHeaderRender={menuHeaderRender}
+  >
+    {children}
+  </ProLayout>
+)

examples/with-ant-design-pro-layout-less/next-env.d.ts

+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/with-ant-design-pro-layout-less/next.config.js

+/* eslint-disable */
+const withLess = require('@zeit/next-less')
+const lessToJS = require('less-vars-to-js')
+const fs = require('fs')
+const path = require('path')
+
+// Where your antd-custom.less file lives
+const themeVariables = lessToJS(
+  fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
+)
+
+module.exports = withLess({
+  lessLoaderOptions: {
+    javascriptEnabled: true,
+    modifyVars: themeVariables, // make your antd custom effective
+  },
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      const antStyles = /antd\/.*?\/style.*?/
+      const origExternals = [...config.externals]
+      config.externals = [
+        (context, request, callback) => {
+          if (request.match(antStyles)) return callback()
+          if (typeof origExternals[0] === 'function') {
+            origExternals[0](context, request, callback)
+          } else {
+            callback()
+          }
+        },
+        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
+      ]
+
+      config.module.rules.unshift({
+        test: antStyles,
+        use: 'null-loader',
+      })
+    }
+    return config
+  },
+})

examples/with-ant-design-pro-layout-less/package.json

+{
+  "name": "with-ant-design-pro-layout-less",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ant-design/icons": "4.1.0",
+    "@ant-design/pro-layout": "5.0.10",
+    "@zeit/next-less": "^1.0.1",
+    "antd": "^4.2.0",
+    "babel-plugin-import": "^1.13.0",
+    "esm": "3.2.25",
+    "less": "3.11.1",
+    "less-vars-to-js": "1.3.0",
+    "next": "latest",
+    "null-loader": "4.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "webpack-filter-warnings-plugin": "1.2.1"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "13.13.4",
+    "typescript": "3.8.3"
+  }
+}

examples/with-ant-design-pro-layout-less/pages/example.tsx

+import MainLayout from '../layouts/main'
+
+export default () => <MainLayout>Example page</MainLayout>

examples/with-ant-design-pro-layout-less/pages/index.tsx

+import {
+  Form,
+  Select,
+  InputNumber,
+  DatePicker,
+  Switch,
+  Slider,
+  Button,
+} from 'antd'
+
+import MainLayout from '../layouts/main'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+export default () => (
+  <MainLayout>
+    <Form layout="horizontal">
+      <FormItem
+        label="Input Number"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <InputNumber
+          size="large"
+          min={1}
+          max={10}
+          style={{ width: 100 }}
+          defaultValue={3}
+          name="inputNumber"
+        />
+        <a href="#">Link</a>
+      </FormItem>
+
+      <FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
+        <Switch defaultChecked />
+      </FormItem>
+
+      <FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
+        <Slider defaultValue={70} />
+      </FormItem>
+
+      <FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
+        <Select size="large" defaultValue="lucy" style={{ width: 192 }}>
+          <Option value="jack">jack</Option>
+          <Option value="lucy">lucy</Option>
+          <Option value="disabled" disabled>
+            disabled
+          </Option>
+          <Option value="yiminghe">yiminghe</Option>
+        </Select>
+      </FormItem>
+
+      <FormItem
+        label="DatePicker"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <DatePicker name="startDate" />
+      </FormItem>
+      <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
+        <Button size="large" type="primary" htmlType="submit">
+          OK
+        </Button>
+        <Button size="large" style={{ marginLeft: 8 }}>
+          Cancel
+        </Button>
+      </FormItem>
+    </Form>
+  </MainLayout>
+)

examples/with-ant-design-pro-layout-less/pages/welcome.tsx

+import MainLayout from '../layouts/main'
+
+export default () => <MainLayout>Welcome!</MainLayout>

examples/with-ant-design-pro-layout-less/tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}