Merge pull request #173 from nextui-org/fix-jest-lint

Add ESLint Jest plugin and update ESLint/Prettier

.eslintrc.json

@@ -5,9 +5,7 @@
     "es2021": true,
     "node": true
   },
-  "extends": [
-    "plugin:prettier/recommended"
-  ],
+  "extends": ["plugin:prettier/recommended"],
   "plugins": ["prettier", "import", "@typescript-eslint"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -22,6 +20,13 @@
       "version": "detect"
     }
   },
+  "overrides": [
+    {
+      "files": ["*/__tests__/**"],
+      "plugins": ["jest"],
+      "extends": ["plugin:jest/recommended"]
+    }
+  ],
   "rules": {
     "no-console": "warn",
     "prettier/prettier": "warn",

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

CONTRIBUTING.md

@@ -52,12 +52,10 @@ the following categories:
 
   e.g. `feat(components): add new prop to the avatar component`
 
-
 If you are interested in the detailed specification you can visit
 https://www.conventionalcommits.org/ or check out the
 [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
 
-
 ## Releases
 
 A trade-off with using a personal repo is that permissions are fairly locked-down. In the mean-time releases will be made manually by the project owner.

README.md

@@ -17,7 +17,6 @@
   </a>
 </p>
 
-
 ## Features
 
 - First-class variant API
@@ -34,8 +33,8 @@ For full documentation, visit [tailwind-variants.org](https://tailwind-variants.
 
 ## Quick Start
 
-1. Installation: 
-To use Tailwind Variants in your project, you can install it as a dependency:
+1. Installation:
+   To use Tailwind Variants in your project, you can install it as a dependency:
 
 ```bash
 yarn add tailwind-variants
@@ -46,8 +45,8 @@ npm i tailwind-variants
 2. Usage:
 
 ```js
-import { tv } from 'tailwind-variants';
- 
+import {tv} from "tailwind-variants";
+
 const button = tv({
   base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
   variants: {
@@ -70,61 +69,60 @@ const button = tv({
   defaultVariants: {
     size: "md",
     color: "primary",
-  }
+  },
 });
-
-return (
-  <button className={button({ size: 'sm', color: 'secondary' })}>Click me</button>
-)
+
+return <button className={button({size: "sm", color: "secondary"})}>Click me</button>;
 ```
 
 3. Responsive variants configuration (optional): If you want to use responsive variants
-you need to add the Tailwind Variants `wrapper` to your TailwindCSS config file `tailwind.config.js`.
+   you need to add the Tailwind Variants `wrapper` to your TailwindCSS config file `tailwind.config.js`.
 
 ```js
 // tailwind.config.js
- 
-const { withTV } = require('tailwind-variants/transformer')
+
+const {withTV} = require("tailwind-variants/transformer");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = withTV({
-  content:  ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [],
-})
+});
 ```
 
 If you're using a custom path to import Tailwind variants, such as creating a custom tv instance with `createTV`, it's recommended to include this path in the transformer configuration:
 
 ```js
 // tailwind.config.js
 
-const { withTV } = require('tailwind-variants/transformer')
+const {withTV} = require("tailwind-variants/transformer");
 
 /** @type {import('tailwindcss').Config} */
-module.exports = withTV({
-  content:  ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
+module.exports = withTV(
+  {
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
   },
-  plugins: [],
-}, {
-  aliases: ["@/lib/tv"]
-})
+  {
+    aliases: ["@/lib/tv"],
+  },
+);
 ```
 
-
 ## Acknowledgements
 
-- [**cva**](https://github.com/joe-bell/cva) ([Joe Bell](https://github.com/joe-bell)) 
+- [**cva**](https://github.com/joe-bell/cva) ([Joe Bell](https://github.com/joe-bell))
   This project as started as an extension of Joe's work on `cva` – a great tool for generating variants for a single element with Tailwind CSS. Big shoutout to [Joe Bell](https://github.com/joe-bell) and [contributors](https://github.com/joe-bell/cva/graphs/contributors) you guys rock! 🤘 - we recommend to use `cva` if don't need any of the **Tailwind Variants** features listed [here](https://www.tailwind-variants.org/docs/comparison).
 
 - [**Stitches**](https://stitches.dev/) ([Modulz](https://modulz.app))  
   The pioneers of the `variants` API movement. Inmense thanks to [Modulz](https://modulz.app) for their work on Stitches and the community around it. 🙏
 
-
 ## Community
 
 We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

benchmark.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import Benchmark from "benchmark";
 
 import {tv} from "./src/index.js";

package.json

@@ -31,8 +31,8 @@
     "prepack": "clean-package",
     "benchmark": "node benchmark.js",
     "postpack": "clean-package restore",
-    "lint": "eslint -c .eslintrc.json ./src/**/*.{ts,tsx}",
-    "lint:fix": "eslint --fix -c .eslintrc.json ./src/**/*.{ts,tsx}",
+    "lint": "eslint . src/**/*.{js,ts}",
+    "lint:fix": "eslint --fix . src/**/*.{js,ts}",
     "test": "jest --verbose",
     "test:watch": "jest --watch --no-verbose"
   },
@@ -49,31 +49,28 @@
     "@swc/helpers": "^0.4.14",
     "@types/jest": "28.1.1",
     "@types/node": "^18.11.18",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "benchmark": "2.1.4",
     "clean-package": "2.1.1",
-    "eslint": "^7.29.0",
-    "eslint-config-prettier": "^8.2.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-ts-lambdas": "^1.2.3",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^24.3.6",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
     "expect": "^29.7.0",
     "jest": "28.1.1",
-    "prettier": "^2.2.1",
-    "prettier-eslint": "^12.0.0",
-    "prettier-eslint-cli": "^5.0.1",
+    "prettier": "^3.2.5",
+    "prettier-eslint": "^16.3.0",
+    "prettier-eslint-cli": "^8.0.1",
     "tailwindcss": "^3.2.7",
     "ts-node": "^10.9.1",
-    "tslib": "^2.4.1",
     "tsup": "6.6.3",
-    "typescript": "5.1.3",
-    "webpack": "^5.53.0"
+    "typescript": "5.1.3"
   },
   "peerDependencies": {
     "tailwindcss": "*"