feat: migrate to modern repo architecture (#9)

.editorconfig

@@ -1,15 +1,14 @@
-
 # Editor configuration, see https://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
-end_of_line = auto
+end_of_line = lf
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 indent_size = 2
 
 [*.md]
 max_line_length = off
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

.gitattributes

@@ -1,2 +1,5 @@
 # Enforce Unix newlines
-* text=auto eol=lf
+* text=auto eol=lf
+
+# Fix syntax highlighting on GitHub to allow comments
+.vscode/*.json linguist-language=JSON-with-Comments

.github/workflows/ci.yml

@@ -2,96 +2,67 @@ name: CI
 
 on:
   push:
-    paths-ignore:
-      - "docs/**"
     branches:
       - master
-
   pull_request:
-    paths-ignore:
-      - "docs/**"
     branches:
       - master
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
-  lint:
+  ci:
+    name: ci
     runs-on: ubuntu-latest
     steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
+      - name: Check out Git repository ⏬
+        uses: actions/checkout@v4
         with:
-          node-version: 20
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Check lint errors
-        run: pnpm lint
-
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
+          fetch-depth: 0
 
-      - name: Enable Corepack
-        run: corepack enable
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
+      - name: Set up Node.js 💿
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: ".node-version"
           cache: pnpm
 
-      - name: Install dependencies
+      - name: Install dependencies 💤
         run: pnpm install
 
-      - name: Build
-        run: pnpm build
-
-      - name: Cache dist
-        uses: actions/upload-artifact@v3
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v4
+        id: nx-sha
         with:
-          retention-days: 3
-          name: dist
-          path: dist
-
-  publish:
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/master'
-    needs:
-      - lint
-      - build
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Enable Corepack
-        run: corepack enable
+          main-branch-name: master
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
+      - name: "Get affected projects"
+        uses: actions/github-script@v7
+        id: affected-packages
         with:
-          node-version: 20
-          cache: pnpm
+          script: |
+            const { spawnSync } = require("node:child_process")
+            const command = spawnSync("npx nx show projects --affected", { shell: true })
+            return command.stdout.toString().replaceAll("\n", " ")
 
-      - name: Install dependencies
-        run: pnpm install
+      - run: echo ${{contains(steps.affected-packages.outputs.result, 'docs')}}
 
-      - name: Restore dist cache
-        uses: actions/download-artifact@v3
-        with:
-          name: dist
+      # - name: Check formatting 🎨
+      #   run: npx nx format:check
 
-      - name: Publish to npm
-        uses: JS-DevTools/npm-publish@v2
-        with:
-          access: public
-          token: ${{ secrets.NPM_TOKEN }}
+      # - name: Lint and build projects 👷‍♀️
+      #   run: npx nx affected -t lint build publint
+
+      # - name: Deploy demo page 🚀
+      #   if: github.ref == 'refs/heads/master' && contains(steps.affected-packages.outputs.affected, 'demo')
+      #   uses: peaceiris/actions-gh-pages@v4
+      #   with:
+      #     github_token: ${{ secrets.GITHUB_TOKEN }}
+      #     publish_dir: ./packages/demo/dist

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.pnpm-store
 .DS_Store
 dist
 dist-ssr
@@ -8,3 +9,6 @@ dist-ssr
 .cache
 **/.vitepress/dist
 **/.vitepress/cache
+
+.nx/cache
+.nx/workspace-data

.node-version

@@ -0,0 +1 @@
+20.18

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

.prettierrc.mjs

@@ -0,0 +1,6 @@
+import config from "@lehoczky/prettier-config"
+
+/** @type {import("prettier").Options} */
+export default {
+  ...config,
+}

.vscode/extensions.json

@@ -3,7 +3,7 @@
     "editorconfig.editorconfig",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "stylelint.vscode-stylelint",
-    "octref.vetur"
+    "github.vscode-github-actions",
+    "vue.volar"
   ]
 }

.vscode/settings.json

@@ -1,17 +1,13 @@
 {
   "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit"
   },
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "eslint.validate": ["javascript", "typescript", "yaml", "vue"],
-  "css.validate": false,
-  "stylelint.validate": ["css", "postcss"],
-  "cSpell.words": ["Termynal", "vuepress"]
+  "css.customData": [".vscode/tailwind.json"],
+  "cSpell.words": ["Termynal", "vuepress"],
+  "editor.wordWrapColumn": 80,
+  "[markdown]": {
+    "editor.wordWrap": "wordWrapColumn"
+  }
 }

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

eslint.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+import { configLehoczkyVue } from "@lehoczky/eslint-config-vue"
+
+/** @type {import("eslint").Linter.Config[]} */
+export default [
+  ...configLehoczkyVue(),
+  {
+    files: ["packages/playground/**"],
+    rules: { "no-console": "off" },
+  },
+]