@santi020k/eslint-config-basic 0.1.0

package/packages/optionals/src/stencil.ts

@@ -0,0 +1,48 @@
+import { fixupPluginRules } from '@eslint/compat'
+import stencilPlugin from '@stencil-community/eslint-plugin'
+import type { TSESLint } from '@typescript-eslint/utils'
+
+/**
+ * Stencil ESLint configuration
+ * Enforces best practices for Stencil.js components
+ */
+export const stencil: TSESLint.FlatConfig.ConfigArray = [
+  {
+    name: 'optionals/stencil',
+    files: ['**/*.{tsx,ts}'],
+    plugins: {
+      '@stencil-community': fixupPluginRules({
+        rules: stencilPlugin.rules as Record<string, unknown>
+      } as Parameters<typeof fixupPluginRules>[0]) as unknown as TSESLint.FlatConfig.Plugin
+    },
+    rules: {
+      '@stencil-community/async-methods': 'error',
+      '@stencil-community/ban-prefix': ['error', ['stencil', 'stnl', 'st']],
+      '@stencil-community/decorators-context': 'error',
+      '@stencil-community/decorators-style': [
+        'error', {
+          prop: 'inline',
+          state: 'inline',
+          element: 'inline',
+          event: 'inline',
+          method: 'multiline',
+          watch: 'multiline',
+          listen: 'multiline'
+        }],
+      '@stencil-community/element-type': 'error',
+      '@stencil-community/host-data-deprecated': 'error',
+      '@stencil-community/methods-must-be-public': 'error',
+      '@stencil-community/no-unused-watch': 'error',
+      '@stencil-community/own-methods-must-be-private': 'error',
+      '@stencil-community/own-props-must-be-private': 'error',
+      '@stencil-community/prefer-vdom-listener': 'error',
+      '@stencil-community/props-must-be-public': 'error',
+      '@stencil-community/props-must-be-readonly': 'error',
+      '@stencil-community/render-returns-host': 'error',
+      '@stencil-community/required-jsdoc': 'error',
+      '@stencil-community/reserved-member-names': 'error',
+      '@stencil-community/single-export': 'error',
+      '@stencil-community/strict-mutable': 'error'
+    }
+  }
+]

package/packages/optionals/src/tailwind.ts

@@ -0,0 +1,11 @@
+import pluginTailwind from 'eslint-plugin-tailwindcss'
+
+import type { TSESLint } from '@typescript-eslint/utils'
+
+/**
+ * Tailwind CSS ESLint configuration
+ * Enforces Tailwind CSS best practices
+ */
+export const tailwind: TSESLint.FlatConfig.ConfigArray = [
+  ...(pluginTailwind.configs['flat/recommended'] as TSESLint.FlatConfig.ConfigArray)
+]

package/packages/optionals/src/vitest.ts

@@ -0,0 +1,61 @@
+import testingLibrary from 'eslint-plugin-testing-library'
+import pluginVitest from 'eslint-plugin-vitest'
+import globals from 'globals'
+
+import { fixupPluginRules } from '@eslint/compat'
+import type { TSESLint } from '@typescript-eslint/utils'
+
+/**
+ * Vitest ESLint configuration
+ * Provides linting rules for Vitest test files with best practices
+ */
+export const vitest: TSESLint.FlatConfig.ConfigArray = [
+  {
+    name: 'optionals/vitest',
+    files: [
+      'tests/**/*.{js,ts,jsx,tsx}',
+      '**/__tests__/**/*.{js,ts,jsx,tsx}',
+      '**/__mocks__/**/*.{js,ts,jsx,tsx}',
+      '**/test/**/*.{js,ts,jsx,tsx}',
+      '**/spec/**/*.{js,ts,jsx,tsx}',
+      '**/__spec__/**/*.{js,ts,jsx,tsx}',
+      '**/*.test.{js,ts,jsx,tsx}',
+      '**/*.spec.{js,ts,jsx,tsx}',
+      'vitest.config.{js,ts}'
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    },
+    plugins: {
+      vitest: pluginVitest,
+      'testing-library': fixupPluginRules({
+        rules: testingLibrary.rules
+      } as unknown as Parameters<typeof fixupPluginRules>[0]) as unknown as TSESLint.FlatConfig.Plugin
+    },
+    rules: {
+      // Vitest recommended rules
+      ...pluginVitest.configs.recommended.rules,
+
+      // Best practice rules for testing
+      'vitest/max-nested-describe': ['error', { max: 3 }],
+      'vitest/expect-expect': [
+        'error',
+        {
+          assertFunctionNames: ['expect', 'assert', 'should']
+        }
+      ],
+      'vitest/no-identical-title': 'error',
+      'vitest/no-focused-tests': 'error',
+      'vitest/no-disabled-tests': 'warn',
+      'vitest/prefer-to-be': 'warn',
+      'vitest/prefer-to-have-length': 'warn',
+      'vitest/valid-expect': 'error',
+
+      // Disable some rules that conflict with test patterns
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@stylistic/padding-line-between-statements': 'off'
+    }
+  }
+]

