feat: flat config, eslint plugin, and nuxt module (#332)

Co-authored-by: ricardogobbosouza <ricardogobbosouza@users.noreply.github.com>
Co-authored-by: ModyQyW <ModyQyW@users.noreply.github.com>

.github/workflows/ci.yml

@@ -18,6 +18,7 @@ jobs:
         with:
           node-version: 16
       - run: pnpm install
+      - run: pnpm build
       - run: pnpm lint
       - run: pnpm vitest run
       - uses: codecov/codecov-action@v3

.github/workflows/release.yml

@@ -0,0 +1,25 @@
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.2
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -1,13 +1,10 @@
-# Dependencies
 node_modules
-package-lock.json
-
-# Intellij idea
 *.iml
 .idea
-
 *.log
-
-# Yarn
+.nuxt
+.output
 **/.yarn/cache
 **/.yarn/*state*
+dist
+.eslintcache

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+ignore-workspace-root-check=true

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}

README.md

@@ -1,138 +1,24 @@
-# Nuxt ESLint packages
+![@nuxt/eslint](./.github/assets/social-card.png)
 
-## Nuxt 3: `@nuxt/eslint-config`
+# Nuxt ESLint
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-<!--[![Github Actions][github-actions-src]][github-actions-href]
-[![Codecov][codecov-src]][codecov-href]
-[![Bundlephobia][bundlephobia-src]][bundlephobia-href]
-[![LGTM][lgtm-src]][lgtm-href]-->
+<p>
+  <a href="./LICENSE">
+    <img src="https://img.shields.io/github/license/nuxt/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="License">
+  </a>
+</p>
 
-> Non-opinionated [ESlint](https://eslint.org/) configuration for Nuxt 3 apps.
+Collection of ESLint-related packages for Nuxt,
+provides project-aware, easy-to-use, extensible and future-proof integrations.
 
-### Features
+Refer to the [documentation](https://eslint.nuxt.com) for more details.
 
-- Works out-of-the-box with no additional configuration.
-- Nuxt-specific rules for pages, components and more.
-- ... under active development
+## Packages
 
-### Installation
-
-1. Install this package and `eslint` in your `devDependencies`.
-
-```bash
-npm i -D @nuxt/eslint-config eslint
-yarn add -D @nuxt/eslint-config eslint
-pnpm add -D @nuxt/eslint-config eslint
-```
-
-2. Extend the default Nuxt config by creating an `.eslintrc.cjs`:
-
-```js
-module.exports = {
-  root: true,
-  extends: ["@nuxt/eslint-config"],
-};
-```
-
-You might also want to add a script entry to your `package.json:
-
-```json
-{
-  "scripts": {
-    "lint": "eslint ."
-  }
-}
-```
-
-## Nuxt 2: `@nuxtjs/eslint-config` and `@nuxtjs/eslint-config-typescript`
-
-[![GitHub Actions](https://flat.badgen.net/github/checks/nuxt/eslint-config/main)](https://github.com/nuxt/eslint-config/actions?query=workflow%3Aci)
-[![npm](https://flat.badgen.net/npm/dm/@nuxtjs/eslint-config)](https://npmjs.com/package/@nuxtjs/eslint-config)
-[![npm (scoped with tag)](https://flat.badgen.net/npm/v/@nuxtjs/eslint-config)](https://npmjs.com/package/@nuxtjs/eslint-config)
-
-> Opinionated [ESlint](https://eslint.org/) configuration used internally by Nuxt projects.
-
-### Usage
-
-Do you want to add the config to your own projects? There you go:
-
-1. Add this package to your devDependencies
-
-```bash
-$ npm i -D @nuxtjs/eslint-config
-# or
-$ yarn add -D @nuxtjs/eslint-config
-```
-
-2. Install `eslint` if not already present locally or globally
-
-```bash
-$ npm i -D eslint
-# or
-$ yarn add -D eslint
-```
-
-3. Create a `.eslintrc` file
-
-4. Extend our config (you can use just the scope name as ESLint will assume the `eslint-config` prefix):
-
-```json
-{
-  "extends": ["@nuxtjs/eslint-config"]
-}
-```
-
-### Full example
-
-A full example `.eslintrc` for a project with babel support:
-
-> Dont forget to `npm i -D @babel/eslint-parser` or `yarn add -D @babel/eslint-parser`
-
-```json
-{
-  "root": true,
-  "parser": "@babel/eslint-parser",
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "extends": ["@nuxt/eslint-config"],
-}
-```
-
-### TypeScript
-
-If you're using TypeScript, follow [Usage](#usage) section by replacing `@nuxtjs/eslint-config` by `@nuxtjs/eslint-config-typescript`.
-
-And in your `.eslintrc` all you need is :
-
-```json
-{
-  "extends": ["@nuxtjs/eslint-config-typescript"]
-}
-```
-
-You can then edit/override same rules as you could with `@nuxtjs/eslint-config` but also TypeScript rules.
-You can find the list of supported TypeScript rules [here](https://typescript-eslint.io/rules/#supported-rules) and you can read more about Nuxt's TypeScript support [in the docs](https://nuxt.com/docs/guide/concepts/typescript).
+- [@nuxt/eslint](./packages/module) - Nuxt module generating project-aware ESLint config
+- [@nuxt/eslint-config](./packages/eslint-config) - Static ESLint Config
+- [@nuxt/eslint-plugin](./packages/eslint-plugin) - ESLint Plugin
 
 ## License
 
-Made with ❤️
-
-Published under [MIT License](./LICENCE).
-
-<!-- Badges -->
-
-[npm-version-src]: https://img.shields.io/npm/v/@nuxt/eslint-config?style=flat-square
-[npm-version-href]: https://npmjs.com/package/@nuxt/eslint-config
-[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/eslint-config?style=flat-square
-[npm-downloads-href]: https://npmjs.com/package/@nuxt/eslint-config
-[github-actions-src]: https://img.shields.io/github/workflow/status/nuxt/eslint-config/ci/main?style=flat-square
-[github-actions-href]: https://github.com/nuxt/eslint-config/actions?query=workflow%3Aci
-[codecov-src]: https://img.shields.io/codecov/c/gh/nuxt/eslint-config/main?style=flat-square
-[codecov-href]: https://codecov.io/gh/nuxt/eslint-config
-[lgtm-src]: https://img.shields.io/lgtm/grade/javascript/github/nuxt/eslint-config?style=flat-square
-[lgtm-href]: https://lgtm.com/projects/g/nuxt/eslint-config
-[bundlephobia-src]: https://img.shields.io/bundlephobia/minzip/@nuxt/eslint-config?style=flat-square
-[bundlephobia-href]: https://bundlephobia.com/package/@nuxt/eslint-config
+[MIT License](./LICENSE)

docs/.env.example

@@ -0,0 +1,5 @@
+# To use Nuxt UI Pro in production
+NUXT_UI_PRO_LICENSE=
+
+# Used when pre-rendering the docs for dynamic OG images
+NUXT_PUBLIC_SITE_URL=

docs/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
+sw.*
+.env
+.output

docs/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

docs/README.md

@@ -0,0 +1,35 @@
+# Nuxt ESLint
+
+Docs template with [Nuxt UI](https://ui.nuxt.com).
+
+## Setup
+
+Install dependencies inside `docs/`:
+
+```bash
+pnpm i
+```
+
+## Development
+
+```bash
+npm run dev
+```
+
+## Static Generation
+
+Use the `generate` command to build your application.
+
+The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting.
+
+```bash
+npm run generate
+```
+
+## Preview build
+
+You might want to preview the result of your build locally, to do so, run the following command:
+
+```bash
+npm run preview
+```

docs/app.config.ts

@@ -0,0 +1,28 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'slate',
+    button: {
+      color: {
+        white: {
+          link: 'text-white dark:text-white hover:text-gray-300 dark:hover:text-gray-300 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 transition-all duration-200',
+        },
+        transparent: {
+          outline: 'ring-1 ring-inset ring-gray-700 text-white dark:text-white hover:bg-gray-900 disabled:bg-gray-300 dark:hover:bg-gray-900 dark:disabled:bg-gray-300 focus-visible:ring-2 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-400',
+        },
+      },
+    },
+  },
+  elements: {
+    variables: {
+      light: {
+        background: '255 255 255',
+        foreground: 'var(--color-gray-700)',
+      },
+      dark: {
+        background: 'var(--color-gray-950)',
+        foreground: 'var(--color-gray-200)',
+      },
+    },
+  },
+})