chore: updated README

Author: natterstefan

README.md

@@ -1,73 +1,259 @@
-# eslint-config
+# eslint-config-ns
 
 [![GitHub issues](https://img.shields.io/github/issues/natterstefan/eslint-config-ns)](https://github.com/natterstefan/eslint-config-ns/issues)
 [![GitHub stars](https://img.shields.io/github/stars/natterstefan/eslint-config-ns)](https://github.com/natterstefan/eslint-config-ns/stargazers)
 [![GitHub license](https://img.shields.io/github/license/natterstefan/eslint-config-ns)](https://github.com/natterstefan/eslint-config-ns/blob/main/LICENSE)
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
 ![natterstefan/eslint-config-ns](./assets/github.png)
 
-## Packages
+A comprehensive ESLint configuration for modern JavaScript and TypeScript
+projects, with support for React, Next.js, Jest, and Storybook. This package
+uses the new ESLint flat config format.
 
-This monorepo contains multiple packages. Take a look at their READMEs for more
-details.
+## Features
 
-- [eslint-config-ns-base](./packages/eslint-config-ns-base/README.md)
-- [eslint-config-ns](./packages/eslint-config-ns/README.md)
-- [eslint-config-ns-ts-base](./packages/eslint-config-ns-ts-base/README.md)
-- [eslint-config-ns-ts](./packages/eslint-config-ns-ts/README.md)
+- 📏 **Modern ESLint Configuration**: Uses the new ESLint flat config format
+- ⚛️ **React Support**: Includes rules for React and React Hooks
+- 📘 **TypeScript Support**: Comprehensive TypeScript rules
+- 🧪 **Testing**: Jest configuration included
+- 📚 **Storybook**: Storybook linting rules
+- ⚡ **Next.js**: Support for Next.js projects
+- 🎨 **Prettier Integration**: Works seamlessly with Prettier
 
-### How are they related to each other?
+## Getting Started
 
-### JavaScript
+1. Install the required dependencies:
 
-- `eslint-config-ns-base` is the base package for JavaScript projects.
-- `eslint-config-ns` extends `eslint-config-ns-base` package and can be used in
-  React projects.
+```bash
+# npm
+npm install --save-dev eslint eslint-config-ns prettier
 
-### TypeScript
+# yarn
+yarn add --dev eslint eslint-config-ns prettier
 
-- `eslint-config-ns-ts-base` extends `eslint-config-ns-base` package and is the
-  base package for TypeScript projects.
-- `eslint-config-ns-ts` is the last one in the chain and extends
-  `eslint-config-ns-ts-base` and is best used in React TypeScript projects.
+# pnpm
+pnpm add --save-dev eslint eslint-config-ns prettier
+```
 
-## How to release
+1. Create an `eslint.config.mjs` file in your project root:
 
-This repository uses GitHub Actions
-([debug locally](https://github.com/nektos/act)) to create a release and update
-the [CHANGELOG](CHANGELOG.md). The implementation is inspired and based on
-[github.com/babel/actions](https://github.com/babel/actions/tree/bb571b895aa20aaa3ee4ef58adcde364416acc9a).
+```javascript
+// eslint.config.mjs
+// @ts-check
 
-Either push the tags after running this command to origin, or run the release
-workflow manually on GitHub.
+import { getPresets } from 'eslint-config-ns'
 
-### Manually trigger release
+/**
+ * @type {Array<import('eslint').Linter.Config>}
+ */
+export default await getPresets(
+  // Base config
+  'typescript', // or use 'javascript' for JS-only projects
 
-```bash
-yarn lerna:version
-git push --follow-tags
-# wait until GitHub Action finishes and then run
-yarn lerna:publish
+  // Optional extensions based on your project needs
+  'react',
+  'jest',
+  'prettier',
+  // 'next', // Uncomment if using Next.js
+  // 'storybook', // Uncomment if using Storybook
+)
 ```
 
-### Manually create Changelog entry
+1. Add
+   [globals](https://eslint.org/docs/latest/use/configure/language-options#predefined-global-variables)
+   (like browser or Node.js APIs) if you need them:
 
-```bash
-npx lerna-changelog --from <tag> --to <tag>
+```javascript
+// eslint.config.mjs
+// @ts-check
+
+import { getPresets } from 'eslint-config-ns'
+
+/**
+ * @type {Array<import('eslint').Linter.Config>}
+ */
+export default [
+  ...(await getPresets('typescript', 'react', 'jest', 'prettier')),
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+]
+```
+
+### Prettier and TypeScript
+
+1. To set up Prettier, add to your `package.json`:
+
+```json
+{
+  "prettier": "eslint-config-ns/prettier.config.js"
+}
+```
+
+1. If you use TypeScript, you can extend the provided tsconfig:
+
+```json
+{
+  "extends": "eslint-config-ns/tsconfig.json"
+}
+```
+
+## Usage
+
+Create an `eslint.config.mjs` file in your project root and import the
+configurations you need:
+
+```javascript
+// @ts-check
+
+import { getPresets } from 'eslint-config-ns'
+
+/**
+ * @type {Array<import('eslint').Linter.Config>}
+ */
+export default await getPresets(
+  // 'javascript',
+  'jest',
+  // 'next', // Uncomment if using Next.js
+  'prettier',
+  'react',
+  'storybook',
+  'typescript', // contains JavaScript
+)
+```
+
+### Available Presets
+
+- `javascript` - Base JavaScript rules
+- `jest` - Jest testing rules
+- `next` - Next.js rules
+- `prettier` - Prettier integration
+- `react` - React and JSX rules
+- `storybook` - Storybook rules
+- `typescript` - TypeScript rules (includes JavaScript rules)
+
+## Configuration Examples
+
+### Basic JavaScript Project
+
+```javascript
+// eslint.config.js
+import { getPresets } from 'eslint-config-ns'
+
+export default await getPresets('javascript', 'prettier')
+```
+
+### React TypeScript Project
+
+```javascript
+// eslint.config.js
+import { getPresets } from 'eslint-config-ns'
+
+export default await getPresets(
+  'typescript', // includes JavaScript rules
+  'react',
+  'prettier',
+)
+```
+
+### Next.js Project
+
+```javascript
+// eslint.config.js
+import { getPresets } from 'eslint-config-ns'
+
+export default await getPresets('typescript', 'react', 'next', 'prettier')
+```
+
+### Full-Featured Project
+
+```javascript
+// eslint.config.js
+import { getPresets } from 'eslint-config-ns'
+
+export default await getPresets(
+  'typescript',
+  'react',
+  'jest',
+  'storybook',
+  'next',
+  'prettier',
+)
+```
+
+### Custom Rules
+
+You can add your own custom rules by spreading the presets and adding your
+configuration:
+
+```javascript
+// eslint.config.js
+import { getPresets } from 'eslint-config-ns'
+
+export default [
+  ...(await getPresets('typescript', 'react', 'prettier')),
+  {
+    // Your custom rules
+    rules: {
+      'no-console': 'warn',
+      // Add any other custom rules
+    },
+  },
+]
+```
+
+## IDE Integration
+
+### VSCode Integration
+
+1. Install the following extensions:
+
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+
+1. Add the following to your VSCode settings (`.vscode/settings.json`):
+
+```json
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}
 ```
 
-### Automatically with GitHub Actions
+### CI Integration
+
+To validate your code in a CI pipeline, add the following to your
+`package.json`:
+
+```json
+{
+  "scripts": {
+    "lint": "eslint src && prettier src --check"
+  }
+}
+```
+
+## Requirements
+
+- Node.js >=20
+- ESLint >=9.x
+- Prettier >=3.x
+
+## Contributing
 
-Manually invoke the
-[GitHub Action release](https://github.com/natterstefan/eslint-config-ns/actions/workflows/release.yml)
-and wait until it finishes.
+Contributions are welcome! Please feel free to submit a Pull Request.
 
-Once the release was created with GitHub Actions, publish the packages manually
-to npm with `yarn lerna:publish`.
+## Other Configs
 
-Attention: make sure the Pull Requests have labels _before_ you merge them. The
-label (e.g. `enhancement` and `bug`) will be used to create the CHANGELOG.
+- <https://github.com/molindo/eslint-config-molindo>
 
 ## LICENSE