package/packages/optionals/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/optionals/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  dts: true,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  target: 'es2022'
+})

package/packages/playground/README.md

@@ -0,0 +1,14 @@
+# @santi020k/eslint-config-playground
+
+Internal playground package for testing ESLint configurations against real files.
+
+## Description
+
+This package contains various file types (React, Astro, MDX, TS) to verify that the ESLint rules are applied correctly in a real-world project structure.
+
+## Usage
+
+Run linting on this package:
+```bash
+npm run lint -w @santi020k/eslint-config-playground
+```

package/packages/playground/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@santi020k/eslint-config-playground",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@santi020k/eslint-config-basic": "*",
+    "eslint": "^9.39.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3"
+  }
+}

package/packages/playground/src/astro/eslint.config.js

@@ -0,0 +1,4 @@
+// @ts-check
+import { ConfigOption, eslintConfig } from '../../dist/index.js'
+
+export default eslintConfig({ config: [ConfigOption.Ts, ConfigOption.Astro] })

package/packages/playground/src/js/eslint.config.js

@@ -0,0 +1,4 @@
+// @ts-check
+import { eslintConfig } from '../../dist/index.js'
+
+export default eslintConfig()

package/packages/playground/src/js/index.test.js

@@ -0,0 +1,63 @@
+// test.js
+
+// Function definitions to test various stylistic rules
+const myFunction1 = () => {
+  const value = 10
+
+  if (value > 5) {
+    console.log('Value is greater than 5')
+  } else {
+    console.log('Value is 5 or less')
+  }
+
+  const result = value > 5 ? 'High' : 'Low'
+  const array = [1, 2, 3]
+
+  array.forEach(item => {
+    console.log(item)
+  })
+
+  return result
+}
+
+// Testing object and array formatting rules
+const myObject = { a: 1, b: 2, c: 3 }
+const myArray = [1, 2, 3, 4, 5]
+
+// Testing padding and spacing rules
+if (myArray.length > 0) {
+  console.log('Array is not empty')
+}
+
+const myFunction2 = param => !!param
+// Testing invalid typeof comparison
+const count = 0
+
+if (typeof count === 'number') {
+  console.log('Count is a number')
+}
+
+// Testing unused variables
+// eslint-disable-next-line no-unused-vars, unused-imports/no-unused-vars
+const unusedVar = 'This is unused'
+
+// Function with multiple return statements
+// eslint-disable-next-line no-unused-vars, unused-imports/no-unused-vars
+const complexFunction = () => {
+  if (count > 10) return 'High'
+
+  if (count < 0) return 'Low'
+
+  return 'Medium'
+}
+
+// Testing no-use-before-define
+myDefinedFunction()
+
+// eslint-disable-next-line func-style
+function myDefinedFunction() {
+  console.log('Function called before definition')
+}
+
+// Export statement to test sorting
+export { myFunction1, myFunction2, myObject, myArray }

package/packages/playground/src/mdx/eslint.config.js

@@ -0,0 +1,4 @@
+// @ts-check
+import { eslintConfig, OptionalOption } from '../../dist/index.js'
+
+export default eslintConfig({ optionals: [OptionalOption.Mdx] })

package/packages/playground/src/mdx/index.mdx

