New example with monorepo (Nx), Typescript and Styled Components

README.md

@@ -26,6 +26,7 @@
 - **Next.js**<br/>[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components) / [styled-components (ts) 🎉](https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion) / [emotion (ts) 🎉](https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion-typescript) / [stitches (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/next-stitches-typescript)
 - **Blitz.js**<br/>[emotion (ts) 🎉](https://github.com/ben-rogerson/twin.examples/tree/master/blitz-emotion-typescript)
 - **Laravel**<br/>[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/laravel-styled-components-typescript)
+- **Nx + Next.js + Styled Components** (monorepo)<br/>[monorepo-nx-styledcomponents (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/monorepo-nx-styledcomponents)
 
 ### Component libraries
 

monorepo-nx-styledcomponents/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

monorepo-nx-styledcomponents/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

monorepo-nx-styledcomponents/.gitignore

@@ -0,0 +1,39 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

monorepo-nx-styledcomponents/.prettierignore

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage

monorepo-nx-styledcomponents/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

monorepo-nx-styledcomponents/README.md

@@ -0,0 +1,40 @@
+# Monorepo using NX with Styled Components, TailwindCSS and Twin
+
+The example is a monorepo using Nx, Typescript, Next for the package `ui-web` (the website that can use TailwindCSS) and the components package using Styled Components, TailwindCSS and Twin (npm package called `twin.macro`).
+
+## Run the example
+
+1. Go inside the folder `monorepo-nx-styledcomponents`. 
+2. Install the packages with `npm i`.
+3. Run the web with `npm run web` to run the local Nx. If you have Nx installed globally, you can run `nx run ui-web:serve`.
+4. Open a new tab on your browser with the URL `localhost:4200`.
+
+## Steps to do it yourself
+
+### Installation 
+1. Install Nx globally with `npm i -g nx@latest` to run the NX scripts for this example.
+2. Create a new monorepo project running `npx create-nx-workspace <your_monorepo_name> --preset=ts`
+3. Copy the Nx settings (root file called `nx.json`) `workspaceLayout` for creating libraries and applications in the same folder (called `packages`) instead of multiple folders. More on [Nx docs](https://nx.dev/configuration/packagejson#workspace-layout)
+4. To remove a package, run `nx g @nrwl/workspace:remove --projectName=<your_package_name>`, because it will also delete the Nx settings for your specific package.
+5. Install Nx generator `next` with `npm i -D @nrwl/next`.
+6. Create a Next application with `nx g @nrwl/next:app ui-web` and then a library for the components `nx g @nrwl/react:library ui-components --buildable` (you'll need to select Styled Components). Nx console will let you choose which CSS library to use, select Styled Components, of course. Selecting that CSS library, Nx will add it to  Nx Next generator settings in the root `nx.json` with field `style`. You can remove the package `ui-web-e2e` if you're not planning to code end-to-end tests.
+7. Install TailwindCSS with `npm install -D tailwindcss postcss autoprefixer`.
+8. Install Twin (I'm installing the [latest relesase](https://github.com/ben-rogerson/twin.macro/releases) that is a canditate with `npm i twin.macro@rc`.
+9. Install Babel Plugin Macros `npm i -D babel-plugin-macros`.
+
+> All the Nx's npm packages should have the same version.
+
+### Set up Tailwind, Babel and Babel Macros
+
+1. In the root directory of the package `ui-components` (or the name you set up before), you need to copy the next two files: `postcss.config.js` and `tailwind.config.js` that you can find on the example's package.
+2. Delete the babel config file `.babelrc` in the package `ui-components` and copy the example file `babel.config.js` of the package `ui-web` to your Next application package.
+3. As said on [Twin docs](https://github.com/ben-rogerson/twin.examples/tree/master/cra-styled-components#add-the-twin-config), Twin config can only be set up on `package.json` or `babel-plugin-macros.config.js`. Our example uses the root `package.json`. Copy the same configuration called `babelMacros`.
+4. Now it's time to copy the code in `src` folders of the packages `ui-components` and `ui-web`.
+
+
+### Finish
+
+1. Run the Next application with `nx run ui-web:serve`.
+2. You should see a green text.
+
+> You can also add a script on `package.json` (look at the example) to run the local Nx instead of the global Nx installed on your computer.

monorepo-nx-styledcomponents/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "babelrcRoots": ["*"]
+}

monorepo-nx-styledcomponents/jest.config.ts

@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nrwl/jest';
+
+export default {
+  projects: getJestProjects(),
+};

monorepo-nx-styledcomponents/jest.preset.js

@@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset').default;
+
+module.exports = { ...nxPreset };

monorepo-nx-styledcomponents/nx.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "npmScope": "monorepo-nx-styledcomponents",
+  "affected": {
+    "defaultBase": "main"
+  },
+  "implicitDependencies": {
+    "package.json": {
+      "dependencies": "*",
+      "devDependencies": "*"
+    },
+    ".eslintrc.json": "*"
+  },
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": [
+          "build",
+          "lint",
+          "test",
+          "e2e"
+        ]
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": [
+        "^build"
+      ]
+    }
+  },
+  "workspaceLayout": {
+    "appsDir": "packages",
+    "libsDir": "packages"
+  },
+  "generators": {
+    "@nrwl/react": {
+      "application": {
+        "babel": true
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "style": "styled-components",
+        "linter": "eslint"
+      }
+    }
+  },
+  "defaultProject": "ui-web"
+}