chore(examples): add monorepo examples (refinedev#4220)

* chore(examples): add `monorepo-with-lerna` example

* chore(examples): add `monorepo-with-lerna-bootstrap` example

* chore(examples): add `monorepo-with-turbo` example

* chore(examples): add `with-nx` example

* chore: ignore monorepo examples in builds

* docs(examples): add build systems category

documentation/docs/examples/build-systems/lerna.md

@@ -0,0 +1,20 @@
+---
+id: lerna
+title: Monorepo with Lerna
+example-tags: [build-systems,lerna]
+---
+
+[Lerna](https://lerna.js.org) is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository. In this example, you'll see how to use Lerna to setup a monorepo with **refine**.
+
+If you're going to use **refine** in your monorepo setup or create one from scratch, you can use this example as a starting point.
+
+<CodeSandboxExample path="monorepo-with-lerna" hideSandbox />
+
+## Using `bootstrap`
+
+Lerna provides a [`bootstrap`](https://lerna.js.org/docs/features/legacy-package-management#legacy-bootstrap-command) command that links packages together. This is useful when you want to use packages from the same monorepo in your application before publishing them to a registry.
+
+In this example, you'll find a basic setup of `lerna` using the `bootstrap` command. 
+
+<CodeSandboxExample path="monorepo-with-lerna-bootstrap" hideSandbox />
+

documentation/docs/examples/build-systems/nx.md

@@ -0,0 +1,11 @@
+---
+id: nx
+title: Using Nx
+example-tags: [build-systems,nx]
+---
+
+[Nx](https://nx.dev/getting-started/intro) is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. In this example, you'll see how to use Nx with **refine**.
+
+You can use this example as a starting point for your own project.
+
+<CodeSandboxExample path="with-nx" hideSandbox />

documentation/docs/examples/build-systems/turbo.md

@@ -0,0 +1,11 @@
+---
+id: turbo
+title: Monorepo with Turbo
+example-tags: [build-systems,turbo]
+---
+
+[Turborepo](https://turbo.build/repo) is a high-performance build system for JavaScript and TypeScript codebases. In this example, you'll see how to use Turbo to setup a monorepo with **refine**.
+
+If you're going to use **refine** in your monorepo setup or create one from scratch, you can use this example as a starting point.
+
+<CodeSandboxExample path="monorepo-with-turbo" hideSandbox />

documentation/sidebars.js

@@ -682,6 +682,15 @@ module.exports = {
                     ],
                 },
                 "examples/antd-calendar-example",
+                {
+                    type: "category",
+                    label: "Build Systems",
+                    items: [
+                        "examples/build-systems/turbo",
+                        "examples/build-systems/lerna",
+                        "examples/build-systems/nx",
+                    ],
+                },
                 "examples/command-palette",
                 {
                     type: "category",

examples/monorepo-with-lerna-bootstrap/.gitignore

@@ -0,0 +1 @@
+node_modules/

examples/monorepo-with-lerna-bootstrap/README.md

@@ -0,0 +1,45 @@
+
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img src="https://raw.githubusercontent.com/refinedev/refine/master/logo.png"   style="width:250px;" align="center" />
+</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> | 
+    <a href="https://github.com/refinedev/refine/projects/1">Roadmap</a>
+</div>
+</div>
+
+<br />
+
+<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open source, headless web application framework developed with flexibility in mind.
+
+<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)
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+</div>
+
+## Try it out on your local
+
+```bash
+npm create refine-app@latest -- --example monorepo-with-lerna-bootstrap
+```
+
+## Try it out on CodeSandbox
+
+<br/>
+
+[![Open monorepo-with-lerna-bootstrap example from refine](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/monorepo-with-lerna-bootstrap?view=preview&theme=dark&codemirror=1)
+

examples/monorepo-with-lerna-bootstrap/apps/my-refine-app/.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/monorepo-with-lerna-bootstrap/apps/my-refine-app/.npmrc

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

examples/monorepo-with-lerna-bootstrap/apps/my-refine-app/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "my-refine-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@refinedev/cli": "^2.5.3",
+    "@refinedev/core": "^4.10.0",
+    "@refinedev/inferencer": "^3.3.0",
+    "@refinedev/kbar": "^1.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^5.0.0",
+    "react-router-dom": "^6.8.1",
+    "@refinedev/simple-rest": "^4.5.0",
+    "@refinedev/antd": "^5.9.0",
+    "antd": "^5.0.5",
+    "@ant-design/icons": "^5.0.1",
+    "@refinedev/react-router-v6": "^4.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/node": "^12.20.11",
+    "typescript": "^4.7.4"
+  },
+  "scripts": {
+    "dev": "refine start",
+    "build": "refine build",
+    "eject": "react-scripts eject",
+    "refine": "refine"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/monorepo-with-lerna-bootstrap/apps/my-refine-app/public/index.html

@@ -0,0 +1,53 @@
+<!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="refine | Build your React-based CRUD applications, without constraints."
+    />
+    <meta
+      data-rh="true"
+      property="og:image"
+      content="https://refine.dev/img/refine_social_new.png"
+    />
+    <meta
+      data-rh="true"
+      name="twitter:image"
+      content="https://refine.dev/img/refine_social_new.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/
+    -->
+    <!--
+      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>
+      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>
+    <!--
+      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>