@@ -0,0 +1,115 @@
+---
+title: "The Ultimate MDX Example"
+description: "A complete overview of MDX capabilities with lorem ipsum content"
+author: "Santiago Ipsum"
+tags: ["mdx", "example", "components"]
+date: "2025-04-21"
+---
+
+import { Button, Alert, FancyBox } from '../components/UI'
+import Note from '../components/Note'
+import Chart from '../components/Chart'
+
+## 🎢 Welcome to the MDX Playground
+
+# Welcome to the MDX Playground 🎢
+
+This is an **MDX** file. It's like Markdown, but on _steroids_ — powered by **JSX**. Let's explore all the features using some _Lorem Ipsum_.
+
+## 🧩 Embedded JSX Components
+
+You can embed React components directly:
+
+<Alert type="success">This is a success alert using a custom component!</Alert>
+
+## 📦 Importing Components
+
+You can import components like `Note`, `FancyBox`, or even charts.
+
+<Note>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat.
+</Note>
+
+<FancyBox>
+  <h3>Fancy Box Title</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</FancyBox>
+
+## 🖼️ Images
+
+![Placeholder](https://via.placeholder.com/300x200.png?text=Lorem+Ipsum)
+
+## 🧮 Code Blocks
+
+### JavaScript
+
+```js
+const greet = name => `Hello, ${name}!`
+
+greet('santi020k')
+```
+
+### Bash
+
+```bash
+npm install @mdx-js/react
+```
+
+## 📊 Embedded Dynamic Chart
+
+<Chart
+  title="Sample Chart"
+  data={[{ label: 'A', value: 10 }, { label: 'B', value: 20 }]}
+/>
+
+## 🔗 Links
+
+Check out the [official MDX docs](https://mdxjs.com).
+
+## 🗒️ Lists and Tables
+
+### Bullet List
+
+- Lorem ipsum
+- Dolor sit amet
+- Consectetur adipiscing
+
+### Numbered List
+
+1. First item
+2. Second item
+3. Third item
+
+### Table
+
+| Feature        | Supported |
+|----------------|-----------|
+| Markdown       | ✅        |
+| JSX            | ✅        |
+| Components     | ✅        |
+| Frontmatter    | ✅        |
+
+## 🎉 Inline JSX
+
+Here’s some inline JSX: `<span style={{ color: 'tomato' }}>Hello inline JSX!</span>`
+
+## 📌 Export Metadata
+
+You can also export metadata if needed:
+
+```js
+export const meta = {
+  layout: 'docs',
+  requiresAuth: false
+}
+```
+
+---
+
+## 🧠 Conclusion
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in odio vitae nunc luctus aliquet. MDX is powerful, flexible, and fun. Try it out in your next documentation or blog project!
+
+```
+
+---

package/packages/playground/src/react/eslint.config.js

@@ -0,0 +1,4 @@
+// @ts-check
+import { ConfigOption, eslintConfig } from '../../dist/index.js'
+
+export default eslintConfig({ config: [ConfigOption.React] })

package/packages/playground/src/react/index.test.jsx

@@ -0,0 +1,130 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+
+// Helper function to simulate fetching data
+const fetchTodos = () => new Promise(resolve => {
+  setTimeout(() => {
+    resolve([
+      { id: 1, text: 'Learn React', completed: true },
+      {
+        id: 2,
+        text: 'Build a Todo App',
+        completed: false
+      },
+      { id: 3, text: 'Profit!', completed: false }
+    ])
+  }, 1000)
+})
+
+const TodoApp = () => {
+  const [todos, setTodos] = useState([])
+  const [filter, setFilter] = useState('all')
+  const [sortOrder, setSortOrder] = useState('asc')
+  const inputRef = useRef()
+
+  // Fetch todos when the component mounts
+  useEffect(() => {
+    const loadTodos = async () => {
+      const fetchedTodos = await fetchTodos()
+
+      setTodos(fetchedTodos)
+    }
+
+    loadTodos()
+  }, [todos])
+
+  // Handle adding a new todo
+  const addTodo = useCallback(() => {
+    const text = inputRef.current.value.trim()
+
+    if (text) {
+      setTodos(prevTodos => [
+        ...prevTodos,
+        { id: Date.now(), text, completed: false }
+      ])
+
+      inputRef.current.value = ''
+    }
+  }, [])
+
+  // Handle toggling the completion state of a todo
+  const toggleTodo = useCallback(id => {
+    setTodos(prevTodos => prevTodos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo))
+  }, [])
+
+  // Handle changing the filter state
+  const handleFilterChange = useCallback(event => {
+    setFilter(event.target.value)
+  }, [])
+
+  // Handle changing the sort order
+  const handleSortChange = useCallback(event => {
+    setSortOrder(event.target.value)
+  }, [])
+
+  // Filter and sort todos based on current state
+  const filteredAndSortedTodos = useMemo(() => {
+    const filteredTodos = todos.filter(todo => {
+      if (filter === 'completed') return todo.completed
+
+      if (filter === 'incomplete') return !todo.completed
+
+      return true
+    })
+
+    return filteredTodos.sort((a, b) => {
+      if (sortOrder === 'asc') return a.text.localeCompare(b.text)
+
+      return b.text.localeCompare(a.text)
+    })
+  }, [todos, filter, sortOrder])
+
+  return (
+    <div>
+      <h1>Todo List</h1>
+      <div>
+        <input ref={inputRef} type="text" placeholder="New todo" />
+        <button type="button" onClick={addTodo}>
+          Add Todo
+        </button>
+      </div>
+      <div>
+        <label>
+          Filter:
+          <select value={filter} onChange={handleFilterChange}>
+            <option value="all">All</option>
+            <option value="completed">Completed</option>
+            <option value="incomplete">Incomplete</option>
+          </select>
+        </label>
+        <label>
+          Sort:
+          <select value={sortOrder} onChange={handleSortChange}>
+            <option value="asc">Ascending</option>
+            <option value="desc">Descending</option>
+          </select>
+        </label>
+      </div>
+      <ul>
+        {filteredAndSortedTodos.map(todo => (
+          <li
+            key={todo.id}
+            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
+          >
+            {todo.text}
+            <button type="button" onClick={() => toggleTodo(todo.id)}>
+              {todo.completed ? 'Undo' : 'Complete'}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default TodoApp

package/packages/playground/src/ts/eslint.config.js

@@ -0,0 +1,4 @@
+// @ts-check
+import { ConfigOption, eslintConfig } from '../../dist/index.js'
+
+export default eslintConfig({ config: [ConfigOption.Ts] })

package/packages/playground/src/ts/index.test.ts

@@ -0,0 +1,61 @@
+// Function definitions to test various stylistic rules
+const myFunction1 = (): string => {
+  const value = 10
+
+  if (value > 5) {
+    console.log('Value is greater than 5')
+  } else {
+    console.log('Value is 5 or less')
+  }
+
+  const result: string = value > 5 ? 'High' : 'Low'
+  const array: number[] = [1, 2, 3]
+
+  array.forEach(item => {
+    console.log(item)
+  })
+
+  return result
+}
+
+// Testing object and array formatting rules
+const myObject: { a: number, b: number, c: number } = { a: 1, b: 2, c: 3 }
+const myArray: number[] = [1, 2, 3, 4, 5]
+
+// Testing padding and spacing rules
+if (myArray.length > 0) {
+  console.log('Array is not empty')
+}
+
+const myFunction2 = (param: boolean): boolean => !!param
+// Testing invalid typeof comparison
+const count = 0
+
+if (typeof count === 'number') {
+  console.log('Count is a number')
+}
+
+// Testing unused variables
+// eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+const unusedVar = 'This is unused'
+
+// Function with multiple return statements
+// eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+const complexFunction = (): string => {
+  if (count > 10) return 'High'
+
+  if (count < 0) return 'Low'
+
+  return 'Medium'
+}
+
+// Testing no-use-before-define
+myDefinedFunction()
+
+// eslint-disable-next-line func-style
+function myDefinedFunction(): void {
+  console.log('Function called before definition')
+}
+
+// Export statement to test sorting
+export { myFunction1, myFunction2, myObject, myArray }

package/packages/playground/src/ts/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json",
+}

package/packages/playground/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/react/README.md

@@ -0,0 +1,14 @@
+# @santi020k/eslint-config-react
+
+React specific ESLint rules and configurations.
+
+## Description
+
+This package provides:
+- `eslint-plugin-react` recommended rules.
+- `eslint-plugin-react-hooks` recommended rules.
+- JSX accessibility rules.
+
+## Usage
+
+This package is used automatically when `ConfigOption.React` is selected in the main configuration.

package/packages/react/index.ts

@@ -0,0 +1,26 @@
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+
+import core from '@santi020k/eslint-config-core'
+
+export default [
+  ...core,
+  {
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'jsx-a11y': jsxA11y
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      ...jsxA11y.configs.recommended.rules
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  }
+]

package/packages/react/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@santi020k/eslint-config-react",
+  "version": "0.0.0",
+  "description": "React ESLint configuration with hooks and JSX rules",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "eslint": "^9.0.0",
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@santi020k/eslint-config-core": "*",
+    "@eslint/compat": "^2.0.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.3.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/utils": "^8.54.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "author": "santi020k",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/santi020k/eslint-config.git",
+    "directory": "packages/react"
+  }
+}